From 9fb25310e8d4cedd7ade5e3286a5713c119296a1 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 24 May 2023 11:27:17 +0200 Subject: [PATCH] Fix for regression error in sequenceDiagrams --- cypress/platform/knsv.html | 393 +++--------------- .../mermaid/src/diagrams/sequence/svgDraw.js | 35 +- 2 files changed, 84 insertions(+), 344 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index f6ee1ef03..32710ae8c 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -42,368 +42,75 @@ - 
-flowchart LR
-  subgraph one
-    direction LR
-    A[myClass1] --> B[default]
-    subgraph two
-      direction BT
-      C[myClass2] --> D[default]
-    end
-  end
-
+    
+      sequenceDiagram
+      Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+      loop Loopy
+          Bob->>Alice: Pasten
+      end
     

-    
-flowchart LR
-  classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
-  classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
-  classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
-
-  O0("Joe")
-  class O0 aPID;
-
-  O1("Person")
-  class O1 crm;
-  O0 -- has type -->O1["Person"]
-
-  O2("aat:300411314")
-  class O2 type;
-  click O2 function "Sorry the newline html tags are not being processed correctly
 So all of this appears on the 
 same line."
-  O0 -- has type -->O2["Bug"]
-  click O0 function "Lots of great info about Joe
Lots of great info about Joe
burt
fred";
-    

-    
-flowchart TD
-    subgraph test
-    direction TB
-    subgraph test2
-      direction LR
-      F --> D
-    end
-    subgraph test3
-      direction TB
-      G --> H
-    end
-    end
-    

-    
-flowchart TD
-
-  release-branch[Create Release Branch]:::relClass
-  develop-branch[Update Develop Branch]:::relClass
-  github-release-draft[GitHub Release Draft]:::relClass
-  trigger-pipeline[Trigger Jenkins pipeline]:::fixClass
-  github-release[GitHub Release]:::postClass
-
-  build-ready --> release-branch
-  build-ready --> develop-branch
-  release-branch --> jenkins-release-build
-  jenkins-release-build --> github-release-draft
-  jenkins-release-build --> install-release
-  install-release --> verify-release
-  jenkins-release-build --> announce
-  github-release-draft --> github-release
-  verify-release --> verify-check
-  verify-check -- Yes --> github-release
-  verify-check -- No --> release-fix
-  release-fix --> release-branch-pr
-  verify-check -- No --> delete-artifacts
-  release-branch-pr --> trigger-pipeline
-  delete-artifacts --> trigger-pipeline
-  trigger-pipeline --> jenkins-release-build
-
-
-    

-    
-flowchart LR
-        a["Haiya"]===>b
-    

-    
-flowchart TD
-    A --> B
-    A --> C
-    B --> C
-    

-    
-flowchart TD
-      A([stadium shape test])
-      A -->|Get money| B([Go shopping])
-      B --> C([Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?])
-      C -->|One| D([Laptop])
-      C -->|Two| E([iPhone])
-      C -->|Three| F([Car
wroom wroom])
-      click A "index.html#link-clicked" "link test"
-      click B testClick "click test"
-      classDef someclass fill:#f96;
-      class A someclass;
-      class C someclass;
-    

-    
-   sequenceDiagram
-      title: My Sequence Diagram Title
-      accTitle: My Acc Sequence Diagram
-      accDescr: My Sequence Diagram Description
-
-      Alice->>John: Hello John, how are you?
-      John-->>Alice: Great!
-      Alice-)John: See you later!
-    

-    
-graph TD
-    A -->|000| B
-    B -->|111| C
-
-    linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
-    

-    
-  journey
-      accTitle: My User Journey Diagram
-      accDescr: My User Journey Diagram Description
-
-      title My working day
-      section Go to work
-        Make tea: 5: Me
-        Go upstairs: 3: Me
-        Do work: 1: Me, Cat
-      section Go home
-        Go downstairs: 5: Me
-        Sit down: 5: Me
-    

-    
-        info
-    

