Updated shapes

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

@@ -42,18 +42,17 @@ export const crossedCircle = async (parent: SVGAElement, node: Node) => {
   const linePath = createLine(radius);
   const lineNode = rc.path(linePath, options);
 
-  const crossedCircle = shapeSvg.insert('g', ':first-child');
+  const crossedCircle = shapeSvg.insert(() => circleNode, ':first-child');
-  crossedCircle.insert(() => circleNode, ':first-child');
   crossedCircle.insert(() => lineNode);
 
   crossedCircle.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    crossedCircle.attr('style', cssStyles);
+    crossedCircle.selectAll('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    crossedCircle.attr('style', nodeStyles);
+    crossedCircle.selectAll('path').attr('style', nodeStyles);
   }
 
   updateNodeBounds(node, crossedCircle);

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

@@ -54,11 +54,12 @@ export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
   const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
   polygon.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', cssStyles);
+    polygon.selectChildren('path').attr('style', cssStyles);
   }
-  if (nodeStyles) {
+
-    polygon.attr('style', nodeStyles);
+  if (nodeStyles && node.look !== 'handDrawn') {
+    polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
   polygon.attr('transform', `translate(${-w / 2}, ${-h / 2})`);

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

@@ -7,41 +7,16 @@ import {
 } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
-export function createDividedRectPathD(
-  x: number,
-  y: number,
-  totalWidth: number,
-  totalHeight: number
-) {
-  const w = totalWidth;
-  const firstRectHeight = totalHeight * 0.3;
-  const secondRectHeight = totalHeight * 0.6 + firstRectHeight;
-
-  const rect1stPoints = [
-    { x: x, y },
-    { x: x + w, y },
-    { x: x + w, y: y + firstRectHeight },
-    { x: x, y: y + firstRectHeight },
-  ];
-
-  const rect2ndPoints = [
-    { x: x, y: y + firstRectHeight },
-    { x: x + w, y: y + firstRectHeight },
-    { x: x + w, y: y + firstRectHeight + secondRectHeight },
-    { x: x, y: y + firstRectHeight + secondRectHeight },
-  ];
-  const rect1stPath = createPathFromPoints(rect1stPoints);
-  const rect2ndPath = createPathFromPoints(rect2ndPoints);
-  const finalPath = `${rect1stPath} ${rect2ndPath}`;
-  return finalPath;
-}
-
 export const dividedRect = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
+  const rectOffset = h * 0.2;
+
+  const x = -w / 2;
+  const y = -h / 2 - rectOffset / 2;
 
   const { cssStyles } = node;
 
@@ -52,25 +27,43 @@ export const dividedRect = async (parent: SVGAElement, node: Node) => {
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
-  const pathData = createDividedRectPathD(0, 0, w, h);
-  const shapeNode = rc.path(pathData, options);
 
-  const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
+  const outerPathPoints = [
+    { x, y: y },
+    { x, y: -y },
+    { x: -x, y: -y },
+    { x: -x, y: y },
+  ];
+  const innerPathPoints = [
+    { 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');
+  polygon.insert(() => innerNode);
   polygon.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', cssStyles);
+    polygon.selectAll('path').attr('style', cssStyles);
-  }
-  if (nodeStyles) {
-    polygon.attr('style', nodeStyles);
   }
 
-  polygon.attr('transform', `translate(${-w / 2}, ${-h / 1.3})`);
+  if (nodeStyles && node.look !== 'handDrawn') {
+    polygon.selectAll('path').attr('style', nodeStyles);
+  }
+
+  label.attr(
+    'transform',
+    `translate(${x + (node.padding ?? 0) / 2}, ${y + rectOffset + (node.padding ?? 0) / 2})`
+  );
 
   updateNodeBounds(node, polygon);
 
   node.intersect = function (point) {
-    const pos = intersect.polygon(node, point);
+    const pos = intersect.polygon(node, outerPathPoints, point);
     return pos;
   };
 

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

@@ -27,17 +27,16 @@ export const filledCircle = async (parent: SVGAElement, node: Node) => {
 
   const circleNode = rc.circle(0, 0, radius * 2, options);
 
-  const filledCircle = shapeSvg.insert('g', ':first-child');
+  const filledCircle = shapeSvg.insert(() => circleNode, ':first-child');
-  filledCircle.insert(() => circleNode, ':first-child');
 
   filledCircle.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    filledCircle.attr('style', cssStyles);
+    filledCircle.selectAll('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    filledCircle.attr('style', nodeStyles);
+    filledCircle.selectAll('path').attr('style', nodeStyles);
   }
 
   updateNodeBounds(node, filledCircle);

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

@@ -41,12 +41,12 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
   const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
   polygon.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', cssStyles);
+    polygon.selectChildren('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', nodeStyles);
+    polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
   polygon.attr('transform', `translate(${-rx / 2 - (node.padding ?? 0) * 2}, 0)`);

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

@@ -40,12 +40,12 @@ export const hourglass = async (parent: SVGAElement, node: Node) => {
   const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
   polygon.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', cssStyles);
+    polygon.selectChildren('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', nodeStyles);
+    polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
   polygon.attr('transform', `translate(${-w / 2}, ${-h / 2})`);

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

@@ -40,18 +40,18 @@ export const lightningBolt = async (parent: SVGAElement, node: Node) => {
   const linePath = createPathFromPoints(points);
   const lineNode = rc.path(linePath, options);
 
-  const lightningBolt = shapeSvg.insert('g', ':first-child');
+  const lightningBolt = shapeSvg.insert(() => lineNode, ':first-child');
-  lightningBolt.insert(() => lineNode, ':first-child');
 
   lightningBolt.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    lightningBolt.attr('style', cssStyles);
+    lightningBolt.selectAll('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    lightningBolt.attr('style', nodeStyles);
+    lightningBolt.selectAll('path').attr('style', nodeStyles);
   }
+
   lightningBolt.attr('transform', `translate(-${width / 2},${-height})`);
 
   updateNodeBounds(node, lightningBolt);

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

@@ -42,7 +42,7 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
-    const pathData = createCylinderPathWithInnerArcD(0, ry, w, h, rx, ry, outerOffset);
+    const pathData = createCylinderPathWithInnerArcD(0, 0, w, h, rx, ry, outerOffset);
     const innerLine = rc.path(pathData, options);
 
     cylinder = shapeSvg.insert(() => innerLine, ':first-child');

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

@@ -46,7 +46,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
     { x, y },
   ];
 
-  if (node.look !== 'handdrawn') {
+  if (node.look !== 'handDrawn') {
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
@@ -56,18 +56,17 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
   const innerPath = createPathFromPoints(innerPathPoints);
   const innerNode = rc.path(innerPath, options);
 
-  const taggedRect = shapeSvg.insert('g', ':first-child');
+  const multiRect = shapeSvg.insert(() => innerNode, ':first-child');
-  taggedRect.insert(() => innerNode, ':first-child');
+  multiRect.insert(() => outerNode, ':first-child');
-  taggedRect.insert(() => outerNode, ':first-child');
 
-  taggedRect.attr('class', 'basic label-container');
+  multiRect.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    taggedRect.attr('style', cssStyles);
+    multiRect.selectAll('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    taggedRect.attr('style', nodeStyles);
+    multiRect.selectAll('path').attr('style', nodeStyles);
   }
 
   label.attr(
@@ -75,7 +74,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
     `translate(${-(bbox.width / 2) - rectOffset}, ${-(bbox.height / 2) + rectOffset})`
   );
 
-  updateNodeBounds(node, taggedRect);
+  updateNodeBounds(node, multiRect);
 
   node.intersect = function (point) {
     const pos = intersect.polygon(node, outerPathPoints, point);

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

@@ -40,12 +40,12 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => {
   const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
   polygon.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', cssStyles);
+    polygon.selectChildren('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', nodeStyles);
+    polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
   polygon.attr('transform', `translate(0, ${h / 4})`);

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

@@ -47,21 +47,22 @@ export const taggedRect = async (parent: SVGAElement, node: Node) => {
   const tagPath = createPathFromPoints(tagPoints);
   const tagNode = rc.path(tagPath, options);
 
-  const taggedRect = shapeSvg.insert('g', ':first-child');
+  const taggedRect = shapeSvg.insert(() => tagNode, ':first-child');
-  taggedRect.insert(() => tagNode, ':first-child');
   taggedRect.insert(() => rectNode, ':first-child');
 
   taggedRect.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    taggedRect.attr('style', cssStyles);
+    taggedRect.selectAll('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    taggedRect.attr('style', nodeStyles);
+    taggedRect.selectAll('path').attr('style', nodeStyles);
   }
   taggedRect.attr('transform', `translate(${tagWidth / 2}, 0)`);
 
+  taggedRect.attr('transform', `translate(${tagWidth / 2}, 0)`);
+
   updateNodeBounds(node, taggedRect);
 
   node.intersect = function (point) {

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

@@ -38,17 +38,16 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
   const cylinderPath = createCylinderPathD(rx, ry, w, h);
   const cylinderNode = rc.path(cylinderPath, options);
 
-  const tiltedCylinder = shapeSvg.insert('g', ':first-child');
+  const tiltedCylinder = shapeSvg.insert(() => cylinderNode, ':first-child');
-  tiltedCylinder.insert(() => cylinderNode, ':first-child');
 
   tiltedCylinder.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    tiltedCylinder.attr('style', cssStyles);
+    tiltedCylinder.selectChildren('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    tiltedCylinder.attr('style', nodeStyles);
+    tiltedCylinder.selectChildren('path').attr('style', nodeStyles);
   }
 
   updateNodeBounds(node, tiltedCylinder);

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

@@ -7,21 +7,6 @@ import {
 } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
-function createTrapezoidalPentagonPathD(width = 100, height = 80) {
-  const topOffset = 30,
-    slopeHeight = 15;
-
-  const points = [
-    { x: topOffset, y: 0 },
-    { x: width - topOffset, y: 0 },
-    { x: width, y: slopeHeight },
-    { x: width, y: height },
-    { x: 0, y: height },
-    { x: 0, y: slopeHeight },
-  ];
-  return createPathFromPoints(points);
-}
-
 export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
@@ -40,17 +25,30 @@ export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
     options.fillStyle = 'solid';
   }
 
-  const pathData = createTrapezoidalPentagonPathD(w, h);
+  const topOffset = 30;
+  const slopeHeight = 15;
+
+  const points = [
+    { x: topOffset, y: 0 },
+    { x: w - topOffset, y: 0 },
+    { x: w, y: slopeHeight },
+    { x: w, y: h },
+    { x: 0, y: h },
+    { x: 0, y: slopeHeight },
+  ];
+
+  const pathData = createPathFromPoints(points);
   const shapeNode = rc.path(pathData, options);
 
   const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
   polygon.attr('class', 'basic label-container');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', cssStyles);
+    polygon.selectChildren('path').attr('style', cssStyles);
   }
-  if (nodeStyles) {
+
-    polygon.attr('style', nodeStyles);
+  if (nodeStyles && node.look !== 'handDrawn') {
+    polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
   polygon.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
@@ -58,7 +56,7 @@ export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
   updateNodeBounds(node, polygon);
 
   node.intersect = function (point) {
-    const pos = intersect.rect(node, point);
+    const pos = intersect.polygon(node, points, point);
     return pos;
   };
 

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

@@ -40,12 +40,12 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAEle
     .insert(() => roughNode, ':first-child')
     .attr('transform', `translate(${-h / 2}, ${h / 2})`);
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', cssStyles);
+    polygon.selectChildren('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    polygon.attr('style', nodeStyles);
+    polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
   node.width = w;

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

@@ -39,7 +39,7 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
     { x, y: y + h },
   ];
 
-  if (node.look !== 'handdrawn') {
+  if (node.look !== 'handDrawn') {
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
@@ -51,20 +51,19 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
   const innerSecondPath = createPathFromPoints(innerSecondPathPoints);
   const innerSecondNode = rc.path(innerSecondPath, options);
 
-  const windowPane = shapeSvg.insert('g', ':first-child');
+  const windowPane = shapeSvg.insert(() => innerNode, ':first-child');
-  windowPane.insert(() => innerNode, ':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');
 
-  if (cssStyles) {
+  if (cssStyles && node.look !== 'handDrawn') {
-    windowPane.attr('style', cssStyles);
+    windowPane.selectAll('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
+  if (nodeStyles && node.look !== 'handDrawn') {
-    windowPane.attr('style', nodeStyles);
+    windowPane.selectAll('path').attr('style', nodeStyles);
   }
 
   label.attr(