Merge branch 'master' of https://github.com/mermaid-js/mermaid-live-editor into relative_time

* 'master' of https://github.com/mermaid-js/mermaid-live-editor: mermaid upgrade to version 8.8.4 Updated config handling Moved editing history down below diagram
2020-12-10 09:14:51 +05:30
parent d243507221 b3827e5f04
commit 116cb7c31b
12 changed files with 130 additions and 268 deletions
@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
+import { writable, get } from 'svelte/store';
 // import mermaid from '@mermaid-js/mermaid';
 import mermaid from '@mermaid';
 import { Base64 } from 'js-base64'
@@ -11,9 +11,9 @@ export const fromUrl = data => {
  const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches && false
  try {
    let stateStr = Base64.decode(data)
+    console.log('state from url', stateStr)
    state = JSON.parse(stateStr);

-    console.log('state from url', state)

    if (state.code === undefined) { // not valid json
 //      state = { code: '', mermaid: { theme: themeFromUrl } }
@@ -38,3 +38,18 @@ export const updateCodeStore = newState => {
  codeStore.set(newState);
  replace('/edit/' + Base64.encodeURI(JSON.stringify(newState)))
 };
+export const updateCode = (code, updateEditor) => {
+  const state = get(codeStore);
+  state.code = code;
+  state.updateEditor = updateEditor;
+  codeStore.set(state);
+};
+export const updateConfig = config => {
+  const state = get(codeStore);
+  state.mermaid = config;
+  codeStore.set(state);
+};
+
+const unsubscribe = codeStore.subscribe( state => {
+  replace('/edit/' + Base64.encodeURI(JSON.stringify(state)))
+});
@@ -21,7 +21,7 @@
        color: #eaebef;
    }
    #content {
-        padding-top: 16px;
+        padding-top: 8px;
    }
    .padding {
        padding: 8px;
@@ -1,5 +1,5 @@
 <script>
-import { codeStore, updateCodeStore } from '../code-store.js';
+import { codeStore, updateCodeStore, updateConfig, updateCode } from '../code-store.js';
 import { configErrorStore } from '../config-error-store.js';
 import { onMount } from 'svelte';
 import {push, pop, replace} from 'svelte-spa-router'
@@ -23,18 +23,18 @@ let editorElem = null;
 let decorations = [];
 const decArr = [];

-let oldConf =  { theme: 'default' };
+let oldConf =  { };
 const handleConfUpdate =  conf => {
 	try {
+		console.log(conf);
 		JSON.parse(conf);
-		console.log(code);
-		let newState = { code, mermaid: JSON.parse(conf) };
-		oldConf = newState.mermaid;
-		updateCodeStore(newState);
+		// let newState = { code, mermaid: JSON.parse(conf) };
+		// oldConf = newState.mermaid;
+		updateConfig(JSON.parse(conf));
 		configErrorStore.set(undefined);
-		const model = edit.getModel();
-		// model.setValue(conf);
-		// model.dispose();
+		// const model = edit.getModel();
+		// // model.setValue(conf);
+		// // model.dispose();
 	} catch(e) {
 		console.log('Error in parsed', e);
 		configErrorStore.set(e);
@@ -96,7 +96,6 @@ onMount(async () => {
 </script>

 <style>
-	#editor-container {}
 	#editor-conf {
 		width: 100%;
 		height: 200px;
@@ -47,6 +47,7 @@ const handleCodeUpdate = code => {
 };

 const unsubscribe = codeStore.subscribe( state => {
+	console.log('Code change');
 	if(editorElem === null) {
 		editorElem = document.getElementById('editor');
 	}
@@ -63,7 +63,7 @@ onMount(async () => {
 });

 let insertSvg = function(svgCode, bindFunctions){
-	element.innerHTML = svgCode;
+	// element.innerHTML = svgCode;
 };

 	export let code = '';
@@ -84,7 +84,7 @@ let insertSvg = function(svgCode, bindFunctions){
 				container.innerHTML = _code;
 				saveStatistcs(detectType(code));
 				delete container.dataset.processed
-				mermaid.initialize(state.mermaid)
+				mermaid.initialize(Object.assign({}, state.mermaid))
 				mermaid.init(undefined, container)
 				if(code) mermaid.render('graph-div', code, insertSvg);
 			}
@@ -1,6 +1,6 @@
 <script>
    import { onMount } from "svelte";
-    import { codeStore, updateCodeStore } from "../code-store.js";
+    import { codeStore, updateCode, updateCodeStore } from "../code-store.js";
    import Editor from "../components/Editor.svelte";
    import Config from "../components/Config.svelte";
    import View from "../components/View.svelte";
@@ -26,7 +26,7 @@
        } else if (hisCode) {
            updateCodeStore({
                code: hisCode.code,
-                mermaid: { theme: "default" },
+                mermaid: { },
                updateEditor: true,
            });
        }
@@ -35,7 +35,7 @@
        codeStore.subscribe( state => {
            code = state && state.code || code;
        });
-        
+
        setInterval(() => {
            if (code != hisCode) {
                //save history
@@ -170,11 +170,7 @@

    function toUpdateCodeStore(code) {
        if (!code)  return;
-        updateCodeStore({
-            code: code,
-            mermaid: { theme: "default" },
-            updateEditor: true,
-        });
+        updateCode(code, true);
    }

    function relativeTime(t){
@@ -219,8 +215,7 @@
    }
    #title-container {
        width: fit-content;
-        margin: 0 auto 16px;
-        padding-bottom: 16px;
+        margin: 0 auto 8px;
    }
    #power {
        width: 100%;
@@ -229,21 +224,21 @@
        align-items: center;
        height: 4rem;
    }
-    #sampleLoader, #historyLoader {
-        padding-bottom: 10px;
+    #sampleLoader {
        padding-left: 10px;
        border-bottom: 1px solid lightgray;
    }
-    #historyLoader {
-        padding-top: 16px;
-    }
    #historyLoaderSubTitle {
        display: inline-block;
        color: #33a2c4;
        font-size: small;
+        font-style: italic;
    }
    .button-container {
-        margin-top: 5px;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        flex-wrap: wrap;
    }
    .button-style {
        background-color: #a2d9e2;
@@ -271,58 +266,41 @@
    <div id="title-container">
        <h1 id="app-title">Mermaid Live Editor</h1>
    </div>
+    <div id="sampleLoader">
+        <div class="button-container">
+        <span id="sampleLoaderTitle"><strong>Diagram presets:</strong></span>
+            <button class="button-style" on:click={loadFlowChart}>
+                Flow Chart
+            </button>
+            <button
+                class="button-style"
+                on:click={loadSequenceDiagram}>
+                Sequence Diagram
+            </button>
+            <button
+                class="button-style"
+                on:click={loadClassDiagram}>
+                Class Diagram
+            </button>
+            <button
+                class="button-style"
+                on:click={loadStateDiagram}>
+                State Diagram
+            </button>
+            <button class="button-style" on:click={loadGanttChart}>
+                Gantt Chart
+            </button>
+            <button class="button-style" on:click={loadPieChart}>
+                Pie Chart
+            </button>
+            <button class="button-style" on:click={loadERDiagram}>
+                ER Diagram
+            </button>
+        </div>
+    </div>
    <div id="editor-root">
        <div id="col1">
            <Card title="Code" noPadding="true">
-                <div id="sampleLoader">
-                    <span id="sampleLoaderTitle">Sample Diagram Options</span>
-                    <br />
-                    <div class="button-container">
-                        <button class="button-style" on:click={loadFlowChart}>
-                            Flow Chart
-                        </button>
-                        <button
-                            class="button-style"
-                            on:click={loadSequenceDiagram}>
-                            Sequence Diagram
-                        </button>
-                        <button
-                            class="button-style"
-                            on:click={loadClassDiagram}>
-                            Class Diagram
-                        </button>
-                        <button
-                            class="button-style"
-                            on:click={loadStateDiagram}>
-                            State Diagram
-                        </button>
-                        <button class="button-style" on:click={loadGanttChart}>
-                            Gantt Chart
-                        </button>
-                        <button class="button-style" on:click={loadPieChart}>
-                            Pie Chart
-                        </button>
-                        <button class="button-style" on:click={loadERDiagram}>
-                            ER Diagram
-                        </button>
-                    </div>
-                </div>
-                <div id="historyLoader">
-                    <span id="historyLoaderTitle">History Diagram Options</span>
-                    <span id="historyLoaderSubTitle">Automatically save once every minute, up to 10 records.</span>
-                    <br />
-                    <div id="historyList" class="button-container">
-                        {#if historyList.length > 0}
-                            {#each historyList as item, i}
-                                <button class="button-style" on:click="{e => toUpdateCodeStore(item.code)}">
-                                    {relativeTime(item.time)}
-                                </button>
-                            {/each}
-                        {:else}
-                            No records.
-                        {/if}
-                    </div>
-                </div>
                <Editor data={params.data} />
            </Card>
            <Card title="Mermaid Configuration">
@@ -336,11 +314,21 @@
            </Card>
            <div id="link-root">
                <div id="link-col1">
-                    <Card title="Actions">
-                        <Links />
+                    <Card title="Editing history">
+                        <span id="historyLoaderSubTitle">Automatically saves once every minute, up to 10 records.</span>
+                        <br />
+                        <div id="historyList" class="button-container">
+                            {#if historyList.length > 0}
+                                {#each historyList as item, i}
+                                    <button class="button-style" on:click="{e => toUpdateCodeStore(item.code)}">
+                                        {relativeTime(item.time)}
+                                    </button>
+                                {/each}
+                            {:else}
+                                No records.
+                            {/if}
+                        </div>
                    </Card>
-                </div>
-                <div id="link-col2">
                    <Card title="Links">
                        <div class="button-container">
                            <button class="button-style">
@@ -378,6 +366,11 @@
                        </div>
                    </Card>
                </div>
+                <div id="link-col2">
+                    <Card title="Actions">
+                        <Links />
+                    </Card>
+                </div>
            </div>
        </div>
    </div>
@@ -2,10 +2,10 @@
 import { onMount } from 'svelte';
 import Editor from '../components/Editor.svelte';
 import View from '../components/View.svelte';
-import { fromUrl } from '../code-store.js';
+// import { fromUrl } from '../code-store.js';

 onMount(async () => {
-	fromUrl(params.data);
+	// fromUrl(params.data);
 	ga('send', 'pageview');
 });

@@ -15,7 +15,7 @@ onMount(async () => {
 	// export let error = {};
 	// export let token = '';
 	// export let expected = '';
-	export let params = {};
+	// export let params = {};
 </script>

 <style>