-    
-requirementDiagram
-      accTitle: My req Diagram
-      accDescr: My req Diagram Description
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement test_req2 {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement test_req3 {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-
-    test_entity - satisfies -> test_req2
-    test_req - traces -> test_req2
-    test_req - contains -> test_req3
-    test_req <- copies - test_entity2
-    

-    
-gantt
-    dateFormat  YYYY-MM-DD
-    title       Adding GANTT diagram functionality to mermaid
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
-
-    section A section
-    Completed task            :done,    des1, 2014-01-06,2014-01-08
-    Active task               :active,  des2, 2014-01-09, 3d
-    Future task               :         des3, after des2, 5d
-    Future task2              :         des4, after des3, 5d
-
-    section Critical tasks
-    Completed task in the critical line :crit, done, 2014-01-06,24h
-    Implement parser and jison          :crit, done, after des1, 2d
-    Create tests for parser             :crit, active, 3d
-    Future task in critical line        :crit, 5d
-    Create tests for renderer           :2d
-    Add to mermaid                      :1d
-    Functionality added                 :milestone, 2014-01-25, 0d
-
-    section Documentation
-    Describe gantt syntax               :active, a1, after des1, 3d
-    Add gantt diagram to demo page      :after a1  , 20h
-    Add another diagram to demo page    :doc1, after a1  , 48h
-
-    section Last section
-    Describe gantt syntax               :after doc1, 3d
-    Add gantt diagram to demo page      :20h
-    Add another diagram to demo page    :48h
-    

-    
-stateDiagram
-  state Active {
-    Idle
-  }
-  Inactive --> Idle: ACT
-  Active --> Active: LOG
-    

-    
-      flowchart TB
-        accTitle: My flowchart
-        accDescr: My flowchart Description
-        subgraph One
-          a1-->a2-->a3
+    
+      sequenceDiagram
+        participant Alice
+        participant Bob
+        participant John as John
Second Line
+        Alice ->> Bob: Hello Bob, how are you?
+        Bob-->>John: How about you John?
+        Bob--x Alice: I am good thanks!
+        Bob-x John: I am good thanks!
+        Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.
+        Bob-->Alice: Checking with John...
+        alt either this
+          Alice->>John: Yes
+          else or this
+          Alice->>John: No
+          else or this will happen
+          Alice->John: Maybe
+        end
+        par this happens in parallel
+        Alice -->> Bob: Parallel message 1
+        and
+        Alice -->> John: Parallel message 2
         end
     

-    
-        sequenceDiagram
-          A ->> B: 1
-          rect rgb(204, 0, 102)
-            break yes
-              rect rgb(0, 204, 204)
-                C ->> C: 0
-              end
-            end
-          end
-          B ->> A: Return
-    

-    
-classDiagram
-accTitle: My class diagram
-accDescr: My class diagram Description
-Class01 <|-- AveryLongClass : Cool
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-class Class10 {
-  int id
-  size()
-}
-    

-    
-%%{init: {'config': {'wrap': true }}}%%
-        sequenceDiagram
-        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-        A->>Bob: Hola
-        Bob-->A: Pasten !
-    

-    
-      gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       branch featureA
-       commit id:"FIX"
-       commit id: "FIX-2"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       cherry-pick id:"FIX"
-       checkout develop
-       commit id:"C"
-       merge featureA
-    

-    
-flowchart 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]
-    

-    
-        classDiagram
-          Animal "1" <|-- Duck
-          Animal <|-- Fish
-          Animal <--o Zebra
-          Animal : +int age
-          Animal : +String gender
-          Animal: +isMammal()
-          Animal: +mate()
-          class Duck{
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          class Fish{
-            -int sizeInFeet
-            -canEat()
-          }
-          class Zebra{
-            +bool is_wild
-            +run()
-          }
-    

-    
-        erDiagram
-    CAR ||--o{ NAMED-DRIVER : allows
-    CAR {
-        string registrationNumber
-        string make
-        string model
-    }
-    PERSON ||--o{ NAMED-DRIVER : is
-    PERSON {
-        string firstName
-        string lastName
-        int age
-    }
-    

-
-    
-    
-    
   
 
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 2358b20ad..a8feea2a1 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -578,7 +578,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
   txt.class = 'labelText';
 
   drawLabel(g, txt);
-  txt = svgDrawCommon.getTextObj();
+  txt = getTextObj();
   txt.text = loopModel.title;
   txt.x = loopModel.startx + labelBoxWidth / 2 + (loopModel.stopx - loopModel.startx) / 2;
   txt.y = loopModel.starty + boxMargin + boxTextMargin;
@@ -764,6 +764,37 @@ export const insertArrowCrossHead = function (elem) {
   // this is actual shape for arrowhead
 };
 
+export const getTextObj = function () {
+  return {
+    x: 0,
+    y: 0,
+    fill: undefined,
+    anchor: undefined,
+    style: '#666',
+    width: undefined,
+    height: undefined,
+    textMargin: 0,
+    rx: 0,
+    ry: 0,
+    tspan: true,
+    valign: undefined,
+  };
+};
+
+export const getNoteRect = function () {
+  return {
+    x: 0,
+    y: 0,
+    fill: '#EDF2AE',
+    stroke: '#666',
+    width: 100,
+    anchor: 'start',
+    height: 100,
+    rx: 0,
+    ry: 0,
+  };
+};
+
 const _drawTextCandidateFunc = (function () {
   /**
    * @param {any} content
@@ -1004,6 +1035,8 @@ export default {
   insertDatabaseIcon,
   insertComputerIcon,
   insertClockIcon,
+  getTextObj,
+  getNoteRect,
   popupMenu,
   popdownMenu,
   fixLifeLineHeights,