%sveltekit.body%
-
+
+
+
+ %sveltekit.body%
+
diff --git a/src/app.postcss b/src/app.postcss
index 1b5c3824..888c737e 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -3,8 +3,8 @@
@tailwind utilities;
.input {
- @apply flex-1 border-primary border-solid border-2 rounded;
+ @apply flex-1 border-primary border-solid border-2 rounded;
}
.action-btn {
- @apply btn btn-primary;
+ @apply btn btn-primary;
}
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 00000000..8188f7aa
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,14 @@
+///
+
diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte
new file mode 100644
index 00000000..3c7c8f9d
--- /dev/null
+++ b/src/lib/components/Card/Tabs.svelte
@@ -0,0 +1,52 @@
+
+
+ (isOpen = !isOpen)}
+ on:keypress={() => (isOpen = !isOpen)}>
+
+ {#if isOpen}
+
+
+
+
+
+
+ {/if}
+
+ (isOpen = !isOpen)}
+ on:keypress|stopPropagation={() => (isOpen = !isOpen)}>
+ {#if isCloseable}
+
+ {/if}
+ {title}
+ {#if isOpen && tabs}
+
+
+
diff --git a/src/lib/components/Card/__snapshots__/card.test.ts.snap b/src/lib/components/Card/__snapshots__/card.test.ts.snap
new file mode 100644
index 00000000..c23d7e06
--- /dev/null
+++ b/src/lib/components/Card/__snapshots__/card.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`card.svelte > mounts 1`] = `"-
+ {#each tabs as tab}
+
toggleTabs(tab)}
+ on:keypress|stopPropagation={() => toggleTabs(tab)}>
+
+ {tab.title}
+
+ {/each}
+ TabTest
title1
title2
+
+ {#if $historyStore.length > 0}
+
+ {/if}
+ |
+
+ {#if $historyModeStore !== 'loader'}
+
+ {/if}
+
+ -
+ {#if $historyStore.length > 0}
+ {#each $historyStore as { id, state, time, name, url, type }}
+
-
+ +++ +++ + {#if type !== 'loader'} + + {/if} ++
+ {/each}
+ {:else}
+
+ No items in History
+ Click the Save button to save current state and restore it later.
+ Timeline will automatically be saved every minute. +
+ {/if}
+ + Click the Save button to save current state and restore it later.
+ Timeline will automatically be saved every minute. +
+ {#each diagramOrder as sample}
+
+ {/each}
+
+
+
+
diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte
new file mode 100644
index 00000000..8e0b6854
--- /dev/null
+++ b/src/lib/components/View.svelte
@@ -0,0 +1,165 @@
+
+
+{#if (error && $stateStore.error instanceof Error) || outOfSync}
+
+
+ Change Theme
+
+
+
+
+
+
+
+ {#if error}
+ {@html $stateStore.error.toString().replace(/\n/g, '
')} + {:else} + Diagram out of sync.
+ Press (Sync button) or {cmdKey} + Enter to sync. + {/if} +
+{/if}
+
+')} + {:else} + Diagram out of sync.
+ Press (Sync button) or {cmdKey} + Enter to sync. + {/if} +
+
+
+
+
diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte
deleted file mode 100644
index e504de0d..00000000
--- a/src/lib/components/actions.svelte
+++ /dev/null
@@ -1,251 +0,0 @@
-
-
- TabTest
title1
title2
-
diff --git a/src/lib/components/card/card.test.ts b/src/lib/components/card/card.test.ts
deleted file mode 100644
index 98ffccd3..00000000
--- a/src/lib/components/card/card.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { cleanup, render } from '@testing-library/svelte';
-import { describe, expect, it, afterEach } from 'vitest';
-import Card from './card.svelte';
-
-describe('card.svelte', () => {
- // TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
- afterEach(() => cleanup());
-
- it('mounts', () => {
- const { container } = render(Card, {
- title: 'TabTest',
- tabs: [
- { id: 't1', title: 'title1' },
- { id: 't2', title: 'title2' }
- ]
- });
- expect(container).toBeTruthy();
- expect(container).toHaveTextContent('TabTest');
- expect(container).toHaveTextContent('title1');
- expect(container).toHaveTextContent('title2');
- expect(container).not.toHaveTextContent('title3');
- expect(container.innerHTML).toMatchSnapshot();
- });
-});
diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/tabs.svelte
deleted file mode 100644
index 5fe726b9..00000000
--- a/src/lib/components/card/tabs.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
- (isOpen = !isOpen)}>
-
- {#if isOpen}
-
-
-
-
-
-
- {/if}
-
- (isOpen = !isOpen)}>
- {#if isCloseable}
-
- {/if}
- {title}
- {#if isOpen && tabs}
-
-
-
diff --git a/src/lib/components/editor.svelte b/src/lib/components/editor.svelte
deleted file mode 100644
index e9299a5e..00000000
--- a/src/lib/components/editor.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-
-
-
diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/history.svelte
deleted file mode 100644
index 6ee60774..00000000
--- a/src/lib/components/history/history.svelte
+++ /dev/null
@@ -1,142 +0,0 @@
-
-
--
- {#each tabs as tab}
-
toggleTabs(tab)}>
-
- {tab.title}
-
- {/each}
-
-
- {#if $historyModeStore !== 'loader'}
-
- {/if}
-
- -
- {#if $historyStore.length > 0}
- {#each $historyStore as { state, time, name, url, type }}
-
-
- --- --- - {#if type !== 'loader'} - - {/if} --
- {/each}
- {:else}
-
- No items in History
- Click the Save button to save current state and restore it later.
- Timeline will automatically be saved every minute. -
- {/if}
- - Click the Save button to save current state and restore it later.
- Timeline will automatically be saved every minute. -
- {#each Object.keys(samples) as sample}
-
- {/each}
-
-
-
diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte
deleted file mode 100644
index 01ca38ad..00000000
--- a/src/lib/components/view.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-
-
-{#if error && $stateStore.error instanceof Error}
-
-
- Change Theme
-
-
-
-
-
-{$stateStore.error}
-{/if}
-
-
-
-
-
-
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index 9ff6d86b..cb70ca3e 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -1,85 +1,88 @@
-/**
- * Can be made globally available by placing this
- * inside `global.d.ts` and removing `export` keyword
- */
-export interface Locals {
- userid: string;
-}
-
export interface MarkerData {
- severity: number;
- message: string;
- source?: string;
- startLineNumber: number;
- startColumn: number;
- endLineNumber: number;
- endColumn: number;
-}
-
-export interface EditorUpdateEvent {
- text: string;
-}
-export interface EditorEvents {
- update: EditorUpdateEvent;
+ severity: number;
+ message: string;
+ source?: string;
+ startLineNumber: number;
+ startColumn: number;
+ endLineNumber: number;
+ endColumn: number;
}
export interface TabEvents {
- select: Tab;
+ select: Tab;
}
export interface Tab {
- id: string;
- title: string;
- icon: string;
+ id: string;
+ title: string;
+ icon: string;
}
export interface State {
- code: string;
- mermaid: string;
- updateEditor: boolean;
- updateDiagram: boolean;
- autoSync: boolean;
- pan?: { x: number; y: number };
- zoom?: number;
- loader?: LoaderConfig;
+ code: string;
+ mermaid: string;
+ updateDiagram: boolean;
+ autoSync: boolean;
+ editorMode?: EditorMode;
+ panZoom?: boolean;
+ pan?: { x: number; y: number };
+ zoom?: number;
+ loader?: LoaderConfig;
}
export interface ValidatedState extends State {
- error: unknown;
- errorMarkers: MarkerData[];
- serialized: string;
+ editorMode: EditorMode;
+ error?: Error;
+ errorMarkers: MarkerData[];
+ serialized: string;
}
export interface GistLoaderConfig {
- url: string;
+ url: string;
}
export interface LoadingState {
- loading: boolean;
- message?: string;
+ loading: boolean;
+ message?: string;
}
export interface FileLoaderConfig {
- codeURL: string;
- configURL?: string;
+ codeURL: string;
+ configURL?: string;
}
export interface LoaderConfig {
- type: 'gist' | 'files';
- config: GistLoaderConfig | FileLoaderConfig;
+ type: 'gist' | 'files';
+ config: GistLoaderConfig | FileLoaderConfig;
}
export type HistoryType = 'auto' | 'manual' | 'loader';
-export interface HistoryEntry {
- state: State;
- time: number;
- name?: string;
- type: HistoryType;
- url?: string;
-}
+export type HistoryEntry = { id: string; state: State; time: number; url?: string } & (
+ | {
+ type: 'loader';
+ name: string;
+ }
+ | {
+ type: HistoryType;
+ name?: string;
+ }
+);
-export interface DocConfig {
- [key: string]: {
- code: string;
- config?: string;
- };
-}
+export type DocConfig = Record<
+ string,
+ {
+ code: string;
+ config?: string;
+ }
+>;
+
+export type EditorMode = 'code' | 'config';
export type Loader = (url: string) => Promise
+
+{/if}
+
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 00000000..4a12a8b8
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,17 @@
+
diff --git a/src/routes/[fallback]/manifest.json.ts b/src/routes/[fallback]/manifest.json.ts
deleted file mode 100644
index c7761d5b..00000000
--- a/src/routes/[fallback]/manifest.json.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { GET as manifestGet } from '../manifest.json';
-export const GET = manifestGet;
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
deleted file mode 100644
index 26aa808c..00000000
--- a/src/routes/__layout.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-
-
-
+
+
+ {$loadingStateStore.message}
+
-
-{/if}
-
-
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
deleted file mode 100644
index 45bbd3e9..00000000
--- a/src/routes/edit.svelte
+++ /dev/null
@@ -1,234 +0,0 @@
-
-
-
-
-
- {$loadingStateStore.message}
-
-
-
-
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
new file mode 100644
index 00000000..ae92d28d
--- /dev/null
+++ b/src/routes/edit/+page.svelte
@@ -0,0 +1,206 @@
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {#if !$stateStore.autoSync}
-
- {/if}
-
-
-
-
-
-
- Full screen
-
-
-
-
-
-
- Code editing not supported on mobile. Please use a desktop browser.
-
-
+
+
+
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
deleted file mode 100644
index ca9daa13..00000000
--- a/src/routes/index.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-
diff --git a/src/routes/manifest.json.ts b/src/routes/manifest.json.ts
deleted file mode 100644
index 45e6320f..00000000
--- a/src/routes/manifest.json.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { base } from '$app/paths';
-export const GET = (): { body: unknown } => {
- return {
- body: {
- short_name: 'Mermaid',
- name: 'Mermaid Live Editor',
- icons: [
- {
- src: `${base}/icon-192.png`,
- type: 'image/png',
- sizes: '192x192'
- },
- {
- src: `${base}/icon-512.png`,
- type: 'image/png',
- sizes: '512x512'
- }
- ],
- start_url: `${base}/edit/`,
- background_color: '#6366F1',
- display: 'standalone',
- scope: `${base}/edit/`,
- theme_color: '#6366F1',
- description: 'FlowChart & Diagrams Editor.',
- orientation: 'landscape'
- }
- };
-};
diff --git a/src/routes/view.svelte b/src/routes/view.svelte
deleted file mode 100644
index 216251f0..00000000
--- a/src/routes/view.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if !$stateStore.autoSync}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+ Full screen
+
+
+
+
+
+ Code editing not supported on mobile. Please use a desktop browser.
+
+