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

upated iconRounded shape

Browse Source
This commit is contained in:
omkarht
2024-10-07 11:52:08 +05:30
parent 0198f0e798
commit 3bcbad7fa1
1 changed files with 54 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
View File

@@ -51,17 +51,17 @@ export const iconRounded = async (
const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 5), options);
const outerWidth = Math.max(width, bbox.width);
const outerHeight = height + bbox.height + labelPadding;
// const outerWidth = Math.max(width, bbox.width);
// const outerHeight = height + bbox.height + labelPadding;
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options,
fill: 'transparent',
stroke: 'none',
});
// const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
// ...options,
// fill: 'transparent',
// stroke: 'none',
// });
const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode);
// const outerShape = shapeSvg.insert(() => outerNode);
const iconElem = shapeSvg.append('g');
if (node.icon) {
@@ -70,12 +70,17 @@ export const iconRounded = async (
);
const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height;
// const iconHeight = iconBBox.height;
const iconX = iconBBox.x;
const iconY = iconBBox.y;
// const iconY = iconBBox.y;
// iconElem.attr(
// 'transform',
// `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - padding : outerHeight / 2 - iconHeight - iconY - padding - bbox.height - labelPadding})`
// );
iconElem.attr(
'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - padding : outerHeight / 2 - iconHeight - iconY - padding - bbox.height - labelPadding})`
`translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
iconElem.attr('class', 'icon');
@@ -83,13 +88,12 @@ export const iconRounded = async (
label.attr(
'transform',
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
);
iconShape.attr(
'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -height / 2 - bbox.height - labelPadding : height / 2 + labelPadding})`
);
// iconShape.attr(
// 'transform',
// `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
// );
if (stylesMap.get('stroke')) {
iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
@@ -99,43 +103,43 @@ export const iconRounded = async (
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
}
updateNodeBounds(node, outerShape);
updateNodeBounds(node, iconShape);
node.intersect = function (point) {
log.info('iconSquare intersect', node, point);
if (!node.label) {
// if (!node.label) {
return intersect.rect(node, point);
}
const dx = node.x ?? 0;
const dy = node.y ?? 0;
const nodeHeight = node.height ?? 0;
let points = [];
if (topLabel) {
points = [
{ x: dx - bbox.width / 2, y: dy - nodeHeight / 2 },
{ x: dx + bbox.width / 2, y: dy - nodeHeight / 2 },
{ x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
{ x: dx + width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
{ x: dx + width / 2, y: dy + nodeHeight / 2 },
{ x: dx - width / 2, y: dy + nodeHeight / 2 },
{ x: dx - width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
{ x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
];
} else {
points = [
{ x: dx - width / 2, y: dy - nodeHeight / 2 },
{ x: dx + width / 2, y: dy - nodeHeight / 2 },
{ x: dx + width / 2, y: dy - nodeHeight / 2 + height },
{ x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + height },
{ x: dx + bbox.width / 2 / 2, y: dy + nodeHeight / 2 },
{ x: dx - bbox.width / 2, y: dy + nodeHeight / 2 },
{ x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + height },
{ x: dx - width / 2, y: dy - nodeHeight / 2 + height },
];
}
// }
// const dx = node.x ?? 0;
// const dy = node.y ?? 0;
// const nodeHeight = node.height ?? 0;
// let points = [];
// if (topLabel) {
// points = [
// { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 },
// { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 },
// { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
// { x: dx + width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
// { x: dx + width / 2, y: dy + nodeHeight / 2 },
// { x: dx - width / 2, y: dy + nodeHeight / 2 },
// { x: dx - width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
// { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
// ];
// } else {
// points = [
// { x: dx - width / 2, y: dy - nodeHeight / 2 },
// { x: dx + width / 2, y: dy - nodeHeight / 2 },
// { x: dx + width / 2, y: dy - nodeHeight / 2 + height },
// { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + height },
// { x: dx + bbox.width / 2 / 2, y: dy + nodeHeight / 2 },
// { x: dx - bbox.width / 2, y: dy + nodeHeight / 2 },
// { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + height },
// { x: dx - width / 2, y: dy - nodeHeight / 2 + height },
// ];
// }
const pos = intersect.polygon(node, points, point);
return pos;
// const pos = intersect.polygon(node, points, point);
// return pos;
};
return shapeSvg;