Merge pull request #80 from mermaid-js/sidharthv96/fixInit

Fix Init error

src/code-store.js

@@ -1,35 +1,28 @@
 import { writable, get } from 'svelte/store';
-// import mermaid from '@mermaid-js/mermaid';
-import mermaid from '@mermaid';
 import { Base64 } from 'js-base64';
-import { push, pop, replace } from 'svelte-spa-router';
-
-export const codeStore = writable({});
+import { replace } from 'svelte-spa-router';
+const isDarkMode =
+  window.matchMedia('(prefers-color-scheme: dark)').matches && false;
+const defaultState = {
+  code: `graph TD
+A[Christmas] -->|Get money| B(Go shopping)
+B --> C{Let me think}
+C -->|One| D[Laptop]
+C -->|Two| E[iPhone]
+C -->|Three| F[fa:fa-car Car]
+  `,
+  mermaid: { theme: isDarkMode ? 'dark' : 'default' },
+};
+export const codeStore = writable(defaultState);
 export const fromUrl = (data) => {
-  let code;
   let state;
-  const isDarkMode =
-    window.matchMedia('(prefers-color-scheme: dark)').matches && false;
   try {
-    let stateStr = Base64.decode(data);
+    const stateStr = Base64.decode(data);
     console.log('state from url', stateStr);
     state = JSON.parse(stateStr);
-
-    if (state.code === undefined) {
-      // not valid json
-      //      state = { code: '', mermaid: { theme: themeFromUrl } }
-    }
-    code = state.code;
   } catch (e) {
-    // console.error('Init error', e);
-    code = `graph TD
-  A[Christmas] -->|Get money| B(Go shopping)
-  B --> C{Let me think}
-  C -->|One| D[Laptop]
-  C -->|Two| E[iPhone]
-  C -->|Three| F[fa:fa-car Car]
-		`;
-    state = { code, mermaid: { theme: isDarkMode ? 'dark' : 'default' } };
+    console.error('Init error', e);
+    state = defaultState;
   }
 
   codeStore.set(state);

src/components/Editor.svelte

@@ -2,7 +2,7 @@
   import { codeStore, updateCodeStore } from '../code-store.js';
   import { codeErrorStore } from '../code-error-store.js';
   import { onMount } from 'svelte';
-  import { push, pop, replace } from 'svelte-spa-router';
+  import { replace } from 'svelte-spa-router';
   import { Base64 } from 'js-base64';
   // import mermaid from '@mermaid-js/mermaid';
   import mermaid from '@mermaid';
@@ -62,48 +62,6 @@
     }
   };
 
-  const unsubscribe = codeStore.subscribe((state) => {
-    console.log('Code change');
-    if (editorElem === null) {
-      editorElem = document.getElementById('editor');
-    }
-    if (!code && state) {
-      code = state.code;
-    }
-    if (state) {
-      conf = state.mermaid;
-    }
-    if (!edit && code && editorElem !== null) {
-      edit = monaco.editor.create(editorElem, {
-        value: [code].join('\n'),
-        theme: 'myCoolTheme',
-        language: 'mermaid',
-      });
-      resizeHandler = getResizeHandler(edit);
-
-      let decorations = [];
-      edit.onDidChangeModelContent(function (e) {
-        const code = edit.getValue();
-        handleCodeUpdate(code);
-      });
-      handleCodeUpdate(code);
-    }
-    if (state && state.updateEditor && edit && code && editorElem !== null) {
-      edit.setValue(state.code);
-      handleCodeUpdate(state.code);
-    }
-  });
-
-  const unsubscribeError = codeErrorStore.subscribe((_error) => {
-    if (_error) {
-      error = true;
-    } else {
-      error = false;
-    }
-  });
-
-  initEditor(monaco);
-
   onMount(async () => {
     // editorElem = document.querySelector('#editor')
     self.MonacoEnvironment = {
@@ -111,15 +69,52 @@
         return './editor.worker.bundle.js';
       },
     };
-  });
 
