diff --git a/.prettierrc b/.prettierrc index ff2677ef..df1b3854 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "useTabs": true, "singleQuote": true, "trailingComma": "none", - "printWidth": 100 -} + "printWidth": 100, + "svelteBracketNewLine": false +} \ No newline at end of file diff --git a/package.json b/package.json index 9bafd925..19592612 100644 --- a/package.json +++ b/package.json @@ -36,8 +36,10 @@ "@tailwindcss/forms": "^0.3.2", "cookie": "^0.4.1", "js-base64": "^3.6.0", - "mermaid": "^8.9.3", + "mermaid": "^8.10.1", + "moment": "^2.29.1", "monaco-editor": "^0.23.0", + "random-word-slugs": "^0.0.2", "svelte-watch-resize": "^1.0.3" } -} +} \ No newline at end of file diff --git a/src/app.html b/src/app.html index 60316b6b..d82c8598 100644 --- a/src/app.html +++ b/src/app.html @@ -2,8 +2,22 @@ - + Online FlowChart & Diagrams Editor - Mermaid Live Editor + + + + + - -
- - -
-
- - {Math.floor($displayed_count)} -
-
- - -
- - diff --git a/src/lib/Header/index.svelte b/src/lib/Header/index.svelte deleted file mode 100644 index cb03d657..00000000 --- a/src/lib/Header/index.svelte +++ /dev/null @@ -1,119 +0,0 @@ - - -
-
- - SvelteKit - -
- - - -
- -
-
- - diff --git a/src/lib/Header/svelte-logo.svg b/src/lib/Header/svelte-logo.svg deleted file mode 100644 index 49492a83..00000000 --- a/src/lib/Header/svelte-logo.svg +++ /dev/null @@ -1 +0,0 @@ -svelte-logo \ No newline at end of file diff --git a/src/lib/History/index.svelte b/src/lib/History/index.svelte deleted file mode 100644 index f22d99b5..00000000 --- a/src/lib/History/index.svelte +++ /dev/null @@ -1,88 +0,0 @@ - - - -
-
-
-
- - -
-
- - diff --git a/src/lib/Tabs/index.svelte b/src/lib/Tabs/index.svelte deleted file mode 100644 index 4b6e540f..00000000 --- a/src/lib/Tabs/index.svelte +++ /dev/null @@ -1,28 +0,0 @@ - - - diff --git a/src/lib/Util/state.ts b/src/lib/Util/state.ts index 4f95dc6f..66abed57 100644 --- a/src/lib/Util/state.ts +++ b/src/lib/Util/state.ts @@ -1,4 +1,4 @@ -import { writable, get } from 'svelte/store'; +import { writable, get, derived } from 'svelte/store'; import { toBase64, fromBase64 } from 'js-base64'; import { persist, localStorage } from '@macfja/svelte-persistent-store'; @@ -19,12 +19,14 @@ const defaultState: State = { }; export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore'); +export const base64State = derived([codeStore], ([code], set) => { + set(toBase64(JSON.stringify(code), true)); +}); export const loadState = (data: string): void => { let state: State; try { const stateStr = fromBase64(data); - console.log('state from url', stateStr); state = JSON.parse(stateStr); } catch (e) { console.error('Init error', e); @@ -34,12 +36,29 @@ export const loadState = (data: string): void => { }; export const updateCodeStore = (newState: State): void => { - codeStore.set(newState); + codeStore.update((state) => { + return { ...state, ...newState }; + }); }; -export const updateCode = (code: string, updateEditor: boolean): void => { +let prompted = false; +export const updateCode = (code: string, updateEditor: boolean, updateDiagram = false): void => { + const lines = (code.match(/\n/g) || '').length + 1; + + if (lines > 50 && !prompted && get(codeStore).autoSync) { + const turnOff = confirm( + 'Long diagram deteced. Turn off Auto Sync? Click the sync logo to manually sync.' + ); + prompted = true; + if (turnOff) { + updateCodeStore({ + autoSync: false + } as State); + } + } + codeStore.update((state) => { - return { ...state, code, updateEditor }; + return { ...state, code, updateEditor, updateDiagram }; }); }; @@ -50,8 +69,8 @@ export const updateConfig = (config: string, updateEditor: boolean): void => { }; export const initURLSubscription = (): void => { - codeStore.subscribe((state: State) => { - window.location.hash = toBase64(JSON.stringify(state), true); + base64State.subscribe((state: string) => { + window.location.hash = state; }); }; diff --git a/src/lib/Util/util.ts b/src/lib/Util/util.ts index 16cc4754..d45e49c4 100644 --- a/src/lib/Util/util.ts +++ b/src/lib/Util/util.ts @@ -1,5 +1,17 @@ -import { loadState } from './state'; +import { initURLSubscription, loadState, updateCodeStore } from './state'; export const loadStateFromURL = (): void => { loadState(window.location.hash.slice(1)); }; + +export const syncDiagram = (): void => { + updateCodeStore({ + updateDiagram: true + } as State); +}; + +export const initHandler = (): void => { + loadStateFromURL(); + syncDiagram(); + initURLSubscription(); +}; diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte new file mode 100644 index 00000000..4a86aa32 --- /dev/null +++ b/src/lib/components/actions.svelte @@ -0,0 +1,160 @@ + + + +
+ {#if isClipboardAvailable()} + + {/if} + + + + + +
+ PNG size + + + + + + + {#if imagemodeselected !== 'auto'} + + {/if} +
+ +
+ + +
+
+ + + diff --git a/src/lib/components/card/card.svelte b/src/lib/components/card/card.svelte new file mode 100644 index 00000000..e3c8bcd1 --- /dev/null +++ b/src/lib/components/card/card.svelte @@ -0,0 +1,25 @@ + + +
+
(isOpen = !isOpen)}> +
+ +
+ +
+
+
+ {#if isOpen} +
+ +
+ {/if} +
diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/tabs.svelte new file mode 100644 index 00000000..78e58c90 --- /dev/null +++ b/src/lib/components/card/tabs.svelte @@ -0,0 +1,63 @@ + + +
+ (isOpen = !isOpen)}> + {#if isCloseable} + + {/if} + {title} + {#if isOpen && tabs} +
    + {#each tabs as tab} +
  • +
    toggleTabs(tab)}> + {tab.title} +
    +
    • + {/each} +
+ {/if} +
+ + diff --git a/src/lib/Editor/index.svelte b/src/lib/components/editor/editor.svelte similarity index 89% rename from src/lib/Editor/index.svelte rename to src/lib/components/editor/editor.svelte index 962bc039..663d2070 100644 --- a/src/lib/Editor/index.svelte +++ b/src/lib/components/editor/editor.svelte @@ -28,7 +28,6 @@ $: editor?.setValue(text); $: { Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers); - console.log(errorMarkers); } const dispatch = createEventDispatcher(); @@ -55,28 +54,25 @@ Monaco = await import('monaco-editor'); initEditor(Monaco); - // divEl = document.getElementById('editor') as HTMLDivElement; editor = Monaco.editor.create(divEl, editorOptions); editor.onDidChangeModelContent(async () => { dispatch('update', { text: editor.getValue() }); }); - editor.layout({ - height: divEl.parentElement.offsetHeight, - width: divEl.parentElement.offsetWidth - }); + const resizeObserver = new ResizeObserver((entries) => { editor.layout({ height: entries[0].contentRect.height, width: entries[0].contentRect.width }); }); - resizeObserver.observe(divEl); + + resizeObserver.observe(divEl.parentElement); return () => { editor.dispose(); }; }); -
+
diff --git a/src/lib/Editor/util.js b/src/lib/components/editor/util.js similarity index 95% rename from src/lib/Editor/util.js rename to src/lib/components/editor/util.js index c3458898..e2c70d5e 100644 --- a/src/lib/Editor/util.js +++ b/src/lib/components/editor/util.js @@ -69,7 +69,3 @@ export const initEditor = (monaco) => { } }); }; - -export const getResizeHandler = (editor) => { - return (node) => editor && editor.layout(); -}; diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/history.svelte new file mode 100644 index 00000000..94627b05 --- /dev/null +++ b/src/lib/components/history/history.svelte @@ -0,0 +1,104 @@ + + + +
+ + +
+
    + {#each $historyStore as { state, time, name }} +
  • +
    +
    +
    + {name} + {relativeTime(time)} +
    +
    +
    + + +
    +
    +
    • + {/each} +
+ + + diff --git a/src/lib/History/history.ts b/src/lib/components/history/history.ts similarity index 92% rename from src/lib/History/history.ts rename to src/lib/components/history/history.ts index 2222f520..9b53615d 100644 --- a/src/lib/History/history.ts +++ b/src/lib/components/history/history.ts @@ -1,7 +1,8 @@ import { derived, Readable, Writable, writable, get } from 'svelte/store'; import { persist, localStorage } from '@macfja/svelte-persistent-store'; +import { generateSlug } from 'random-word-slugs'; -const MAX_AUTO_HISTORY_LENGTH = 10; +const MAX_AUTO_HISTORY_LENGTH = 30; export const autoHistoryMode: Writable = persist( writable(true), @@ -25,6 +26,8 @@ export const historyStore: Readable = derived( } ); export const addHistoryEntry = (entry: HistoryEntry): void => { + entry.name = generateSlug(2); + if (!entry.auto) { manualHistoryStore.update((entries) => [entry, ...entries]); return; diff --git a/src/lib/Navbar/index.svelte b/src/lib/components/navbar.svelte similarity index 83% rename from src/lib/Navbar/index.svelte rename to src/lib/components/navbar.svelte index 6f751a28..dd0e5aaf 100644 --- a/src/lib/Navbar/index.svelte +++ b/src/lib/components/navbar.svelte @@ -1,4 +1,5 @@ -
+
- Mermaid Live Editor + Mermaidv{version} Live Editor
+ >