diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts index ae544fa95..86b220e29 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts @@ -1,27 +1,25 @@ 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 type { Node } from '../../types.d.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; 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) => { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; - const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); - const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); - const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); + const minWidth = 80, + minHeight = 50; + 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 rx = radius; - const ry = radius; const { cssStyles } = node; // @ts-ignore - rough is not typed @@ -33,7 +31,15 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => { 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 polygon = shapeSvg.insert(() => shapeNode, ':first-child'); 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.attr('transform', `translate(${-w / 2 - h / 4}, ${-h / 2})`); - label.attr( - 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` - ); + // label.attr( + // 'transform', + // `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` + // ); updateNodeBounds(node, polygon); node.intersect = function (point) { log.info('Pill intersect', node, { radius, point }); - const pos = intersect.rect(node, 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; - } + const pos = intersect.polygon(node, points, point); return pos; }; - return shapeSvg; };