MC-2620 Cleanup

mermaid-js · Feb 11, 2025 · 820603e · 820603e
1 parent 4636305
commit 820603e
Show file tree

Hide file tree

Showing 59 changed files with 181 additions and 690 deletions.
diff --git a/packages/mermaid-layout-elk/src/render.ts b/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[] } = {

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts b/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);

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts b/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;

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
@@ -3,37 +3,55 @@ 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 },
     { x: left, y: bottom },
     { 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);
   };

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/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);
   };

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/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;
 }
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/classBox.ts b/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);
   };

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts b/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);

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts b/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);