From e3164d8d447a304cb0843e90b1bcd07c386608e5 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sun, 9 May 2021 11:12:22 +0200
Subject: [PATCH] #2055 Fix for how ids are set to notes

---
 .../rendering/stateDiagram-v2.spec.js         | 13 ++++++
 cypress/platform/knsv.html                    | 43 ++++---------------
 src/diagrams/state/stateRenderer-v2.js        |  2 +-
 3 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 1b230c56f..7574de9bc 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -385,6 +385,19 @@ stateDiagram-v2
       }
     );
   });
+  it('v2 should handle multiple notes added to one state', () => {
+    imgSnapshotTest(
+      `
+stateDiagram-v2
+    MyState
+    note left of MyState : I am a leftie
+    note right of MyState : I am a rightie
+    `,
+      {
+        logLevel: 0, fontFamily: 'courier',
+      }
+    );
+  });
   it('v2 handle transition from one state in a composite state to a composite state', () => {
     imgSnapshotTest(
       `
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 2e9434353..134573957 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -10,7 +10,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        background:#333;
+        /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
         }
@@ -28,39 +28,12 @@
     <div class="flex">
 
 <div class="mermaid" style="width: 100%; height: 20%;">
-    %%{init:{
-"themeVariables": {
-    "transitionColor":"red",
-    "labelColor":"yellow",
-    "transitionLabelColor":"blue",
-    "stateBkg":"green",
-    "compositeBackground":"pink",
-    "altBackground":"purple",
-    "clusterTitleBackground":"blue",
-    "stateBorder":"red",
-    "noteBorderColor":"#522",
-    "noteBkgColor":"#522",
-    "noteTextColor":"white"
-}}}%%
-    %%{int:{
-"themeVariables": {
-    "altBackground":"purple"
-}}}%%
-stateDiagram-v2
-  state CompositeState {
-    state AnotherCompositeState {
-      AnotherState --> YetANotherState:a label
-    }
-    --
+stateDiagram
     MyState
-  }
-  note left of CompositeState
-    Important information! You can write
-    notes.
-  end note
-
+    note left of MyState : I am a leftie
+    note right of MyState : I am a rightie
 </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid2" style="width: 100%; height: 20%;">
     %%{int:{
 "themeVariables": {
     "transitionColor":"red",
@@ -80,7 +53,7 @@ stateDiagram
 }
 
 </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid2" style="width: 100%; height: 20%;">
 sequenceDiagram
     Alice->>+John: Hello John, how are you?
     Alice->>+John: John, can you hear me?
@@ -94,7 +67,7 @@ sequenceDiagram
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'neutral',
+        theme: 'default',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
@@ -108,7 +81,7 @@ sequenceDiagram
         state:{
           nodeSpacing: 50,
           rankSpacing: 50,
-          // defaultRenderer: 'dagre-wrapper',
+          defaultRenderer: 'dagre-wrapper',
         },
 
         fontSize: 18,
diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js
index 0892b797b..521c04395 100644
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -117,7 +117,7 @@ const setupNode = (g, parent, node, altFlag) => {
         labelText: node.note.text,
         classes: 'statediagram-note', //classStr,
         style: '', //styles.style,
-        id: node.id + '----note',
+        id: node.id + '----note-' + cnt,
         domId: 'state-' + node.id + '----note-' + cnt,
         type: nodeDb[node.id].type,
         padding: 15 //getConfig().flowchart.padding