#MC-1733 Support for subgraphs in fixed layout

cypress/platform/knsv-pos.html

@@ -105,6 +105,12 @@ stateDiagram
   S:Stillas
   T:Tiger
   U:Ulv
+  state Z {
+    state X {
+      Y:Ypsilon
+    }
+  }
+  A
 
   S --> T: angrepp
   T --> U: Apa
@@ -116,7 +122,11 @@ stateDiagram
           S: { x: 0, y: 0 },
           T: { x: 100, y: 100, width: 100, height: 100 },
           U: { x: 200, y: 200 },
-          V: { x: 300, y: 100 },
+          V: { x: 300, y: 120 },
+          Z: { x: 300, y: 10, width: 160, height: 100 },
+          X: { x: 300, y: 20, width: 80, height: 60 },
+          Y: { x: 300, y: 30, width: 50, height: 20 },
+          A: { x: 300, y: 75, width: 20, height: 20 },
         },
         edges: {
           edge0: {

cypress/platform/knsv2.html

@@ -211,7 +211,7 @@ stateDiagram
   end note
       </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 stateDiagram-v2
     direction LR
     [*] --> Active
@@ -237,9 +237,9 @@ stateDiagram-v2
         handdrawnSeed: 12,
         look: 'handdrawn',
         'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
+        layout: 'dagre',
         // layout: 'elk',
-        layout: 'fixed',
+        // layout: 'fixed',
         flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
         fontFamily: 'Kalam',

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-chart/mermaid",
-  "version": "11.0.0-beta.6",
+  "version": "11.0.0-beta.9",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

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

@@ -16,7 +16,11 @@ import {
   clear as clearNodes,
   setNodeElem,
 } from '../../rendering-elements/nodes.js';
-import { insertCluster, clear as clearClusters } from '../../rendering-elements/clusters.js';
+import {
+  insertCluster,
+  clear as clearClusters,
+  positionCluster,
+} from '../../rendering-elements/clusters.js';
 import {
   insertEdgeLabel,
   positionEdgeLabel,
@@ -53,15 +57,28 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
   const nodeDB = {};
   await Promise.all(
     data4Layout.nodes.map(async function (node) {
+      let pos;
       if (node.x === undefined || node.y === undefined) {
-        const pos = positions.nodes[node.id];
+        pos = positions.nodes[node.id];
-        node.x = pos?.x || 0;
-        node.y = pos?.y || 0;
         node.height = pos?.height || 0;
         node.width = pos?.width || 0;
       }
-
+      if (node.isGroup) {
+        node.x = 0;
+        node.y = 0;
+        await insertCluster(nodes, node, 'TB');
+        // Don't set the coordinates before they "layout", this will mess up the positioning
+        if (pos) {
+          node.x = pos?.x || 0;
+          node.y = pos?.y || 0;
+        }
+      } else {
+        if (pos) {
+          node.x = pos?.x || 0;
+          node.y = pos?.y || 0;
+        }
         await insertNode(nodes, node, 'TB');
+      }
       nodeDB[node.id] = node;
     })
   );
@@ -79,7 +96,11 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
   // Position the nodes
   await Promise.all(
     data4Layout.nodes.map(async function (node) {
+      if (node.isGroup) {
+        positionCluster(node);
+      } else {
         positionNode(node);
+      }
     })
   );
 

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

@@ -327,8 +327,20 @@ export const clear = () => {
 };
 
 export const positionCluster = (node) => {
-  log.info('Position cluster (' + node.id + ', ' + node.x + ', ' + node.y + ')');
+  log.info(
+    'Position cluster (' +
+      node.id +
+      ', ' +
+      node.x +
+      ', ' +
+      node.y +
+      ') (' +
+      node?.width +
+      ', ' +
+      node?.height +
+      ')',
+    clusterElems[node.id]
+  );
   const el = clusterElems[node.id];
-
+  el.cluster.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
-  el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
 };