This repository has been archived by the owner on Jul 8, 2023. It is now read-only.
/
index.html
110 lines (107 loc) · 3.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preload stylesheet"
as="style"
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap"
/>
<!-- <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap'>-->
<style id="zenumlstyle">
/* Prefix your CSS rules with `#diagram` */
/*@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');*/
/*!*@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap");*!*/
/*#diagram1 .sequence-diagram {*/
/* font-family: "Kalam", serif;*/
/*}*/
</style>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css"
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.1/lib/codemirror.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css"
crossorigin="anonymous"
integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>ZenUML Core Demo</title>
<style>
.zenuml .CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
font-size: 13px;
height: 800px;
}
</style>
</head>
<!-- .zenuml will enable "important" feature of tailwindcss. This class is also added to
DiagramFrame so the diagram itself always works fine. This .zenuml is to make sure the
editor and other layouts work properly.-->
<body class="zenuml">
<noscript>
<strong
>We're sorry but vue-sequence doesn't work properly without JavaScript enabled. Please
enable it to continue.</strong
>
</noscript>
<div class="m-1 grid grid-cols-6" id="diagram1">
<div class="col-span-2">
<textarea
id="text"
class="col-span-1 m-1 border-2"
cols="30"
rows="200"
oninput="updateCode(this.value)"
></textarea>
</div>
<div class="col-span-4">
<pre class="zenuml"></pre>
</div>
</div>
<script>
const editor = CodeMirror.fromTextArea(document.getElementById('text'), {
lineNumbers: true,
singleCursorHeightPerLine: false,
});
// implement a waitUntil function
function waitUntil(condition, callback) {
if (condition()) {
callback();
} else {
setTimeout(function () {
waitUntil(condition, callback);
}, 100);
}
}
editor.on('change', function (cm) {
waitUntil(
() => {
return window.zenUml;
},
() => {
window.zenUml.render(cm.getValue(), 'theme-default').then((r) => {
window.parentLogger.child({ name: 'index.html' }).debug('render resolved', r);
});
}
);
// write cm.getValue() to localStorage
localStorage.setItem('zenuml-cm-code', cm.getValue());
});
// read localStorage and set to code mirror
const code = localStorage.getItem('zenuml-cm-code');
if (code) {
editor.setValue(code);
}
</script>
<script type="module" src="./src/main.ts"></script>
</body>
</html>