%svelte.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/card.test.ts b/src/lib/components/Card/card.test.ts
new file mode 100644
index 00000000..8fd16961
--- /dev/null
+++ b/src/lib/components/Card/card.test.ts
@@ -0,0 +1,23 @@
+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', icon: 'fab fa-git-alt' },
+ { id: 't2', title: 'title2', icon: 'far fa-bookmark' }
+ ]
+ });
+ expect(container).toBeTruthy();
+ expect(container).toHaveTextContent('TabTest');
+ expect(container).toHaveTextContent('title1');
+ expect(container).toHaveTextContent('title2');
+ expect(container).not.toHaveTextContent('title3');
+ });
+});
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
new file mode 100644
index 00000000..5525afe9
--- /dev/null
+++ b/src/lib/components/Editor.svelte
@@ -0,0 +1,131 @@
+
+
+
diff --git a/src/lib/components/History/History.svelte b/src/lib/components/History/History.svelte
new file mode 100644
index 00000000..3663b71d
--- /dev/null
+++ b/src/lib/components/History/History.svelte
@@ -0,0 +1,192 @@
+
+
+-
+ {#each tabs as tab}
+
toggleTabs(tab)}
+ on:keypress|stopPropagation={() => toggleTabs(tab)}>
+
+ {tab.title}
+
+ {/each}
+
+
+ {#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 Object.keys(samples) as sample}
-
- {/each}
-
+
+ {#each Object.keys(samples) 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 b3c411fa..00000000
--- a/src/lib/components/actions.svelte
+++ /dev/null
@@ -1,226 +0,0 @@
-
-
-
- {#if isClipboardAvailable()}
-
- {/if}
-
-
-
-
-
-
-
-
- PNG size
-
-
-
-
-
-
- {#if imagemodeselected !== 'auto'}
-
- {/if}
-
-
-
-
-
-
-
-
-
-
-
- {#if isNetlify}
-
- {/if}
-
-
diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/tabs.svelte
deleted file mode 100644
index 18382abd..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 536bb427..00000000
--- a/src/lib/components/editor.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-
-
-
diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/history.svelte
deleted file mode 100644
index c31e72f3..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. -
-
diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte
deleted file mode 100644
index 6bb96687..00000000
--- a/src/lib/components/view.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
-
- Change Theme
-
-
-
-
-
-
-
-
-
-
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index e0a139b3..cb70ca3e 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -1,60 +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 EditorUpdateEvent {
- text: string;
-}
-export interface EditorEvents {
- update: EditorUpdateEvent;
+export interface MarkerData {
+ 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;
- 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 {
+ 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;
+ }
+);
-type Loader = (url: string) => Promisefrom same browser you used to create the diagram.) click D href "https://github.com/mermaid-js/mermaid-live-editor/issues/new?assignees=&labels=bug&template=bug_report.md&title=Broken%20link" "Raise issue"`; -export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore'); -export const serializedState: Readable
+
+{/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 e778d4b0..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 8b6dd0cb..00000000
--- a/src/routes/__layout.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-
-
-
+
+
+ {$loadingStateStore.message}
+
-
-{/if}
-
-
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
deleted file mode 100644
index f097364f..00000000
--- a/src/routes/edit.svelte
+++ /dev/null
@@ -1,203 +0,0 @@
-
-
-
-
-
- {$loadingStateStore.message}
-
-
-
-
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
new file mode 100644
index 00000000..c96c305b
--- /dev/null
+++ b/src/routes/edit/+page.svelte
@@ -0,0 +1,209 @@
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- {#if !$codeStore.autoSync}
-
- {/if}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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 f8e5f95e..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.
+
+