updated shapes

2025-08-15 06:19:24 +02:00 · 2024-08-26 18:45:34 +05:30
parent e842b72aaa
commit c08fad6487
5 changed files with 67 additions and 92 deletions
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import {
@@ -8,20 +8,20 @@ import {
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';

-export const createInvertedTrapezoidPathD = (
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): string => {
-  return [
-    `M${x + height / 6},${y}`,
-    `L${x + width - height / 6},${y}`,
-    `L${x + width + (2 * height) / 6},${y - height}`,
-    `L${x - (2 * height) / 6},${y - height}`,
-    'Z',
-  ].join(' ');
-};
+// export const createInvertedTrapezoidPathD = (
+//   x: number,
+//   y: number,
+//   width: number,
+//   height: number
+// ): string => {
+//   return [
+//     `M${x + height / 6},${y}`,
+//     `L${x + width - height / 6},${y}`,
+//     `L${x + width + (2 * height) / 6},${y - height}`,
+//     `L${x - (2 * height) / 6},${y - height}`,
+//     'Z',
+//   ].join(' ');
+// };

 export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
  const { labelStyles, nodeStyles } = styles2String(node);
@@ -31,10 +31,10 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
  const points = [
-    { x: h / 6, y: 0 },
-    { x: w - h / 6, y: 0 },
-    { x: w + (2 * h) / 6, y: -h },
-    { x: (-2 * h) / 6, y: -h },
+    { x: 0, y: 0 },
+    { x: w, y: 0 },
+    { x: w + (3 * h) / 6, y: -h },
+    { x: (-3 * h) / 6, y: -h },
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -44,7 +44,8 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
    // @ts-ignore - rough is not typed
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
-    const pathData = createInvertedTrapezoidPathD(0, 0, w, h);
+    const pathData = createPathFromPoints(points);
+    // const pathData = createInvertedTrapezoidPathD(0, 0, w, h);
    const roughNode = rc.path(pathData, options);

    polygon = shapeSvg
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import {
@@ -8,33 +8,17 @@ import {
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';

-export const createLeanLeftPathD = (
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): string => {
-  return [
-    `M${x + (2 * height) / 6},${y}`,
-    `L${x + width + height / 6},${y}`,
-    `L${x + width - (2 * height) / 6},${y - height}`,
-    `L${x - height / 6},${y - height}`,
-    'Z',
-  ].join(' ');
-};
-
 export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
  const { labelStyles, nodeStyles } = styles2String(node);
  node.labelStyle = labelStyles;
  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-
-  const w = bbox.width + node.padding;
-  const h = bbox.height + node.padding;
+  const w = Math.max(bbox.width + (node.padding ?? 0), node?.width ?? 0);
+  const h = Math.max(bbox.height + (node.padding ?? 0), node?.height ?? 0);
  const points = [
-    { x: (2 * h) / 6, y: 0 },
-    { x: w + h / 6, y: 0 },
-    { x: w - (2 * h) / 6, y: -h },
-    { x: -h / 6, y: -h },
+    { x: 0, y: 0 },
+    { x: w + (3 * h) / 6, y: 0 },
+    { x: w, y: -h },
+    { x: -(3 * h) / 6, y: -h },
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -44,7 +28,8 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
    // @ts-ignore - rough is not typed
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
-    const pathData = createLeanLeftPathD(0, 0, w, h);
+    const pathData = createPathFromPoints(points);
+    // const pathData = createLeanLeftPathD(0, 0, w, h);
    const roughNode = rc.path(pathData, options);

    polygon = shapeSvg
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import {
@@ -8,33 +8,17 @@ import {
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';

-export const createLeanRightPathD = (
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): string => {
-  return [
-    `M${x - (2 * height) / 6},${y}`,
-    `L${x + width - height / 6},${y}`,
-    `L${x + width + (2 * height) / 6},${y - height}`,
-    `L${x + height / 6},${y - height}`,
-    'Z',
-  ].join(' ');
-};
-
 export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
  const { labelStyles, nodeStyles } = styles2String(node);
  node.labelStyle = labelStyles;
  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-
-  const w = bbox.width + node.padding;
-  const h = bbox.height + node.padding;
+  const w = Math.max(bbox.width + (node.padding ?? 0), node?.width ?? 0);
+  const h = Math.max(bbox.height + (node.padding ?? 0), node?.height ?? 0);
  const points = [
-    { x: (-2 * h) / 6, y: 0 },
-    { x: w - h / 6, y: 0 },
-    { x: w + (2 * h) / 6, y: -h },
-    { x: h / 6, y: -h },
+    { x: (-3 * h) / 6, y: 0 },
+    { x: w, y: 0 },
+    { x: w + (3 * h) / 6, y: -h },
+    { x: 0, y: -h },
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -44,7 +28,7 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
    // @ts-ignore - rough is not typed
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
-    const pathData = createLeanRightPathD(0, 0, w, h);
+    const pathData = createPathFromPoints(points);
    const roughNode = rc.path(pathData, options);

    polygon = shapeSvg
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
@@ -10,10 +10,10 @@ import rough from 'roughjs';
 export const shadedProcess = async (parent: SVGAElement, node: Node) => {
  const { labelStyles, nodeStyles } = styles2String(node);
  node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const halfPadding = (node?.padding || 0) / 2;
-  const w = bbox.width + node.padding;
-  const h = bbox.height + node.padding;
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const halfPadding = node?.padding ?? 0;
+  const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
+  const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
  const x = -bbox.width / 2 - halfPadding;
  const y = -bbox.height / 2 - halfPadding;

@@ -43,6 +43,11 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
    rect.selectAll('path').attr('style', nodeStyles);
  }

+  label.attr(
+    'transform',
+    `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})`
+  );
+
  updateNodeBounds(node, rect);

  node.intersect = function (point) {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import {
@@ -8,20 +8,20 @@ import {
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';

-export const createTrapezoidPathD = (
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): string => {
-  return [
-    `M${x - (2 * height) / 6},${y}`,
-    `L${x + width + (2 * height) / 6},${y}`,
-    `L${x + width - height / 6},${y - height}`,
-    `L${x + height / 6},${y - height}`,
-    'Z',
-  ].join(' ');
-};
+// export const createTrapezoidPathD = (
+//   x: number,
+//   y: number,
+//   width: number,
+//   height: number
+// ): string => {
+//   return [
+//     `M${x - (2 * height) / 6},${y}`,
+//     `L${x + width + (2 * height) / 6},${y}`,
+//     `L${x + width - height / 6},${y - height}`,
+//     `L${x + height / 6},${y - height}`,
+//     'Z',
+//   ].join(' ');
+// };

 export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
  const { labelStyles, nodeStyles } = styles2String(node);
@@ -31,10 +31,10 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
  const points = [
-    { x: (-2 * h) / 6, y: 0 },
-    { x: w + (2 * h) / 6, y: 0 },
-    { x: w - h / 6, y: -h },
-    { x: h / 6, y: -h },
+    { x: (-3 * h) / 6, y: 0 },
+    { x: w + (3 * h) / 6, y: 0 },
+    { x: w, y: -h },
+    { x: 0, y: -h },
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -44,7 +44,7 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
    // @ts-ignore - rough is not typed
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
-    const pathData = createTrapezoidPathD(0, 0, w, h);
+    const pathData = createPathFromPoints(points);
    const roughNode = rc.path(pathData, options);

    polygon = shapeSvg