#5237 Edge labels for ELK

2025-09-19 23:39:50 +02:00 · 2024-05-08 14:13:18 +02:00
parent 7529db8254
commit 3ff4a6910d
6 changed files with 931 additions and 401 deletions
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -32,7 +32,7 @@
    <style>
      body {
        /* background: rgb(221, 208, 208); */
-        background: #333;
+        /* background: #333; */
        font-family: 'Arial';
        /* font-size: 18px !important; */
      }
@@ -49,8 +49,8 @@
      .mermaid svg {
        /* font-size: 18px !important; */
        /* background-color: #efefef; */
-        background-color: #333;
-        background-image: radial-gradient(#333 51%, transparent 91%),
+        /* background-color: #333; */
+        /* background-image: radial-gradient(#333 51%, transparent 91%), */
          radial-gradient(#333 51%, transparent 91%);
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
@@ -79,152 +79,49 @@
  </head>
  <body>
    <pre id="diagram" class="mermaid">
-      block-beta
-  blockArrowId<["Label"]>(right)
-  blockArrowId2<["Label"]>(left)
-  blockArrowId3<["Label"]>(up)
-  blockArrowId4<["Label"]>(down)
-  blockArrowId5<["Label"]>(x)
-  blockArrowId6<["Label"]>(y)
-  blockArrowId6<["Label"]>(x, down)
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  block:e:4
-    columns 2
-      f
-      g
-  end
-
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
-
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  columns 4
-  a b c d
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
-  i:4
-
-      state join_state <<join>>
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
+stateDiagram
+NumLockOff --> NumLockOn : EvNumLockPressed
      </pre
    >
    <pre id="diagram" class="mermaid2">
-flowchart LR
-  X-- "y" -->z
-    </pre>
+stateDiagram
+  State1: The state with a note
+  note right of State1
+      Important information! You can write
+      notes.
+  end note
+      </pre
+    >
    <pre id="diagram" class="mermaid2">
-block-beta
-columns 5
-   A space B
-   A --x B
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 3
-  a["A wide one"] b:2 c:2 d
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  block:e
-      f
-  end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-  end
-  g
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-      g
-  end
-  h
-  i
-  j
+stateDiagram-v2
+    [*] --> Active

-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 3
-  a b:2
-  block:e:3
-      f
-  end
-  g h i
-    </pre>
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+      </pre
+    >
    <pre id="diagram" class="mermaid">
-block-beta
-columns 3
-  a b c
-  e:3
-  f g h
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-columns 1
-  db(("DB"))
-  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
-  block:ID
-    A
-    B["A wide one in the middle"]
-    C
-  end
-  space
-  D
-  ID --> D
-  C --> D
-  style B fill:#f9F,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  columns 5
-  A1:3
-  A2:1
-  A3
-  B1 B2 B3:3
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  block
-    D
-    E
-  end
-  db("This is the text in the box")
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-
-      block
-        D
-      end
-      A["A: I am a wide one"]
-    </pre>
+stateDiagram-v2
+    state ProActive {
+      state Active {
+        Chimp --> A:One
+        Chimp --> B:Two
+        Chimp --> C:Three
+      }
+    }
+  </pre
+    >
    <pre id="diagram" class="mermaid2">
 block-beta
    A["square"]
@@ -615,8 +512,18 @@ mindmap
      //   useMaxWidth: false,
      // });
      mermaid.initialize({
-        theme: 'dark',
-        startOnLoad: true,
+        handdrawn: true,
+        // layout: 'dagre',
+        layout: 'elk',
+        flowchart: { titleTopMargin: 10 },
+        // fontFamily: 'Caveat',
+        fontFamily: 'Kalam',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
+        },
+        fontSize: 16,
        logLevel: 0,
      });
      function callback() {
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -846,8 +846,6 @@ export const getData = () => {
  extract(getRootDocV2());
  const diagramStates = getStates();

-  console.log('Config - DAGA', getConfig());
-
  const useRough = getConfig().handdrawn;
  dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);

--- a/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js
@@ -1,5 +1,3 @@
-import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
-import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import insertMarkers from '../../rendering-elements/markers.js';
 import { findCommonAncestor } from './find-common-ancestor.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
@@ -79,18 +77,6 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
    await addVertices(nodeEl, nodeArr, child, node.id);

    // We need the label hight to be able to size the subgraph;
-    //       // svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
-    //       // const rows = vertexText.split(common.lineBreakRegex);
-    //       // for (const row of rows) {
-    //       //   const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-    //       //   tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
-    //       //   tspan.setAttribute('dy', '1em');
-    //       //   tspan.setAttribute('x', '1');
-    //       //   tspan.textContent = row;
-    //       //   svgLabel.appendChild(tspan);
-    //       // }
-    //       // vertexNode = svgLabel;
-    //       // const bbox = vertexNode.getBBox();
    const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
    labelData.width = bbox.width;
    labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
@@ -128,7 +114,7 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
        height: node.height,
      };
      if (node.type === 'group') {
-        log.debug('Id abc88 subgraph (DAGA)= ', node.id, node.x, node.y, node.labelData);
+        log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
        const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
        const clusterNode = JSON.parse(JSON.stringify(node));
        clusterNode.x = node.offset.posX + node.width / 2;
@@ -141,7 +127,7 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
        log.info('Id (UGH)= ', node.shape, node.labels);
      } else {
        log.info(
-          'Id NODE (DAGA)= ',
+          'Id NODE = ',
          node.id,
          node.x,
          node.y,
@@ -284,7 +270,6 @@ const getEdgeStartEndPoint = (edge, dir) => {
 };

 const calcOffset = function (src, dest, parentLookupDb) {
-  console.log('DAGA src dest', src, dest, parentLookupDb);
  const ancestor = findCommonAncestor(src, dest, parentLookupDb);
  if (ancestor === undefined || ancestor === 'root') {
    return { x: 0, y: 0 };
@@ -306,7 +291,7 @@ const calcOffset = function (src, dest, parentLookupDb) {
 * @param svg
 */
 export const addEdges = function (dataForLayout, graph, svg) {
-  log.info('abc78 edges = ', dataForLayout);
+  log.info('abc78 DAGA edges = ', dataForLayout);
  const edges = dataForLayout.edges;
  const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
  let linkIdCnt = {};
@@ -326,13 +311,14 @@ export const addEdges = function (dataForLayout, graph, svg) {
      log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
    }
    let linkId = linkIdBase + '-' + linkIdCnt[linkIdBase];
+    edge.id = linkId;
    log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
    const linkNameStart = 'LS-' + edge.start;
    const linkNameEnd = 'LE-' + edge.end;

    const edgeData = { style: '', labelStyle: '' };
    edgeData.minlen = edge.length || 1;
-
+    edge.text = edge.label;
    // Set link type for rendering
    if (edge.type === 'arrow_open') {
      edgeData.arrowhead = 'none';
@@ -545,9 +531,9 @@ export const render = async (data4Layout, svg, element) => {
    }
  });

-  log.info('before layout abc88', JSON.stringify(elkGraph, null, 2));
+  log.info('before layout', JSON.stringify(elkGraph, null, 2));
  const g = await elk.layout(elkGraph);
-  log.info('after layout abc88 DAGA', g);
+  log.info('after layout DAGA', g);

  // debugger;
  drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
@@ -559,7 +545,6 @@ export const render = async (data4Layout, svg, element) => {
    const targetId = edge.end.id;

    const offset = calcOffset(sourceId, targetId, parentLookupDb);
-    // const offset = { x: 50, y: 25 };

    const src = edge.sections[0].startPoint;
    const dest = edge.sections[0].endPoint;
@@ -583,6 +568,10 @@ export const render = async (data4Layout, svg, element) => {
      edge.points
    );

-    insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId);
+    const paths = insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId);
+
+    edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
+    edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;
+    positionEdgeLabel(edge, paths);
  });
 };
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -236,19 +236,37 @@ const divider = (parent, node) => {
  const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);

  // add the rect
-  const rect = shapeSvg.insert('rect', ':first-child');
+  let rect;

  const padding = 0 * node.padding;
  const halfPadding = padding / 2;

-  // center the rect around its coordinate
-  rect
-    .attr('class', 'divider')
-    .attr('x', node.x - node.width / 2 - halfPadding)
-    .attr('y', node.y - node.height / 2)
-    .attr('width', node.width + padding)
-    .attr('height', node.height + padding);
+  const x = node.x - node.width / 2 - halfPadding;
+  const y = node.y - node.height / 2;
+  const width = node.width + padding;
+  const height = node.height + padding;
+  if (node.useRough) {
+    const rc = rough.svg(shapeSvg);
+    const roughNode = rc.rectangle(x, y, width, height, {
+      fill: 'grey',
+      roughness: 0.5,
+      // bowing: 6,
+      // stroke: 'green',
+      // strokeWidth: 3,
+      strokeLineDash: [5],
+    });

+    rect = shapeSvg.insert(() => roughNode);
+  } else {
+    rect = shapeSvg.insert('rect', ':first-child');
+    // center the rect around its coordinate
+    rect
+      .attr('class', 'divider')
+      .attr('x', x)
+      .attr('y', y)
+      .attr('width', width)
+      .attr('height', height);
+  }
  const rectBox = rect.node().getBBox();
  node.width = rectBox.width;
  node.height = rectBox.height;
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
@@ -77,10 +77,15 @@ export const rect = async (parent: SVGAElement, node: Node) => {
      rx || ry
        ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), {
            roughness: 0.7,
+            fill:'white',
+            fillStyle: 'solid' // solid fill'
          })
        : rc.rectangle(x, y, totalWidth, totalHeight);

-    rect = shapeSvg.insert(() => roughNode);
+    rect = shapeSvg.insert(() => roughNode, ':first-child');
+        rect
+      .attr('class', 'basic label-container')
+      .attr('style', style)
  } else {
    rect = shapeSvg.insert('rect', ':first-child');

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml