diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts
index 11821a11b6..c6e341ef8c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts
@@ -6,6 +6,7 @@ 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);
@@ -37,6 +38,11 @@ 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);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
index d4b41103f8..20e8e9d4a3 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
@@ -4,6 +4,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 generateArcPoints(
   x1: number,
@@ -118,6 +119,11 @@ export async function bowTieRect<T extends SVGGraphicsElement>(parent: D3Selecti
 
   updateNodeBounds(node, bowTieRectShape);
 
+  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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
index 4aaf9222a7..82a2efcaa3 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
@@ -3,16 +3,10 @@ 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';
-
-// 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(' ');
-// };
+import type { Bounds, Point } from '../../../types.js';
 
 export async function card<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -62,6 +56,12 @@ export async function card<T extends SVGGraphicsElement>(parent: D3Selection<T>,
 
   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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
index 4edd685875..da213844b4 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
@@ -4,6 +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';
 
 export function choice<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { nodeStyles } = styles2String(node);
@@ -47,6 +48,12 @@ export function choice<T extends SVGGraphicsElement>(parent: D3Selection<T>, nod
   node.width = 28;
   node.height = 28;
 
+  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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/classBox.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/classBox.ts
index e35ee94abb..81c28b2f6c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/classBox.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/classBox.ts
@@ -9,6 +9,7 @@ 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();
@@ -199,6 +200,11 @@ export async function classBox<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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
index eaacb9f34a..2302fe1ae7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
@@ -5,6 +5,7 @@ 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 createLine(r: number) {
   const xAxis45 = Math.cos(Math.PI / 4); // cosine of 45 degrees
@@ -57,6 +58,12 @@ export function crossedCircle<T extends SVGGraphicsElement>(parent: D3Selection<
 
   updateNodeBounds(node, crossedCircle);
 
+  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('crossedCircle intersect', node, { radius, point });
     const pos = intersect.circle(node, radius, point);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts
index 00113ae4f9..7f5409c39e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts
@@ -4,6 +4,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 generateCirclePoints(
   centerX: number,
@@ -105,6 +106,12 @@ export async function curlyBraceLeft<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, curlyBraceLeftShape);
 
+  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);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts
index d208efc975..4b078769f0 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts
@@ -4,6 +4,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 generateCirclePoints(
   centerX: number,
@@ -105,6 +106,12 @@ export async function curlyBraceRight<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, curlyBraceRightShape);
 
+  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);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts
index 1fd9b6f055..100e2f0a94 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts
@@ -4,6 +4,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 generateCirclePoints(
   centerX: number,
@@ -124,6 +125,12 @@ export async function curlyBraces<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, curlyBracesShape);
 
+  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);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
index 26339b65ce..e85e55a797 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
@@ -10,6 +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';
 
 export async function curvedTrapezoid<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -66,6 +67,12 @@ export async function curvedTrapezoid<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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
index 9d2cd63f6d..af0eccc8cf 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -5,6 +5,7 @@ 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,
@@ -96,6 +97,12 @@ export async function cylinder<T extends SVGGraphicsElement>(parent: D3Selection
     `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (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);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
index 77df581554..7d0d471c04 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
@@ -4,6 +4,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';
 
 export async function dividedRectangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -62,6 +63,12 @@ export async function dividedRectangle<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.rect(node, point);
     return pos;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts
index d5ea3aa762..889b385cb4 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts
@@ -5,6 +5,7 @@ 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,
@@ -91,6 +92,12 @@ export async function cylinder<T extends SVGGraphicsElement>(parent: D3Selection
 
   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 x = pos.x - (node.x ?? 0);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
index bc0d844daf..f9e6153f03 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
@@ -6,6 +6,7 @@ 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>,
@@ -62,6 +63,12 @@ export async function doublecircle<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, circleGroup);
 
+  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('DoubleCircle intersect', node, outerRadius, point);
     return intersect.circle(node, outerRadius, point);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
index 3469697c77..3e73ce9dc9 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
@@ -5,6 +5,7 @@ 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 filledCircle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -46,6 +47,12 @@ export function filledCircle<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, filledCircle);
 
+  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('filledCircle intersect', node, { radius, point });
     const pos = intersect.circle(node, radius, point);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
index 33f65b3268..9337cb8025 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
@@ -6,6 +6,7 @@ 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';
 
 export async function flippedTriangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -59,6 +60,12 @@ export async function flippedTriangle<T extends SVGGraphicsElement>(
     `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 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) {
     log.info('Triangle intersect', node, points, point);
     return intersect.polygon(node, points, point);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
index 9ae587618e..2a9b24f7bb 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
@@ -4,6 +4,7 @@ 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>,
@@ -59,6 +60,12 @@ export function forkJoin<T extends SVGGraphicsElement>(
     node.width += padding / 2 || 0;
     node.height += padding / 2 || 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) {
     return intersect.rect(node, point);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
index 330420cf04..d4cc9c784f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
@@ -11,6 +11,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';
 
 export async function halfRoundedRectangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -63,6 +64,12 @@ 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);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
index 52a4397a2f..acc11182aa 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
@@ -5,6 +5,7 @@ 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,
@@ -72,6 +73,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
index 0a1f55a741..579a32df0d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
@@ -5,6 +5,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';
 
 export async function hourglass<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -52,6 +53,12 @@ export async function hourglass<T extends SVGGraphicsElement>(parent: D3Selectio
 
   // label.attr('transform', `translate(${-bbox.width / 2}, ${(h/2)})`); // To transform text below hourglass 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) {
     log.info('Pill intersect', node, { points });
     const pos = intersect.polygon(node, points, point);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
index e0735f3d3c..2295cc7541 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -6,6 +6,7 @@ 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>,
@@ -97,6 +98,12 @@ 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) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index e8e16853a6..978e9512e6 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -6,6 +6,7 @@ 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>,
@@ -94,6 +95,12 @@ export async function iconCircle<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);
     const pos = intersect.rect(node, point);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index 40c427ef5e..ea5f8ff768 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -7,6 +7,7 @@ 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>,
@@ -104,6 +105,12 @@ export async function iconRounded<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) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index e3536b89e4..52d4e657da 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -7,6 +7,7 @@ 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>,
@@ -104,6 +105,12 @@ export async function iconSquare<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) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
index 5780ca1a6d..25ac92139e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
@@ -5,6 +5,7 @@ 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>,
@@ -108,6 +109,12 @@ export async function imageSquare<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) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
index 49e0f908ec..04b9ed51a3 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
@@ -5,21 +5,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } 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(' ');
-// };
+import type { Bounds, Point } from '../../../types.js';
 
 export async function inv_trapezoid<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -70,6 +56,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
