Updated shapes

cypress/integration/rendering/newShapes.spec.ts

@@ -1,7 +1,7 @@
 import { imgSnapshotTest } from '../../helpers/util.ts';
 
-const looks = ['classic'] as const;
+const looks = ['classic', 'handDrawn'] as const;
-const directions = ['TB'] as const;
+const directions = ['TB', 'BT', 'LR', 'RL'] as const;
 const newShapesSet1 = [
   'triangle',
   'sloped-rectangle',
@@ -68,7 +68,7 @@ looks.forEach((look) => {
         it(`with label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -76,7 +76,7 @@ looks.forEach((look) => {
         it(`connect all shapes with each other`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
           });
           for (let i = 0; i < newShapesSet.length; i++) {
             for (let j = i + 1; j < newShapesSet.length; j++) {
@@ -89,7 +89,7 @@ looks.forEach((look) => {
         it(`with very long label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -97,7 +97,7 @@ looks.forEach((look) => {
         it(`with markdown htmlLabels:true`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -105,7 +105,7 @@ looks.forEach((look) => {
         it(`with markdown htmlLabels:false`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, {
             look,
@@ -117,7 +117,7 @@ looks.forEach((look) => {
         it(`with styles`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
             flowchartCode += `  style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
           });
           imgSnapshotTest(flowchartCode, { look });
@@ -127,7 +127,7 @@ looks.forEach((look) => {
           let flowchartCode = `flowchart ${direction}\n`;
           flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
             flowchartCode += `  n${index}${index}:::customClazz\n`;
           });
           imgSnapshotTest(flowchartCode, { look });

cypress/platform/saurabh.html

@@ -63,16 +63,10 @@
   <body style="display: flex; gap: 2rem; flex-direction: row">
     <pre id="diagram4" class="mermaid">
       flowchart LR
-       B2@{ icon: "fa:address-book",  form: "square", pos: "b", h: 80 }
+      n21@{ shape: subproc,label: "Untitled Node"}
-
+      n52@{ shape: internal-storage,label: "Untitled Node"}
-
+      n53@{ shape: div-rect,label: "Untitled Node"}
-       W --> B2 --> x1
+      n54@{ shape: lin-doc,label: "Untitled Node"}
-       X --> B2 --> x2
-       Y --> B2 --> x3
-       Z --> B2 --> x4 
-       B2 --<strong>sas</strong>--> C
-
-       A --> B2
 
 
     </pre>
@@ -150,14 +144,17 @@
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10, htmlLabels: true },
         // fontFamily: 'Caveat',
-        fontFamily: 'Kalam',
+        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
+        fontFamily: 'courier',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',
           messageFontFamily: 'courier',
         },
-        fontSize: 12,
+        themeVariables: {
+          fontSize: 50,
+          fontFamily: 'courier',
+        },
         logLevel: 0,
         securityLevel: 'loose',
       });

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

@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.d.ts';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
@@ -25,23 +25,22 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
     options.fillStyle = 'solid';
   }
 
-  const outerPathPoints = [
+  const pts = [
-    { x, y: y },
+    { x, y: y + rectOffset },
-    { x, y: -y },
+    { x: -x, y: y + rectOffset },
     { x: -x, y: -y },
-    { x: -x, y: y },
+    { x, y: -y },
-  ];
+    { x, y },
-  const innerPathPoints = [
+    { x: -x, y },
-    { x: x, y: y + rectOffset },
     { x: -x, y: y + rectOffset },
   ];
-  const outerPathData = createPathFromPoints(outerPathPoints);
-  const outerNode = rc.path(outerPathData, options);
-  const innerPathData = createPathFromPoints(innerPathPoints);
-  const innerNode = rc.path(innerPathData, options);
 
-  const polygon = shapeSvg.insert(() => outerNode, ':first-child');
+  const poly = rc.polygon(
-  polygon.insert(() => innerNode);
+    pts.map((p) => [p.x, p.y]),
+    options
+  );
+
+  const polygon = shapeSvg.insert(() => poly, ':first-child');
   polygon.attr('class', 'basic label-container');
 
   if (cssStyles && node.look !== 'handDrawn') {
@@ -60,7 +59,7 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
   updateNodeBounds(node, polygon);
 
   node.intersect = function (point) {
-    const pos = intersect.polygon(node, outerPathPoints, point);
+    const pos = intersect.rect(node, point);
     return pos;
   };
 

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

@@ -3,7 +3,6 @@ import {
   updateNodeBounds,
   getNodeClasses,
   generateFullSineWavePoints,
-  createPathFromPoints,
 } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.d.ts';
@@ -30,6 +29,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
   }
 
   const points = [
+    { x: -w / 2 - (w / 2) * 0.1, y: -finalH / 2 },
     { x: -w / 2 - (w / 2) * 0.1, y: finalH / 2 },
     ...generateFullSineWavePoints(
       -w / 2 - (w / 2) * 0.1,
@@ -41,24 +41,17 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
     ),
     { x: w / 2 + (w / 2) * 0.1, y: -finalH / 2 },
     { x: -w / 2 - (w / 2) * 0.1, y: -finalH / 2 },
+    { x: -w / 2, y: -finalH / 2 },
+    { x: -w / 2, y: (finalH / 2) * 1.1 },
+    { x: -w / 2, y: -finalH / 2 },
   ];
 
-  const x = -w / 2;
+  const poly = rc.polygon(
-  const y = -finalH / 2;
+    points.map((p) => [p.x, p.y]),
+    options
+  );
 
-  const innerPathPoints = [
+  const waveEdgeRect = shapeSvg.insert(() => poly, ':first-child');
-    { x: x, y: y },
-    { x: x, y: -y * 1.1 },
-  ];
-
-  const waveEdgeRectPath = createPathFromPoints(points);
-  const waveEdgeRectNode = rc.path(waveEdgeRectPath, options);
-
-  const innerSecondPath = createPathFromPoints(innerPathPoints);
-  const innerSecondNode = rc.path(innerSecondPath, options);
-
-  const waveEdgeRect = shapeSvg.insert(() => innerSecondNode, ':first-child');
-  waveEdgeRect.insert(() => waveEdgeRectNode, ':first-child');
 
   waveEdgeRect.attr('class', 'basic label-container');
 

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

@@ -1,4 +1,4 @@
-import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
+import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js';
 import type { Node } from '../../types.d.ts';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
@@ -26,31 +26,18 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
     { x: x + w, y: y - rectOffset },
   ];
 
-  const innerPathPoints = [
+  const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset}
-    { x: x - rectOffset, y },
+                M${x - rectOffset},${y} L${x + w},${y}
-    { x: x + w, y },
+                M${x},${y - rectOffset} L${x},${y + h}`;
-  ];
-
-  const innerSecondPathPoints = [
-    { x, y: y - rectOffset },
-    { x, y: y + h },
-  ];
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
 
-  const outerPath = createPathFromPoints(outerPathPoints);
+  const no = rc.path(path, options);
-  const outerNode = rc.path(outerPath, options);
-  const innerPath = createPathFromPoints(innerPathPoints);
-  const innerNode = rc.path(innerPath, options);
-  const innerSecondPath = createPathFromPoints(innerSecondPathPoints);
-  const innerSecondNode = rc.path(innerSecondPath, options);
 
-  const windowPane = shapeSvg.insert(() => innerNode, ':first-child');
+  const windowPane = shapeSvg.insert(() => no, ':first-child');
-  windowPane.insert(() => innerSecondNode, ':first-child');
-  windowPane.insert(() => outerNode, ':first-child');
   windowPane.attr('transform', `translate(${rectOffset / 2}, ${rectOffset / 2})`);
 
   windowPane.attr('class', 'basic label-container');