marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-12 18:49:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

updated iconCircle shape

Browse Source
This commit is contained in:
omkarht
2024-10-07 11:53:24 +05:30
parent 3bcbad7fa1
commit 42fe55e2bc
1 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
View File

@@ -47,37 +47,45 @@ export const iconCircle = async (
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height; const iconHeight = iconBBox.height;
const iconX = iconBBox.x; const iconX = iconBBox.x;
const iconY = iconBBox.y; // const iconY = iconBBox.y;
const diameter = Math.max(iconWidth, iconHeight) * Math.SQRT2 + padding * 2; const diameter = Math.max(iconWidth, iconHeight) * Math.SQRT2 + padding * 2;
const iconNode = rc.circle(0, 0, diameter, options); const iconNode = rc.circle(0, 0, diameter, options);
const outerWidth = Math.max(diameter, bbox.width); // const outerWidth = Math.max(diameter, bbox.width);
const outerHeight = diameter + bbox.height + labelPadding; // const outerHeight = diameter + bbox.height + labelPadding;
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, { // const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options, // ...options,
fill: 'transparent', // fill: 'transparent',
stroke: 'none', // stroke: 'none',
}); // });
const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode); // const outerShape = shapeSvg.insert(() => outerNode);
// iconElem.attr(
// 'transform',
// `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})`
// );
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
iconElem.attr('class', 'icon'); iconElem.attr('class', 'icon');
// label.attr(
// 'transform',
// `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
// );
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -diameter / 2 - bbox.height - labelPadding : diameter / 2 + labelPadding})`
); );
iconShape.attr( // iconShape.attr(
'transform', // 'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` // `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
); // );
if (stylesMap.get('stroke')) { if (stylesMap.get('stroke')) {
iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`); iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
@@ -87,11 +95,11 @@ export const iconCircle = async (
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`); iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
} }
updateNodeBounds(node, outerShape); updateNodeBounds(node, iconShape);
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);
const pos = intersect.rect(node, point); const pos = intersect.circle(node, diameter / 2, point);
return pos; return pos;
}; };