From e6e463092c64b9f718bd6e235e98ea49665726b4 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 25 Apr 2024 15:48:33 +0200 Subject: [PATCH] #5237 Adding roughjs edges --- cypress/platform/knsv-4442.html | 431 ++++++++++++++++++ cypress/platform/knsv2.html | 3 +- .../rendering-elements/edges.js | 70 ++- 3 files changed, 467 insertions(+), 37 deletions(-) create mode 100644 cypress/platform/knsv-4442.html diff --git a/cypress/platform/knsv-4442.html b/cypress/platform/knsv-4442.html new file mode 100644 index 000000000..4a8fa7246 --- /dev/null +++ b/cypress/platform/knsv-4442.html @@ -0,0 +1,431 @@ + + + + + + + + + + + 
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+ 
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+
+ 
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+
+ 
+flowchart
+id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]
+ 
+flowchart LR
+    A[A text that needs to be wrapped wraps to another line]
+    B[A text that needs to be
wrapped wraps to another line]
+    C["`A text that needs to be wrapped to another line`"]
+ 
+flowchart LR
+    C["`A text
+        that needs
+        to be wrapped
+        in another
+        way`"]
+
+ 
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+
+ 
+    stateDiagram-v2
+    State1: The state with a note with minus - and plus + in it
+    note left of State1
+      Important information! You can write
+      notes with . and  in them.
+    end note
+ 
+mindmap
+root
+  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+
+ 
+      %%{init: {"theme": "forest"} }%%
+mindmap
+    id1[**Start2**
end]
+      id2[**Start2**
end]
+      %% Another comment
+      id3[**Start2**
end] %% Comment
+      id4[**Start2**
end
the very end]
+
+ 
+mindmap
+    id1["`**Start2**
+    second line 😎 with long text that is wrapping to the next line`"]
+      id2["`Child **with bold** text`"]
+      id3["`Children of which some
+      is using *italic type of* text`"]
+      id4[Child]
+      id5["`Child
+      Row
+      and another
+      `"]
+
+ 
+mindmap
+    id1("`**Root**`"]
+      id2["`A formatted text... with **bold** and *italics*`"]
+      id3[Regular labels works as usual]
+      id4["`Emojis and unicode works too: 🤓
+      शान्तिः سلام  和平 `"]
+
+
+ 
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+
+ 
+%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+
+ +
+ 
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+
+
+   + 
+      flowchart LR
+  B1 --be be--x B2
+  B1 --bo bo--o B3
+  subgraph Ugge
+      B2
+      B3
+      subgraph inner
+          B4
+          B5
+      end
+      subgraph inner2
+        subgraph deeper
+          C4
+          C5
+        end
+        C6
+      end
+
+      B4 --> C4
+
+      B3 -- X --> B4
+      B2 --> inner
+
+      C4 --> C5
+  end
+
+  subgraph outer
+      B6
+  end
+  B6 --> B5
+
+ 
+sequenceDiagram
+    Customer->>+Stripe: Makes a payment request
+    Stripe->>+Bank: Forwards the payment request to the bank
+    Bank->>+Customer: Asks for authorization
+    Customer->>+Bank: Provides authorization
+    Bank->>+Stripe: Sends a response with payment details
+    Stripe->>+Merchant: Sends a notification of payment receipt
+    Merchant->>+Stripe: Confirms the payment
+    Stripe->>+Customer: Sends a confirmation of payment
+    Customer->>+Merchant: Receives goods or services
+
+ 
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness
and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+
+
+ 
+  example-diagram
+
+ + + + + + + + + // import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import example from + '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs'; import mermaid + from './mermaid.esm.mjs'; // await mermaid.registerExternalDiagrams([example]); + mermaid.parseError = function (err, hash) { // console.error('Mermaid error: ', err); }; + mermaid.initialize({ // theme: 'forest', startOnLoad: true, logLevel: 0, flowchart: { // + defaultRenderer: 'elk', useMaxWidth: false, // htmlLabels: false, htmlLabels: true, }, // + htmlLabels: false, gantt: { useMaxWidth: false, }, useMaxWidth: false, }); function callback() + { alert('It worked'); } mermaid.parseError = function (err, hash) { console.error('In parse + error:'); console.error(err); }; // mermaid.test1('first_slow', 1200).then((r) => + console.info(r)); // mermaid.test1('second_fast', 200).then((r) => console.info(r)); // + mermaid.test1('third_fast', 200).then((r) => console.info(r)); // mermaid.test1('forth_slow', + 1200).then((r) => console.info(r)); + + + + + diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index e52019e40..831a5d33a 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -59,7 +59,8 @@ 
 stateDiagram-v2
-     ASH --> KNUT
+     Second --> Third
+     Second --> Fourth
   
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index b34569e49..156f610bc 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -8,6 +8,7 @@ import { evaluate } from '$root/diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '$root/utils/lineWithOffset.js';
 import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js';
 import { addEdgeMarkers } from './edgeMarker.ts';
+import rough from 'roughjs';
 //import type { Edge } from '$root/rendering-util/types.d.ts';
 
 let edgeLabels = {};
@@ -395,37 +396,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
   if (edge.toCluster) {
     log.info('to cluster abc88', clusterDb[edge.toCluster]);
     points = cutPathAtIntersect(edge.points, clusterDb[edge.toCluster].node);
-    // log.trace('edge', edge);
-    // points = [];
-    // let lastPointOutside; // = edge.points[0];
-    // let isInside = false;
-    // edge.points.forEach(point => {
-    //   const node = clusterDb[edge.toCluster].node;
-    //   log.warn('checking from', edge.fromCluster, point, node);
 
-    //   if (!outsideNode(node, point) && !isInside) {
-    //     log.trace('inside', edge.toCluster, point, lastPointOutside);
-
-    //     // First point inside the rect
-    //     const inter = intersection(node, lastPointOutside, point);
-
-    //     let pointPresent = false;
-    //     points.forEach(p => {
-    //       pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
-    //     });
-    //     // if (!pointPresent) {
-    //     if (!points.find(e => e.x === inter.x && e.y === inter.y)) {
-    //       points.push(inter);
-    //     } else {
-    //       log.warn('no intersect', inter, points);
-    //     }
-    //     isInside = true;
-    // } else {
-    //   // outside
-    //   lastPointOutside = point;
-    //   if (!isInside) points.push(point);
-    // }
-    // });
     pointsHasChanged = true;
   }
 
@@ -477,14 +448,41 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
       strokeClasses += ' edge-pattern-dashed';
       break;
   }
+  let useRough = true;
+  let svgPath;
+  let path = '';
+  const pointArr = [];
+  edge.points.forEach((point) => {
+    path += point.x + ',' + point.y + ' ';
+    pointArr.push([point.x, point.y]);
+  });
 
-  const svgPath = elem
-    .append('path')
-    .attr('d', lineFunction(lineData))
-    .attr('id', edge.id)
-    .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
-    .attr('style', edge.style);
+  if (useRough) {
+    const rc = rough.svg(elem);
+    const svgPathNode = rc.curve(pointArr, { stroke: 'green' });
+    console.log('svgPathNode', svgPathNode);
+    // const svgPath2 = elem
+    //   .append('path')
+    //   .attr('d', lineFunction(lineData))
+    //   .attr('id', edge.id)
+    //   .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
+    //   .attr('style', edge.style);
 
+    // console.log('svgPath2', svgPath2.node());
+    svgPath = select(svgPathNode)
+      .select('path')
+      .attr('id', edge.id)
+      .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
+      .attr('style', edge.style);
+    elem.node().appendChild(svgPath.node());
+  } else {
+    svgPath = elem
+      .append('path')
+      .attr('d', lineFunction(lineData))
+      .attr('id', edge.id)
+      .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
+      .attr('style', edge.style);
+  }
   // DEBUG code, adds a red circle at each edge coordinate
   // edge.points.forEach((point) => {
   //   elem