feat: New diagrams

Merge branch 'master' into sidv/tsMermaid
* master: chore(deps): update all non-major dependencies chore(deps): update dependency node-html-parser to v6 chore(deps): update dependency font-awesome to v6 chore(deps): update actions/setup-node action to v3 fix(deps): pin dependency analytics-plugin-plausible to 0.0.6
2022-09-09 23:18:02 +05:30 · 2022-09-09 20:58:44 +05:30 · 2022-09-09 20:58:32 +05:30 · 2022-09-09 18:51:59 +05:30 · 2022-09-09 18:49:48 +05:30 · 2022-09-09 18:49:13 +05:30
7 changed files with 104 additions and 68 deletions
@@ -35,7 +35,7 @@ describe('Check actions', () => {

 		// Verify downloaded file is different for different diagrams
 		cy.contains('Sample Diagrams').click();
-		cy.contains('ER Diagram').click();
+		cy.contains('ER').click();

 		cy.get(`#downloadPNG`).click();
 		verifyFileSize('diagram', 'png', 46_000);
@@ -13,13 +13,13 @@ describe('Editor docs tests', () => {
 	});

 	it('Test to see if the correct URL loads when changing from one diagram to other', () => {
-		cy.contains('Flow Chart').click();
+		cy.contains('Flow').click();
 		cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');

 		cy.contains('Config').click();
 		cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');

-		cy.contains('Sequence Diagram').click();
+		cy.contains('Sequence').click();
 		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');

 		cy.contains('Code').click();
@@ -27,7 +27,7 @@ describe('Editor docs tests', () => {
 	});

 	it("Test to check URLs for a case where config URL doesn't exist", () => {
-		cy.contains('State Diagram').click();
+		cy.contains('State').click();
 		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');

 		cy.contains('Config').click();
@@ -20,9 +20,9 @@ describe('Site Loads', () => {

 	it('should load sample diagrams when clicked', () => {
 		cy.contains('Sample Diagrams').click();
-		cy.contains('Pie Chart').click();
+		cy.contains('Pie').click();
 		cy.contains('pie title Pets adopted by volunteers');
-		cy.contains('Class Diagram').click();
+		cy.contains('Class').click();
 		cy.contains('classDiagram');
 	});

@@ -16,7 +16,7 @@ module.exports = {
      "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
    }
  },
-  "__version": "10.6.0",
+  "__version": "10.7.0",
  "Auto sync tests": {
    "should dim diagram when code is edited": {
      "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"
@@ -26,7 +26,6 @@
 		"@sveltejs/kit": "1.0.0-next.480",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/svelte": "3.2.1",
-		"@types/mermaid": "8.2.9",
 		"@types/pako": "2.0.0",
 		"@types/uuid": "8.3.4",
 		"@typescript-eslint/eslint-plugin": "5.36.2",
@@ -70,7 +69,7 @@
 		"analytics-plugin-plausible": "0.0.6",
 		"daisyui": "2.25.0",
 		"js-base64": "3.7.2",
-		"mermaid": "9.1.6",
+		"mermaid": "9.2.0-rc1",
 		"moment": "2.29.4",
 		"monaco-editor": "0.34.0",
 		"monaco-mermaid": "1.0.6",
@@ -4,19 +4,18 @@
 	import { logEvent } from '$lib/util/stats';

 	const samples = {
-		'Flow Chart': `graph TD
+		Flow: `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]`,
-		'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
@@ -36,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
@@ -54,14 +51,12 @@
    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
+    "Rats" : 15`,
+		ER: `erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
@@ -69,8 +64,7 @@
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-            `,
+    PRODUCT ||--o{ ORDER-ITEM : "ordered in"`,
 		'User Journey': `journey
    title My working day
    section Go to work
@@ -79,9 +73,8 @@
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
-      Sit down: 3: Me
-      `,
-		'Git Graph': `    gitGraph
+      Sit down: 3: Me`,
+		Git: `gitGraph
    commit
    commit
    branch develop
@@ -91,8 +84,24 @@
    checkout main
    merge develop
    commit
-      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 eatures
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid`
 	};

 	const loadSampleDiagram = (diagramType: string): void => {
@@ -102,13 +111,34 @@
 		});
 		void logEvent('loadSampleDiagram', { diagramType });
 	};
+
+	// Adding in this array will add an icon to the preset menu
+	const newDiagrams: Array<keyof typeof samples> = ['Mindmap'];
+	const diagramOrder: Array<keyof typeof samples> = [
+		'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>
@@ -410,11 +410,6 @@
  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==

-"@types/mermaid@8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@types/mermaid/-/mermaid-8.2.9.tgz#1844505dcffcd47703e94628a6200583d35c2c76"
-  integrity sha512-f1i8fNoVFVJXedk+R7GcEk4KoOWzWAU3CzFqlVw1qWKktfsataBERezCz1pOdKy8Ec02ZdPQXGM7NU2lPHABYQ==
-
 "@types/node@*":
  version "15.0.2"
  resolved "https://registry.npmjs.org/@types/node/-/node-15.0.2.tgz"
@@ -2802,6 +2797,11 @@ extsprintf@^1.2.0:
  resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.0.tgz"
  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=

+fast-clone@^1.5.13:
+  version "1.5.13"
+  resolved "https://registry.yarnpkg.com/fast-clone/-/fast-clone-1.5.13.tgz#7fe17542ae1c872e71bf80d177d00c11f51c2ea7"
+  integrity sha512-0ez7coyFBQFjZtId+RJqJ+EQs61w9xARfqjqK0AD9vIUkSxWD4HvPt80+5evebZ1tTnv1GYKrPTipx7kOW5ipA==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
@@ -3750,19 +3750,21 @@ merge2@^1.3.0, merge2@^1.4.1:
  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==

-mermaid@9.1.6:
-  version "9.1.6"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.1.6.tgz#e34d5ad632455df014784d7c77af21fd51388341"
-  integrity sha512-oBuQk7s55wQgEgH/AK0GYY8U0kBqOIGK9QlJL+VYxh+1kZQtU9tNwoy0gWCfBJDaFIRdfpc/fm9PagaIXg6XFQ==
+mermaid@9.2.0-rc1:
+  version "9.2.0-rc1"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.2.0-rc1.tgz#bca73f3ff6f7ab92fca6494e29b6f1581f776aea"
+  integrity sha512-6APtrqscRxKERUkuvB9hyL6x2j9iqiCzBQxg8Pmw1IJDfcmirO6FEUdtIDQdAtj4fKqtdF9rXdH4Rd/DlfEXNw==
  dependencies:
    "@braintree/sanitize-url" "^6.0.0"
    d3 "^7.0.0"
    dagre "^0.8.5"
    dagre-d3 "^0.6.4"
    dompurify "2.3.10"
+    fast-clone "^1.5.13"
    graphlib "^2.1.8"
    khroma "^2.0.0"
-    moment-mini "2.24.0"
+    moment-mini "^2.24.0"
+    non-layered-tidy-tree-layout "^2.0.2"
    stylis "^4.0.10"

 micromatch@^4.0.4, micromatch@^4.0.5:
@@ -3824,10 +3826,10 @@ mkdirp@^0.5.1, mkdirp@~0.5.1:
  dependencies:
    minimist "^1.2.5"

-moment-mini@2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
-  integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
+moment-mini@^2.24.0:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
+  integrity sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==

 moment@2.29.4:
  version "2.29.4"
@@ -3911,6 +3913,11 @@ node-releases@^2.0.6:
  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==

+non-layered-tidy-tree-layout@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz#57d35d13c356643fc296a55fb11ac15e74da7804"
+  integrity sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==
+
 nopt@~4.0.1:
  version "4.0.3"
  resolved "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz"
Author	SHA1	Message	Date
Sidharth Vinod	bc9d53b701	feat: New diagrams	2022-09-09 23:18:02 +05:30
Sidharth Vinod	c21db93399	Merge branch 'master' into sidv/tsMermaid * master: chore(deps): update all non-major dependencies chore(deps): update dependency node-html-parser to v6 chore(deps): update dependency font-awesome to v6 chore(deps): update actions/setup-node action to v3 fix(deps): pin dependency analytics-plugin-plausible to 0.0.6	2022-09-09 20:58:44 +05:30
Sidharth Vinod	9777be9a7b	Rename samples	2022-09-09 20:58:32 +05:30
Sidharth Vinod	00b80d224c	Remove mermaid types	2022-09-09 18:51:59 +05:30
Sidharth Vinod	2aa4666dab	Merge branch 'master' into sidv/tsMermaid * master: chore(deps): update all non-major dependencies chore(deps): update dependency @types/pako to v2	2022-09-09 18:49:48 +05:30
Sidharth Vinod	19c0c698ce	Mermaid 9.2.0-rc1	2022-09-09 18:49:13 +05:30