Merge branch '5237-unified-layout-common-renderer' into sidv/5237

* 5237-unified-layout-common-renderer:
  Tweaking spacings for elk and confurinable network placement strategy
  #5237 Elk spacing tweak and fix for fonthandling in directives
  #5237 Handling label size for elk layout
  #5237 Handling paddings in subgraphs for state diagrams
  #5237 Handling paddings in subgraphs for state diagrams

cypress/platform/state-refactor.html

@@ -1221,12 +1221,15 @@
 
   <script type="module">
     import mermaid from './mermaid.esm.mjs';
+    import { layouts } from './mermaid-layout-elk.esm.mjs';
+    mermaid.registerLayoutLoaders(layouts);
     mermaid.parseError = function (err, hash) {
 
     };
 
     mermaid.initialize({
       handdrawn: false,
+      mergeEdges: true,
       layout: 'dagre',
       flowchart: { titleTopMargin: 10 },
       // fontFamily: 'Caveat',
@@ -1249,8 +1252,8 @@
 
 
     let coll = document.getElementsByClassName("collapsible");
-    for (let i = 0; i < coll.length; i++) {
-      coll[i].addEventListener("click", function () {
+    for (const element of coll) {
+  element.addEventListener("click", function () {
         this.classList.toggle("active");
         let content = this.nextElementSibling;
         if (content.style.maxHeight) {

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

@@ -3,6 +3,7 @@ import { curveLinear } from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import mermaid from 'mermaid';
 import { findCommonAncestor } from './find-common-ancestor.js';
+import config from '../../mermaid/src/defaultConfig';
 
 const {
   common,
@@ -70,13 +71,19 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
     child.children = [];
     await addVertices(nodeEl, nodeArr, child, node.id);
 
-    // We need the label hight to be able to size the subgraph;
-    const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
-    labelData.width = bbox.width;
-    labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
-    labelData.height = bbox.height;
-    labelData.labelNode = shapeSvg.node();
-    shapeSvg.remove();
+    if (node.label) {
+      const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
+      labelData.width = bbox.width;
+      labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
+      labelData.height = bbox.height - 8;
+      labelData.labelNode = shapeSvg.node();
+      // We need the label hight to be able to size the subgraph;
+      shapeSvg.remove();
+    } else {
+      // Subgraph without label
+      labelData.width = 0;
+      labelData.height = 0;
+    }
     child.labelData = labelData;
     child.domId = nodeEl;
   }
@@ -454,18 +461,11 @@ export const render = async (data4Layout, svg, element, algorithm) => {
     id: 'root',
     layoutOptions: {
       'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
-      'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
-      'elk.layered.spacing.edgeNodeBetweenLayers': '30',
       'elk.algorithm': algorithm,
-      'nodePlacement.strategy': 'NETWORK_SIMPLEX',
-
-      'spacing.nodeNode': 70,
-      'spacing.nodeNodeBetweenLayers': 25,
-      'spacing.edgeNode': 10,
-      'spacing.edgeNodeBetweenLayers': 20,
-      'spacing.edgeEdge': 20,
-      'spacing.edgeEdgeBetweenLayers': 20,
-      'spacing.nodeSelfLoop': 20,
+      'nodePlacement.strategy': data4Layout.config['elk.nodePlacement.strategy'],
+      'elk.layered.mergeEdges': data4Layout.config.mergeEdges,
+      'elk.direction': 'DOWN',
+      'spacing.baseValue': 30,
     },
     children: [],
     edges: [],
@@ -504,18 +504,23 @@ export const render = async (data4Layout, svg, element, algorithm) => {
 
     // Subgraph
     if (parentLookupDb.childrenById[node.id] !== undefined) {
+      log.trace('Subgraph XCX', node.id, node);
       node.labels = [
         {
           text: node.labelText,
           layoutOptions: {
             'nodeLabels.placement': '[H_CENTER, V_TOP, INSIDE]',
           },
-          width: node?.labelData?.width || 100,
-          height: node?.labelData?.height || 100,
+          width: node?.labelData?.width || 0,
+          height: node?.labelData?.height || 0,
         },
       ];
+      node.layoutOptions = {
+        'spacing.baseValue': 30,
+      };
       if (node.dir) {
         node.layoutOptions = {
+          ...node.layoutOptions,
           'elk.direction': dir2ElkDirection(node.dir),
           'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
         };
@@ -538,9 +543,9 @@ export const render = async (data4Layout, svg, element, algorithm) => {
     }
   });
 
-  log.info('before layout', JSON.stringify(elkGraph, null, 2));
+  log.trace('before layout', JSON.stringify(elkGraph, null, 2));
   const g = await elk.layout(elkGraph);
-  log.info('after layout DAGA', JSON.stringify(g));
+  log.info('after layout', JSON.stringify(g));
 
   // debugger;
   drawNodes(0, 0, g.children, svg, subGraphsEl, 0);

packages/mermaid/src/config.ts

@@ -190,7 +190,10 @@ export const addDirective = (directive: MermaidConfig) => {
 
   // If the directive has a fontFamily, but no themeVariables, add the fontFamily to the themeVariables
   if (directive.fontFamily && (!directive.themeVariables || !directive.themeVariables.fontFamily)) {
-    directive.themeVariables = { fontFamily: directive.fontFamily };
+    directive.themeVariables = {
+      ...directive.themeVariables,
+      fontFamily: directive.fontFamily,
+    };
   }
 
   directives.push(directive);

packages/mermaid/src/config.type.ts

@@ -88,6 +88,16 @@ export interface MermaidConfig {
    *
    */
   maxEdges?: number;
+  /**
+   * Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
+   *
+   */
+  'elk.mergeEdges'?: boolean;
+  /**
+   * Elk specific option affedcting how nodes are placed.
+   *
+   */
+  'elk.nodePlacement.strategy'?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF';
   darkMode?: boolean;
   htmlLabels?: boolean;
   /**

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

@@ -237,7 +237,6 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
     }
 
     const newNode = nodeDb[itemId];
-    // console.log('New Node:', newNode);
 
     // Save data for description and group so that for instance a statement without description overwrites
     // one with description  @todo TODO What does this mean? If important, add a test for it
@@ -273,7 +272,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
 
     // group
     if (!newNode.type && parsedItem.doc) {
-      log.info('Setting cluster for ', itemId, getDir(parsedItem));
+      log.info('Setting cluster for XCX', itemId, getDir(parsedItem));
       newNode.type = 'group';
       newNode.isGroup = true;
       newNode.dir = getDir(parsedItem);
@@ -298,12 +297,17 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
       domId: stateDomId(itemId, graphItemCount),
       type: newNode.type,
       isGroup: newNode.type === 'group',
-      padding: 15,
+      padding: 8,
       rx: 10,
       ry: 10,
       useRough,
     };
 
+    // Clear the label for dividers who have no description
+    if (nodeData.shape === SHAPE_DIVIDER) {
+      nodeData.label = '';
+    }
+
     if (parent && parent.id !== 'root') {
       log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id);
       nodeData.parentId = parent.id;
@@ -324,7 +328,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
         domId: stateDomId(itemId, graphItemCount, NOTE),
         type: newNode.type,
         isGroup: newNode.type === 'group',
-        padding: 15, //getConfig().flowchart.padding
+        padding: 0, //getConfig().flowchart.padding
         useRough,
       };
       const groupData = {
@@ -337,7 +341,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
         domId: stateDomId(itemId, graphItemCount, PARENT),
         type: 'group',
         isGroup: true,
-        padding: 0, //getConfig().flowchart.padding
+        padding: 16, //getConfig().flowchart.padding
         useRough,
       };
       graphItemCount++;
@@ -382,8 +386,6 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
     } else {
       insertOrUpdateNode(nodes, nodeData);
     }
-
-    // console.log('Nodes:', nodes);
   }
   if (parsedItem.doc) {
     log.trace('Adding nodes children ');

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

@@ -581,11 +581,11 @@ export const getData = () => {
   // }
   extract(getRootDocV2());
   const diagramStates = getStates();
-
-  const useRough = getConfig().look === 'handdrawn';
+  const config = getConfig();
+  const useRough = config.look === 'handdrawn';
   dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
 
-  return { nodes, edges, other: {} };
+  return { nodes, edges, other: {}, config };
 };
 
 export default {