Merge branch 'master' of https://github.com/mermaid-js/mermaid-live-e…

…ditor 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

docs/bundle.css

@@ -2472,10 +2472,10 @@
 }
 
 #editor.svelte-19z36gs{width:100%;height:400px;max-height:300px;flex:1}
-#editor-conf.svelte-1hwndan{width:100%;height:200px;max-height:300px;flex:1}
+#editor-conf.svelte-4auqqc{width:100%;height:200px;max-height:300px;flex:1}
 #view.svelte-de7j0c{border:1px solor darkred;flex:1}#container.svelte-de7j0c{overflow-x:auto}.error.svelte-de7j0c{opacity:0.5}
-#card.svelte-rxu7us{border:1px solid lightgray;margin-bottom:16px}#title.svelte-rxu7us{font-family:"Playfair Display", serif;font-weight:400;border-bottom:1px solid lightgray;font-size:1.25rem;background-color:#1e60ab;color:#eaebef}#content.svelte-rxu7us{padding-top:16px}.padding.svelte-rxu7us{padding:8px}
+#card.svelte-1f4byul{border:1px solid lightgray;margin-bottom:16px}#title.svelte-1f4byul{font-family:"Playfair Display", serif;font-weight:400;border-bottom:1px solid lightgray;font-size:1.25rem;background-color:#1e60ab;color:#eaebef}#content.svelte-1f4byul{padding-top:8px}.padding.svelte-1f4byul{padding:8px}
 #tag.svelte-kzz8td{height:auto;margin:0 8px 0 0;padding:0 7px;font-size:12px;line-height:20px;white-space:nowrap;border:1px solid #d9d9d9;border-radius:4px;cursor:default;font-size:smaller;color:#52c41a;background:#f6ffed;border-color:#b7eb8f;margin-left:8px}
 #links.svelte-vfpbl8{margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid lightgray}#markdown.svelte-vfpbl8{padding:7px;font-family:monospace;font-size:14px;width:95%;margin:1rem 0;border:1px solid lightgray}label[for="markdown"].svelte-vfpbl8{cursor:pointer;margin:0 auto}.button-style.svelte-vfpbl8{background-color:#a2d9e2;color:#33a2c4;border-radius:0.25rem;padding:0.5rem;border:1px solid #a2d9e2;margin:0.25rem}.button-style.svelte-vfpbl8:hover{background-color:#fff;color:#33a2c4;border:1px solid #33a2c4}.button-style.svelte-vfpbl8:focus{outline:none}.link-style.svelte-vfpbl8{text-decoration:none;color:#33a2c4}#copy-section.svelte-vfpbl8{padding-top:1rem;text-align:center}
-#body.svelte-1c6upva{font-family:"Roboto", sans-serif;background-color:#fcfbfc}#editor-root.svelte-1c6upva{display:flex;height:100%}#col1.svelte-1c6upva{width:35%}#col2.svelte-1c6upva{width:65%;padding-left:32px}#link-root.svelte-1c6upva{display:flex;height:fit-content}#link-col1.svelte-1c6upva{width:50%}#link-col2.svelte-1c6upva{width:50%;padding-left:32px}#app-title.svelte-1c6upva{font-family:"Playfair Display", serif;font-size:32px;font-weight:700;margin:0;color:#1e60ab;opacity:0.8}#title-container.svelte-1c6upva{width:fit-content;margin:0 auto 16px;padding-bottom:16px}#power.svelte-1c6upva{width:100%;display:flex;justify-content:flex-end;align-items:center;height:4rem}#sampleLoader.svelte-1c6upva{padding-bottom:10px;padding-left:10px;border-bottom:1px solid lightgray}.button-container.svelte-1c6upva{margin-top:5px}.button-style.svelte-1c6upva{background-color:#a2d9e2;color:#33a2c4;border-radius:0.25rem;padding:0.5rem;border:1px solid #a2d9e2;margin:0.25rem}.button-style.svelte-1c6upva:hover{background-color:#fff;color:#33a2c4;border:1px solid #33a2c4}.button-style.svelte-1c6upva:focus{outline:none}.link-style.svelte-1c6upva{text-decoration:none;color:#33a2c4}
+#body.svelte-g5aiet{font-family:"Roboto", sans-serif;background-color:#fcfbfc}#editor-root.svelte-g5aiet{display:flex;height:100%}#col1.svelte-g5aiet{width:35%}#col2.svelte-g5aiet{width:65%;padding-left:32px}#link-root.svelte-g5aiet{display:flex;height:fit-content}#link-col1.svelte-g5aiet{width:50%}#link-col2.svelte-g5aiet{width:50%;padding-left:32px}#app-title.svelte-g5aiet{font-family:"Playfair Display", serif;font-size:32px;font-weight:700;margin:0;color:#1e60ab;opacity:0.8}#title-container.svelte-g5aiet{width:fit-content;margin:0 auto 8px}#power.svelte-g5aiet{width:100%;display:flex;justify-content:flex-end;align-items:center;height:4rem}#sampleLoader.svelte-g5aiet{padding-left:10px;border-bottom:1px solid lightgray}#historyLoaderSubTitle.svelte-g5aiet{display:inline-block;color:#33a2c4;font-size:small;font-style:italic}.button-container.svelte-g5aiet{display:flex;align-items:center}.button-style.svelte-g5aiet{background-color:#a2d9e2;color:#33a2c4;border-radius:0.25rem;padding:0.5rem;border:1px solid #a2d9e2;margin:0.25rem}.button-style.svelte-g5aiet:hover{background-color:#fff;color:#33a2c4;border:1px solid #33a2c4}.button-style.svelte-g5aiet:focus{outline:none}.link-style.svelte-g5aiet{text-decoration:none;color:#33a2c4}
 #view-page.svelte-ylwsal{display:flex;height:100%}

package.json

@@ -20,7 +20,7 @@
  "dev": "webpack-dev-server --content-base docs"
  },
  "dependencies": {
- "mermaid": "8.8.3",
+ "mermaid": "8.8.4",
  "js-base64": "^2.5.1",
  "json-lint": "^0.1.0",
  "jsonlint": "^1.6.3",

src/code-store.js

@@ -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)))
+});

src/components/Card.svelte

@@ -21,7 +21,7 @@
  color: #eaebef;
  }
  #content {
- padding-top: 16px;
+ padding-top: 8px;
  }
  .padding {
  padding: 8px;

src/components/Config.svelte

@@ -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;

src/components/Editor.svelte

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

src/components/View.svelte

@@ -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);
  }

src/routes/Edit.svelte

@@ -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>

src/routes/View.svelte

@@ -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>