marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-03 20:34:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

#6097 Implemented calcIntersect for the first round of shapes

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-11-30 10:54:18 +01:00
parent 33d8b1a78d
commit 0c28593ea5
9 changed files with 122 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -120,9 +120,20 @@ export async function bowTieRect<T extends SVGGraphicsElement>(parent: D3Selecti
updateNodeBounds(node, bowTieRectShape);
node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape
const radius = bounds.width / 2;
return intersect.circle(bounds, radius, point);
const w = bounds.width;
const h = bounds.height;
const ry = h / 2;
const rx = ry / (2.5 + h / 50);
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),
];
return intersect.polygon(bounds, points, point);
};
node.intersect = function (point) {
const pos = intersect.polygon(node, points, point);

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

@@ -57,9 +57,22 @@ export async function card<T extends SVGGraphicsElement>(parent: D3Selection<T>,
updateNodeBounds(node, polygon);
node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape
const radius = bounds.width / 2;
return intersect.circle(bounds, radius, point);
const h = bounds.height;
const padding = 12;
const w = bounds.width;
const left = 0;
const right = w;
const top = -h;
const bottom = 0;
const points = [
{ x: left + padding, y: top },
{ x: right, y: top },
{ x: right, y: bottom },
{ x: left, y: bottom },
{ x: left, y: top + padding },
{ x: left + padding, y: top },
];
return intersect.polygon(bounds, points, point);
};
node.intersect = function (point) {

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

@@ -49,9 +49,15 @@ export function choice<T extends SVGGraphicsElement>(parent: D3Selection<T>, nod
node.height = 28;
node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape
const radius = bounds.width / 2;
return intersect.circle(bounds, radius, point);
const s = Math.max(28, bounds.width ?? 0);
const points = [
{ x: 0, y: s / 2 },
{ x: s / 2, y: 0 },
{ x: 0, y: -s / 2 },
{ x: -s / 2, y: 0 },
];
return intersect.circle(bounds, points, point);
};
node.intersect = function (point) {

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

@@ -201,9 +201,7 @@ export async function classBox<T extends SVGGraphicsElement>(parent: D3Selection
updateNodeBounds(node, rect);
node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape
const radius = bounds.width / 2;
return intersect.circle(bounds, radius, point);
return intersect.rect(bounds, point);
};
node.intersect = function (point) {
return intersect.rect(node, point);

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

@@ -59,8 +59,7 @@ export function crossedCircle<T extends SVGGraphicsElement>(parent: D3Selection<
updateNodeBounds(node, crossedCircle);
node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape
const radius = bounds.width / 2;
const radius = Math.max(30, bounds?.width ?? 0);
return intersect.circle(bounds, radius, point);
};

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

@@ -107,9 +107,23 @@ export async function curlyBraceLeft<T extends SVGGraphicsElement>(
updateNodeBounds(node, curlyBraceLeftShape);
node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape
const radius = bounds.width / 2;
return intersect.circle(bounds, radius, point);
const w = bounds.width;
const h = bounds.height;
const radius = Math.max(5, h * 0.1);
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 },
];
return intersect.polygon(bounds, rectPoints, point);
};
node.intersect = function (point) {

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

@@ -107,9 +107,23 @@ export async function curlyBraceRight<T extends SVGGraphicsElement>(
updateNodeBounds(node, curlyBraceRightShape);
node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape
const radius = bounds.width / 2;
return intersect.circle(bounds, radius, point);
const w = bounds.width;
const h = bounds.height;
const radius = Math.max(5, h * 0.1);
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 },
];
return intersect.polygon(bounds, rectPoints, point);
};
node.intersect = function (point) {

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

@@ -36,6 +36,25 @@ function generateCirclePoints(
return points;
}
const getRectPoints = (w: number, h: number, radius: number) => [
{ x: w / 2, y: -h / 2 - radius },
{ x: -w / 2, y: -h / 2 - radius },
...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0),
{ x: -w / 2 - radius, y: -radius },
...generateCirclePoints(w / 2 + radius * 2, -radius, radius, 20, -180, -270),
...generateCirclePoints(w / 2 + radius * 2, radius, radius, 20, -90, -180),
{ x: -w / 2 - radius, y: h / 2 },
...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
{ x: -w / 2, y: h / 2 + radius },
{ x: w / 2 - radius - radius / 2, y: h / 2 + radius },
...generateCirclePoints(-w / 2 + radius + radius / 2, -h / 2, radius, 20, -90, -180),
{ x: w / 2 - radius / 2, y: radius },
...generateCirclePoints(-w / 2 - radius / 2, -radius, radius, 20, 0, 90),
...generateCirclePoints(-w / 2 - radius / 2, radius, radius, 20, -90, 0),
{ x: w / 2 - radius / 2, y: -radius },
...generateCirclePoints(-w / 2 + radius + radius / 2, h / 2, radius, 30, -180, -270),
];
export async function curlyBraces<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
@@ -67,24 +86,7 @@ export async function curlyBraces<T extends SVGGraphicsElement>(
...generateCirclePoints(-w / 2 + radius + radius / 2, h / 2, radius, 30, -180, -270),
];
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),
];
const rectPoints = getRectPoints(w, h, radius);
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
@@ -126,9 +128,12 @@ export async function curlyBraces<T extends SVGGraphicsElement>(
updateNodeBounds(node, curlyBracesShape);
node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape
const radius = bounds.width / 2;
return intersect.circle(bounds, radius, point);
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) {

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

@@ -12,6 +12,15 @@ import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
import type { Bounds, Point } from '../../../types.js';
const getTrapezoidPoints = (rw: number, tw: number, totalHeight: number, radius: number) => [
{ x: rw, y: 0 },
{ x: tw, y: 0 },
{ x: 0, y: totalHeight / 2 },
{ x: tw, y: totalHeight },
{ x: rw, y: totalHeight },
...generateCirclePoints(-rw, -totalHeight / 2, radius, 50, 270, 90),
];
export async function curvedTrapezoid<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
@@ -40,14 +49,7 @@ export async function curvedTrapezoid<T extends SVGGraphicsElement>(
const rw = totalWidth - radius;
const tw = totalHeight / 4;
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 points = getTrapezoidPoints(rw, tw, totalHeight, radius);
const pathData = createPathFromPoints(points);
const shapeNode = rc.path(pathData, options);
@@ -68,9 +70,17 @@ export async function curvedTrapezoid<T extends SVGGraphicsElement>(
updateNodeBounds(node, polygon);
node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape
const radius = bounds.width / 2;
return intersect.circle(bounds, radius, point);
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) {