MC-2620 Cleanup

packages/mermaid-layout-elk/src/render.ts

@@ -79,14 +79,6 @@ export const render = async (
       node.domId = childNodeEl;
       node.width = boundingBox.width;
       node.height = boundingBox.height;
-      // child.calcIntersect = node.calcIntersect;
-      // child.intersect = node.intersect;
-      // child.width = boundingBox.width;
-      // child.height = boundingBox.height;
-      // child.updateIntersect = node.updateIntersect;
-      // if (child.updateIntersect) {
-      //   child.updateIntersect();
-      // }
     } else {
       // A subgraph
       const child: NodeWithVertex & { children: NodeWithVertex[] } = {

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

@@ -6,7 +6,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { handleUndefinedAttr } from '../../../utils.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export function anchor<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles } = styles2String(node);
@@ -38,11 +37,6 @@ export function anchor<T extends SVGGraphicsElement>(parent: D3Selection<T>, nod
 
   updateNodeBounds(node, circleElem);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('Circle intersect', node, radius, point);
     return intersect.circle(node, radius, point);

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

@@ -4,7 +4,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 function generateArcPoints(
   x1: number,
@@ -73,15 +72,6 @@ function generateArcPoints(
 
   return points;
 }
-function getPoints(w: number, h: number, rx: number, ry: number) {
-  return [
-    { x: w / 2, y: -h / 2 },
-    { x: -w / 2, y: -h / 2 },
-    ...generateArcPoints(-w / 2, -h / 2, -w / 2, h / 2, rx, ry, false),
-    { x: w / 2, y: h / 2 },
-    ...generateArcPoints(w / 2, h / 2, w / 2, -h / 2, rx, ry, true),
-  ];
-}
 
 /**
  * Calculates the sagitta of an arc of an ellipse given its chord and radii.
@@ -135,7 +125,13 @@ export async function bowTieRect<T extends SVGGraphicsElement>(parent: D3Selecti
   // let shape: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  const points = getPoints(w, h, rx, ry);
+  const points = [
+    { x: w / 2, y: -h / 2 },
+    { x: -w / 2, y: -h / 2 },
+    ...generateArcPoints(-w / 2, -h / 2, -w / 2, h / 2, rx, ry, false),
+    { x: w / 2, y: h / 2 },
+    ...generateArcPoints(w / 2, h / 2, w / 2, -h / 2, rx, ry, true),
+  ];
 
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
@@ -163,16 +159,6 @@ export async function bowTieRect<T extends SVGGraphicsElement>(parent: D3Selecti
 
   updateNodeBounds(node, bowTieRectShape);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const w = bounds.width;
-    const h = bounds.height;
-
-    const ry = h / 2;
-    const rx = ry / (2.5 + h / 50);
-
-    const points = getPoints(w, h, rx, ry);
-    return intersect.polygon(bounds, points, point);
-  };
   node.intersect = function (point) {
     const pos = intersect.polygon(node, points, point);
     return pos;

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

@@ -3,19 +3,48 @@ import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
+
 import { insertPolygonShape } from './insertPolygonShape.js';
 import { createPathFromPoints } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
-function getPoints(w: number, h: number, padding: number) {
-  const NOTCH_SIZE = 12;
+// const createPathFromPoints = (points: { x: number; y: number }[]): string => {
+//   const pointStrings = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`);
+//   pointStrings.push('Z');
+//   return pointStrings.join(' ');
+// };
+
+/// Size of the notch on the top left corner
+const NOTCH_SIZE = 12;
+
+export async function card<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  const nodePadding = node.padding ?? 0;
+  const labelPaddingX = node.look === 'neo' ? 28 : 0;
+  const labelPaddingY = node.look === 'neo' ? 24 : nodePadding;
+  if (node.width || node.height) {
+    node.width = Math.max((node?.width ?? 0) - (labelPaddingX ?? 0), 10);
+    node.height = Math.max((node?.height ?? 0) - (labelPaddingY ?? 0), 10);
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const totalWidth = (node?.width ? node?.width : bbox.width) + (labelPaddingX ?? 0);
+  const totalHeight = (node?.height ? node?.height : bbox.height) + (labelPaddingY ?? 0);
+
+  const h = totalHeight;
+  const w = totalWidth;
   const left = 0;
   const right = w;
   const top = -h;
   const bottom = 0;
-
-  return [
+  const points = [
     { x: left + NOTCH_SIZE, y: top },
     { x: right, y: top },
     { x: right, y: bottom },
@@ -23,17 +52,6 @@ function getPoints(w: number, h: number, padding: number) {
     { x: left, y: top + NOTCH_SIZE },
     { x: left + NOTCH_SIZE, y: top },
   ];
-}
-export async function card<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
-  const { labelStyles, nodeStyles } = styles2String(node);
-  node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-
-  const h = bbox.height + node.padding;
-  const padding = 12;
-  const w = bbox.width + node.padding + padding;
-
-  const points = getPoints(w, h, padding);
 
   let polygon: D3Selection<SVGGElement> | Awaited<ReturnType<typeof insertPolygonShape>>;
   const { cssStyles } = node;
@@ -62,17 +80,6 @@ export async function card<T extends SVGGraphicsElement>(parent: D3Selection<T>,
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const h = bounds.height;
-    const padding = 12;
-    const w = bounds.width;
-
-    const points = getPoints(w, h, padding);
-
-    const res = intersect.polygon(bounds, points, point);
-    return { x: res.x - 0.5, y: res.y - 0.5 };
-  };
-
   node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };

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

@@ -4,15 +4,7 @@ import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { createPathFromPoints, getNodeClasses } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
-function getPoints(s: number) {
-  return [
-    { x: 0, y: s / 2 },
-    { x: s / 2, y: 0 },
-    { x: 0, y: -s / 2 },
-    { x: -s / 2, y: 0 },
-  ];
-}
+
 export function choice<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { nodeStyles } = styles2String(node);
   node.label = '';
@@ -24,7 +16,12 @@ export function choice<T extends SVGGraphicsElement>(parent: D3Selection<T>, nod
 
   const s = Math.max(28, node.width ?? 0);
 
-  const points = getPoints(s);
+  const points = [
+    { x: 0, y: s / 2 },
+    { x: s / 2, y: 0 },
+    { x: 0, y: -s / 2 },
+    { x: -s / 2, y: 0 },
+  ];
 
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
@@ -50,13 +47,6 @@ export function choice<T extends SVGGraphicsElement>(parent: D3Selection<T>, nod
   node.width = 28;
   node.height = 28;
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const s = Math.max(28, bounds.width ?? 0);
-
-    const points = getPoints(s);
-    return intersect.circle(bounds, points, point);
-  };
-
   node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };

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

@@ -6,7 +6,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -46,20 +45,11 @@ export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T
   }
 
   updateNodeBounds(node, circleElem);
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
+
   node.intersect = function (point) {
     log.info('Circle intersect', node, radius, point);
     return intersect.circle(node, radius, point);
   };
-  node.updateIntersect = function () {
-    node.intersect = function (point) {
-      log.info('Circle intersect', node, radius, point);
-      return intersect.circle(node, radius, point);
-    };
-  };
 
   return shapeSvg;
 }

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

@@ -9,7 +9,6 @@ import intersect from '../intersect/index.js';
 import { textHelper } from '../../../diagrams/class/shapeUtil.js';
 import { evaluate } from '../../../diagrams/common/common.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function classBox<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const config = getConfig();
@@ -257,9 +256,6 @@ export async function classBox<T extends SVGGraphicsElement>(parent: D3Selection
   }
 
   updateNodeBounds(node, rect);
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    return intersect.rect(bounds, point);
-  };
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -5,7 +5,6 @@ import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { userNodeOverrides } from './handDrawnShapeStyles.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 function createLine(r: number) {
   const axis45 = Math.SQRT1_2; // cosine of 45 degrees = 1/sqrt(2)
@@ -53,11 +52,6 @@ export function crossedCircle<T extends SVGGraphicsElement>(parent: D3Selection<
 
   updateNodeBounds(node, crossedCircle);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const radius = Math.max(30, bounds?.width ?? 0);
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('crossedCircle intersect', node, { radius, point });
     const pos = intersect.circle(node, radius, point);

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

@@ -4,7 +4,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 function generateCirclePoints(
   centerX: number,
@@ -36,21 +35,6 @@ function generateCirclePoints(
   return points;
 }
 
-function getRectPoints(w: number, h: number, radius: number) {
-  return [
-    { x: w / 2, y: -h / 2 - radius },
-    { x: -w / 2, y: -h / 2 - radius },
-    ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0),
-    { x: -w / 2 - radius, y: -radius },
-    ...generateCirclePoints(w / 2 + w * 0.1, -radius, radius, 20, -180, -270),
-    ...generateCirclePoints(w / 2 + w * 0.1, radius, radius, 20, -90, -180),
-    { x: -w / 2 - radius, y: h / 2 },
-    ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
-    { x: -w / 2, y: h / 2 + radius },
-    { x: w / 2, y: h / 2 + radius },
-  ];
-}
-
 export async function curlyBraceLeft<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
@@ -91,7 +75,18 @@ export async function curlyBraceLeft<T extends SVGGraphicsElement>(
     ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
   ];
 
-  const rectPoints = getRectPoints(w, h, radius);
+  const rectPoints = [
+    { x: w / 2, y: -h / 2 - radius },
+    { x: -w / 2, y: -h / 2 - radius },
+    ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0),
+    { x: -w / 2 - radius, y: -radius },
+    ...generateCirclePoints(w / 2 + w * 0.1, -radius, radius, 20, -180, -270),
+    ...generateCirclePoints(w / 2 + w * 0.1, radius, radius, 20, -90, -180),
+    { x: -w / 2 - radius, y: h / 2 },
+    ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
+    { x: -w / 2, y: h / 2 + radius },
+    { x: w / 2, y: h / 2 + radius },
+  ];
 
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
@@ -128,15 +123,6 @@ export async function curlyBraceLeft<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, curlyBraceLeftShape);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const w = bounds.width;
-    const h = bounds.height;
-    const radius = Math.max(5, h * 0.1);
-
-    const rectPoints = getRectPoints(w, h, radius);
-    return intersect.polygon(bounds, rectPoints, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, rectPoints, point);
 

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

@@ -4,7 +4,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 function generateCirclePoints(
   centerX: number,
@@ -36,21 +35,6 @@ function generateCirclePoints(
   return points;
 }
 
-function getRectPoints(w: number, h: number, radius: number) {
-  return [
-    { x: -w / 2, y: -h / 2 - radius },
-    { x: w / 2, y: -h / 2 - radius },
-    ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0),
-    { x: w / 2 + radius, y: -radius },
-    ...generateCirclePoints(w / 2 + radius * 2, -radius, radius, 20, -180, -270),
-    ...generateCirclePoints(w / 2 + radius * 2, radius, radius, 20, -90, -180),
-    { x: w / 2 + radius, y: h / 2 },
-    ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
-    { x: w / 2, y: h / 2 + radius },
-    { x: -w / 2, y: h / 2 + radius },
-  ];
-}
-
 export async function curlyBraceRight<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
@@ -94,7 +78,18 @@ export async function curlyBraceRight<T extends SVGGraphicsElement>(
     ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
   ];
 
-  const rectPoints = getRectPoints(w, h, radius);
+  const rectPoints = [
+    { x: -w / 2, y: -h / 2 - radius },
+    { x: w / 2, y: -h / 2 - radius },
+    ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0),
+    { x: w / 2 + radius, y: -radius },
+    ...generateCirclePoints(w / 2 + radius * 2, -radius, radius, 20, -180, -270),
+    ...generateCirclePoints(w / 2 + radius * 2, radius, radius, 20, -90, -180),
+    { x: w / 2 + radius, y: h / 2 },
+    ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
+    { x: w / 2, y: h / 2 + radius },
+    { x: -w / 2, y: h / 2 + radius },
+  ];
 
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
@@ -131,15 +126,6 @@ export async function curlyBraceRight<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, curlyBraceRightShape);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const w = bounds.width;
-    const h = bounds.height;
-    const radius = Math.max(5, h * 0.1);
-
-    const rectPoints = getRectPoints(w, h, radius);
-    return intersect.polygon(bounds, rectPoints, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, rectPoints, point);
 

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

@@ -4,7 +4,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 function generateCirclePoints(
   centerX: number,
@@ -36,25 +35,6 @@ function generateCirclePoints(
   return points;
 }
 
-const getRectPoints = (w: number, h: number, radius: number) => [
-  { x: w / 2, y: -h / 2 - radius },
-  { x: -w / 2, y: -h / 2 - radius },
-  ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0),
-  { x: -w / 2 - radius, y: -radius },
-  ...generateCirclePoints(w / 2 + radius * 2, -radius, radius, 20, -180, -270),
-  ...generateCirclePoints(w / 2 + radius * 2, radius, radius, 20, -90, -180),
-  { x: -w / 2 - radius, y: h / 2 },
-  ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
-  { x: -w / 2, y: h / 2 + radius },
-  { x: w / 2 - radius - radius / 2, y: h / 2 + radius },
-  ...generateCirclePoints(-w / 2 + radius + radius / 2, -h / 2, radius, 20, -90, -180),
-  { x: w / 2 - radius / 2, y: radius },
-  ...generateCirclePoints(-w / 2 - radius / 2, -radius, radius, 20, 0, 90),
-  ...generateCirclePoints(-w / 2 - radius / 2, radius, radius, 20, -90, 0),
-  { x: w / 2 - radius / 2, y: -radius },
-  ...generateCirclePoints(-w / 2 + radius + radius / 2, h / 2, radius, 30, -180, -270),
-];
-
 export async function curlyBraces<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
@@ -106,7 +86,24 @@ export async function curlyBraces<T extends SVGGraphicsElement>(
     ...generateCirclePoints(-w / 2 + radius + radius / 2, h / 2, radius, 30, -180, -270),
   ];
 
-  const rectPoints = getRectPoints(w, h, radius);
+  const rectPoints = [
+    { x: w / 2, y: -h / 2 - radius },
+    { x: -w / 2, y: -h / 2 - radius },
+    ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0),
+    { x: -w / 2 - radius, y: -radius },
+    ...generateCirclePoints(w / 2 + radius * 2, -radius, radius, 20, -180, -270),
+    ...generateCirclePoints(w / 2 + radius * 2, radius, radius, 20, -90, -180),
+    { x: -w / 2 - radius, y: h / 2 },
+    ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
+    { x: -w / 2, y: h / 2 + radius },
+    { x: w / 2 - radius - radius / 2, y: h / 2 + radius },
+    ...generateCirclePoints(-w / 2 + radius + radius / 2, -h / 2, radius, 20, -90, -180),
+    { x: w / 2 - radius / 2, y: radius },
+    ...generateCirclePoints(-w / 2 - radius / 2, -radius, radius, 20, 0, 90),
+    ...generateCirclePoints(-w / 2 - radius / 2, radius, radius, 20, -90, 0),
+    { x: w / 2 - radius / 2, y: -radius },
+    ...generateCirclePoints(-w / 2 + radius + radius / 2, h / 2, radius, 30, -180, -270),
+  ];
 
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
@@ -146,15 +143,6 @@ export async function curlyBraces<T extends SVGGraphicsElement>(
   );
   updateNodeBounds(node, curlyBracesShape);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const w = bounds.width;
-    const h = bounds.height;
-    const radius = Math.max(5, h * 0.1);
-
-    const rectPoints = getRectPoints(w, h, radius);
-    return intersect.polygon(bounds, rectPoints, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, rectPoints, point);
 

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

@@ -10,16 +10,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
-
-const getTrapezoidPoints = (rw: number, tw: number, totalHeight: number, radius: number) => [
-  { x: rw, y: 0 },
-  { x: tw, y: 0 },
-  { x: 0, y: totalHeight / 2 },
-  { x: tw, y: totalHeight },
-  { x: rw, y: totalHeight },
-  ...generateCirclePoints(-rw, -totalHeight / 2, radius, 50, 270, 90),
-];
 
 export async function curvedTrapezoid<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -67,7 +57,14 @@ export async function curvedTrapezoid<T extends SVGGraphicsElement>(
   const rw = totalWidth - radius;
   const tw = totalHeight / 4;
 
-  const points = getTrapezoidPoints(rw, tw, totalHeight, radius);
+  const points = [
+    { x: rw, y: 0 },
+    { x: tw, y: 0 },
+    { x: 0, y: totalHeight / 2 },
+    { x: tw, y: totalHeight },
+    { x: rw, y: totalHeight },
+    ...generateCirclePoints(-rw, -totalHeight / 2, radius, 50, 270, 90),
+  ];
 
   const pathData = createPathFromPoints(points);
   const shapeNode = rc.path(pathData, options);
@@ -87,20 +84,6 @@ export async function curvedTrapezoid<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const w = bounds.width;
-    const h = bounds.height;
-    const radius = h / 2;
-
-    const totalWidth = w,
-      totalHeight = h;
-    const rw = totalWidth - radius;
-    const tw = totalHeight / 4;
-    const points = getTrapezoidPoints(rw, tw, totalHeight, radius);
-
-    return intersect.polygon(bounds, points, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, points, point);
     return pos;

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

@@ -5,7 +5,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export const createCylinderPathD = (
   x: number,
@@ -134,24 +133,22 @@ export async function cylinder<T extends SVGGraphicsElement>(parent: D3Selection
     `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (nodePadding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
   );
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const w = bounds.width;
-    const rx = w / 2;
-    const ry = rx / (2.5 + w / 50);
-    const h = bounds.height;
-    const pos = intersect.rect(bounds, point);
-    const x = pos.x - (bounds.x ?? 0);
+  node.intersect = function (point) {
+    const pos = intersect.rect(node, point);
+    const x = pos.x - (node.x ?? 0);
+
     if (
       rx != 0 &&
-      (Math.abs(x) < (w ?? 0) / 2 ||
-        (Math.abs(x) == (w ?? 0) / 2 && Math.abs(pos.y - (bounds.y ?? 0)) > (h ?? 0) / 2 - ry))
+      (Math.abs(x) < (node.width ?? 0) / 2 ||
+        (Math.abs(x) == (node.width ?? 0) / 2 &&
+          Math.abs(pos.y - (node.y ?? 0)) > (node.height ?? 0) / 2 - ry))
     ) {
       let y = ry * ry * (1 - (x * x) / (rx * rx));
       if (y > 0) {
         y = Math.sqrt(y);
       }
       y = ry - y;
-      if (point.y - (bounds.y ?? 0) > 0) {
+      if (point.y - (node.y ?? 0) > 0) {
         y = -y;
       }
 
@@ -161,14 +158,5 @@ export async function cylinder<T extends SVGGraphicsElement>(parent: D3Selection
     return pos;
   };
 
-  node.intersect = function (point: Point) {
-    return this.calcIntersect
-      ? this.calcIntersect(
-          { x: node.x ?? 0, y: node.y ?? 0, width: node.width ?? 0, height: node.height ?? 0 },
-          point
-        )
-      : { x: 0, y: 0 };
-  };
-
   return shapeSvg;
 }

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

@@ -4,7 +4,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function dividedRectangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -81,10 +80,6 @@ export async function dividedRectangle<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    return intersect.rect(bounds, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.rect(node, point);
     return pos;

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

@@ -5,7 +5,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export const createCylinderPathD = (
   x: number,
@@ -92,36 +91,29 @@ export async function cylinder<T extends SVGGraphicsElement>(parent: D3Selection
 
   updateNodeBounds(node, cylinder);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const pos = intersect.rect(bounds, point);
-    const x = pos.x - (bounds.x ?? 0);
+  node.intersect = function (point) {
+    const pos = intersect.rect(node, point);
+    const x = pos.x - (node.x ?? 0);
 
     if (
       rx != 0 &&
-      (Math.abs(x) < (bounds.width ?? 0) / 2 ||
-        (Math.abs(x) == (bounds.width ?? 0) / 2 &&
-          Math.abs(pos.y - (bounds.y ?? 0)) > (bounds.height ?? 0) / 2 - ry))
+      (Math.abs(x) < (node.width ?? 0) / 2 ||
+        (Math.abs(x) == (node.width ?? 0) / 2 &&
+          Math.abs(pos.y - (node.y ?? 0)) > (node.height ?? 0) / 2 - ry))
     ) {
       let y = ry * ry * (1 - (x * x) / (rx * rx));
       if (y != 0) {
         y = Math.sqrt(y);
       }
       y = ry - y;
-      if (point.y - (bounds.y ?? 0) > 0) {
+      if (point.y - (node.y ?? 0) > 0) {
         y = -y;
       }
 
       pos.y += y;
     }
-  };
 
-  node.intersect = function (point) {
-    return this.calcIntersect
-      ? this.calcIntersect(
-          { x: node.x ?? 0, y: node.y ?? 0, width: node.width ?? 0, height: node.height ?? 0 },
-          point
-        )
-      : { x: 0, y: 0 };
+    return pos;
   };
 
   return shapeSvg;

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

@@ -6,7 +6,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function doublecircle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -77,11 +76,6 @@ export async function doublecircle<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, circleGroup);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('DoubleCircle intersect', node, outerRadius, point);
     return intersect.circle(node, outerRadius, point);

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

@@ -6,7 +6,6 @@ import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function drawRect<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -73,10 +72,6 @@ export async function drawRect<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, rect);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    return intersect.rect(bounds, point);
-  };
-
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -5,7 +5,6 @@ import intersect from '../intersect/index.js';
 import { userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export function filledCircle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -72,11 +71,6 @@ export function filledCircle<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, filledCircle);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('filledCircle intersect', node, { radius, point });
     const pos = intersect.circle(node, radius, point);

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

@@ -6,18 +6,9 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { createPathFromPoints } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 const MIN_HEIGHT = 10;
 const MIN_WIDTH = 10;
-function getPoints(tw: number, h: number) {
-  return [
-    { x: 0, y: -h },
-    { x: tw, y: -h },
-    { x: tw / 2, y: 0 },
-  ];
-}
-
 export async function flippedTriangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
@@ -45,8 +36,12 @@ export async function flippedTriangle<T extends SVGGraphicsElement>(
   const h = node?.height ? node?.height : w + bbox.height;
 
   const tw = h;
-  // const tw = w + bbox.height;
-  const points = getPoints(tw, h);
+
+  const points = [
+    { x: 0, y: -h },
+    { x: tw, y: -h },
+    { x: tw / 2, y: 0 },
+  ];
 
   const { cssStyles } = node;
 
@@ -83,16 +78,6 @@ export async function flippedTriangle<T extends SVGGraphicsElement>(
     `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (labelPaddingY ?? 0) / 2 + (bbox.y - (bbox.top ?? 0))})`
   );
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const w = bounds.width;
-    const h = bounds.height;
-
-    const tw = w + bounds.height;
-    const points = getPoints(tw, h);
-    return intersect.polygon(node, points, point);
-  };
-
   node.intersect = function (point) {
     log.info('Triangle intersect', node, points, point);
     return intersect.polygon(node, points, point);

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

@@ -4,7 +4,6 @@ import intersect from '../intersect/index.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export function forkJoin<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -62,10 +61,6 @@ export function forkJoin<T extends SVGGraphicsElement>(
     node.width += padding / 2 || 0;
     node.height += padding / 2 || 0;
   }
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    return intersect.rect(bounds, point);
-  };
-
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -11,7 +11,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function halfRoundedRectangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -81,12 +80,6 @@ export async function halfRoundedRectangle<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('Pill intersect', node, { radius, point });
     const pos = intersect.polygon(node, points, point);

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

@@ -5,7 +5,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export const createHexagonPathD = (
   x: number,
@@ -91,12 +90,6 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };

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

@@ -5,7 +5,6 @@ import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import { userNodeOverrides } from './handDrawnShapeStyles.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function hourglass<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   node.label = '';
@@ -45,20 +44,6 @@ export async function hourglass<T extends SVGGraphicsElement>(parent: D3Selectio
 
   updateNodeBounds(node, polygon);
 
-  // label.attr('transform', `translate(${-bbox.width / 2}, ${(h/2)})`); // To transform text below hourglass shape
-
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const { width: w, height: h } = bounds;
-    const points = [
-      { x: 0, y: 0 },
-      { x: w, y: 0 },
-      { x: 0, y: h },
-      { x: w, y: h },
-    ];
-    const res = intersect.polygon(bounds, points, point);
-    return { x: res.x - 0.5, y: res.y - 0.5 };
-  };
-
   node.intersect = function (point) {
     log.info('Pill intersect', node, { points });
     const pos = intersect.polygon(node, points, point);

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

@@ -6,7 +6,6 @@ import intersect from '../intersect/index.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function icon<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -114,12 +113,6 @@ export async function icon<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, outerShape);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('iconSquare intersect', node, point);
     if (!node.label) {

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

@@ -6,7 +6,6 @@ import intersect from '../intersect/index.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function iconCircle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -133,12 +132,6 @@ export async function iconCircle<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, iconShape);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('iconSquare intersect', node, point);
     const pos = intersect.circle(node, diameter / 2, point);

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

@@ -7,7 +7,6 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
 import { createRoundedRectPathD } from './roundedRectPath.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function iconRounded<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -125,12 +124,6 @@ export async function iconRounded<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, iconShape);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('iconSquare intersect', node, point);
     // if (!node.label) {

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

@@ -7,7 +7,6 @@ import { createRoundedRectPathD } from './roundedRectPath.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function iconSquare<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -136,12 +135,6 @@ export async function iconSquare<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, iconShape);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('iconSquare intersect', node, point);
     // if (!node.label) {

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

@@ -4,7 +4,6 @@ import intersect from '../intersect/index.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function imageSquare<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -118,12 +117,6 @@ export async function imageSquare<T extends SVGGraphicsElement>(
   //   `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
   // );
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('iconSquare intersect', node, point);
     // if (!node.label) {

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

@@ -5,7 +5,21 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.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 async function inv_trapezoid<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -73,12 +87,6 @@ export async function inv_trapezoid<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };

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

@@ -5,7 +5,6 @@ import { createRoundedRectPathD } from './roundedRectPath.js';
 import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 const colorFromPriority = (priority: NonNullable<KanbanNode['priority']>) => {
   switch (priority) {
@@ -156,12 +155,6 @@ export async function kanbanItem<T extends SVGGraphicsElement>(
   updateNodeBounds(kanbanNode, rect);
   kanbanNode.height = totalHeight;
 
-  kanbanNode.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   kanbanNode.intersect = function (point) {
     return intersect.rect(kanbanNode, point);
   };

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

@@ -3,7 +3,6 @@ import { drawRect } from './drawRect.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function roundedRect<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -49,12 +48,8 @@ export async function labelRect<T extends SVGGraphicsElement>(parent: D3Selectio
   // }
 
   updateNodeBounds(node, rect);
-
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
+  // node.width = 1;
+  // node.height = 1;
 
   node.intersect = function (point) {
     return intersect.rect(node, point);

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

@@ -5,7 +5,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function lean_left<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -70,12 +69,6 @@ export async function lean_left<T extends SVGGraphicsElement>(parent: D3Selectio
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };

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

@@ -5,7 +5,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function lean_right<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -71,59 +70,8 @@ export async function lean_right<T extends SVGGraphicsElement>(parent: D3Selecti
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const w = bounds.width;
-    const h = bounds.height;
-    const dx = h / 2;
-    const z = w - h;
-    // (w = dx+z+dx)
-    const points = [
-      { x: -dx, y: 0 },
-      { x: z, y: 0 },
-      { x: z + dx, y: -h },
-      { x: 0, y: -h },
-    ];
-
-    const res = intersect.polygon(bounds, points, point);
-    // if (node.id === 'C') {
-    //   console.log(
-    //     'APA14!',
-    //     bounds.x,
-    //     bounds.x,
-    //     bounds.width,
-    //     '\nw:',
-    //     w,
-    //     points,
-    //     '\nExternal point: ',
-    //     '(',
-    //     point.x,
-    //     point.y,
-    //     ')\nIntersection:',
-    //     res
-    //   );
-    // }
-    return { x: res.x - 0.5, y: res.y - 0.5 };
-  };
-
-  node.intersect = function (point: Point) {
-    const res = intersect.polygon(node, points, point);
-    // if (node.id === 'C') {
-    //   console.log(
-    //     'APA14!!',
-    //     node.x,
-    //     node.y,
-    //     '\nw:',
-    //     node.width,
-    //     points,
-    //     '\nExternal point: ',
-    //     '(',
-    //     point.x,
-    //     point.y,
-    //     ')\nIntersection:',
-    //     res
-    //   );
-    // }
-    return res;
+  node.intersect = function (point) {
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;

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

@@ -6,17 +6,7 @@ import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { createPathFromPoints } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
-function getPoints(width: number, height: number, gapX: number, gapY: number) {
-  return [
-    { x: width, y: 0 },
-    { x: 0, y: height / 2 + gapY / 2 },
-    { x: width - 4 * gapX, y: height / 2 + gapY / 2 },
-    { x: 0, y: height },
-    { x: width, y: height / 2 - gapY / 2 },
-    { x: 4 * gapX, y: height / 2 - gapY / 2 },
-  ];
-}
+
 export function lightningBolt<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   node.label = '';
   const shapeSvg = parent
@@ -62,21 +52,11 @@ export function lightningBolt<T extends SVGGraphicsElement>(parent: D3Selection<
 
   updateNodeBounds(node, lightningBolt);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const { width: w, height: h } = bounds;
-    const gapX = Math.max(5, w * 0.1);
-    const gapY = Math.max(5, h * 0.1);
-    const p = getPoints(w, h, gapX, gapY);
-    const res = intersect.polygon(bounds, p, point);
-
-    return { x: res.x - 0.5, y: res.y - 0.5 };
-  };
-
   node.intersect = function (point) {
     log.info('lightningBolt intersect', node, point);
-    const res = intersect.polygon(node, points, point);
+    const pos = intersect.polygon(node, points, point);
 
-    return res;
+    return pos;
   };
 
   return shapeSvg;

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

@@ -5,7 +5,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export const createCylinderPathD = (
   x: number,
@@ -141,12 +140,6 @@ export async function linedCylinder<T extends SVGGraphicsElement>(
     `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (labelPaddingY ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
   );
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.rect(node, point);
     const x = pos.x - (node.x ?? 0);

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

@@ -9,7 +9,6 @@ import type { Node } from '../../types.js';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function linedWaveEdgedRect<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -93,13 +92,6 @@ export async function linedWaveEdgedRect<T extends SVGGraphicsElement>(
   );
 
   updateNodeBounds(node, waveEdgeRect);
-
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, points, point);
     return pos;

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

@@ -10,7 +10,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function multiRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -106,12 +105,6 @@ export async function multiRect<T extends SVGGraphicsElement>(parent: D3Selectio
 
   updateNodeBounds(node, multiRect);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, outerPathPoints, point);
     return pos;

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

@@ -11,7 +11,6 @@ import type { Node } from '../../types.js';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function multiWaveEdgedRectangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -132,12 +131,6 @@ export async function multiWaveEdgedRectangle<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, shape);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, outerPathPoints, point);
     return pos;

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

@@ -5,7 +5,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
 import { getConfig } from '../../../config.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function note<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -53,12 +52,6 @@ export async function note<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, rect);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -1,3 +1,4 @@
+import { log } from '../../../logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
@@ -5,7 +6,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
   return [
@@ -71,41 +71,17 @@ export async function question<T extends SVGGraphicsElement>(parent: D3Selection
   }
 
   updateNodeBounds(node, polygon);
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const s = bounds.width;
 
-    // console.log(
-    //   'APA10\nbounds width:',
-    //   bounds.width,
-    //   '\nbounds height:',
-    //   bounds.height,
-    //   'point:',
-    //   point.x,
-    //   point.y,
-    //   '\nw:',
-    //   w,
-    //   '\nh',
-    //   h,
-    //   '\ns',
-    //   s
-    // );
-
-    // Define polygon points
-    const points = [
-      { x: s / 2, y: 0 },
-      { x: s, y: -s / 2 },
-      { x: s / 2, y: -s },
-      { x: 0, y: -s / 2 },
-    ];
-
-    // Calculate the intersection point
-    const res = intersect.polygon(bounds, points, point);
-
-    return { x: res.x - 0.5, y: res.y - 0.5 }; // Adjusted result
-  };
-
-  node.intersect = function (point: Point) {
-    return this.calcIntersect ? this.calcIntersect(node as Bounds, point) : { x: 0, y: 0 };
+  node.intersect = function (point) {
+    log.debug(
+      'APA12 Intersect called SPLIT\npoint:',
+      point,
+      '\nnode:\n',
+      node,
+      '\nres:',
+      intersect.polygon(node, points, point)
+    );
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;

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

@@ -4,7 +4,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function rect_left_inv_arrow<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -68,12 +67,6 @@ export async function rect_left_inv_arrow<T extends SVGGraphicsElement>(
   );
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };

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

@@ -10,7 +10,6 @@ import { getConfig } from '../../../diagram-api/diagramAPI.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 import { log } from '../../../logger.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function rectWithTitle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -151,12 +150,6 @@ export async function rectWithTitle<T extends SVGGraphicsElement>(
   }
   updateNodeBounds(node, rect);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -5,7 +5,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 /// Width of the frame on the left of the shape
 const FRAME_WIDTH = 8;
@@ -79,12 +78,6 @@ export async function shadedProcess<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, rect);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -4,7 +4,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function slopedRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -72,12 +71,6 @@ export async function slopedRect<T extends SVGGraphicsElement>(parent: D3Selecti
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, points, point);
     return pos;

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

@@ -6,7 +6,6 @@ import rough from 'roughjs';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export const createStadiumPathD = (
   x: number,
@@ -110,12 +109,6 @@ export async function stadium<T extends SVGGraphicsElement>(parent: D3Selection<
 
   updateNodeBounds(node, rect);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -4,7 +4,6 @@ import intersect from '../intersect/index.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export function stateEnd<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -87,12 +86,6 @@ export function stateEnd<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, circle);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.circle(node, (node.width ?? 0) / 2, point);
   };

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

@@ -4,7 +4,6 @@ import intersect from '../intersect/index.js';
 import { solidStateFill } from './handDrawnShapeStyles.js';
 import { updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export function stateStart<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -69,12 +68,6 @@ export function stateStart<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, circle);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.circle(node, (node.width ?? 7) / 2, point);
   };

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

@@ -6,7 +6,6 @@ import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export const createSubroutinePathD = (
   x: number,
@@ -104,12 +103,6 @@ export async function subroutine<T extends SVGGraphicsElement>(parent: D3Selecti
     updateNodeBounds(node, el);
   }
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };

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

@@ -4,7 +4,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 /// The width/height of the tag in comparison to the height of the node
 const TAG_RATIO = 0.2;
@@ -86,12 +85,6 @@ export async function taggedRect<T extends SVGGraphicsElement>(parent: D3Selecti
 
   updateNodeBounds(node, taggedRect);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, rectPoints, point);
 

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

@@ -10,7 +10,6 @@ import type { Node } from '../../types.js';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function taggedWaveEdgedRectangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -120,13 +119,6 @@ export async function taggedWaveEdgedRectangle<T extends SVGGraphicsElement>(
   );
 
   updateNodeBounds(node, waveEdgeRect);
-
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, points, point);
     return pos;

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

@@ -3,7 +3,6 @@ import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import { styles2String } from './handDrawnShapeStyles.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function text<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -33,12 +32,6 @@ export async function text<T extends SVGGraphicsElement>(parent: D3Selection<T>,
 
   updateNodeBounds(node, rect);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -5,7 +5,6 @@ import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export const createCylinderPathD = (
   x: number,
@@ -130,12 +129,6 @@ export async function tiltedCylinder<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, cylinder);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.rect(node, point);
     const y = pos.y - (node.y ?? 0);

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

@@ -5,7 +5,21 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.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 async function trapezoid<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -69,12 +83,6 @@ export async function trapezoid<T extends SVGGraphicsElement>(parent: D3Selectio
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };

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

@@ -4,7 +4,6 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function trapezoidalPentagon<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -70,12 +69,6 @@ export async function trapezoidalPentagon<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, polygon);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, points, point);
     return pos;

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

@@ -8,7 +8,6 @@ import { createPathFromPoints } from './util.js';
 import { evaluate } from '../../../diagrams/common/common.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 const MIN_HEIGHT = 10;
 const MIN_WIDTH = 10;
@@ -75,12 +74,6 @@ export async function triangle<T extends SVGGraphicsElement>(parent: D3Selection
     `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${h / 2 - (bbox.height + (node.padding ?? 0) / (useHtmlLabels ? 2 : 1) - (bbox.y - (bbox.top ?? 0)))})`
   );
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     log.info('Triangle intersect', node, points, point);
     return intersect.polygon(node, points, point);

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

@@ -10,7 +10,6 @@ import type { Node } from '../../types.js';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function waveEdgedRectangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -94,13 +93,6 @@ export async function waveEdgedRectangle<T extends SVGGraphicsElement>(
   );
 
   updateNodeBounds(node, waveEdgeRect);
-
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    // TODO: Implement intersect for this shape
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, points, point);
     return pos;

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

@@ -10,16 +10,7 @@ import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
-function getPoints(w: number, finalH: number, waveAmplitude: number) {
-  return [
-    { x: -w / 2, y: finalH / 2 },
-    ...generateFullSineWavePoints(-w / 2, finalH / 2, w / 2, finalH / 2, waveAmplitude, 1),
-    { x: w / 2, y: -finalH / 2 },
-    ...generateFullSineWavePoints(w / 2, -finalH / 2, -w / 2, -finalH / 2, waveAmplitude, -1),
-  ];
-}
 export async function waveRectangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
@@ -65,7 +56,12 @@ export async function waveRectangle<T extends SVGGraphicsElement>(
     options.fillStyle = 'solid';
   }
 
-  const points = getPoints(w, finalH, waveAmplitude);
+  const points = [
+    { x: -w / 2, y: finalH / 2 },
+    ...generateFullSineWavePoints(-w / 2, finalH / 2, w / 2, finalH / 2, waveAmplitude, 1),
+    { x: w / 2, y: -finalH / 2 },
+    ...generateFullSineWavePoints(w / 2, -finalH / 2, -w / 2, -finalH / 2, waveAmplitude, -1),
+  ];
 
   const waveRectPath = createPathFromPoints(points);
   const waveRectNode = rc.path(waveRectPath, options);
@@ -86,18 +82,6 @@ export async function waveRectangle<T extends SVGGraphicsElement>(
   node.height = finalH;
 
   updateNodeBounds(node, waveRect);
-
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const w = bounds.width;
-    const h = bounds.height;
-
-    const waveAmplitude = Math.min(h * 0.2, h / 4);
-    const finalH = h + waveAmplitude * 2;
-
-    const points = getPoints(w, finalH, waveAmplitude);
-    return intersect.polygon(node, points, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, points, point);
     return pos;

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

@@ -4,16 +4,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
-
-function getOutPathPoints(x: number, y: number, w: number, h: number, rectOffset: number) {
-  return [
-    { x: x - rectOffset, y: y - rectOffset },
-    { x: x - rectOffset, y: y + h },
-    { x: x + w, y: y + h },
-    { x: x + w, y: y - rectOffset },
-  ];
-}
 
 /// Width of the frame on the top and left of the shape
 const rectOffset = 10;
@@ -49,7 +39,12 @@ export async function windowPane<T extends SVGGraphicsElement>(parent: D3Selecti
   const rc = rough.svg(shapeSvg);
   const options = userNodeOverrides(node, {});
 
-  const outerPathPoints = getOutPathPoints(x, y, w, h, rectOffset);
+  const outerPathPoints = [
+    { x: x - rectOffset, y: y - rectOffset },
+    { x: x - rectOffset, y: y + h },
+    { x: x + w, y: y + h },
+    { x: x + w, y: y - rectOffset },
+  ];
 
   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}
                 M${x - rectOffset},${y} L${x + w},${y} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y}
@@ -82,17 +77,6 @@ export async function windowPane<T extends SVGGraphicsElement>(parent: D3Selecti
 
   updateNodeBounds(node, windowPane);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const w = bounds.width;
-    const h = bounds.height;
-    const rectOffset = 5;
-    const x = -w / 2;
-    const y = -h / 2;
-
-    const outerPathPoints = getOutPathPoints(x, y, w, h, rectOffset);
-    return intersect.polygon(node, outerPathPoints, point);
-  };
-
   node.intersect = function (point) {
     const pos = intersect.polygon(node, outerPathPoints, point);
     return pos;

packages/mermaid/src/rendering-util/types.ts

@@ -44,7 +44,6 @@ interface BaseNode {
   height?: number;
   // Specific properties for State Diagram nodes TODO remove and use generic properties
   intersect?: (point: any) => any;
-  calcIntersect?: (bounds: Bounds, point: Point) => any;
 
   // Non-generic properties
   rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.