Merge branch '5237-unified-layout-common-renderer' of github.com:mermaid-js/mermaid into 5237-unified-layout-common-renderer

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -372,13 +372,26 @@ const rect = async (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-
   // console.log('Rect node:', node, 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding);
   // const totalWidth = bbox.width + node.padding * 2;
   // const totalHeight = bbox.height + node.padding * 2;
   const totalWidth = bbox.width + node.padding;
   const totalHeight = bbox.height + node.padding;
-  console.log('Rect node:', node, rect.node(), 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding, 'totalWidth:', totalWidth, 'totalHeight:', totalHeight);
+  console.log(
+    'Rect node:',
+    node,
+    rect.node(),
+    'bbox:',
+    bbox,
+    'halfPadding:',
+    halfPadding,
+    'node.padding:',
+    node.padding,
+    'totalWidth:',
+    totalWidth,
+    'totalHeight:',
+    totalHeight
+  );
   rect
     .attr('class', 'basic label-container')
     .attr('style', node.style)

packages/mermaid/src/diagrams/state/stateDb.js

@@ -21,6 +21,7 @@ import {
   DEFAULT_STATE_TYPE,
   DIVIDER_TYPE,
 } from './stateCommon.js';
+import { node } from 'stylis';
 
 const START_NODE = '[*]';
 const START_TYPE = 'start';
@@ -542,37 +543,48 @@ const setDirection = (dir) => {
 const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
 
 const dataFetcher = (parentId, doc, nodes, edges) => {
-  doc.forEach((item) => {
-    switch (item.stmt) {
-      case STMT_STATE:
-        if (parentId) {
-          nodes.push({ ...item, labelText: item.id, labelType: 'text', parentId, shape: 'rect' });
-        } else {
-          nodes.push({
-            ...item,
-            labelText: item.id,
-            // description: item.id,
-            labelType: 'text',
-            labelStyle: '',
-            shape: 'rect',
-            domId: 'state-bla-bla-bla',
-            x: 100,
-            y: 100,
-            height: 100,
-            width: 100,
-            padding: 15,
-            classes: ' statediagram-state',
-          });
-        }
-        if (item.doc) {
-          dataFetcher(item.id, item.doc, nodes, edges);
-        }
-        break;
-      case STMT_RELATION:
-        edges.push(item);
-        break;
+  extract(doc);
+
+  //states
+  const stateKeys = Object.keys(currentDocument.states);
+
+  stateKeys.forEach((key) => {
+    const item = currentDocument.states[key];
+
+    if (parentId) {
+      nodes.push({ ...item, labelText: item.id, labelType: 'text', parentId, shape: 'rect' });
+    } else {
+      nodes.push({
+        ...item,
+        labelText: item.id,
+        // description: item.id,
+        labelType: 'text',
+        labelStyle: '',
+        shape: 'rect',
+        padding: 15,
+        classes: ' statediagram-state',
+      });
     }
   });
+
+  //edges
+  currentDocument.relations.forEach((item) => {
+    edges.push({
+      id: item.id1 + item.id2,
+      from: item.id1,
+      to: item.id2,
+      label: item.relationTitle,
+    });
+  });
+
+  // if (item.doc) {
+  //   dataFetcher(item.id, item.doc, nodes, edges);
+  // }
+  //break;
+  //   case STMT_RELATION:
+  //     edges.push(item);
+  //     break;
+  // }
 };
 export const getData = () => {
   const nodes = [];

packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

@@ -83,7 +83,6 @@ export const draw = async function (text: string, id: string, _version: string,
   // // The performRender method provided in all supported diagrams is used to render the data
   // performRender(data4Rendering);
 
-  console.log('REF1:', data4Layout);
   data4Layout.type = diag.type;
   data4Layout.layoutAlgorithm = 'dagre-wrapper';
   data4Layout.skin = 'roughjs';
@@ -92,7 +91,7 @@ export const draw = async function (text: string, id: string, _version: string,
   data4Layout.rankSpacing = conf.rankSpacing || 50;
   data4Layout.markers = ['barb'];
   data4Layout.diagramId = id;
-
+  console.log('REF1:', data4Layout);
   await render(data4Layout, svg, element);
 };
 

packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

@@ -203,6 +203,11 @@ export const render = async (data4Layout, svg, element) => {
     graph.setNode(node.id, { ...node });
   });
 
+  console.log('Edges:', data4Layout.edges);
+  data4Layout.edges.forEach((edge) => {
+    graph.setEdge(edge.from, edge.to, { ...edge });
+  });
+
   log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
   adjustClustersAndEdges(graph);
   log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));

packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts

@@ -1,6 +1,7 @@
 import { log } from '$root/logger.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
 
 /**
  *
@@ -9,12 +10,20 @@ import intersect from '../intersect/index.js';
  * @param totalWidth
  * @param totalHeight
  */
-function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {
-  const strokeDashArray = [];
-  const addBorder = (length) => {
+function applyNodePropertyBorders(
+  rect: d3.Selection<SVGRectElement, unknown, null, undefined>,
+  borders: string | undefined,
+  totalWidth: number,
+  totalHeight: number
+) {
+  if (!borders) {
+    return;
+  }
+  const strokeDashArray: number[] = [];
+  const addBorder = (length: number) => {
     strokeDashArray.push(length, 0);
   };
-  const skipBorder = (length) => {
+  const skipBorder = (length: number) => {
     strokeDashArray.push(0, length);
   };
   if (borders.includes('t')) {
@@ -41,10 +50,11 @@ function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {
   } else {
     skipBorder(totalHeight);
   }
+
   rect.attr('stroke-dasharray', strokeDashArray.join(' '));
 }
 
-export const rect = async (parent, node) => {
+export const rect = async (parent: SVGAElement, node: Node) => {
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
     node,
@@ -52,7 +62,7 @@ export const rect = async (parent, node) => {
     true
   );
 
-  console.log('rect node', node);
+  console.log('new rect node', node);
 
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
@@ -75,7 +85,7 @@ export const rect = async (parent, node) => {
   if (node.props) {
     const propKeys = new Set(Object.keys(node.props));
     if (node.props.borders) {
-      applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);
+      applyNodePropertyBorders(rect, node.props.borders + '', totalWidth, totalHeight);
       propKeys.delete('borders');
     }
     propKeys.forEach((propKey) => {
@@ -92,7 +102,7 @@ export const rect = async (parent, node) => {
   return shapeSvg;
 };
 
-export const labelRect = async (parent, node) => {
+export const labelRect = async (parent: SVGElement, node: Node) => {
   const { shapeSvg } = await labelHelper(parent, node, 'label', true);
 
   log.trace('Classes = ', node.class);
@@ -108,7 +118,7 @@ export const labelRect = async (parent, node) => {
   if (node.props) {
     const propKeys = new Set(Object.keys(node.props));
     if (node.props.borders) {
-      applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);
+      applyNodePropertyBorders(rect, node.borders, totalWidth, totalHeight);
       propKeys.delete('borders');
     }
     propKeys.forEach((propKey) => {

packages/mermaid/src/rendering-util/types.d.ts

@@ -33,6 +33,11 @@ interface Node {
   tooltip?: string;
   type: string;
   width?: number;
+  intersect?: (point: any) => any;
+  // Specific properties for State Diagram nodes TODO remove and use generic properties
+  style?: string;
+  class?: string;
+  borders?: string;
 }
 
 // Common properties for any edge in the system