forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Sidharth Vinod
2022-10-19 16:41:08 +05:30
parent 40c03f7c9f
commit a364b5e1bb
7 changed files with 63 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
-1
View File
@@ -57,7 +57,6 @@
"prettier": "2.7.1",
"prettier-plugin-svelte": "2.8.0",
"svelte": "3.52.0",
"svelte-asyncable": "^2.1.0",
"svelte-preprocess": "4.10.7",
"tailwindcss": "3.1.8",
"tslib": "2.4.0",
src/lib/components/actions.svelte
+1 -2
View File
@@ -140,8 +140,7 @@
};
let gistURL = '';
stateStore.subscribe(async (state) => {
const { loader } = await state;
stateStore.subscribe(({ loader }) => {
if (loader?.type === 'gist') {
// @ts-ignore Gist will have url
gistURL = loader.config.url;
src/lib/components/editor.svelte
+4 -4
View File
@@ -46,10 +46,10 @@
editor && Monaco?.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
});
const handleUpdate = async (text: string, mode: EditorMode) => {
const handleUpdate = (text: string, mode: EditorMode) => {
console.log('editor HandleUpdate', { text, mode });
if (mode === 'code') {
await updateCode(text);
updateCode(text);
} else {
updateConfig(text);
}
@@ -75,14 +75,14 @@
initEditor(Monaco);
errorDebug(100);
editor = Monaco.editor.create(divEl, editorOptions);
editor.onDidChangeModelContent(async ({ isFlush, changes }) => {
editor.onDidChangeModelContent(({ isFlush, changes }) => {
const newText = editor.getValue();
console.log('editor onDidChangeModelContent', { text, newText, isFlush, changes });
if (text === newText || isFlush) {
return;
}
text = newText;
await handleUpdate(text, currentState.editorMode);
handleUpdate(text, currentState.editorMode);
});
editor.addAction({
id: 'mermaid-render-diagram',
src/lib/components/preset.svelte
+2 -2
View File
@@ -104,8 +104,8 @@
Mermaid`
};
const loadSampleDiagram = async (diagramType: string): Promise<void> => {
await updateCode(samples[diagramType], {
const loadSampleDiagram = (diagramType: string): void => {
updateCode(samples[diagramType], {
updateDiagram: true,
resetPanZoom: true
});
src/lib/components/view.svelte
+8 -21
View File
@@ -15,7 +15,7 @@
let outOfSync = false;
let hide = false;
let manualUpdate = true;
let panZoomEnabled = false;
let panZoomEnabled = $stateStore.panZoom;
let pzoom: SvgPanZoom.Instance;
const handlePanZoomChange = () => {
@@ -50,15 +50,9 @@
});
};
// let count = 0;
const handleStateChange = async (state: ValidatedState) => {
// const c = count;
// count += 1;
// console.log('handleStateChange', c, state);
panZoomEnabled;
if (state.error !== undefined) {
error = true;
// console.log('handleStateChange End error', c);
return;
}
error = false;
@@ -69,9 +63,8 @@
}
outOfSync = false;
manualUpdate = true;
// Do not render if there is no change in Code/Config/PanZoom
if (code === state.code && config === state.mermaid && panZoomEnabled === state.panZoom) {
// console.log('handleStateChange End nochange', c);
// Do not render if there is no change in Code/Config/PanZoom
return;
}
code = state.code;
@@ -108,7 +101,6 @@
console.error('view fail', e);
error = true;
}
// console.log('handleStateChange End', c);
};
const stateChanges = [];
@@ -121,19 +113,16 @@
while (stateChanges.length > 0) {
const state = stateChanges.shift();
await handleStateChange(state);
// if (stateChanges.length > 0) {
// Promise.resolve().then(processStateChanges);
// }
}
processing = false;
};
onMount(() => {
stateStore.subscribe(async (state) => {
stateChanges.push(await state);
stateChanges.push(state);
await processStateChanges();
});
window.addEventListener('resize', async () => {
if ((await $stateStore).panZoom && pzoom) {
window.addEventListener('resize', () => {
if ($stateStore.panZoom && pzoom) {
pzoom.resize();
}
});
@@ -141,11 +130,9 @@
});
</script>
{#await $stateStore then state}
{#if error && state.error instanceof Error}
<div class="p-2 text-red-600" id="errorContainer">{state.error}</div>
{/if}
{/await}
{#if error && $stateStore.error instanceof Error}
<div class="p-2 text-red-600" id="errorContainer">{$stateStore.error}</div>
{/if}
{#if outOfSync}
<div class="absolute w-full p-2 z-10 text-yellow-600 bg-base-100 bg-opacity-80 text-center">
src/lib/util/state.ts
+4 -5
View File
@@ -181,18 +181,18 @@ export const updateCodeStore = (newState: Partial<State>): void => {
};
let prompted = false;
export const updateCode = async (
export const updateCode = (
code: string,
{
updateDiagram = false,
resetPanZoom = false
}: { updateDiagram?: boolean; resetPanZoom?: boolean } = {}
): Promise<void> => {
): void => {
console.log('updateCode', code);
const lines = countLines(code);
saveStatistics(code);
errorDebug();
if (lines > 50 && !prompted && (await get(stateStore)).autoSync) {
if (lines > 50 && !prompted && get(stateStore).autoSync) {
const turnOff = confirm(
`Long diagram detected. Turn off Auto Sync? Use ${cmdKey} + Enter or click the sync logo to manually sync.`
);
@@ -233,8 +233,7 @@ export const toggleDarkTheme = (dark: boolean): void => {
let urlDebounce: number;
export const initURLSubscription = (): void => {
stateStore.subscribe(async (state) => {
const { serialized } = await state;
stateStore.subscribe(({ serialized }) => {
clearTimeout(urlDebounce);
urlDebounce = window.setTimeout(() => {
history.replaceState(undefined, undefined, `#${serialized}`);
src/routes/edit/+page.svelte
+44 -47
View File
@@ -54,8 +54,7 @@
};
let docURL = docURLBase;
let activeTabID = 'code';
stateStore.subscribe(async (state) => {
const { code, editorMode } = await state;
stateStore.subscribe(({ code, editorMode }: ValidatedState) => {
activeTabID = editorMode;
const codeTypeMatch = /([\S]+)[\s\n]/.exec(code);
if (codeTypeMatch && codeTypeMatch.length > 1) {
@@ -85,30 +84,28 @@
onMount(async () => {
await initHandler();
const resizer = document.getElementById('resizeHandler');
const element = document.getElementById('editorPane');
const resize = (e: { pageX: number }) => {
const newWidth = e.pageX - element.getBoundingClientRect().left;
if (newWidth > 50) {
element.style.width = `${newWidth}px`;
}
};
// const resizer = document.getElementById('resizeHandler');
// const element = document.getElementById('editorPane');
// const resize = (e: { pageX: number }) => {
// const newWidth = e.pageX - element.getBoundingClientRect().left;
// if (newWidth > 50) {
// element.style.width = `${newWidth}px`;
// }
// };
// const stopResize = () => {
// window.removeEventListener('mousemove', resize);
// };
// resizer.addEventListener('mousedown', (e) => {
// e.preventDefault();
// window.addEventListener('mousemove', resize);
// window.addEventListener('mouseup', stopResize);
// });
const stopResize = () => {
window.removeEventListener('mousemove', resize);
};
resizer.addEventListener('mousedown', (e) => {
e.preventDefault();
window.addEventListener('mousemove', resize);
window.addEventListener('mouseup', stopResize);
});
});
</script>
<div class="h-full flex flex-col overflow-hidden">
<Navbar />
<div class="flex-1 flex overflow-hidden">
<div class="hidden md:flex flex-col" id="editorPane" style="width: 40%">
<Card on:select={tabSelectHandler} {tabs} isCloseable={false} {activeTabID} title="Mermaid">
@@ -116,21 +113,21 @@
<div class="form-control flex-row items-center">
<label class="cursor-pointer label" for="autoSync">
<span> Auto sync</span>
<!-- <input
type="checkbox"
class="toggle {state.autoSync ? 'btn-secondary' : 'toggle-primary'} ml-1"
id="autoSync"
bind:checked={$inputStateStore.autoSync} /> -->
<input
type="checkbox"
class="toggle {$stateStore.autoSync ? 'btn-secondary' : 'toggle-primary'} ml-1"
id="autoSync"
bind:checked={$inputStateStore.autoSync} />
</label>
</div>
<!-- {#if !state.autoSync}
<button
class="btn btn-secondary btn-xs mr-1"
title="Sync Diagram ({cmdKey} + Enter)"
data-cy="sync"
on:click={syncDiagram}><i class="fas fa-sync" /></button>
{/if} -->
{#if !$stateStore.autoSync}
<button
class="btn btn-secondary btn-xs mr-1"
title="Sync Diagram ({cmdKey} + Enter)"
data-cy="sync"
on:click={syncDiagram}><i class="fas fa-sync" /></button>
{/if}
<button class="btn btn-secondary btn-xs" title="View documentation">
<a target="_blank" rel="noreferrer" href={docURL} data-cy="docs">
@@ -152,21 +149,21 @@
<div class="flex-1 flex flex-col overflow-hidden">
<Card title="Diagram" isCloseable={false}>
<div slot="actions" class="flex flex-row items-center">
<!-- <label class="cursor-pointer label py-0" for="panZoom">
<span>Pan & Zoom</span>
<input
type="checkbox"
class="toggle {state.panZoom ? 'btn-secondary' : 'toggle-primary'} ml-1"
id="panZoom"
bind:checked={$inputStateStore.panZoom} />
</label>
<a
href={`${base}/view#${state.serialized}`}
target="_blank"
rel="noreferrer"
class="btn btn-secondary btn-xs"
title="View diagram in new page"
><i class="fas fa-external-link-alt mr-1" />Full screen</a> -->
<label class="cursor-pointer label py-0" for="panZoom">
<span>Pan & Zoom</span>
<input
type="checkbox"
class="toggle {$stateStore.panZoom ? 'btn-secondary' : 'toggle-primary'} ml-1"
id="panZoom"
bind:checked={$inputStateStore.panZoom} />
</label>
<a
href={`${base}/view#${$stateStore.serialized}`}
target="_blank"
rel="noreferrer"
class="btn btn-secondary btn-xs"
title="View diagram in new page"
><i class="fas fa-external-link-alt mr-1" />Full screen</a>
</div>
<div class="flex-1 overflow-auto">