fix: Note position

mermaid-js · Feb 17, 2025 · 6650efc · 6650efc
1 parent a4754ad
commit 6650efc
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.ts b/packages/mermaid/src/diagrams/state/dataFetcher.ts
@@ -355,7 +355,7 @@ export const dataFetcher = (
       let from = itemId;
       let to = noteData.id;
 
-      if (parsedItem.note.position === 'left_of') {
+      if (parsedItem.note.position === 'left of') {
         from = noteData.id;
         to = itemId;
       }

diff --git a/packages/mermaid/src/diagrams/state/stateDb.ts b/packages/mermaid/src/diagrams/state/stateDb.ts
@@ -90,7 +90,7 @@ export interface RootStmt {
 }
 
 interface Note {
-  position?: 'left_of' | 'right_of';
+  position?: 'left of' | 'right of';
   text: string;
 }
 

diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js
@@ -4,6 +4,7 @@ import { StateDB } from './stateDb.js';
 describe('state diagram V2, ', function () {
   // TODO - these examples should be put into ./parser/stateDiagram.spec.js
   describe('when parsing an info graph it', function () {
+    /** @type {StateDB} */
     let stateDb;
     beforeEach(function () {
       stateDb = new StateDB(2);
@@ -346,6 +347,20 @@ describe('state diagram V2, ', function () {
       `;
 
       parser.parse(str);
+      expect(stateDb.getState('Active').note).toMatchInlineSnapshot(`
+        {
+          "position": "left of",
+          "text": "this is a short<br>note",
+        }
+      `);
+      expect(stateDb.getState('Inactive').note).toMatchInlineSnapshot(`
+        {
+          "position": "right of",
+          "text": "A note can also
+              be defined on
+              several lines",
+        }
+      `);
     });
     it('should handle multiline notes with different line breaks', function () {
       const str = `stateDiagram-v2
@@ -356,6 +371,12 @@ describe('state diagram V2, ', function () {
       `;
 
       parser.parse(str);
+      expect(stateDb.getStates().get('State1').note).toMatchInlineSnapshot(`
+        {
+          "position": "right of",
+          "text": "Line1<br>Line2<br>Line3<br>Line4<br>Line5",
+        }
+      `);
     });
     it('should handle floating notes', function () {
       const str = `stateDiagram-v2
@@ -366,15 +387,14 @@ describe('state diagram V2, ', function () {
       parser.parse(str);
     });
     it('should handle floating notes', function () {
-      const str = `stateDiagram-v2\n
+      const str = `stateDiagram-v2
       state foo
       note "This is a floating note" as N1
       `;
-
       parser.parse(str);
     });
     it('should handle notes for composite (nested) states', function () {
-      const str = `stateDiagram-v2\n
+      const str = `stateDiagram-v2
       [*] --> NotShooting
 
       state "Not Shooting State" as NotShooting {
@@ -389,6 +409,12 @@ describe('state diagram V2, ', function () {
       `;
 
       parser.parse(str);
+      expect(stateDb.getState('NotShooting').note).toMatchInlineSnapshot(`
+        {
+          "position": "right of",
+          "text": "This is a note on a composite state",
+        }
+      `);
     });
 
     it('A composite state should be able to link to itself', () => {