Merge remote-tracking branch 'os_repo/5237-unified-layout-common-renderer' into alanaV11

2025-09-08 18:16:44 +02:00 · 2024-06-09 18:28:31 +02:00
parent 59130ca107 7fbe1661ec
commit edd4457154
10 changed files with 188 additions and 76 deletions
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -75,15 +75,28 @@
    </style>
  </head>
  <body>
-    <pre id="diagram" class="mermaid2">
-stateDiagram-v2
-    state if_state <<choice>>
-    [*] --> IsPositive
-    IsPositive --> if_state
-    if_state --> False: if n < 0
-    if_state --> True : if n >= 0
+    <pre id="diagram" class="mermaid">
+stateDiagram
+direction LR
+      state Gorilla0 {
+        state Apa0 {
+          A0 --> B0
+        }
+
+      }
+      Apa0 --> C0
+      A0 --> C0
      </pre
    >
+    <pre id="diagram" class="mermaid">
+flowchart LR
+    subgraph Gorilla
+      subgraph Apa
+        A[A] --- B
+      end
+    end
+    Apa --- C
+    A --x C

    <pre id="diagram" class="mermaid">
 stateDiagram
@@ -93,8 +106,16 @@ stateDiagram
      </pre
    >
    <pre id="diagram" class="mermaid2">
-stateDiagram
-  state "This is a state description" as S
+      %%{init: {"layout": "dagre", "mergeEdges": false} }%%
+flowchart LR
+      A ==> B(This is B)
+    A[Start] --> B(Is it?)
+    B -- Yes --> C[OK]
+    C --> D[Rethink]
+    D --> B
+    B -. No ...-> E[End]
+
+
      </pre
    >
    <pre id="diagram" class="mermaid2">
@@ -113,7 +134,7 @@ flowchart
    if_state --> True : if n >= 0
      </pre
    >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid3">
      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
      stateDiagram
    state if_state &lt;&lt;choice&gt;&gt;
@@ -128,8 +149,10 @@ flowchart
 stateDiagram
  direction TB
  State T1 {
-    T11
+    T11 --> T12
  }
+  T1 --> T2
+  T11 --> T2
      </pre
    >
    <pre id="diagram" class="mermaid2">
