@zenuml/core 3.2.0 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Integration/vanilla-js/index.html +1 -1
- package/dist/zenuml.esm.mjs +3937 -3861
- package/dist/zenuml.js +48 -48
- package/docs/asciidoc/integration-guide.adoc +1 -1
- package/embed.html +1 -1
- package/iframe-container-demo/diagram.html +124 -0
- package/iframe-container-demo/host.html +817 -0
- package/index.html +1 -1
- package/package.json +1 -1
|
@@ -26,7 +26,7 @@ interface IZenUml {
|
|
|
26
26
|
// client code
|
|
27
27
|
import ZenUml from '@ZenUML/core'
|
|
28
28
|
const zenUml = new ZenUml(el)
|
|
29
|
-
await zenUml.render('A.method', 'theme-blue')
|
|
29
|
+
await zenUml.render('A.method', {theme: 'theme-blue'})
|
|
30
30
|
----
|
|
31
31
|
|
|
32
32
|
==== When rendering is finished
|
package/embed.html
CHANGED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
5
|
+
<link
|
|
6
|
+
rel="preload stylesheet"
|
|
7
|
+
as="style"
|
|
8
|
+
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap"
|
|
9
|
+
/>
|
|
10
|
+
<!-- <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap'>-->
|
|
11
|
+
<style id="zenumlstyle">
|
|
12
|
+
/* Prefix your CSS rules with `#diagram` */
|
|
13
|
+
/*@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');*/
|
|
14
|
+
/*!*@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap");*!*/
|
|
15
|
+
|
|
16
|
+
/*#diagram1 .sequence-diagram {*/
|
|
17
|
+
/* font-family: "Kalam", serif;*/
|
|
18
|
+
/*}*/
|
|
19
|
+
</style>
|
|
20
|
+
<meta charset="utf-8" />
|
|
21
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
22
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
23
|
+
<link
|
|
24
|
+
rel="stylesheet"
|
|
25
|
+
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css"
|
|
26
|
+
crossorigin="anonymous"
|
|
27
|
+
/>
|
|
28
|
+
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.1/lib/codemirror.min.js"></script>
|
|
29
|
+
<link
|
|
30
|
+
rel="stylesheet"
|
|
31
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css"
|
|
32
|
+
integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
|
|
33
|
+
crossorigin="anonymous"
|
|
34
|
+
referrerpolicy="no-referrer"
|
|
35
|
+
/>
|
|
36
|
+
<title>ZenUML Core Demo</title>
|
|
37
|
+
<style>
|
|
38
|
+
.zenuml .CodeMirror {
|
|
39
|
+
/* Set height, width, borders, and global font properties here */
|
|
40
|
+
font-family: monospace;
|
|
41
|
+
font-size: 13px;
|
|
42
|
+
height: 800px;
|
|
43
|
+
}
|
|
44
|
+
.grid {
|
|
45
|
+
display: grid;
|
|
46
|
+
}
|
|
47
|
+
.grid-cols-6 {
|
|
48
|
+
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
49
|
+
}
|
|
50
|
+
.col-span-2 {
|
|
51
|
+
grid-column: span 2 / span 2;
|
|
52
|
+
}
|
|
53
|
+
.col-span-4 {
|
|
54
|
+
grid-column: span 4 / span 4;
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
57
|
+
</head>
|
|
58
|
+
<body>
|
|
59
|
+
<noscript>
|
|
60
|
+
<strong
|
|
61
|
+
>We're sorry but vue-sequence doesn't work properly without JavaScript enabled. Please
|
|
62
|
+
enable it to continue.</strong
|
|
63
|
+
>
|
|
64
|
+
</noscript>
|
|
65
|
+
<div class="m-1 grid grid-cols-6" id="diagram1">
|
|
66
|
+
<div class="col-span-2">
|
|
67
|
+
<textarea
|
|
68
|
+
id="text"
|
|
69
|
+
class="col-span-1 m-1 border-2"
|
|
70
|
+
cols="30"
|
|
71
|
+
rows="200"
|
|
72
|
+
oninput="updateCode(this.value)"
|
|
73
|
+
></textarea>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="col-span-4">
|
|
76
|
+
<pre class="zenuml"></pre>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<script>
|
|
80
|
+
const editor = CodeMirror.fromTextArea(document.getElementById('text'), {
|
|
81
|
+
lineNumbers: true,
|
|
82
|
+
singleCursorHeightPerLine: false,
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
// implement a waitUntil function
|
|
86
|
+
function waitUntil(condition, callback) {
|
|
87
|
+
if (condition()) {
|
|
88
|
+
callback();
|
|
89
|
+
} else {
|
|
90
|
+
setTimeout(function () {
|
|
91
|
+
waitUntil(condition, callback);
|
|
92
|
+
}, 100);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
editor.on('change', function (cm) {
|
|
97
|
+
waitUntil(
|
|
98
|
+
() => {
|
|
99
|
+
return window.zenUml;
|
|
100
|
+
},
|
|
101
|
+
(() => {
|
|
102
|
+
let timer = 0
|
|
103
|
+
return () => {
|
|
104
|
+
clearTimeout(timer)
|
|
105
|
+
timer = setTimeout(() => {
|
|
106
|
+
window.zenUml.render(cm.getValue(), {theme: 'theme-default', stickyOffset: 100}).then((r) => {
|
|
107
|
+
window.parentLogger.child({ name: 'index.html' }).debug('render resolved', r);
|
|
108
|
+
});
|
|
109
|
+
}, 500);
|
|
110
|
+
}
|
|
111
|
+
})()
|
|
112
|
+
);
|
|
113
|
+
// write cm.getValue() to localStorage
|
|
114
|
+
localStorage.setItem('zenuml-cm-code', cm.getValue());
|
|
115
|
+
});
|
|
116
|
+
// read localStorage and set to code mirror
|
|
117
|
+
const code = localStorage.getItem('zenuml-cm-code');
|
|
118
|
+
if (code) {
|
|
119
|
+
editor.setValue(code);
|
|
120
|
+
}
|
|
121
|
+
</script>
|
|
122
|
+
<script type="module" src="../src/main.ts"></script>
|
|
123
|
+
</body>
|
|
124
|
+
</html>
|