From fbe13f4e9e3f3fb505539aa4d191a7f42dac908d Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Wed, 8 May 2024 09:43:01 +0200 Subject: [PATCH 1/2] #5237 fix for duplicate nodes for join fork --- packages/mermaid/src/diagrams/state/stateDb.js | 3 +++ packages/mermaid/src/rendering-util/types.d.ts | 17 +++++++++-------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index 0c8b9fb11..c45b488aa 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -754,6 +754,9 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u * @param nodeData */ function insertOrUpdateNode(nodes, nodeData) { + if (!nodeData.id || nodeData.id === '') { + return; + } const existingNodeData = nodes.find((node) => node.id === nodeData.id); if (existingNodeData) { //update the existing nodeData diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts index 156936845..b4fda2683 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/packages/mermaid/src/rendering-util/types.d.ts @@ -13,13 +13,15 @@ interface Node { label?: string; parentId?: string; position?: string; - styles?: string; - classes?: string; + styles?: string; // Pick one, don't need both `styles` & `style`, or have (nodeStyle + labelStyle) + style?: string; + classes?: string; // Pick one `classes` vs `class` + class?: string; // Flowchart specific properties - labelType?: string; + labelType?: string; // Always use markdown string? domId: string; // Rendering specific properties for both Flowchart and State Diagram nodes - dir?: string; + dir?: string; // Only relevant for isGroup true, i.e. a sub-graph or composite state. haveCallback?: boolean; labelStyle?: string; labelText?: string; @@ -31,15 +33,14 @@ interface Node { ry?: number; shape?: string; tooltip?: string; - type: string; + type: string; // replace with isGroup: boolean, default false width?: number; height?: number; // Specific properties for State Diagram nodes TODO remove and use generic properties intersect?: (point: any) => any; - style?: string; - class?: string; - borders?: string; + + borders?: string; //Maybe have it similar to nodeStyle, labelStyle, have it as borderStyle (check the usage) useRough?: boolean; } From 683695bec27011bb9f89fec410601a2a22337d03 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Wed, 8 May 2024 11:10:05 +0200 Subject: [PATCH 2/2] #5237 add support for note shape --- cypress/platform/knsv2.html | 297 ++++++------------ .../mermaid/src/diagrams/state/stateDb.js | 3 +- .../rendering-elements/nodes.js | 2 + .../rendering-elements/shapes/note.ts | 37 +++ .../mermaid/src/rendering-util/types.d.ts | 2 + 5 files changed, 147 insertions(+), 194 deletions(-) create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 835402752..837063bcb 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -4,7 +4,7 @@ body { /* background: rgb(221, 208, 208); */ - background: #333; + /* background:#333; */ font-family: 'Arial'; /* font-size: 18px !important; */ } h1 { color: grey; } - .mermaid { - border: 1px solid #ddd; - margin: 10px; - } .mermaid2 { display: none; } .mermaid svg { /* font-size: 18px !important; */ - /* background-color: #efefef; */ - background-color: #333; - background-image: radial-gradient(#333 51%, transparent 91%), - radial-gradient(#333 51%, transparent 91%); + background-color: #efefef; + background-image: radial-gradient(#fff 51%, transparent 91%), + radial-gradient(#fff 51%, transparent 91%); background-size: 20px 20px; background-position: 0 0, 10px 10px; background-repeat: repeat; - border: 2px solid rgb(131, 142, 205); } .malware { position: fixed; @@ -79,198 +73,106 @@ 
-      block-beta
-  blockArrowId<["Label"]>(right)
-  blockArrowId2<["Label"]>(left)
-  blockArrowId3<["Label"]>(up)
-  blockArrowId4<["Label"]>(down)
-  blockArrowId5<["Label"]>(x)
-  blockArrowId6<["Label"]>(y)
-  blockArrowId6<["Label"]>(x, down)
-
- 
-block-beta
-  block:e:4
-    columns 2
-      f
-      g
-  end
+stateDiagram
+  State1: The state with a note
+  note right of State1
+      Important information! You can write
+      notes.
+  end note
+
+ 
+stateDiagram-v2
+    [*] --> Active
 