@@ -212,12 +235,13 @@ stateDiagram-v2
      };
      mermaid.initialize({
        // theme: 'base',
-        handdrawnSeed: 12,
+        // handdrawnSeed: 12,
        look: 'handdrawn',
-        'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        layout: 'dagre',
-        // layout: 'elk',
+        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+        // layout: 'dagre',
+        layout: 'elk',
        // layout: 'fixed',
+        // htmlLabels: false,
        flowchart: { titleTopMargin: 10 },
        // fontFamily: 'Caveat',
        fontFamily: 'Kalam',
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -60,7 +60,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
  graph.children.push(child);
  nodeDb[node.id] = child;

-  //     // Add the element to the DOM
+  // Add the element to the DOM
  if (!node.isGroup) {
    const childNodeEl = await insertNode(nodeEl, node, node.dir);
    boundingBox = childNodeEl.node().getBBox();
@@ -93,7 +93,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {

 export const addVertices = async function (nodeEl, nodeArr, graph, parentId) {
  const siblings = nodeArr.filter((node) => node.parentId === parentId);
-  log.info('addVertices DAGA', siblings, parentId);
+  log.info('addVertices APA12', siblings, parentId);
  // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
  await Promise.all(
    siblings.map(async (node) => {
@@ -512,9 +512,7 @@ export const render = async (data4Layout, svg, element, algorithm) => {
    const node = nodeDb[n.id];

    // Subgraph
-    console.log('Subgraph XCX before');
    if (parentLookupDb.childrenById[node.id] !== undefined) {
-      console.log('Subgraph XCX', node.id, node, node.labelData);
      node.labels = [
        {
          text: node.labelText,
@@ -553,9 +551,9 @@ export const render = async (data4Layout, svg, element, algorithm) => {
    }
  });

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

  // debugger;
  drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
@@ -563,11 +561,11 @@ export const render = async (data4Layout, svg, element, algorithm) => {
    // (elem, edge, clusterDb, diagramType, graph, id)
    const startNode = nodeDb[edge.sources[0]];
    const endNode = nodeDb[edge.targets[0]];
-    const sourceId = edge.start.id;
-    const targetId = edge.end.id;
+    const sourceId = edge.start;
+    const targetId = edge.end;

    const offset = calcOffset(sourceId, targetId, parentLookupDb);
-
+    log.info('APA12 offset', offset, sourceId, targetId, edge);
    if (edge.sections) {
      const src = edge.sections[0].startPoint;
      const dest = edge.sections[0].endPoint;
@@ -590,6 +588,7 @@ export const render = async (data4Layout, svg, element, algorithm) => {
        endNode,
        data4Layout.diagramId
      );
+      log.info('APA12 edge points after insert', JSON.stringify(edge.points));

      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;
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-chart/mermaid",
-  "version": "11.0.0-beta.9",
+  "version": "11.0.0-beta.12",
  "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
@@ -137,4 +137,4 @@
    "README.md"
  ],
  "sideEffects": false
-}
+}
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -767,6 +767,39 @@ const getTypeFromVertex = (vertex: FlowVertex) => {
  return vertex.type || 'squareRect';
 };

+const findNode = (nodes: Node[], id: string) => nodes.find((node) => node.id === id);
+
+const addNodeFromVertex = (
+  vertex: FlowVertex,
+  nodes: Node[],
+  parentDB: Map<string, string>,
+  subGraphDB: Map<string, boolean>,
+  config: any,
+  useRough: boolean
+): Node => {
+  let parentId = parentDB.get(vertex.id);
+  let isGroup = subGraphDB.get(vertex.id) || false;
+
+  let node = findNode(nodes, vertex.id);
+  if (!node) {
+    nodes.push({
+      id: vertex.id,
+      label: vertex.text,
+      labelStyle: '',
+      parentId,
+      padding: config.flowchart?.padding || 8,
+      cssStyles: vertex.styles.join(' '),
+      cssClasses: vertex.classes.join(' '),
+      shape: getTypeFromVertex(vertex),
+      dir: vertex.dir,
+      domId: vertex.domId,
+      type: isGroup ? 'group' : undefined,
+      isGroup,
+      useRough,
+    });
+  }
+};
+
 export const getData = () => {
  const config = getConfig();
  const nodes: Node[] = [];
@@ -775,25 +808,47 @@ export const getData = () => {
  // extract(getRootDocV2());
  // const diagramStates = getStates();
  const useRough = config.look === 'handdrawn';
+  const subGraphs = getSubGraphs();
+  log.info('Subgraphs - APA12', subGraphs);
+  const parentDB = new Map<string, string>();
+  const subGraphDB = new Map<string, boolean>();
+
+  for (let i = subGraphs.length - 1; i >= 0; i--) {
+    const subGraph = subGraphs[i];
+    if (subGraph.nodes.length > 0) {
+      subGraphDB.set(subGraph.id, true);
+    }
+    subGraph.nodes.forEach((id) => {
+      parentDB.set(id, subGraph.id);
+    });
+    nodes.push({
+      id: subGraph.id,
+      label: subGraph.title,
+      labelStyle: '',
+      parentId: parentDB.get(subGraph.id),
+      padding: config.flowchart?.padding || 8,
+      cssStyles: '',
+      cssClasses: '',
+      shape: 'rect',
+      dir: subGraph.dir,
+      domId: subGraph.domId,
+      type: 'group',
+      isGroup: true,
+      useRough,
+    });
+  }
+  console.log('APA12 nodes - 1', nodes.length);
+
  const n = getVertices();
  n.forEach((vertex) => {
-    const node: Node = {
-      id: vertex.id,
-      label: vertex.text,
-      labelStyle: '',
-      padding: config.flowchart?.padding || 8,
-      cssStyles: vertex.styles.join(' '),
-      cssClasses: vertex.classes.join(' '),
-      shape: getTypeFromVertex(vertex),
-      dir: vertex.dir,
-      domId: vertex.domId,
-      type: undefined,
-      isGroup: false,
-      useRough,
-    };
-    nodes.push(node);
+    const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, useRough);
+    if (node) {
+      nodes.push(node);
+    }
  });

+  console.log('APA12 nodes', nodes.length);
+
  const e = getEdges();
  e.forEach((rawEdge, index) => {
    const edge: Edge = {
@@ -810,6 +865,7 @@ export const getData = () => {
      classes: 'edge-thickness-normal edge-pattern-solid flowchart-link',
      arrowhead: 'none',
      arrowTypeEnd: 'arrow_point',
+      // arrowTypeEnd: 'arrow_barb',
      arrowheadStyle: 'fill: #333',
      // stroke: rawEdge.pattern,
      pattern: rawEdge.stroke,
@@ -823,7 +879,6 @@ export const getData = () => {
    // console.log('rawEdge SPLIT', rawEdge, index);
    edges.push(edge);
  });
-  console.log('edges SPLIT', edges);

  //const useRough = config.look === 'handdrawn';

--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
@@ -159,10 +159,8 @@ export const validate = (graph) => {
 * @param {any} graph
 */
 export const findNonClusterChild = (id, graph) => {
-  // const node = graph.node(id);
  log.trace('Searching', id);
-  // const children = graph.children(id).reverse();
-  const children = graph.children(id); //.reverse();
+  const children = graph.children(id).reverse();
  log.trace('Searching children of id ', id, children);
  if (children.length < 1) {
    log.trace('This is a valid node', id);
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -28,6 +28,10 @@ const registerDefaultLayoutLoaders = () => {
      name: 'fixed',
      loader: async () => await import('./layout-algorithms/fixed/index.js'),
    },
+    // {
+    //   name: 'elk',
+    //   loader: async () => await import('../../../mermaid-layout-elk/src/render.js'),
+    // },
  ]);
 };

--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -8,17 +8,18 @@ import { createText } from '../createText.ts';
 import intersectRect from '../rendering-elements/intersect/intersect-rect.js';
 import createLabel from './createLabel.js';
 import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
+import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';

 const rect = (parent, node) => {
  log.info('Creating subgraph rect for ', node.id, node);
  const siteConfig = getConfig();
+  const { themeVariables, handdrawnSeed } = siteConfig;
+  const { clusterBkg, clusterBorder } = themeVariables;
+  let { useRough } = node;

  // Add outer g element
  const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id);

-  // add the rect
-  const rect = shapeSvg.insert('rect', ':first-child');
-
  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);

  // Create the label and insert it after the rect
@@ -44,7 +45,6 @@ const rect = (parent, node) => {
  }

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

  const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;
  if (node.width <= bbox.width + padding) {
@@ -53,17 +53,45 @@ const rect = (parent, node) => {
    node.diff = -node.padding / 2;
  }

-  log.trace('Data ', node, JSON.stringify(node));
-  // center the rect around its coordinate
-  rect
-    .attr('style', node.cssStyles)
-    .attr('rx', node.rx)
-    .attr('ry', node.ry)
-    .attr('x', node.x - width / 2)
-    .attr('y', node.y - node.height / 2 - halfPadding)
-    .attr('width', width)
-    .attr('height', node.height + padding);
+  const totalWidth = width + padding;
+  const totalHeight = node.height + padding;
+  const x = node.x - totalWidth / 2;
+  const y = node.y - totalHeight / 2;

+  log.trace('Data ', node, JSON.stringify(node));
+  let rect;
+  if (useRough) {
+    // @ts-ignore TODO: Fix rough typings
+    const rc = rough.svg(shapeSvg);
+    const options = userNodeOverrides(node, {
+      roughness: 0.7,
+      fill: clusterBkg,
+      // fill: 'red',
+      stroke: clusterBorder,
+      fillWeight: 3,
+      seed: handdrawnSeed,
+      stroke: clusterBorder,
+    });
+    const roughNode = rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, 0), options);
+    // console.log('Rough node insert CXC', roughNode);
+
+    rect = shapeSvg.insert(() => {
+      console.log('Rough node insert CXC', roughNode);
+      return roughNode;
+    }, ':first-child');
+  } else {
+    // add the rect
+    rect = shapeSvg.insert('rect', ':first-child');
+    // center the rect around its coordinate
+    rect
+      .attr('style', node.cssStyles)
+      .attr('rx', node.rx)
+      .attr('ry', node.ry)
+      .attr('x', x)
+      .attr('y', y)
+      .attr('width', totalWidth)
+      .attr('height', totalHeight);
+  }
  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
  if (useHtmlLabels) {
    labelEl.attr(
@@ -303,8 +331,8 @@ const divider = (parent, node) => {

  return { cluster: shapeSvg, labelBBox: { width: 0, height: 0 } };
 };
-
-const shapes = { rect, roundedWithTitle, noteGroup, divider };
+const squareRect = rect;
+const shapes = { rect, squareRect, roundedWithTitle, noteGroup, divider };

 let clusterElems = {};

--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -534,14 +534,14 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
  let lineData = points.filter((p) => !Number.isNaN(p.y));
  const { cornerPoints, cornerPointPositions } = extractCornerPoints(lineData);
  lineData = fixCorners(lineData);
-  let lastPoint = lineData[0];
+  let lastPoint = lineData[lineData.length - 1];
  if (lineData.length > 1) {
    lastPoint = lineData[lineData.length - 1];
    const secondLastPoint = lineData[lineData.length - 2];
    // Calculate the mid point of the last two points
-    const diffX = (lastPoint.x - secondLastPoint.x) / 4;
-    const diffY = (lastPoint.y - secondLastPoint.y) / 4;
-    const midPoint = { x: secondLastPoint.x + 3 * diffX, y: secondLastPoint.y + 3 * diffY };
+    const diffX = (lastPoint.x - secondLastPoint.x) / 2;
+    const diffY = (lastPoint.y - secondLastPoint.y) / 2;
+    const midPoint = { x: secondLastPoint.x + diffX, y: secondLastPoint.y + diffY };
    lineData.splice(-1, 0, midPoint);
  }
  // This is the accessor function we talked about above
@@ -597,11 +597,16 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
  let useRough = edge.useRough;
  let svgPath;
  let path = '';
-
+  let linePath = lineFunction(lineData);
  if (useRough) {
    const rc = rough.svg(elem);
    const ld = Object.assign([], lineData);
-    const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length - 1)), {
+    // const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length-1)), {
+    // const svgPathNode = rc.path(lineFunction(ld), {
+    //   roughness: 0.3,
+    //   seed: handdrawnSeed,
+    // });
+    const svgPathNode = rc.path(linePath, {
      roughness: 0.3,
      seed: handdrawnSeed,
    });
@@ -615,13 +620,12 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
      .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
      .attr('style', edge.style);
    let d = svgPath.attr('d');
-    d = d + ' L ' + lastPoint.x + ' ' + lastPoint.y;
    svgPath.attr('d', d);
    elem.node().appendChild(svgPath.node());
  } else {
    svgPath = elem
      .append('path')
-      .attr('d', lineFunction(lineData))
+      .attr('d', linePath)
      .attr('id', edge.id)
      .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
      .attr('style', edge.style);
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -159,11 +159,11 @@ const point = (elem, type, id) => {
    .attr('id', id + '_' + type + '-pointEnd')
    .attr('class', 'marker ' + type)
    .attr('viewBox', '0 0 10 10')
-    .attr('refX', 6)
+    .attr('refX', 5)
    .attr('refY', 5)
    .attr('markerUnits', 'userSpaceOnUse')
-    .attr('markerWidth', 12)
-    .attr('markerHeight', 12)
+    .attr('markerWidth', 8)
+    .attr('markerHeight', 8)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 0 0 L 10 5 L 0 10 z')
@@ -178,8 +178,8 @@ const point = (elem, type, id) => {
    .attr('refX', 4.5)
    .attr('refY', 5)
    .attr('markerUnits', 'userSpaceOnUse')
-    .attr('markerWidth', 12)
-    .attr('markerHeight', 12)
+    .attr('markerWidth', 11)
+    .attr('markerHeight', 11)
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 0 5 L 10 10 L 10 0 z')
@@ -272,7 +272,7 @@ const barb = (elem, type, id) => {
    .attr('refY', 7)
    .attr('markerWidth', 20)
    .attr('markerHeight', 14)
-    .attr('markerUnits', 'strokeWidth')
+    .attr('markerUnits', 'userSpaceOnUse')
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
--- a/packages/mermaid/src/utils/lineWithOffset.ts
+++ b/packages/mermaid/src/utils/lineWithOffset.ts
@@ -9,7 +9,7 @@ const markerOffsets = {
  composition: 18,
  dependency: 6,
  lollipop: 13.5,
-  arrow_point: 5.3,
+  arrow_point: 4,
 } as const;

 /**