Merge pull request #83 from sidharthv96/house_keeping

Cleanup

src/components/Config.svelte

@@ -1,21 +1,12 @@
 <script>
-  import {
-    codeStore,
-    updateCodeStore,
-    updateConfig,
-    updateCode,
-  } from '../code-store.js';
+  import { codeStore, updateConfig } from '../code-store.js';
   import { configErrorStore } from '../config-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';
   import Error from './Error.svelte';
   import { getResizeHandler, initEditor } from './editor-utils';
   import { watchResize } from 'svelte-watch-resize';
-  import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
-  import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
   export let conf = '';
@@ -25,22 +16,15 @@
   let edit;
   let editorElem = null;
 
-  let decorations = [];
-  const decArr = [];
   let resizeHandler = () => {};
 
   let oldConf = {};
   const handleConfUpdate = (conf) => {
     try {
       console.log(conf);
-      JSON.parse(conf);
-      // 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();
     } catch (e) {
       console.log('Error in parsed', e);
       configErrorStore.set(e);
@@ -55,7 +39,7 @@
       editorElem = document.getElementById('editor-conf');
     }
     if (!conf && state) {
-      conf = JSON.stringify(state.mermaid, null, 2);
+      conf = JSON.stringify(state.mermaid, null, 2) || '{}';
     }
     if (state) {
       code = state.code;
@@ -67,7 +51,6 @@
         language: 'JSON',
       });
       resizeHandler = getResizeHandler(edit);
-      let decorations = [];
       edit.onDidChangeModelContent(function (e) {
         const conf = edit.getValue();
         handleConfUpdate(conf);
@@ -79,7 +62,6 @@
   initEditor(monaco);
 
   const unsubscribeError = configErrorStore.subscribe((_error) => {
-    // console.log('Error ideintified' + _error.toString());
     if (_error) {
       error = _error.toString();
     } else {

src/components/Editor.svelte

@@ -4,7 +4,6 @@
   import { onMount } from 'svelte';
   import { replace } from 'svelte-spa-router';
   import { Base64 } from 'js-base64';
-  // import mermaid from '@mermaid-js/mermaid';
   import mermaid from '@mermaid';
   import Error from './Error.svelte';
   import { getResizeHandler, initEditor } from './editor-utils';
@@ -20,7 +19,6 @@
   let edit;
   export let error = false;
 
-  let decorations = [];
   const decArr = [];
   let editorElem = null;
   let resizeHandler = () => {};
@@ -63,7 +61,6 @@
   };
 
   onMount(async () => {
-    // editorElem = document.querySelector('#editor')
     self.MonacoEnvironment = {
       getWorkerUrl: function (moduleId, label) {
         return './editor.worker.bundle.js';

src/components/Error.svelte

@@ -1,33 +1,6 @@
 <script>
-  import { codeErrorStore } from '../code-error-store.js';
-  import { onMount } from 'svelte';
-
-  onMount(async () => {});
-
-  // export let code = '';
   export let classes = '';
-
-  // export let error = {};
-  // export let token = '';
-  // export let expected = '';
-
-  // export let params = {}
   export let errorText = '';
-
-  // const unsubscribeError = codeErrorStore.subscribe( _error => {
-  // 		if(typeof _error === 'undefined') {
-  // 			classes = 'invisible';
-  // 			error = {};
-  // 			token='';
-  // 			expected='';
-  // 		} else {
-  // 			classes = 'visible';
-  // 			error = _error;
-  // 			console.log('error: ',  _error);
-  // 			token = error.hash.token;
-  // 			expected = error.hash.expected.join(' ');;
-  // 		}
-  // 	});
 </script>
 
 <style>
@@ -36,7 +9,6 @@
     color: white;
     flex: 1;
     padding: 10px;
-    /* position: absolute; */
   }
   .invisible {
     display: none;

src/components/Tag.svelte

@@ -1,11 +1,3 @@
-<script>
-  export let noPadding = false;
-  let contentClass = 'padding';
-  if (noPadding) {
-    contentClass = '';
-  }
-</script>
-
 <style>
   #tag {
     height: auto;
@@ -18,7 +10,6 @@
     border-radius: 4px;
     cursor: default;
     font-size: smaller;
-    /* padding: 8px; */
     color: #52c41a;
     background: #f6ffed;
     border-color: #b7eb8f;

src/components/View.svelte

@@ -3,7 +3,6 @@
   import { codeErrorStore } from '../code-error-store.js';
   import { configErrorStore } from '../config-error-store.js';
   import { onMount } from 'svelte';
-  // import mermaid from '@mermaid-js/mermaid';
   import mermaid from '@mermaid';
 
   const detectType = (text) => {
@@ -53,7 +52,6 @@
     }, 5000);
   };
 
-  let element;
   let container;
   onMount(async () => {
     element = document.querySelector('graph-div');
@@ -96,9 +94,7 @@
     });
   });
 
-  let insertSvg = function (svgCode, bindFunctions) {
-    // element.innerHTML = svgCode;
-  };
+  let insertSvg = function (svgCode, bindFunctions) {};
 
   export let code = '';
   export let configClasses = '';

src/routes/Edit.svelte

@@ -8,7 +8,6 @@
   import Tag from '../components/Tag.svelte';
   import Links from '../components/Links.svelte';
   import { fromUrl } from '../code-store.js';
-  // import pkg from '@mermaid-js/mermaid/package.json'
   import pkg from '@mermaid/package.json';
   import moment from 'moment';
   export let mermaidVersion = pkg.version;
@@ -53,55 +52,21 @@
     }, 1 * 60 * 1000);
   });
 
