diff --git a/package.json b/package.json index ae4d3995..70c24822 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte index 9f8a4f56..e1634e10 100644 --- a/src/lib/components/actions.svelte +++ b/src/lib/components/actions.svelte @@ -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; diff --git a/src/lib/components/editor.svelte b/src/lib/components/editor.svelte index bcd8dba3..f5193050 100644 --- a/src/lib/components/editor.svelte +++ b/src/lib/components/editor.svelte @@ -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', diff --git a/src/lib/components/preset.svelte b/src/lib/components/preset.svelte index 2c88c359..ec36c2f2 100644 --- a/src/lib/components/preset.svelte +++ b/src/lib/components/preset.svelte @@ -104,8 +104,8 @@ Mermaid` }; - const loadSampleDiagram = async (diagramType: string): Promise => { - await updateCode(samples[diagramType], { + const loadSampleDiagram = (diagramType: string): void => { + updateCode(samples[diagramType], { updateDiagram: true, resetPanZoom: true }); diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte index b9986c6a..2836d050 100644 --- a/src/lib/components/view.svelte +++ b/src/lib/components/view.svelte @@ -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 @@ }); -{#await $stateStore then state} - {#if error && state.error instanceof Error} -
{state.error}
- {/if} -{/await} +{#if error && $stateStore.error instanceof Error} +
{$stateStore.error}
+{/if} {#if outOfSync}
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index 15a5c37d..ee2243fc 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -181,18 +181,18 @@ export const updateCodeStore = (newState: Partial): void => { }; let prompted = false; -export const updateCode = async ( +export const updateCode = ( code: string, { updateDiagram = false, resetPanZoom = false }: { updateDiagram?: boolean; resetPanZoom?: boolean } = {} -): Promise => { +): 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}`); diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte index fc219c6e..19293e86 100644 --- a/src/routes/edit/+page.svelte +++ b/src/routes/edit/+page.svelte @@ -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); + }); });
-