mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-18 14:59:53 +02:00
added new Lined Cylinder shape
This commit is contained in:
@@ -40,6 +40,7 @@ import { flippedTriangle } from './shapes/flippedTriangle.js';
|
||||
import { hourglass } from './shapes/hourglass.js';
|
||||
import { taggedRect } from './shapes/taggedRect.js';
|
||||
import { multiRect } from './shapes/multiRect.js';
|
||||
import { linedCylinder } from './shapes/linedCylinder.js';
|
||||
|
||||
const shapes = {
|
||||
state,
|
||||
@@ -83,6 +84,7 @@ const shapes = {
|
||||
hourglass,
|
||||
taggedRect,
|
||||
multiRect,
|
||||
linedCylinder,
|
||||
};
|
||||
|
||||
const nodeElems = new Map();
|
||||
|
@@ -0,0 +1,96 @@
|
||||
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
|
||||
import intersect from '../intersect/index.js';
|
||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import rough from 'roughjs';
|
||||
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
|
||||
|
||||
export const createCylinderPathWithInnerArcD = (
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
rx: number,
|
||||
ry: number,
|
||||
outerOffset: number
|
||||
): string => {
|
||||
return [
|
||||
`M${x},${y + ry}`,
|
||||
`a${rx},${ry} 0,0,0 ${width},0`,
|
||||
`a${rx},${ry} 0,0,0 ${-width},0`,
|
||||
`l0,${height}`,
|
||||
`a${rx},${ry} 0,0,0 ${width},0`,
|
||||
`l0,${-height}`,
|
||||
`M${x},${y + ry + outerOffset}`, // Move to the start of the offset top arc
|
||||
`a${rx},${ry} 0,0,0 ${width},0`, // Draw the duplicated top ellipse
|
||||
].join(' ');
|
||||
};
|
||||
|
||||
export const linedCylinder = async (parent: SVGAElement, node: Node) => {
|
||||
const { labelStyles, nodeStyles } = styles2String(node);
|
||||
node.labelStyle = labelStyles;
|
||||
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
|
||||
const w = bbox.width + node.padding;
|
||||
const rx = w / 2;
|
||||
const ry = rx / (2.5 + w / 50);
|
||||
const h = bbox.height + ry + node.padding;
|
||||
const outerOffset = h * 0.1; // 10% of height
|
||||
|
||||
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
const pathData = createCylinderPathWithInnerArcD(0, ry, w, h, rx, ry, outerOffset);
|
||||
const innerLine = rc.path(pathData, options);
|
||||
|
||||
cylinder = shapeSvg.insert(() => innerLine, ':first-child');
|
||||
cylinder.attr('class', 'basic label-container');
|
||||
if (cssStyles) {
|
||||
cylinder.attr('style', cssStyles);
|
||||
}
|
||||
} else {
|
||||
const pathData = createCylinderPathWithInnerArcD(0, 0, w, h, rx, ry, outerOffset);
|
||||
cylinder = shapeSvg
|
||||
.insert('path', ':first-child')
|
||||
.attr('d', pathData)
|
||||
.attr('class', 'basic label-container')
|
||||
.attr('style', cssStyles)
|
||||
.attr('style', nodeStyles);
|
||||
}
|
||||
|
||||
cylinder.attr('label-offset-y', ry);
|
||||
cylinder.attr('transform', `translate(${-w / 2}, ${-(h / 2 + ry)})`);
|
||||
|
||||
updateNodeBounds(node, cylinder);
|
||||
|
||||
label.attr('transform', `translate(${-bbox.width / 2}, ${h / 2 - bbox.height + outerOffset})`);
|
||||
|
||||
node.intersect = function (point) {
|
||||
const pos = intersect.rect(node, point);
|
||||
const x = pos.x - (node.x ?? 0);
|
||||
|
||||
if (
|
||||
rx != 0 &&
|
||||
(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 - (node.y ?? 0) > 0) {
|
||||
y = -y;
|
||||
}
|
||||
|
||||
pos.y += y;
|
||||
}
|
||||
|
||||
return pos;
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
};
|
Reference in New Issue
Block a user