#5237 First elk iteration

mermaid-js · May 3, 2024 · 913b29d · 913b29d
1 parent 703c25a
commit 913b29d
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 47 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -14,9 +14,20 @@
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:[email protected]&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
 
     <style>
       body {
@@ -58,28 +69,13 @@
       /* tspan {
         font-size: 6px !important;
       } */
-
-          <style class="style-fonts">
-      @font-face {
-        font-family: "Virgil";
-        src: url("https://excalidraw.com/Virgil.woff2");
-      }
-      @font-face {
-        font-family: "Cascadia";
-        src: url("https://excalidraw.com/Cascadia.woff2");
-      }
-      @font-face {
-        font-family: "Assistant";
-        src: url("https://excalidraw.com/Assistant-Regular.woff2");
-      }
-    </style>
     </style>
   </head>
   <body>
     <pre id="diagram" class="mermaid">
 stateDiagram-v2
-    stateId
-
+    Chimp --> Gorilla
+    Chimp --> Bonobo
 
   </pre
     >
@@ -469,7 +465,8 @@
       // });
       mermaid.initialize({
         flowchart: { titleTopMargin: 10 },
-        fontFamily: 'Kalam',
+        /* fontFamily: 'Kalam', */
+        fontFamily: 'Caveat',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',

diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -575,7 +575,7 @@ const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.t
 
 const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, useRough) => {
   console.log(
-    'parent, parsedItemm, diagramStates, nodes, edges, altFlag, useRough:',
+    'abc88 parent, parsedItemm, diagramStates, nodes, edges, altFlag, useRough:',
     parent,
     parsedItem,
     diagramStates,
@@ -716,9 +716,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
       //add parent id to noteData
       noteData.parentId = parentId;
 
-      nodes.push(groupData);
-      nodes.push(noteData);
-      nodes.push(nodeData);
+      nodes.push(groupData, noteData, nodeData);
 
       let from = itemId;
       let to = noteData.id;
@@ -741,6 +739,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
         labelpos: G_EDGE_LABELPOS,
         labelType: G_EDGE_LABELTYPE,
         thickness: G_EDGE_THICKNESS,
+        useRough,
       });
     } else {
       nodes.push(nodeData);
@@ -836,7 +835,7 @@ export const getData = () => {
   extract(getRootDocV2());
   const diagramStates = getStates();
 
-  const useRough = false;
+  const useRough = true;
   dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
 
   return { nodes, edges, other: {} };

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -88,8 +88,7 @@ export const draw = async function (text: string, id: string, _version: string,
 
   data4Layout.type = diag.type;
   data4Layout.layoutAlgorithm = 'dagre-wrapper';
-  //data4Layout.layoutAlgorithm = 'elk';
-  data4Layout.skin = 'roughjs';
+  // data4Layout.layoutAlgorithm = 'elk';
   data4Layout.direction = DIR;
   data4Layout.nodeSpacing = conf.nodeSpacing || 50;
   data4Layout.rankSpacing = conf.rankSpacing || 50;

diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -173,7 +173,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
 };
 
 export const render = async (data4Layout, svg, element) => {
-  console.warn('HERERERERERER');
   // Create the input mermaid.graph
   const graph = new graphlib.Graph({
     multigraph: true,

diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js
@@ -306,7 +306,7 @@ export const addEdges = function (dataForLayout, graph, svg) {
   // }
 
   edges.forEach(function (edge) {
-    console.log('edge abc78', edge.id);
+    console.log('edge abc88', edge);
     // Identify Link
     const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end;
     // count the links from+to the same node to give unique id
@@ -429,6 +429,7 @@ export const addEdges = function (dataForLayout, graph, svg) {
     // Add the edge to the graph
     graph.edges.push({
       id: 'e' + edge.start + edge.end,
+      ...edge,
       sources: [source],
       targets: [target],
       sourceId,
@@ -515,6 +516,8 @@ export const render = async (data4Layout, svg, element) => {
   const parentLookupDb = {};
   graph = await addVertices(svg, data4Layout, parentLookupDb, graph);
 
+  console.log('graph', graph, data4Layout);
+
   // Add the nodes and edges to the graph
   // data4Layout.nodes.forEach((node) => {
   //   graph.setNode(node.id, { ...node });
@@ -600,6 +603,21 @@ export const render = async (data4Layout, svg, element) => {
   console.log('after layout', g);
   g.edges?.map((edge) => {
     // (elem, edge, clusterDb, diagramType, graph, id)
+    edge.start = nodeDb[edge.sources[0]];
+    edge.end = nodeDb[edge.targets[0]];
+    const offset = { x: 0, y: 0 };
+    const src = edge.sections[0].startPoint;
+    const dest = edge.sections[0].endPoint;
+    const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
+
+    const segPoints = segments.map((segment) => {
+      return { x: segment.x + offset.x, y: segment.y + offset.y };
+    });
+    edge.points = [
+      { x: src.x + offset.x, y: src.y + offset.y },
+      ...segPoints,
+      { x: dest.x + offset.x, y: dest.y + offset.y },
+    ];
     insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId);
   });
   // setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);

diff --git a/packages/mermaid/src/rendering-util/render.js b/packages/mermaid/src/rendering-util/render.js
@@ -1,10 +1,7 @@
 export const render = async (data4Layout, svg, element) => {
   switch (data4Layout.layoutAlgorithm) {
     case 'dagre-wrapper': {
-      // const layoutRenderer = await import('../dagre-wrapper/index-refactored.js');
-
       const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
-
       return layoutRenderer.render(data4Layout, svg, element);
     }
     case 'elk': {

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
@@ -36,6 +36,7 @@ function addHtmlLabel(node) {
 
   applyStyle(div, node.labelStyle);
   div.style('display', 'inline-block');
+  div.style('padding-right', '1px');
   // Fix for firefox
   div.style('white-space', 'nowrap');
   div.attr('xmlns', 'http://www.w3.org/1999/xhtml');

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -382,18 +382,21 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
   const tail = edge.start;
   var head = edge.end;
 
-  log.info('abc88 InsertEdge: ', edge);
+  log.info('abc88 InsertEdge: ', points);
   if (head.intersect && tail.intersect) {
-    points = points.slice(1, edge.points.length - 1);
-    points.unshift(tail.intersect(points[0]));
-    log.info(
-      'Last point',
-      points[points.length - 1],
-      head,
-      head.intersect(points[points.length - 1])
-    );
-    points.push(head.intersect(points[points.length - 1]));
+    log.info('abc88 InsertEdge: 0.5', points);
+    // points = points.slice(1, edge.points.length - 1);
+    log.info('abc88 InsertEdge: 0.7', points);
+    // points.unshift(tail.intersect(points[0]));
+    //   log.info(
+    //     'Last point abc88',
+    //     points[points.length - 1],
+    //     head,
+    //     head.intersect(points[points.length - 1])
+    //   );
+    //   points.push(head.intersect(points[points.length - 1]));
   }
+  log.info('abc88 InsertEdge 2: ', points);
   if (edge.toCluster) {
     log.info('to cluster abc88', clusterDb[edge.toCluster]);
     points = cutPathAtIntersect(edge.points, clusterDb[edge.toCluster].node);
@@ -436,7 +439,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
       strokeClasses = 'edge-thickness-thick';
       break;
     default:
-      strokeClasses = '';
+      strokeClasses = 'edge-thickness-normal';
   }
   switch (edge.pattern) {
     case 'solid':
@@ -448,6 +451,8 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
     case 'dashed':
       strokeClasses += ' edge-pattern-dashed';
       break;
+    default:
+      strokeClasses += ' edge-pattern-solid';
   }
   let useRough = edge.useRough;
   let svgPath;
@@ -460,16 +465,17 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
 
   if (useRough) {
     const rc = rough.svg(elem);
-    const svgPathNode = rc.curve(pointArr, { stroke: 'green' });
-    console.log('svgPathNode', svgPathNode);
+    const svgPathNode = rc.curve(pointArr, { roughness: 0.5, stroke: 'green' });
+    console.log('svgPathNode abc88', svgPathNode);
+    strokeClasses += ' transition';
     // 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());
+    console.log('svgPath2 abc88', strokeClasses + (edge.classes ? ' ' + edge.classes : ''));
     svgPath = select(svgPathNode)
       .select('path')
       .attr('id', edge.id)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js b/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js
@@ -1,4 +1,5 @@
 const intersectRect = (node, point) => {
+  console.log('intersect.rect abc88', node, point);
   var x = node.x;
   var y = node.y;