Merge from Upstream new-shapes branch

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

@@ -1,38 +1,59 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '../../types.d.ts';
+import type { Node } from '../../types.js';
-import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import rough from 'roughjs';
 
-export const createCylinderPathWithoutInnerArcD = (
+export const createCylinderPathD = (
-  w: number,
+  x: number,
-  h: number,
+  y: number,
-  rx: number,
+  width: number,
-  ry: number
+  height: number,
-) => {
-  return `M ${-w / 2} ${-h / 2}
-    L ${-w / 2} ${h / 2}
-    A ${rx} ${ry} 0 0 0 ${w / 2},${h / 2}
-    L ${w / 2} ${-h / 2}
-    A ${rx} ${ry} 0 0 0 ${-w / 2},${-h / 2}`;
-};
-
-export const createCylinderUpperArcPathD = (w: number, h: number, rx: number, ry: number) => {
-  return `M ${-w / 2} ${-h / 2}
-    A ${rx} ${ry} 0 0 0 ${w / 2} ${-h / 2}`;
-};
-
-export const createCylinderLowerArcPathD = (
-  w: number,
-  h: number,
   rx: number,
   ry: number,
   outerOffset: number
-) => {
+): string => {
-  return `M ${w / 2} ${-h / 2 + outerOffset}
+  return [
-    A ${rx} ${ry} 0 0 1 ${-w / 2} ${-h / 2 + outerOffset}`;
+    `M${x},${y + ry}`,
+    `a${rx},${ry} 0,0,0 ${width},0`,
+    `a${rx},${ry} 0,0,0 ${-width},0`,
+    `l0,${height}`,
+    `a${rx},${ry} 0,0,0 ${width},0`,
+    `l0,${-height}`,
+    `M${x},${y + ry + outerOffset}`,
+    `a${rx},${ry} 0,0,0 ${width},0`,
+  ].join(' ');
+};
+export const createOuterCylinderPathD = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  rx: number,
+  ry: number,
+  outerOffset: number
+): string => {
+  return [
+    `M${x},${y + ry}`,
+    `M${x + width},${y + ry}`,
+    `a${rx},${ry} 0,0,0 ${-width},0`,
+    `l0,${height}`,
+    `a${rx},${ry} 0,0,0 ${width},0`,
+    `l0,${-height}`,
+    `M${x},${y + ry + outerOffset}`,
+    `a${rx},${ry} 0,0,0 ${width},0`,
+  ].join(' ');
+};
+export const createInnerCylinderPathD = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  rx: number,
+  ry: number
+): string => {
+  return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
 };
-
 export const linedCylinder = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
@@ -46,43 +67,41 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => {
   const h = Math.max(bbox.height + ry + labelPaddingY, node?.height ?? 0);
   const outerOffset = h * 0.1; // 10% of height
 
+  let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  // @ts-ignore - rough is not typed
+  if (node.look === 'handDrawn') {
-  const rc = rough.svg(shapeSvg);
+    // @ts-ignore - rough is not typed
-  const options = userNodeOverrides(node, {});
+    const rc = rough.svg(shapeSvg);
+    const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry, outerOffset);
+    const innerPathData = createInnerCylinderPathD(0, ry, w, h, rx, ry);
+    const options = userNodeOverrides(node, {});
 
-  if (node.look !== 'handDrawn') {
+    const outerNode = rc.path(outerPathData, options);
-    options.roughness = 0;
+    const innerLine = rc.path(innerPathData, options);
-    options.fillStyle = 'solid';
+
+    const innerLineEl = shapeSvg.insert(() => innerLine, ':first-child');
+    innerLineEl.attr('class', 'line');
+    cylinder = shapeSvg.insert(() => outerNode, ':first-child');
+    cylinder.attr('class', 'basic label-container');
+    if (cssStyles) {
+      cylinder.attr('style', cssStyles);
+    }
+  } else {
+    const pathData = createCylinderPathD(0, 0, w, h, rx, ry, outerOffset);
+    cylinder = shapeSvg
+      .insert('path', ':first-child')
+      .attr('d', pathData)
+      .attr('class', 'basic label-container')
+      .attr('style', cssStyles)
+      .attr('style', nodeStyles);
   }
 
-  const cylinderPath = createCylinderPathWithoutInnerArcD(w, h, rx, ry);
+  // find label and move it down
-  const cylinderNode = rc.path(cylinderPath, options);
+  cylinder.attr('label-offset-y', ry);
+  cylinder.attr('transform', `translate(${-w / 2}, ${-(h / 2 + ry)})`);
 
-  const UpperArcPath = createCylinderUpperArcPathD(w, h, rx, ry);
+  updateNodeBounds(node, cylinder);
-  const UpperArcPathNode = rc.path(UpperArcPath, { ...options, fill: 'none' });
-
-  const lowerArcPath = createCylinderLowerArcPathD(w, h, rx, ry, outerOffset);
-  const lowerArcPathNode = rc.path(lowerArcPath, { ...options, fill: 'none' });
-
-  const linedCylinder = shapeSvg.insert(() => cylinderNode, ':first-child');
-  linedCylinder.insert(() => lowerArcPathNode);
-  linedCylinder.insert(() => UpperArcPathNode);
-
-  linedCylinder.attr('class', 'basic label-container');
-
-  if (cssStyles && node.look !== 'handDrawn') {
-    linedCylinder.selectAll('path').attr('style', cssStyles);
-  }
-
-  if (nodeStyles && node.look !== 'handDrawn') {
-    linedCylinder.selectAll('path').attr('style', nodeStyles);
-  }
-
-  linedCylinder.attr('label-offset-y', ry);
-
-  updateNodeBounds(node, linedCylinder);
 
   label.attr(
     'transform',

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

@@ -24,11 +24,22 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
     options.fillStyle = 'solid';
   }
 
-  const roughNode = rc.rectangle(x - 8, y, w + 16, h, options);
+  const points = [
-  const l1 = rc.line(x, y, x, y + h, options);
+    { x, y },
+    { x: x + w + 8, y },
+    { x: x + w + 8, y: y + h },
+    { x: x - 8, y: y + h },
+    { x: x - 8, y: y },
+    { x, y },
+    { x, y: y + h },
+  ];
 
-  const rect = shapeSvg.insert(() => l1, ':first-child');
+  const roughNode = rc.polygon(
-  rect.insert(() => roughNode, ':first-child');
+    points.map((p) => [p.x, p.y]),
+    options
+  );
+
+  const rect = shapeSvg.insert(() => roughNode, ':first-child');
 
   rect.attr('class', 'basic label-container').attr('style', cssStyles);
 

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

@@ -4,19 +4,50 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 
-function createCylinderPathD(rx: number, ry: number, w: number, h: number) {
+export const createCylinderPathD = (
-  return `M ${w / 2} ${-h / 2}
+  x: number,
-            L ${-w / 2} ${-h / 2}
+  y: number,
-            A ${rx} ${ry} 0 0 0 ${-w / 2} ${h / 2}
+  width: number,
-            L ${w / 2} ${h / 2}
+  height: number,
-            A ${rx} ${ry} 0 0 0 ${w / 2} ${-h / 2}
+  rx: number,
-            `;
+  ry: number
-}
+): string => {
+  return `M${x},${y}
+    a${rx},${ry} 0,0,1 ${0},${-height}
+    l${width},${0}
+    a${rx},${ry} 0,0,1 ${0},${height}
+    M${width},${-height}
+    a${rx},${ry} 0,0,0 ${0},${height}
+    l${-width},${0}`;
+};
 
-function createInnerPathD(rx: number, ry: number, w: number, h: number) {
+export const createOuterCylinderPathD = (
-  return `M${w / 2} ${-h / 2}
+  x: number,
-            A ${rx} ${ry} 0 0 0 ${w / 2} ${h / 2}`;
+  y: number,
-}
+  width: number,
+  height: number,
+  rx: number,
+  ry: number
+): string => {
+  return [
+    `M${x},${y}`,
+    `M${x + width},${y}`,
+    `a${rx},${ry} 0,0,0 ${0},${-height}`,
+    `l${-width},0`,
+    `a${rx},${ry} 0,0,0 ${0},${height}`,
+    `l${width},0`,
+  ].join(' ');
+};
+export const createInnerCylinderPathD = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  rx: number,
+  ry: number
+): string => {
+  return [`M${x + width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 0,${height}`].join(' ');
+};
 
 export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -33,40 +64,49 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
   const w = bbox.width + rx + labelPadding;
   const { cssStyles } = node;
 
