marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-22 17:56:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

#6097 Handling hourglass and lightningBolt

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-12-03 10:49:43 +01:00
parent 8336d1cf2d
commit 8277579259
2 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,9 +54,15 @@ export async function hourglass<T extends SVGGraphicsElement>(parent: D3Selectio
// label.attr('transform', `translate(${-bbox.width / 2}, ${(h/2)})`); // To transform text below hourglass shape // label.attr('transform', `translate(${-bbox.width / 2}, ${(h/2)})`); // To transform text below hourglass shape
node.calcIntersect = function (bounds: Bounds, point: Point) { node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape const { width: w, height: h } = bounds;
const radius = bounds.width / 2; const points = [
return intersect.circle(bounds, radius, point); { 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) { node.intersect = function (point) {

25
packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
View File

@@ -7,7 +7,16 @@ import intersect from '../intersect/index.js';
import { createPathFromPoints } from './util.js'; import { createPathFromPoints } from './util.js';
import type { D3Selection } from '../../../types.js'; import type { D3Selection } from '../../../types.js';
import type { Bounds, Point } 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<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) { export function lightningBolt<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.label = ''; node.label = '';
@@ -57,16 +66,20 @@ export function lightningBolt<T extends SVGGraphicsElement>(parent: D3Selection<
updateNodeBounds(node, lightningBolt); updateNodeBounds(node, lightningBolt);
node.calcIntersect = function (bounds: Bounds, point: Point) { node.calcIntersect = function (bounds: Bounds, point: Point) {
// TODO: Implement intersect for this shape const { width: w, height: h } = bounds;
const radius = bounds.width / 2; const gapX = Math.max(5, w * 0.1);
return intersect.circle(bounds, radius, point); 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) { node.intersect = function (point) {
log.info('lightningBolt intersect', node, point); log.info('lightningBolt intersect', node, point);
const pos = intersect.polygon(node, points, point); const res = intersect.polygon(node, points, point);
return pos; return res;
}; };
return shapeSvg; return shapeSvg;