marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-14 17:54:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated half rounded rect

Browse Source
This commit is contained in:
saurabhg772244
2024-08-16 15:49:00 +05:30
parent 2fa03ea369
commit c983c0605e
1 changed files with 16 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { log } from '$root/logger.js'; import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import { import {
@@ -8,37 +8,21 @@ import {
} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
function createHalfRoundedRectShapePathD( function createHalfRoundedRectShapePathD(h: number, w: number, rx: number, ry: number) {
x: number, return ` M ${w / 2} ${-h / 2}
y: number, L ${-w / 2} ${-h / 2}
totalWidth: number, L ${-w / 2} ${h / 2}
totalHeight: number, L ${w / 2} ${h / 2}
radius: number A ${rx} ${ry} 0 0 0 ${w / 2} ${-h / 2}`;
) {
const rw = totalWidth - radius;
const rh = totalHeight;
const points = [
{ x: x + rw, y },
{ x, y },
{ x, y: y + rh },
{ x: x + rw, y: y + rh },
];
const rectPath = createPathFromPoints(points);
const arcPath = `M ${rw},0 A ${rh / 2} ${rh / 2} 0 0 1 ${rw} ${rh}`;
const finalPath = `${rectPath} ${arcPath}`.replace('Z', '');
return finalPath;
} }
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 { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = (bbox.width + node.padding) * 1.2; const w = bbox.width + (node.padding ?? 0) * 2;
const h = bbox.height + node.padding; const h = bbox.height + (node.padding ?? 0) * 2;
const radius = h / 2; const radius = Math.min(h / 2, w / 2);
const rx = radius; const rx = radius;
const ry = radius; const ry = radius;
const { cssStyles } = node; const { cssStyles } = node;
@@ -52,7 +36,7 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
options.fillStyle = 'solid'; options.fillStyle = 'solid';
} }
const pathData = createHalfRoundedRectShapePathD(0, 0, w, h, radius); const pathData = createHalfRoundedRectShapePathD(h, w, rx, ry);
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');
@@ -65,12 +49,14 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
polygon.attr('style', nodeStyles); polygon.attr('style', nodeStyles);
} }
polygon.attr('transform', `translate(${-w / 2}, ${-h / 2})`); polygon.attr('transform', `translate(${-rx / 2 - (node.padding ?? 0) * 2}, 0)`);
label.attr(
'transform',
`translate(${-w / 2 - rx / 2 - (node.padding ?? 0)}, ${-h / 2 + (node.padding ?? 0)})`
);
updateNodeBounds(node, polygon); updateNodeBounds(node, polygon);
label.attr('transform', `translate(${-bbox.width / 2}, ${h / 2 - bbox.height})`);
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.rect(node, point);