-  // @ts-ignore - rough is not typed
+  let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
-  const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, {});
 
-  if (node.look !== 'handDrawn') {
+  if (node.look === 'handDrawn') {
-    options.roughness = 0;
+    // @ts-ignore - rough is not typed
-    options.fillStyle = 'solid';
+    const rc = rough.svg(shapeSvg);
+    const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
+    const innerPathData = createInnerCylinderPathD(0, 0, w, h, rx, ry);
+    const outerNode = rc.path(outerPathData, userNodeOverrides(node, {}));
+    const innerLine = rc.path(innerPathData, userNodeOverrides(node, { fill: 'none' }));
+    cylinder = shapeSvg.insert(() => innerLine, ':first-child');
+    cylinder = shapeSvg.insert(() => outerNode, ':first-child');
+    cylinder.attr('class', 'basic label-container');
+    if (cssStyles) {
+      cylinder.attr('style', cssStyles);
+    }
+  } else {
+    const pathData = createCylinderPathD(0, 0, w, h, rx, ry);
+    cylinder = shapeSvg
+      .insert('path', ':first-child')
+      .attr('d', pathData)
+      .attr('class', 'basic label-container')
+      .attr('style', cssStyles)
+      .attr('style', nodeStyles);
   }
 
-  const cylinderPath = createCylinderPathD(rx, ry, w, h);
+  cylinder.attr('class', 'basic label-container');
-  const cylinderNode = rc.path(cylinderPath, options);
-
-  const innerPath = createInnerPathD(rx, ry, w, h);
-  const innerNode = rc.path(innerPath, { ...options, fill: 'none' });
-
-  const tiltedCylinder = shapeSvg.insert(() => innerNode, ':first-child');
-  tiltedCylinder.insert(() => cylinderNode, ':first-child');
-
-  tiltedCylinder.attr('class', 'basic label-container');
 
   if (cssStyles && node.look !== 'handDrawn') {
-    tiltedCylinder.selectAll('path').attr('style', cssStyles);
+    cylinder.selectAll('path').attr('style', cssStyles);
   }
 
   if (nodeStyles && node.look !== 'handDrawn') {
-    tiltedCylinder.selectAll('path').attr('style', nodeStyles);
+    cylinder.selectAll('path').attr('style', nodeStyles);
   }
+  cylinder.attr('label-offset-x', rx);
+  cylinder.attr('transform', `translate(${-w / 2}, ${h / 2} )`);
 
   label.attr(
     'transform',
     `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})`
   );
 
-  updateNodeBounds(node, tiltedCylinder);
+  updateNodeBounds(node, cylinder);
 
   node.intersect = function (point) {
     const pos = intersect.rect(node, point);