From 0d7aaae0ff3be4ab31951c6ae9ce9723b72dcb76 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 5 Sep 2024 16:40:59 +0200 Subject: [PATCH 1/4] Fix for issues with self loops --- .../rendering/flowchart-v2.spec.js | 20 +++- cypress/platform/knsv2.html | 100 +++++++++++++++--- .../layout-algorithms/dagre/index.js | 6 +- 3 files changed, 107 insertions(+), 19 deletions(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 452cdb5a00..4587bb07a9 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -786,7 +786,7 @@ A ~~~ B `--- title: Subgraph nodeSpacing and rankSpacing example config: - flowchart: + flowchart: nodeSpacing: 250 rankSpacing: 250 --- @@ -1052,5 +1052,23 @@ end } ); }); + it('Should render self-loops', () => { + imgSnapshotTest( + `flowchart + A --> A + subgraph B + B1 --> B1 + end + subgraph C + subgraph C1 + C2 --> C2 + end + end + `, + { + flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } }, + } + ); + }); }); }); diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index a3cbf60bfc..fe587b8d23 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -84,7 +84,7 @@
- 
+      
 ---
   title: hello2
   config:
@@ -244,30 +244,98 @@
 
 
 

+
+      
+---
+config:
+  look: neo
+---
+flowchart RL
+    subgraph "   "
+        A5@{ shape: manual-file, label: "a label"}@
+        B5@{ shape: manual-input, label: "a label" }@
+        C5@{ shape: mul-doc, label: "a label" }@
+        D5@{ shape: mul-proc, label: "a label" }@
+        E5@{ shape: paper-tape, label: "a label" }@
+        B3@{ shape: das, label: "a label" }@
+        C3@{ shape: disk, label: "a label" }@
+        D4@{ shape: lin-doc, label: "a label" }@
+        E4@{ shape: loop-limit, label: "a label" }@
+    end
+    subgraph "   "
+        B6@{ shape: summary, label: "a label" }@
+        C6@{ shape: tag-we-rect, label: "a label" }@
+        D6@{ shape: tag-rect, label: "a label" }@
+        A2@{ shape: fork}@
+        B2@{ shape: hourglass }@
+        C2@{ shape: comment, label: "I am a comment" }@
+        D2@{ shape: bolt }@
+        D3@{ shape: disp, label: "a label" }@
+        C4@{ shape: junction, label: "a label" }@
+        A4@{ shape: extract, label: "a label"}@
+        B52[a fr]@{ shape: fr }@
+    end
+    subgraph " "
+        A1@{ shape: text, label: This is a textblock}@
+        B1@{ shape: card, label: "a label" }@
+        C1@{ shape: lined-proc, label: "a label" }@
+        D1@{ shape: start, label: "a label" }@
+        E1@{ shape: stop, label: "a label" }@
+        E2@{ shape: doc, label: "a label" }@
+        A6@{ shape: stored-data, label: "a label"}@
+        A3@{ shape: delay, label: "a label" }@
+        E3@{ shape: div-proc, label: "a label" }@
+        B4[a label]@{ shape: win-pane }@
+    end
+      

       
 ---
   title: hello2
   config:
     look: handDrawn
-    layout: dagre
     elk:
-        nodePlacementStrategy: BRANDES_KOEPF
+      
 ---
-stateDiagram-v2
-  A --> A
-  state A {
-    B --> D
-    state B {
-      C
-    }
-    state D {
-      E
-    }
-  }
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TD
+
+    A([Start]) -->|go to booking page| B("select
+    ISBS booking no")
+    A --> QQ{cancel booking}
+    A --> RR{no show}
+    A --> SS{change booking}
+    B -->C(wmpay_request_payment.request_type= 'partial',
+ wmpay_request_payment.status= 'paid',
+ pos_booking.booking_status= ‘partial’ and 'full_deposit')
+ style C text-align:left
+    C -->D{manage booking}
+
+    D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
+    E -->F{กดปุ่ม 'cancel' หรือไม่}
+    F -->|Yes|G[ระบบบันทึกค่าใหม่
+    และไม่สามารถแก้ไขข้อมูลได้]
+    F -->|No|H[กดปุ่ม 'close']
+    H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
+    G -->|ระบบส่งข้อมูล|I[(POS_database)]
+    I -->|pos_booking.booking_status='cancel'|Z([End])
+
+
+    D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
+    J -->K{กดปุ่ม 'noshow' หรือไม่}
+    K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
+    Product_id: 439,
+    ItemName: no show]
+     style L text-align:left
+
+     K -->|No|O[กดปุ่ม 'close']
+     O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
+    L -->M[ระบบบันทึกค่าใหม่]
+    M -->|ระบบส่งข้อมูล|N[(POS_database)]
+    N -->|pos_booking.booking_status=‘noshow’|Z
 
 
-

+
+
 ---
   title: hello2
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
index 307242675a..0d754f6614 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -349,8 +349,10 @@ export const render = async (data4Layout, svg) => {
       edgeMid.arrowTypeEnd = 'none';
       edgeMid.id = nodeId + '-cyclic-special-mid';
       edge2.label = '';
-      edge1.fromCluster = nodeId;
-      edge2.toCluster = nodeId;
+      if (node.isGroup) {
+        edge1.fromCluster = nodeId;
+        edge2.toCluster = nodeId;
+      }
       edge2.id = nodeId + '-cyclic-special-2';
       graph.setEdge(nodeId, specialId1, edge1, nodeId + '-cyclic-special-0');
       graph.setEdge(specialId1, specialId2, edgeMid, nodeId + '-cyclic-special-1');

From aa259e03f2949fa67efd4d044dc56e08de8d6962 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 5 Sep 2024 17:47:12 +0200
Subject: [PATCH 2/4] Updated cypress test for self-loops

---
 cypress/integration/rendering/flowchart-v2.spec.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 4587bb07a9..66452f4b2f 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1062,7 +1062,12 @@ end
           subgraph C
             subgraph C1
               C2 --> C2
+              subgraph D
+                D1 --> D1
+              end
+              D --> D
             end
+            C1 --> C1
           end
         `,
         {

From b4941aa4cea7ccc2e418eaca6511f44222b89e99 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 6 Sep 2024 18:43:22 +0200
Subject: [PATCH 3/4] Cleanup of test-file

---
 cypress/platform/knsv2.html | 179 +-----------------------------------
 1 file changed, 1 insertion(+), 178 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index fe587b8d23..80406b9391 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -83,8 +83,7 @@
   
 
   
-    

-      
+    
 ---
   title: hello2
   config:
@@ -243,183 +242,7 @@
 
 
 
-

-
-      
----
-config:
-  look: neo
----
-flowchart RL
-    subgraph "   "
-        A5@{ shape: manual-file, label: "a label"}@
-        B5@{ shape: manual-input, label: "a label" }@
-        C5@{ shape: mul-doc, label: "a label" }@
-        D5@{ shape: mul-proc, label: "a label" }@
-        E5@{ shape: paper-tape, label: "a label" }@
-        B3@{ shape: das, label: "a label" }@
-        C3@{ shape: disk, label: "a label" }@
-        D4@{ shape: lin-doc, label: "a label" }@
-        E4@{ shape: loop-limit, label: "a label" }@
-    end
-    subgraph "   "
-        B6@{ shape: summary, label: "a label" }@
-        C6@{ shape: tag-we-rect, label: "a label" }@
-        D6@{ shape: tag-rect, label: "a label" }@
-        A2@{ shape: fork}@
-        B2@{ shape: hourglass }@
-        C2@{ shape: comment, label: "I am a comment" }@
-        D2@{ shape: bolt }@
-        D3@{ shape: disp, label: "a label" }@
-        C4@{ shape: junction, label: "a label" }@
-        A4@{ shape: extract, label: "a label"}@
-        B52[a fr]@{ shape: fr }@
-    end
-    subgraph " "
-        A1@{ shape: text, label: This is a textblock}@
-        B1@{ shape: card, label: "a label" }@
-        C1@{ shape: lined-proc, label: "a label" }@
-        D1@{ shape: start, label: "a label" }@
-        E1@{ shape: stop, label: "a label" }@
-        E2@{ shape: doc, label: "a label" }@
-        A6@{ shape: stored-data, label: "a label"}@
-        A3@{ shape: delay, label: "a label" }@
-        E3@{ shape: div-proc, label: "a label" }@
-        B4[a label]@{ shape: win-pane }@
-    end
       

-      
----
-  title: hello2
-  config:
-    look: handDrawn
-    elk:
-      
----
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TD
-
-    A([Start]) -->|go to booking page| B("select
-    ISBS booking no")
-    A --> QQ{cancel booking}
-    A --> RR{no show}
-    A --> SS{change booking}
-    B -->C(wmpay_request_payment.request_type= 'partial',
- wmpay_request_payment.status= 'paid',
- pos_booking.booking_status= ‘partial’ and 'full_deposit')
- style C text-align:left
-    C -->D{manage booking}
-
-    D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
-    E -->F{กดปุ่ม 'cancel' หรือไม่}
-    F -->|Yes|G[ระบบบันทึกค่าใหม่
-    และไม่สามารถแก้ไขข้อมูลได้]
-    F -->|No|H[กดปุ่ม 'close']
-    H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
-    G -->|ระบบส่งข้อมูล|I[(POS_database)]
-    I -->|pos_booking.booking_status='cancel'|Z([End])
-
-
-    D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
-    J -->K{กดปุ่ม 'noshow' หรือไม่}
-    K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
-    Product_id: 439,
-    ItemName: no show]
-     style L text-align:left
-
-     K -->|No|O[กดปุ่ม 'close']
-     O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
-    L -->M[ระบบบันทึกค่าใหม่]
-    M -->|ระบบส่งข้อมูล|N[(POS_database)]
-    N -->|pos_booking.booking_status=‘noshow’|Z
-
-
-
-

-      
----
-  title: hello2
-  config:
-    look: handDrawn
-    layout: dagre
-    elk:
-        nodePlacementStrategy: BRANDES_KOEPF
----
-flowchart
-  A --> A
-  subgraph A
-    B --> B
-    subgraph B
-      C
-    end
-  end
-
-
-

-      
----
-config:
-  look: handdrawn
-  flowchart:
-    htmlLabels: true
----
-flowchart
-      A[I am a long text, where do I go??? handdrawn - true]
-

-    

-    

-      
----
-config:
-  flowchart:
-    htmlLabels: false
----
-flowchart
-      A[I am a long text, where do I go??? classic - false]
-

-      
----
-config:
-  flowchart:
-    htmlLabels: true
----
-flowchart
-      A[I am a long text, where do I go??? classic - true]
-

-    

-    
-flowchart LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-
-
-    

-
-    
-      flowchart LR
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef ash color:red
-    class C ash
-    style C stroke:#00f, fill:black
-
-    

-
-    
-      stateDiagram
-    A:::foo
-    B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    style C stroke:#00f, fill:black, color:white
-
-