#5237 add support for note shape

2025-01-14 06:43:25 +08:00 · 2024-05-08 11:10:05 +02:00 · 2024-05-08 11:10:05 +02:00 · 683695bec2
commit 683695bec2
parent fbe13f4e9e
5 changed files with 147 additions and 194 deletions
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@ -32,30 +32,24 @@
    <style>
      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 @@
  </head>
  <body>
    <pre id="diagram" class="mermaid">
-      block-beta
-  blockArrowId<["Label"]>(right)
-  blockArrowId2<["Label"]>(left)
-  blockArrowId3<["Label"]>(up)
-  blockArrowId4<["Label"]>(down)
-  blockArrowId5<["Label"]>(x)
-  blockArrowId6<["Label"]>(y)
-  blockArrowId6<["Label"]>(x, down)
-    </pre>
-    <pre id="diagram" class="mermaid">
-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
+      </pre
+    >
+    <pre id="diagram" class="mermaid2">
+stateDiagram-v2
+    [*] --> Active

-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
-
-    </pre>
-    <pre id="diagram" class="mermaid">
-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
+    }
+      </pre
+    >
+    <pre id="diagram" class="mermaid2">
+stateDiagram-v2
+    state ProActive {
+      state Active {
+        Chimp --> A
+        Chimp --> B
+        Chimp --> C
+      }
+    }
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+---
+  handdrawn: false
+---
+stateDiagram-v2
+    state First {
+second
+    }
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+stateDiagram-v2
+    [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+   stateDiagram-v2
+    state fork_state <<fork>>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+    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
+    </pre>
+    <pre id="diagram" class="mermaid2">
+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
      </pre
    >
    <pre id="diagram" class="mermaid2">
-flowchart LR
-  X-- "y" -->z
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 5
-   A space B
-   A --x B
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 3
-  a["A wide one"] b:2 c:2 d
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  block:e
-      f
-  end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-  end
-  g
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-      g
-  end
-  h
-  i
-  j
-
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 3
-  a b:2
-  block:e:3
-      f
-  end
-  g h i
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-columns 3
-  a b c
-  e:3
-  f g h
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-columns 1
-  db(("DB"))
-  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(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
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  columns 5
-  A1:3
-  A2:1
-  A3
-  B1 B2 B3:3
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  block
-    D
-    E
-  end
-  db("This is the text in the box")
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-
-      block
-        D
-      end
-      A["A: I am a wide one"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A["square"]
-    B("rounded")
-    C(("circle"))
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A>"rect_left_inv_arrow"]
-    B{"diamond"}
-    C{{"hexagon"}}
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A(["stadium"])
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    %% A[["subroutine"]]
-    %% B[("cylinder")]
-    C>"surprise"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A[/"lean right"/]
-    B[\"lean left"\]
-    C[/"trapezoid"\]
-    D[\"trapezoid"/]
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
-flowchart
-      B
-      style B fill:#f9F,stroke:#333,stroke-width:4px
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
-      flowchart LR
-      a1 -- apa --> b1
-    </pre>
-
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]    </pre
+    >
    <pre id="diagram" class="mermaid2">
 flowchart RL
-  subgraph "`one`"
-    id
-  end
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
    </pre>
    <pre id="diagram" class="mermaid2">
 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() {
--- 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);
--- 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 = {};
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ 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;
+};
--- 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