index fba867a71a..604c055ebb 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
@@ -5,6 +5,7 @@ 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) {
@@ -155,6 +156,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts
index de53da4f1d..b336eee61d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts
@@ -3,6 +3,7 @@ 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>,
@@ -48,8 +49,12 @@ export async function labelRect<T extends SVGGraphicsElement>(parent: D3Selectio
   // }
 
   updateNodeBounds(node, rect);
-  // node.width = 1;
-  // node.height = 1;
+
+  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);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
index de84b2a7fd..4942371a9e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -5,6 +5,7 @@ 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);
@@ -50,6 +51,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
index 0b4595bd41..a32e937769 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -5,6 +5,7 @@ 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);
@@ -49,6 +50,12 @@ export async function lean_right<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) {
     return intersect.polygon(node, points, point);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
index b1e16f9ac8..ea9d73504a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
@@ -6,6 +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';
 
 export function lightningBolt<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -55,6 +56,12 @@ export function lightningBolt<T extends SVGGraphicsElement>(parent: D3Selection<
 
   updateNodeBounds(node, lightningBolt);
 
+  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('lightningBolt intersect', node, point);
     const pos = intersect.polygon(node, points, point);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
index 6cd348649a..fe7c3e9409 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
@@ -5,6 +5,7 @@ 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,
@@ -110,6 +111,12 @@ export async function linedCylinder<T extends SVGGraphicsElement>(
     `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + ry - (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);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
index 6f81237427..b580568c7f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
@@ -9,6 +9,7 @@ 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>,
@@ -74,6 +75,13 @@ 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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
index a82929ec4f..4e7b3026a2 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
@@ -4,6 +4,7 @@ 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);
@@ -74,6 +75,12 @@ 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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts
index db436879d3..5e5f71c588 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts
@@ -10,6 +10,7 @@ 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>,
@@ -99,6 +100,12 @@ 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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
index 4a7f66a877..39cc6a028d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -5,6 +5,7 @@ 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>,
@@ -52,6 +53,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
index 07180b0903..b72b40a67f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -92,6 +92,12 @@ export async function question<T extends SVGGraphicsElement>(parent: D3Selection
     return { x: res.x - 0.5, y: res.y - 0.5 }; // Adjusted result
   };
 
+  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) {
     // @ts-ignore TODO fix this (KNSV)
     return this.calcIntersect(node as Bounds, point);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
index 1ad40c5540..016020b920 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
@@ -4,6 +4,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';
 
 export async function rect_left_inv_arrow<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -60,6 +61,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
index bcaf2787aa..e91809ac62 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
@@ -10,6 +10,7 @@ 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>,
@@ -150,6 +151,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
index 835f55ee4d..32c3032592 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
@@ -5,6 +5,7 @@ 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 shadedProcess<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -63,6 +64,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
index d97e9fb6a3..944861af8e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
@@ -4,6 +4,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';
 
 export async function slopedRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -54,6 +55,12 @@ 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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
index 1b93aa1b31..af399504ab 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
@@ -6,6 +6,7 @@ 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,
@@ -88,6 +89,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
index 4cc2838ae7..dc7abc8c30 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -4,6 +4,7 @@ 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>,
@@ -54,6 +55,12 @@ 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, 7, point);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
index 07a0f8f92d..130ce99768 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
@@ -4,6 +4,7 @@ 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>,
@@ -33,6 +34,12 @@ 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, 7, point);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
index ab24af29c8..dedd2e24f0 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
@@ -6,6 +6,7 @@ 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,
@@ -79,6 +80,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
index 3ae068a002..7c3166104c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
@@ -4,6 +4,7 @@ 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 taggedRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -60,6 +61,12 @@ 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);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts
index 1451bdacc5..3804c1580f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts
@@ -10,6 +10,7 @@ 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>,
@@ -96,6 +97,13 @@ 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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts
index cf253fd175..298bb6ecf2 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts
@@ -3,6 +3,7 @@ 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);
@@ -29,6 +30,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
index 29f2c267f5..eaa2787065 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
@@ -5,6 +5,7 @@ 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,
@@ -113,6 +114,12 @@ 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);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
index d0228d55bd..711d6f3f49 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -5,21 +5,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } 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(' ');
-// };
+import type { Bounds, Point } from '../../../types.js';
 
 export async function trapezoid<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -65,6 +51,12 @@ 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);
   };
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
index d4bfb03c04..fdcae4195d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
@@ -4,6 +4,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';
 
 export async function trapezoidalPentagon<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -52,6 +53,12 @@ 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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
index d4bd3c3478..a0b831a923 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
@@ -8,6 +8,7 @@ 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';
 
 export async function triangle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -59,6 +60,12 @@ 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);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts
index d2c1a525d4..c727a96e88 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts
@@ -10,6 +10,7 @@ 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>,
@@ -74,6 +75,13 @@ 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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts
index 4ee6dba475..fcc5cfe835 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts
@@ -10,6 +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';
 
 export async function waveRectangle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -75,6 +76,13 @@ export async function waveRectangle<T extends SVGGraphicsElement>(
   }
 
   updateNodeBounds(node, waveRect);
+
+  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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
index e67c92a06f..60ad5c0aff 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
@@ -4,6 +4,7 @@ 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 windowPane<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -58,6 +59,12 @@ export async function windowPane<T extends SVGGraphicsElement>(parent: D3Selecti
 
   updateNodeBounds(node, windowPane);
 
+  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;