Fix Preset

src/lib/components/Preset.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
   import { updateCode } from '$lib/util/state';
-  import Card from '$lib/components/card/card.svelte';
+  import Card from '$lib/components/Card/Card.svelte';
+  import { logEvent } from '$lib/util/stats';
 
   const samples = {
-    'Flow Chart': `flowchart TD
+    Flow: `flowchart 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]`,
-    'Sequence Diagram': `sequenceDiagram
+    Sequence: `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!
-            `,
-    'Class Diagram': `classDiagram
+    John-->>-Alice: I feel great!`,
+    Class: `classDiagram
     Animal <|-- Duck
     Animal <|-- Fish
     Animal <|-- Zebra
@@ -35,17 +35,15 @@
     class Zebra{
       +bool is_wild
       +run()
-    }
-            `,
-    'State Diagram': `stateDiagram-v2
+    }`,
+    State: `stateDiagram-v2
     [*] --> Still
     Still --> [*]
     Still --> Moving
     Moving --> Still
     Moving --> Crash
-    Crash --> [*]
-            `,
-    'Gantt Chart': `gantt
+    Crash --> [*]`,
+    Gantt: `gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
     section Section
@@ -53,24 +51,21 @@
     Another task     :after a1  , 20d
     section Another
     Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-            `,
-    'Pie Chart': `pie title Pets adopted by volunteers
+    another task      : 24d`,
+    Pie: `pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
-    "Rats" : 15
-            `,
-    'ER Diagram': `erDiagram
-          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-          CUSTOMER ||--o{ ORDER : places
-          CUSTOMER ||--o{ INVOICE : "liable for"
-          DELIVERY-ADDRESS ||--o{ ORDER : receives
-          INVOICE ||--|{ ORDER : covers
-          ORDER ||--|{ ORDER-ITEM : includes
-          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-            `,
-    'User Journey': `  journey
+    "Rats" : 15`,
+    ER: `erDiagram
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+    CUSTOMER ||--o{ ORDER : places
+    CUSTOMER ||--o{ INVOICE : "liable for"
+    DELIVERY-ADDRESS ||--o{ ORDER : receives
+    INVOICE ||--|{ ORDER : covers
+    ORDER ||--|{ ORDER-ITEM : includes
+    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+    PRODUCT ||--o{ ORDER-ITEM : "ordered in"`,
+    'User Journey': `journey
     title My working day
     section Go to work
       Make tea: 5: Me
@@ -78,20 +73,73 @@
       Do work: 1: Me, Cat
     section Go home
       Go downstairs: 5: Me
-      Sit down: 3: Me
-      `
+      Sit down: 3: Me`,
+    Git: `gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit`,
+    Mindmap: `mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectivness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid`
   };
 
-  const loadSampleDiagram = (diagramType: string): void => {
-    updateCode(samples[diagramType], true, true);
+  type SampleTypes = keyof typeof samples;
+  const loadSampleDiagram = (diagramType: SampleTypes): void => {
+    updateCode(samples[diagramType], {
+      updateDiagram: true,
+      resetPanZoom: true
+    });
+    logEvent('loadSampleDiagram', { diagramType });
   };
+
+  // Adding in this array will add an icon to the preset menu
+  const newDiagrams: SampleTypes[] = ['Mindmap'];
+  const diagramOrder: SampleTypes[] = [
+    'Sequence',
+    'Flow',
+    'Class',
+    'State',
+    'ER',
+    'Gantt',
+    'User Journey',
+    'Git',
+    'Pie',
+    'Mindmap'
+  ];
 </script>
 
 <Card title="Sample Diagrams" isOpen={false}>
-  <div class="flex gap-2 flex-wrap p-2">
-    {#each Object.keys(samples) as sample}
-      <button class="btn btn-primary normal-case btn-sm" on:click={() => loadSampleDiagram(sample)}
-        >{sample}</button>
+  <div class="flex flex-wrap p-2 gap-2">
+    {#each diagramOrder as sample}
+      <button
+        class="btn btn-sm btn-primary w-28 normal-case flex-grow"
+        on:click={() => loadSampleDiagram(sample)}>
+        {sample}
+        {#if newDiagrams.includes(sample)}
+          <span class="ml-2 fa fa-heart" />
+        {/if}
+      </button>
     {/each}
   </div>
 </Card>