Skip to content

Commit

Permalink
#6097 Implemented calcIntersect for the first round of shapes
Browse files Browse the repository at this point in the history
  • Loading branch information
@knsv
knsv committed Nov 30, 2024
1 parent 33d8b1a commit 0c28593
Show file tree
Hide file tree
Showing 9 changed files with 122 additions and 52 deletions.
17 changes: 14 additions & 3 deletions packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
19 changes: 16 additions & 3 deletions packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
12 changes: 9 additions & 3 deletions packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
4 changes: 1 addition & 3 deletions packages/mermaid/src/rendering-util/rendering-elements/shapes/classBox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

Expand Down
20 changes: 17 additions & 3 deletions packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
20 changes: 17 additions & 3 deletions packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
47 changes: 26 additions & 21 deletions packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down
32 changes: 21 additions & 11 deletions packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand All @@ -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) {
Expand Down

0 comments on commit 0c28593

Please sign in to comment.