marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 07:19:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

updated halfRoundedRectangle shape

Browse Source
This commit is contained in:
omkarht
2024-09-21 17:49:36 +05:30
parent 11da07b735
commit f052a3f686
1 changed files with 26 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
View File

@@ -1,27 +1,25 @@
import { log } from '../../../logger.js'; import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import {
labelHelper,
updateNodeBounds,
getNodeClasses,
createPathFromPoints,
generateCirclePoints,
} from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '../../types.d.ts'; import type { Node } from '../../types.d.ts';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
function createHalfRoundedRectShapePathD(h: number, w: number, rx: number, ry: number) {
return ` M ${w} ${h}
L ${0} ${h}
L ${0} ${0}
L ${w} ${0}
A ${rx} ${ry} 0 0 1 ${w} ${h}Z`;
}
export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => { export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const minWidth = 80,
const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); minHeight = 50;
const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(minWidth, bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
const h = Math.max(minHeight, bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
const radius = h / 2; const radius = h / 2;
const rx = radius;
const ry = radius;
const { cssStyles } = node; const { cssStyles } = node;
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
@@ -33,7 +31,15 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
options.fillStyle = 'solid'; options.fillStyle = 'solid';
} }
const pathData = createHalfRoundedRectShapePathD(h, w, rx, ry); const points = [
{ x: -w / 2, y: -h / 2 },
{ x: w / 2 - radius, y: -h / 2 },
...generateCirclePoints(-w / 2 + radius, 0, radius, 50, 90, 270),
{ x: w / 2 - radius, y: h / 2 },
{ x: -w / 2, y: h / 2 },
];
const pathData = createPathFromPoints(points);
const shapeNode = rc.path(pathData, options); const shapeNode = rc.path(pathData, options);
const polygon = shapeSvg.insert(() => shapeNode, ':first-child'); const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
polygon.attr('class', 'basic label-container'); polygon.attr('class', 'basic label-container');
@@ -46,38 +52,17 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
polygon.selectChildren('path').attr('style', nodeStyles); polygon.selectChildren('path').attr('style', nodeStyles);
} }
polygon.attr('transform', `translate(${-w / 2 - h / 4}, ${-h / 2})`); // label.attr(
label.attr( // 'transform',
'transform', // `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})`
`translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` // );
);
updateNodeBounds(node, polygon); updateNodeBounds(node, polygon);
node.intersect = function (point) { node.intersect = function (point) {
log.info('Pill intersect', node, { radius, point }); log.info('Pill intersect', node, { radius, point });
const pos = intersect.rect(node, point); const pos = intersect.polygon(node, points, point);
const y = pos.y - (node.y ?? 0);
if (
ry != 0 &&
pos.x > (node.x ?? 0) &&
(Math.abs(y) < (node.height ?? 0) / 2 ||
(Math.abs(y) == (node.height ?? 0) / 2 &&
Math.abs(pos.x - (node.x ?? 0)) > (node.width ?? 0) / 2 - rx))
) {
let x = rx * rx * (1 - (y * y) / (ry * ry));
if (x != 0) {
x = Math.sqrt(x);
}
x = rx - x;
if (point.x - (node.x ?? 0) > 0) {
x = -x;
}
pos.x += x;
}
return pos; return pos;
}; };
return shapeSvg; return shapeSvg;
}; };