-  // export let name;
-  // export let params = {};
+    const unsubscribe = codeStore.subscribe((state) => {
+      console.log('Code change');
+      if (editorElem === null) {
+        editorElem = document.getElementById('editor');
+      }
+      if (!code && state) {
+        code = state.code;
+      }
+      if (state) {
+        conf = state.mermaid;
+      }
+      if (!edit && code && editorElem !== null) {
+        edit = monaco.editor.create(editorElem, {
+          value: [code].join('\n'),
+          theme: 'myCoolTheme',
+          language: 'mermaid',
+        });
+        resizeHandler = getResizeHandler(edit);
+
+        let decorations = [];
+        edit.onDidChangeModelContent(function (e) {
+          const code = edit.getValue();
+          handleCodeUpdate(code);
+        });
+        handleCodeUpdate(code);
+      }
+      if (state && state.updateEditor && edit && code && editorElem !== null) {
+        edit.setValue(state.code);
+        handleCodeUpdate(state.code);
+      }
+    });
+
+    const unsubscribeError = codeErrorStore.subscribe((_error) => {
+      if (_error) {
+        error = true;
+      } else {
+        error = false;
+      }
+    });
+
+    initEditor(monaco);
+  });
 </script>
 
 <style>
-  #editor-container {
-  }
   #editor {
     width: 100%;
     height: 400px;

src/components/View.svelte

@@ -57,6 +57,44 @@
   let container;
   onMount(async () => {
     element = document.querySelector('graph-div');
+    const unsubscribe = codeStore.subscribe((state) => {
+      try {
+        if (container && state) {
+          code = state.code;
+
+          // mermaid.parse(code)
+          // Replacing special characters '<' and '>' with encoded '&lt;' and '&gt;'
+          let _code = code;
+          _code = _code.replace(/</g, '&lt;');
+          _code = _code.replace(/>/g, '&gt;');
+
+          container.innerHTML = _code;
+          saveStatistcs(detectType(code));
+          delete container.dataset.processed;
+          mermaid.initialize(Object.assign({}, state.mermaid));
+          mermaid.init(undefined, container);
+          if (code) mermaid.render('graph-div', code, insertSvg);
+        }
+      } catch (e) {
+        console.log('view fail', e);
+      }
+    });
+    const unsubscribeError = codeErrorStore.subscribe((_error) => {
+      if (typeof _error === 'undefined') {
+        codeClasses = '';
+      } else {
+        codeClasses = 'error';
+        console.log('code error: ', _error);
+      }
+    });
+    const unsubscribeConfigError = configErrorStore.subscribe((_error) => {
+      if (typeof _error === 'undefined') {
+        configClasses = '';
+      } else {
+        configClasses = 'error';
+        console.log('conf error: ', _error);
+      }
+    });
   });
 
   let insertSvg = function (svgCode, bindFunctions) {
@@ -66,44 +104,6 @@
   export let code = '';
   export let configClasses = '';
   export let codeClasses = '';
-  const unsubscribe = codeStore.subscribe((state) => {
-    try {
-      if (container && state) {
-        code = state.code;
-
-        // mermaid.parse(code)
-        // Replacing special characters '<' and '>' with encoded '&lt;' and '&gt;'
-        let _code = code;
-        _code = _code.replace(/</g, '&lt;');
-        _code = _code.replace(/>/g, '&gt;');
-
-        container.innerHTML = _code;
-        saveStatistcs(detectType(code));
-        delete container.dataset.processed;
-        mermaid.initialize(Object.assign({}, state.mermaid));
-        mermaid.init(undefined, container);
-        if (code) mermaid.render('graph-div', code, insertSvg);
-      }
-    } catch (e) {
-      console.log('view fail', e);
-    }
-  });
-  const unsubscribeError = codeErrorStore.subscribe((_error) => {
-    if (typeof _error === 'undefined') {
-      codeClasses = '';
-    } else {
-      codeClasses = 'error';
-      console.log('code error: ', _error);
-    }
-  });
-  const unsubscribeConfigError = configErrorStore.subscribe((_error) => {
-    if (typeof _error === 'undefined') {
-      configClasses = '';
-    } else {
-      configClasses = 'error';
-      console.log('conf error: ', _error);
-    }
-  });
 </script>
 
 <style>