Sidharth Vinod
15a90149be
* master: Fix " > base64State is not defined" chore(deps-dev): bump svelte-preprocess from 4.8.0 to 4.9.4 chore(deps-dev): bump eslint-plugin-cypress from 2.11.3 to 2.12.1 chore(deps-dev): bump cypress from 8.3.1 to 8.4.0 chore(deps-dev): bump @typescript-eslint/eslint-plugin chore(deps): bump js-base64 from 3.7.0 to 3.7.1 chore(deps-dev): bump svelte from 3.42.5 to 3.42.6 chore(deps): bump node from 16.9.0 to 16.9.1 chore(deps-dev): bump prettier from 2.4.0 to 2.4.1 chore(deps-dev): bump @sveltejs/adapter-static chore(deps-dev): bump @typescript-eslint/parser from 4.31.0 to 4.31.1
73 lines
1.7 KiB
Svelte
73 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { errorStore } from '$lib/util/error';
|
|
|
|
import { codeStore } from '$lib/util/state';
|
|
import { onMount } from 'svelte';
|
|
import mermaid from 'mermaid';
|
|
|
|
let code = '';
|
|
let config = '';
|
|
let container: HTMLDivElement;
|
|
let view: HTMLDivElement;
|
|
let error = false;
|
|
let outOfSync = false;
|
|
let manualUpdate = true;
|
|
onMount(() => {
|
|
codeStore.subscribe((state) => {
|
|
try {
|
|
if (container && state && (state.updateDiagram || state.autoSync)) {
|
|
if (!state.autoSync) {
|
|
$codeStore.updateDiagram = false;
|
|
}
|
|
outOfSync = false;
|
|
manualUpdate = true;
|
|
if (code === state.code && config === state.mermaid) {
|
|
// Do not render if there is no change in Code/Config
|
|
return;
|
|
}
|
|
code = state.code;
|
|
config = state.mermaid;
|
|
const scroll = view.parentElement.scrollTop;
|
|
delete container.dataset.processed;
|
|
mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
|
|
mermaid.render('graph-div', code, (svgCode) => {
|
|
container.innerHTML = svgCode;
|
|
});
|
|
view.parentElement.scrollTop = scroll;
|
|
error = false;
|
|
} else if (manualUpdate) {
|
|
manualUpdate = false;
|
|
} else {
|
|
outOfSync = true;
|
|
}
|
|
} catch (e) {
|
|
console.log('view fail', e);
|
|
error = true;
|
|
}
|
|
});
|
|
errorStore.subscribe((err) => {
|
|
if (typeof err === 'undefined') {
|
|
error = false;
|
|
} else {
|
|
error = true;
|
|
console.log('Error: ', err);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div id="view" bind:this={view} class="p-2" class:error class:outOfSync>
|
|
<div id="container" bind:this={container} class="flex-1 overflow-auto" />
|
|
</div>
|
|
|
|
<style>
|
|
#view {
|
|
border: 1px solor darkred;
|
|
flex: 1;
|
|
}
|
|
.error,
|
|
.outOfSync {
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|