-
- 
-block-beta
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
-
-
- 
-block-beta
-  columns 4
-  a b c d
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
-  i:4
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+
+ 
+stateDiagram-v2
+    state ProActive {
+      state Active {
+        Chimp --> A
+        Chimp --> B
+        Chimp --> C
+      }
+    }
+
+ 
+---
+  handdrawn: false
+---
+stateDiagram-v2
+    state First {
+second
+    }
+
+ 
+stateDiagram-v2
+    [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+ 
+   stateDiagram-v2
+    state fork_state <>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
 
       state join_state <>
       State2 --> join_state
       State3 --> join_state
       join_state --> State4
       State4 --> [*]
+
+ 
+    flowchart TB
+      A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 -->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+
+ 
+flowchart
+Node1:::class1 --> Node2:::class2
+Node1:::class1 --> Node3:::class2
+Node3 --> Node4((I am a circle)):::larger
+
+classDef class1 fill:lightblue
+classDef class2 fill:pink
+classDef larger font-size:30px,fill:yellow
       
-flowchart LR
-  X-- "y" -->z
-
- 
-block-beta
-columns 5
-   A space B
-   A --x B
-
- 
-block-beta
-columns 3
-  a["A wide one"] b:2 c:2 d
-
- 
-block-beta
-  block:e
-      f
-  end
-
- 
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-  end
-  g
-
- 
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-      g
-  end
-  h
-  i
-  j
-
-
- 
-block-beta
-columns 3
-  a b:2
-  block:e:3
-      f
-  end
-  g h i
-
- 
-block-beta
-columns 3
-  a b c
-  e:3
-  f g h
-
- 
-block-beta
-columns 1
-  db(("DB"))
-  blockArrowId6<["   "]>(down)
-  block:ID
-    A
-    B["A wide one in the middle"]
-    C
-  end
-  space
-  D
-  ID --> D
-  C --> D
-  style B fill:#f9F,stroke:#333,stroke-width:4px
-
- 
-block-beta
-  columns 5
-  A1:3
-  A2:1
-  A3
-  B1 B2 B3:3
-
- 
-block-beta
-  block
-    D
-    E
-  end
-  db("This is the text in the box")
-
- 
-block-beta
-
-      block
-        D
-      end
-      A["A: I am a wide one"]
-
- 
-block-beta
-    A["square"]
-    B("rounded")
-    C(("circle"))
-
- 
-block-beta
-    A>"rect_left_inv_arrow"]
-    B{"diamond"}
-    C{{"hexagon"}}
-
- 
-block-beta
-    A(["stadium"])
-
- 
-block-beta
-    %% A[["subroutine"]]
-    %% B[("cylinder")]
-    C>"surprise"]
-
- 
-block-beta
-    A[/"lean right"/]
-    B[\"lean left"\]
-    C[/"trapezoid"\]
-    D[\"trapezoid"/]
-
- - 
-flowchart
-      B
-      style B fill:#f9F,stroke:#333,stroke-width:4px
-
- - 
-      flowchart LR
-      a1 -- apa --> b1
-
- +stateDiagram-v2 + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] 
 flowchart RL
-  subgraph "`one`"
-    id
-  end
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
     
 flowchart RL
@@ -615,8 +517,17 @@ mindmap
       //   useMaxWidth: false,
       // });
       mermaid.initialize({
-        theme: 'dark',
-        startOnLoad: true,
+        handdrawn: true,
+        layout: 'elk',
+        flowchart: { titleTopMargin: 10 },
+        // fontFamily: 'Caveat',
+        fontFamily: 'Kalam',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
+        },
+        fontSize: 16,
         logLevel: 0,
       });
       function callback() {
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index c45b488aa..85f36e6a8 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -45,6 +45,7 @@ import {
   PARENT_ID,
   NOTE,
   PARENT,
+  CSS_EDGE_NOTE_EDGE,
 } from './stateCommon.js';
 import { node } from 'stylis';
 
@@ -704,7 +705,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
       //add parent id to groupData
       groupData.id = parentNodeId;
       //add parent id to noteData
-      noteData.parentId = parentId;
+      noteData.parentId = parentNodeId;
 
       //insert groupData
       insertOrUpdateNode(nodes, groupData);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 008c650c3..4072d717d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -4,6 +4,7 @@ import { stateStart } from './shapes/stateStart.ts';
 import { stateEnd } from './shapes/stateEnd.ts';
 import { forkJoin } from './shapes/forkJoin.ts';
 import { choice } from './shapes/choice.ts';
+import {note} from './shapes/note.ts';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 const formatClass = (str) => {
@@ -20,6 +21,7 @@ const shapes = {
   fork: forkJoin,
   join: forkJoin,
   choice,
+  note,
 };
 
 let nodeElems = {};
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
new file mode 100644
index 000000000..5acc86c86
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -0,0 +1,37 @@
+import { log } from '$root/logger.js';
+import { labelHelper, updateNodeBounds } from './util.js';
+import intersect from '../intersect/index.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+
+export const note = async (parent: SVGAElement, node: Node) => {
+    const useHtmlLabels = node.useHtmlLabels ;
+  if (!useHtmlLabels) {
+    node.centerLabel = true;
+  }
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    'node ' + node.classes,
+    true
+  );
+
+  log.info('Classes = ', node.classes);
+  // add the rect
+  const rect = shapeSvg.insert('rect', ':first-child');
+
+  rect
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('x', -bbox.width / 2 - halfPadding)
+    .attr('y', -bbox.height / 2 - halfPadding)
+    .attr('width', bbox.width + node.padding)
+    .attr('height', bbox.height + node.padding);
+
+  updateNodeBounds(node, rect);
+
+  node.intersect = function (point) {
+    return intersect.rect(node, point);
+  };
+
+  return shapeSvg;
+};
diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts
index b4fda2683..4d10498fe 100644
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -42,6 +42,8 @@ interface Node {
 
   borders?: string; //Maybe have it similar to nodeStyle, labelStyle, have it as borderStyle (check the usage)
   useRough?: boolean;
+  useHtmlLabels?: boolean;
+  centerLabel?: boolean;
 }
 
 // Common properties for any edge in the system