-  // export let code = '';
-  // export let classes = '';
-  // export let error = {};
-  // export let token = '';
-  // export let expected = '';
   export let params = {};
-  function loadFlowChart() {
-    loadSampleDiagram('FlowChart');
-  }
-  function loadSequenceDiagram() {
-    loadSampleDiagram('SequenceDiagram');
-  }
-  function loadClassDiagram() {
-    loadSampleDiagram('ClassDiagram');
-  }
-  function loadStateDiagram() {
-    loadSampleDiagram('StateDiagram');
-  }
-  function loadGanttChart() {
-    loadSampleDiagram('GanttChart');
-  }
-  function loadPieChart() {
-    loadSampleDiagram('PieChart');
-  }
-  function loadERDiagram() {
-    loadSampleDiagram('ERDiagram');
-  }
-  function loadSampleDiagram(diagramType) {
-    let code = '';
-    switch (diagramType) {
-      case 'FlowChart':
-        code = `graph TD
+  const samples = {
+    'Flow Chart': `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]
-            `;
-        break;
-      case 'SequenceDiagram':
-        code = `sequenceDiagram
+    C -->|Three| F[fa:fa-car Car]`,
+    'Sequence Diagram': `sequenceDiagram
     Alice->>+John: Hello John, how are you?
     Alice->>+John: John, can you hear me?
     John-->>-Alice: Hi Alice, I can hear you!
     John-->>-Alice: I feel great!
-            `;
-        break;
-      case 'ClassDiagram':
-        code = `classDiagram
+            `,
+    'Class Diagram': `classDiagram
     Animal <|-- Duck
     Animal <|-- Fish
     Animal <|-- Zebra
@@ -122,20 +87,16 @@
       +bool is_wild
       +run()
     }
-            `;
-        break;
-      case 'StateDiagram':
-        code = `stateDiagram-v2
+            `,
+    'State Diagram': `stateDiagram-v2
     [*] --> Still
     Still --> [*]
     Still --> Moving
     Moving --> Still
     Moving --> Crash
     Crash --> [*]
-            `;
-        break;
-      case 'GanttChart':
-        code = `gantt
+            `,
+    'Gantt Chart': `gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
     section Section
@@ -144,17 +105,13 @@
     section Another
     Task in sec      :2014-01-12  , 12d
     another task      : 24d
-            `;
-        break;
-      case 'PieChart':
-        code = `pie title Pets adopted by volunteers
+            `,
+    'Pie Chart': `pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
     "Rats" : 15
-            `;
-        break;
-      case 'ERDiagram':
-        code = `erDiagram
+            `,
+    'ER Diagram': `erDiagram
           CUSTOMER }|..|{ DELIVERY-ADDRESS : has
           CUSTOMER ||--o{ ORDER : places
           CUSTOMER ||--o{ INVOICE : "liable for"
@@ -163,10 +120,11 @@
           ORDER ||--|{ ORDER-ITEM : includes
           PRODUCT-CATEGORY ||--|{ PRODUCT : contains
           PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-            `;
-        break;
-    }
-    toUpdateCodeStore(code);
+            `,
+  };
+
+  function loadSampleDiagram(diagramType) {
+    toUpdateCodeStore(samples[diagramType]);
   }
 
   function toUpdateCodeStore(code) {
@@ -270,25 +228,13 @@
   <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>
+      {#each Object.keys(samples) as diagramType, i}
+        <button
+          class="button-style"
+          on:click={(e) => loadSampleDiagram(diagramType)}>
+          {diagramType}
+        </button>
+      {/each}
     </div>
   </div>
   <div id="editor-root">

src/routes/View.svelte

@@ -1,21 +1,10 @@
 <script>
   import { onMount } from 'svelte';
-  import Editor from '../components/Editor.svelte';
   import View from '../components/View.svelte';
-  // import { fromUrl } from '../code-store.js';
 
   onMount(async () => {
-    // fromUrl(params.data);
     ga('send', 'pageview');
   });
-
-  // export let code = '';
-  // export let classes = '';
-
-  // export let error = {};
-  // export let token = '';
-  // export let expected = '';
-  // export let params = {};
 </script>
 
 <style>