125 lines
4.0 KiB
HTML
125 lines
4.0 KiB
HTML
<!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"
|
|
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;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
.grid-cols-6 {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
.col-span-2 {
|
|
grid-column: span 2 / span 2;
|
|
}
|
|
.col-span-4 {
|
|
grid-column: span 4 / span 4;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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" style="padding-top: 100px;">
|
|
<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;
|
|
},
|
|
(() => {
|
|
let timer = 0
|
|
return () => {
|
|
clearTimeout(timer)
|
|
timer = setTimeout(() => {
|
|
window.zenUml.render(cm.getValue(), {theme: 'theme-default', stickyOffset: 100}).then((r) => {
|
|
window.parentLogger.child({ name: 'index.html' }).debug('render resolved', r);
|
|
});
|
|
}, 500);
|
|
}
|
|
})()
|
|
);
|
|
// 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>
|