MC-5237 Updates from review

packages/mermaid-layout-elk/src/render.ts

@@ -464,6 +464,13 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
       'elk.layered.mergeEdges': data4Layout.config['elk.mergeEdges'],
       'elk.direction': 'DOWN',
       'spacing.baseValue': 30,
+      // 'spacing.nodeNode': 40,
+      // 'spacing.nodeNodeBetweenLayers': 45,
+      // 'spacing.edgeNode': 40,
+      // 'spacing.edgeNodeBetweenLayers': 30,
+      // 'spacing.edgeEdge': 30,
+      // 'spacing.edgeEdgeBetweenLayers': 40,
+      // 'spacing.nodeSelfLoop': 50,
     },
     children: [],
     edges: [],

packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts

@@ -37,10 +37,11 @@ export const draw = async function (text: string, id: string, _version: string,
   log.debug('Data: ', data4Layout);
   // Create the root SVG - the element is the div containing the SVG element
   const { element, svg } = getDiagramElements(id, securityLevel);
+  const direction = getDirection();
 
   data4Layout.type = diag.type;
   data4Layout.layoutAlgorithm = layout;
-  data4Layout.direction = getDirection();
+  data4Layout.direction = direction;
   data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
   data4Layout.rankSpacing = conf?.rankSpacing || 50;
   data4Layout.markers = ['point', 'circle', 'cross'];

packages/mermaid/src/rendering-util/insertElementsForSize.js

@@ -1,4 +1,5 @@
 import { select } from 'd3';
+import { insertNode } from '../dagre-wrapper/nodes.js';
 
 export const getDiagramElements = (id, securityLevel) => {
   let sandboxElement;
@@ -18,3 +19,36 @@ export const getDiagramElements = (id, securityLevel) => {
   const element = root.select('#' + id + ' g');
   return { svg, element };
 };
+
+export function insertElementsForSize(el, data) {
+  const nodesElem = el.insert('g').attr('class', 'nodes');
+  el.insert('g').attr('class', 'edges');
+  data.nodes.forEach(async (item) => {
+    item.shape = 'rect';
+    await insertNode(nodesElem, {
+      ...item,
+      class: 'default flowchart-label',
+      labelStyle: '',
+      x: 0,
+      y: 0,
+      width: 100,
+      rx: 0,
+      ry: 0,
+      height: 100,
+      shape: 'rect',
+      padding: 8,
+    });
+    // Create a new DOM element
+    // const element = document.createElement('div');
+
+    // // Set the content of the element to the name of the item
+    // element.textContent = item.name;
+
+    // // Set the size of the element to the size of the item
+    // element.style.width = `${item.size}px`;
+    // element.style.height = `${item.size}px`;
+
+    // Append the element to the body of the document
+    // document.body.appendChild(element);
+  });
+}

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -520,6 +520,15 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   }
   // This is the accessor function we talked about above
   let curve = curveBasis;
+  // curve = curveCardinal;
+  // curve = curveLinear;
+  // curve = curveNatural;
+  // curve = curveCatmullRom.alpha(0.5);
+  // curve = curveCatmullRom;
+  // curve = curveCardinal.tension(0.7);
+  // curve = curveMonotoneY;
+  // let curve = interpolateToCurve([5], curveNatural, 0.01, 10);
+
   // Currently only flowcharts get the curve from the settings, perhaps this should
   // be expanded to a common setting? Restricting it for now in order not to cause side-effects that
   // have not been thought through
@@ -528,6 +537,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   }
 
   const { x, y } = getLineFunctionsWithOffset(edge);
+  // const lineFunction = edge.curve ? line().x(x).y(y).curve(curve) : roundedCornersLine;
   const lineFunction = line().x(x).y(y).curve(curve);
 
   // Construct stroke classes based on properties
@@ -563,6 +573,11 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   if (edge.look === 'handdrawn') {
     const rc = rough.svg(elem);
     Object.assign([], lineData);
+    // 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,
@@ -572,6 +587,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
 
     svgPath = select(svgPathNode)
       .select('path')
+      // .attr('d', lineFunction(lineData))
       .attr('id', edge.id)
       .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
       .attr('style', edge.style);