diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 82b271fa8..4362ef392 100644 --- 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 index c6e341ef8..11821a11b 100644 --- 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(parent: D3Selection, node: Node) { const { labelStyles } = styles2String(node); @@ -38,11 +37,6 @@ export function anchor(parent: D3Selection, 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 a92a44d33..599c264cb 100644 --- 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(parent: D3Selecti // let shape: d3.Selection; 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(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 index 9b6426431..68ed75d1b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts +++ b/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(parent: D3Selection, 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(parent: D3Selection, 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 | Awaited>; const { cssStyles } = node; @@ -62,17 +80,6 @@ export async function card(parent: D3Selection, 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 index e9e5760a1..4edd68587 100644 --- 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(parent: D3Selection, node: Node) { const { nodeStyles } = styles2String(node); node.label = ''; @@ -24,7 +16,12 @@ export function choice(parent: D3Selection, 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(parent: D3Selection, 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 index e19df5123..55f5ddb02 100644 --- 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(parent: D3Selection, node: Node) { const { labelStyles, nodeStyles } = styles2String(node); @@ -46,20 +45,11 @@ export async function circle(parent: D3Selection(parent: D3Selection, node: Node) { const config = getConfig(); @@ -257,9 +256,6 @@ export async function classBox(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 index 9bb40832a..e7a653f11 100644 --- 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(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 index 4817bd1d6..7181b09cb 100644 --- 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( parent: D3Selection, node: Node @@ -91,7 +75,18 @@ export async function curlyBraceLeft( ...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( 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); 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 294af012c..337eab41c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts +++ b/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( parent: D3Selection, node: Node @@ -94,7 +78,18 @@ export async function curlyBraceRight( ...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( 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); 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 20787f2c0..b164bf05a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts +++ b/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( parent: D3Selection, node: Node @@ -106,7 +86,24 @@ export async function curlyBraces( ...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( ); 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); 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 3050171ba..72864bf50 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts +++ b/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( parent: D3Selection, @@ -67,7 +57,14 @@ export async function curvedTrapezoid( 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( 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; 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 504bd0fcc..8075cc999 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts +++ b/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(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(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; } 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 736a8e0e9..cd2b210c6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/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( parent: D3Selection, @@ -81,10 +80,6 @@ export async function dividedRectangle( 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; 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 5ee060fe2..d5ea3aa76 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts +++ b/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(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; 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 f3559997e..c300a439f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts +++ b/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( parent: D3Selection, @@ -77,11 +76,6 @@ export async function doublecircle( 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); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts index 3a5c84e36..0e8f3b99f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts +++ b/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( parent: D3Selection, @@ -73,10 +72,6 @@ export async function drawRect( 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/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts index 4db1a71a7..8a4c946e7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts +++ b/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( parent: D3Selection, @@ -72,11 +71,6 @@ export function filledCircle( 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); 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 5ad8dbcad..259dcf63b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts +++ b/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( parent: D3Selection, node: Node @@ -45,8 +36,12 @@ export async function flippedTriangle( 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( `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); 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 9e56a47ef..762278c0b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts +++ b/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( parent: D3Selection, @@ -62,10 +61,6 @@ export function forkJoin( 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); }; 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 7b83a3078..d35425e2e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts +++ b/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( parent: D3Selection, @@ -81,12 +80,6 @@ export async function halfRoundedRectangle( 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 0d3b02049..3ed09bf2b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts +++ b/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(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 5208507aa..595e2ea78 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts +++ b/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(parent: D3Selection, node: Node) { node.label = ''; @@ -45,20 +44,6 @@ export async function hourglass(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); 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 d18501ed3..789dfe430 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts +++ b/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( parent: D3Selection, @@ -114,12 +113,6 @@ export async function icon( 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 f4fa817de..01c3bc80e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts +++ b/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( parent: D3Selection, @@ -133,12 +132,6 @@ export async function iconCircle( 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); 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 80bacb1a4..5386036c1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts +++ b/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( parent: D3Selection, @@ -125,12 +124,6 @@ export async function iconRounded( 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) { 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 eb1544651..e47f8e132 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts +++ b/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( parent: D3Selection, @@ -136,12 +135,6 @@ export async function iconSquare( 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) { 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 64aa144a1..d6e7f561b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts +++ b/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( parent: D3Selection, @@ -118,12 +117,6 @@ export async function imageSquare( // `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) { 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 98ee41de6..7fc994eb5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts +++ b/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( parent: D3Selection, @@ -73,12 +87,6 @@ export async function inv_trapezoid( 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 604c055eb..fba867a71 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts +++ b/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) => { switch (priority) { @@ -156,12 +155,6 @@ export async function kanbanItem( 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 b336eee61..de53da4f1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts +++ b/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( parent: D3Selection, @@ -49,12 +48,8 @@ export async function labelRect(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); 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 cafa4ef71..db8fb8f18 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts +++ b/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(parent: D3Selection, node: Node) { const { labelStyles, nodeStyles } = styles2String(node); @@ -70,12 +69,6 @@ export async function lean_left(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 467531d33..851666e8d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts +++ b/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(parent: D3Selection, node: Node) { const { labelStyles, nodeStyles } = styles2String(node); @@ -71,59 +70,8 @@ export async function lean_right(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; 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 bc529c43d..abcd8de7e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts +++ b/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(parent: D3Selection, node: Node) { node.label = ''; const shapeSvg = parent @@ -62,21 +52,11 @@ export function lightningBolt(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; 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 72738d8b3..95a931ff7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts +++ b/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( `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); 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 a051a13c8..ec5593d26 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts +++ b/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( parent: D3Selection, @@ -93,13 +92,6 @@ export async function linedWaveEdgedRect( ); 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 f96416350..444791cd1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts +++ b/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(parent: D3Selection, node: Node) { const { labelStyles, nodeStyles } = styles2String(node); @@ -106,12 +105,6 @@ export async function multiRect(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 4d44b16f2..8ae3aa9fb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts +++ b/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( parent: D3Selection, @@ -132,12 +131,6 @@ export async function multiWaveEdgedRectangle( 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 39cc6a028..4a7f66a87 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts +++ b/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( parent: D3Selection, @@ -53,12 +52,6 @@ export async function note( 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 d6b03ee06..11d166936 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts +++ b/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(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; 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 d61b9da33..4e3452734 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/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( parent: D3Selection, @@ -68,12 +67,6 @@ export async function rect_left_inv_arrow( ); 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 e91809ac6..bcaf2787a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts +++ b/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( parent: D3Selection, @@ -151,12 +150,6 @@ export async function rectWithTitle( } 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 fe7a23a7f..ee4147dea 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts +++ b/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( 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 b19208e5b..286bfeab2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts +++ b/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(parent: D3Selection, node: Node) { const { labelStyles, nodeStyles } = styles2String(node); @@ -72,12 +71,6 @@ export async function slopedRect(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 0abab6de7..837f3cb3a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts +++ b/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(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 3a2ffb8da..8f2b01b6c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/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( parent: D3Selection, @@ -87,12 +86,6 @@ export function stateEnd( 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); }; 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 07b5d19e0..bcffe1d4b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts +++ b/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( parent: D3Selection, @@ -69,12 +68,6 @@ export function stateStart( 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); }; 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 a426156b5..f9a1935b0 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts +++ b/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(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 8f9c0e43d..89c25a9a6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts +++ b/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(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 2df3c26f2..ea03813f4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts +++ b/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( parent: D3Selection, @@ -120,13 +119,6 @@ export async function taggedWaveEdgedRectangle( ); 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 428888c3a..397c99b8b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts +++ b/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(parent: D3Selection, node: Node) { const { labelStyles, nodeStyles } = styles2String(node); @@ -33,12 +32,6 @@ export async function text(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/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts index d183fa37d..d202cb913 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts +++ b/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( 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 a972ecf87..25409441e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts +++ b/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(parent: D3Selection, node: Node) { const { labelStyles, nodeStyles } = styles2String(node); @@ -69,12 +83,6 @@ export async function trapezoid(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 4c197c220..036e5565e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts +++ b/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( parent: D3Selection, @@ -70,12 +69,6 @@ export async function trapezoidalPentagon( 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 55cb7c20d..af5369c12 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts +++ b/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(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 b0f899731..74a2be38a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts +++ b/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( parent: D3Selection, @@ -94,13 +93,6 @@ export async function waveEdgedRectangle( ); 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 09cb628d9..c4ad3be72 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts +++ b/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( parent: D3Selection, node: Node @@ -65,7 +56,12 @@ export async function waveRectangle( 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( 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; 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 eea7364b3..2651bbc7a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/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(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(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; diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts index 6eae0c046..064e9c3e5 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/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.