#5237 Bugfixes

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

@@ -54,16 +54,16 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM
   return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`;
 }
 
-const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough) => {
+const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough, look) => {
   // graphItemCount = 0;
   log.trace('items', doc);
   doc.forEach((item) => {
     switch (item.stmt) {
       case STMT_STATE:
-        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough);
+        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
         break;
       case DEFAULT_STATE_TYPE:
-        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough);
+        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
         break;
       case STMT_RELATION:
         {
@@ -74,7 +74,8 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
             nodes,
             edges,
             altFlag,
-            useRough
+            useRough,
+            look
           );
           dataFetcher(
             parentParsedItem,
@@ -83,7 +84,8 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
             nodes,
             edges,
             altFlag,
-            useRough
+            useRough,
+            look
           );
           const edgeData = {
             id: 'edge' + graphItemCount,
@@ -100,6 +102,7 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
             thickness: G_EDGE_THICKNESS,
             classes: CSS_EDGE,
             useRough,
+            look,
           };
           edges.push(edgeData);
           //g.setEdge(item.state1.id, item.state2.id, edgeData, graphItemCount);
@@ -210,7 +213,16 @@ function getClassesFromDbInfo(dbInfoItem) {
     }
   }
 }
-export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, useRough) => {
+export const dataFetcher = (
+  parent,
+  parsedItem,
+  diagramStates,
+  nodes,
+  edges,
+  altFlag,
+  useRough,
+  look
+) => {
   const itemId = parsedItem.id;
   const classStr = getClassesFromDbInfo(diagramStates[itemId]);
 
@@ -301,6 +313,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
       rx: 10,
       ry: 10,
       useRough,
+      look,
     };
 
     // Clear the label for dividers who have no description
@@ -330,6 +343,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
         isGroup: newNode.type === 'group',
         padding: 0, //getConfig().flowchart.padding
         useRough,
+        look,
       };
       const groupData = {
         labelStyle: '',
@@ -343,6 +357,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
         isGroup: true,
         padding: 16, //getConfig().flowchart.padding
         useRough,
+        look,
       };
       graphItemCount++;
 
@@ -382,6 +397,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
         labelType: G_EDGE_LABELTYPE,
         thickness: G_EDGE_THICKNESS,
         useRough,
+        look,
       });
     } else {
       insertOrUpdateNode(nodes, nodeData);
@@ -389,6 +405,11 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
   }
   if (parsedItem.doc) {
     log.trace('Adding nodes children ');
-    setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough);
+    setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look);
   }
 };
+
+export const reset = () => {
+  nodeDb = {};
+  graphItemCount = 0;
+};

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

@@ -11,7 +11,7 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
-import { dataFetcher } from './dataFetcher.js';
+import { dataFetcher, reset as resetDataFetching } from './dataFetcher.js';
 
 import {
   DEFAULT_DIAGRAM_DIRECTION,
@@ -583,6 +583,8 @@ export const getData = () => {
   const diagramStates = getStates();
   const config = getConfig();
   const useRough = config.look === 'handdrawn';
+  const look = config.look;
+  resetDataFetching();
   dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
 
   console.log('State Nodes XDX:', nodes);

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

@@ -436,38 +436,34 @@ const fixCorners = function (lineData) {
       // Find a new point on the line point 5 points back and push it to the new array
       const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5);
       const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5);
+      newLineData.push(newPrevPoint);
 
       const xDiff = newNextPoint.x - newPrevPoint.x;
       const yDiff = newNextPoint.y - newPrevPoint.y;
-      newLineData.push(newPrevPoint);
 
       const a = Math.sqrt(2) * 2;
       let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };
-      if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {
+      if (cornerPoint.x === newPrevPoint.x) {
-        console.log(
+        // if (yDiff > 0) {
-          'Corner point fixing',
+        newCornerPoint = {
-          Math.abs(nextPoint.x - prevPoint.x),
+          x: xDiff < 0 ? newPrevPoint.x - 5 + a : newPrevPoint.x + 5 - a,
-          Math.abs(nextPoint.y - prevPoint.y)
+          y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
-        );
+        };
-        const r = 5;
+        // } else {
-        if (cornerPoint.x === newPrevPoint.x) {
+        //   newCornerPoint = { x: newPrevPoint.x - a, y: newPrevPoint.y + a };
-          newCornerPoint = {
+        // }
-            x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
-            y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
-          };
-        } else {
-          newCornerPoint = {
-            x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
-            y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a,
-          };
-        }
       } else {
-        console.log(
+        // if (yDiff > 0) {
-          'Corner point skipping fixing',
+        //   newCornerPoint = { x: newPrevPoint.x - 5 + a, y: newPrevPoint.y + a };
-          Math.abs(nextPoint.x - prevPoint.x),
+        // } else {
-          Math.abs(nextPoint.y - prevPoint.y)
+        newCornerPoint = {
-        );
+          x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
+          y: yDiff < 0 ? newPrevPoint.y - 5 + a : newPrevPoint.y + 5 - a,
+        };
+        // }
       }
+
+      // newLineData.push(cornerPoint);
       newLineData.push(newCornerPoint, newNextPoint);
     } else {
       newLineData.push(lineData[i]);
@@ -475,7 +471,6 @@ const fixCorners = function (lineData) {
   }
   return newLineData;
 };
-
 /**
  * Given a line, this function will return a new line where the corners are rounded.
  * @param lineData

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

@@ -36,6 +36,7 @@ const shapes = {
   choice,
   note,
   roundedRect,
+  rectWithTitle: roundedRect,
   squareRect,
   stadium,
   subroutine,
@@ -57,9 +58,6 @@ export const insertNode = async (elem, node, dir) => {
   let newEl;
   let el;
 
-  if (node) {
-    console.log('BLA: rect node', JSON.stringify(node));
-  }
   //special check for rect shape (with or without rounded corners)
   if (node.shape === 'rect') {
     if (node.rx && node.ry) {

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

@@ -8,6 +8,5 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
     classes: '',
   } as RectOptions;
 
-  console.log('roundedRect XDX');
   return drawRect(parent, node, options);
 };