diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index ffcfc534..b1fdf82e 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -11,7 +11,7 @@ import { getDomain } from '$/util/util'; import { browser } from '$app/environment'; import { waitForRender } from '$lib/util/autoSync'; - import { inputStateStore, stateStore, urlsStore } from '$lib/util/state'; + import { inputState, updateCodeStore, urls, validatedState } from '$lib/util/state.svelte'; import { logEvent } from '$lib/util/stats'; import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json'; import dayjs from 'dayjs'; @@ -80,7 +80,7 @@ svg = getSvgElement(); } - if ($stateStore.rough) { + if (validatedState.current.rough) { fixForeignObjectClipping(svg); } @@ -106,7 +106,7 @@ ${svgString}`); }; const exportImage = async (event: Event, exporter: Exporter) => { - $inputStateStore.panZoom = false; + updateCodeStore({ panZoom: false }); await new Promise((resolve) => setTimeout(resolve, 1000)); await waitForRender(); const canvas = document.createElement('canvas'); @@ -149,14 +149,14 @@ ${svgString}`); const image = new Image(); image.addEventListener('load', () => { exporter(context, image)(); - $inputStateStore.panZoom = true; + updateCodeStore({ panZoom: true }); }); image.src = `data:image/svg+xml;base64,${getBase64SVG(svg, canvas.width, canvas.height)}`; // Fallback to set panZoom to true after 2 seconds // This is a workaround for the case when the image is not loaded setTimeout(() => { - if (!$inputStateStore.panZoom) { - $inputStateStore.panZoom = true; + if (!inputState.panZoom) { + updateCodeStore({ panZoom: true }); } }, 2000); event.stopPropagation(); @@ -222,7 +222,8 @@ ${svgString}`); }; let gistURL = $state(''); - stateStore.subscribe(({ loader }) => { + $effect(() => { + const { loader } = validatedState.current; if (loader?.type === 'gist') { gistURL = loader.config.url; } @@ -287,10 +288,10 @@ ${svgString}`); bind:value={imageSize} />
- {@render dualActionButton('PNG', onDownloadPNG, $urlsStore.png)} - {@render dualActionButton('SVG', onDownloadSVG, $urlsStore.svg)} - - + {@render dualActionButton('PNG', onDownloadPNG, urls.current.png)} + {@render dualActionButton('SVG', onDownloadSVG, urls.current.svg)} + + @@ -303,9 +304,9 @@ ${svgString}`); {/if} - + domain={getDomain(urls.current.png)} + isVisible={!!urls.current.mdCode}> +
diff --git a/src/lib/components/DesktopEditor.svelte b/src/lib/components/DesktopEditor.svelte index df31818f..b3c52ece 100644 --- a/src/lib/components/DesktopEditor.svelte +++ b/src/lib/components/DesktopEditor.svelte @@ -1,7 +1,7 @@
@@ -243,7 +243,7 @@ onTryFree={() => { logMermaidChartClick('vibeDiagramming'); window.open( - $urlsStore.mermaidChart({ medium: 'vibe_diagramming' }).save, + urls.current.mermaidChart({ medium: 'vibe_diagramming' }).save, '_blank', 'noopener' ); diff --git a/src/lib/components/DiagramDocumentationButton.svelte b/src/lib/components/DiagramDocumentationButton.svelte index 5e301e47..16d6b973 100644 --- a/src/lib/components/DiagramDocumentationButton.svelte +++ b/src/lib/components/DiagramDocumentationButton.svelte @@ -4,7 +4,7 @@ import type { DocumentationConfig } from '$/types'; import { env } from '$/util/env'; import { standardizeDiagramType } from '$/util/mermaid'; - import { stateStore } from '$/util/state'; + import { validatedState } from '$/util/state.svelte'; import BookIcon from '~icons/material-symbols/book-2-outline-rounded'; const docURLBase = env.docsUrl; @@ -92,7 +92,7 @@ } as const satisfies DocumentationConfig; const doc = $derived.by(() => { - const { editorMode, diagramType } = $stateStore; + const { editorMode, diagramType } = validatedState.current; if (!diagramType) { return { key: '', url: docURLBase }; } diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index 9c28ec18..2b80dc2b 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -6,14 +6,14 @@ import { Button } from '$/components/ui/button'; import { TID } from '$/constants'; import { env } from '$/util/env'; - import { stateStore, updateCode, updateConfig, urlsStore } from '$lib/util/state'; + import { updateCode, updateConfig, urls, validatedState } from '$lib/util/state.svelte'; import { logMermaidChartClick } from '$lib/util/stats'; import { debounce } from 'lodash-es'; import ExclamationCircleIcon from '~icons/material-symbols/error-outline-rounded'; const { isMobile } = $props<{ isMobile: boolean }>(); const onUpdate = (text: string) => { - if ($stateStore.editorMode === 'code') { + if (validatedState.current.editorMode === 'code') { updateCode(text); } else { updateConfig(text); @@ -27,7 +27,7 @@ }, 3000); $effect(() => { - if ($stateStore.error) { + if (validatedState.current.error) { showErrorDebounced(); } else { showErrorDebounced.cancel(); @@ -46,27 +46,27 @@ {:else} {/if} - {#if showError && $stateStore.error instanceof Error} + {#if showError && validatedState.current.error instanceof Error}
- {#if $stateStore.editorMode === 'code'} + {#if validatedState.current.editorMode === 'code'}
- 
{$stateStore.error?.toString()}
+ 
{validatedState.current.error?.toString()}
{/if} diff --git a/src/lib/components/EnhancedEditsButton.svelte b/src/lib/components/EnhancedEditsButton.svelte index 26da9fcd..f25a228e 100644 --- a/src/lib/components/EnhancedEditsButton.svelte +++ b/src/lib/components/EnhancedEditsButton.svelte @@ -3,7 +3,7 @@ import MermaidChartIcon from '$/components/MermaidChartIcon.svelte'; import { Button } from '$/components/ui/button'; import { standardizeDiagramType } from '$/util/mermaid'; - import { stateStore, urlsStore } from '$/util/state'; + import { validatedState, urls } from '$/util/state.svelte'; import { logMermaidChartClick } from '$/util/stats'; import { quintInOut } from 'svelte/easing'; import { slide } from 'svelte/transition'; @@ -19,7 +19,7 @@ ]); const diagramType = $derived.by(() => { - const dt = $stateStore.diagramType; + const dt = validatedState.current.diagramType; return dt ? standardizeDiagramType(dt) : undefined; }); @@ -39,7 +39,7 @@ let currentActionIndex = $state(0); const availableActions = $derived.by(() => { - if (!$stateStore.diagramType) { + if (!validatedState.current.diagramType) { return []; } @@ -98,7 +98,7 @@