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

Updated circle icon

Browse Source
This commit is contained in:
saurabhg772244
2024-09-10 22:28:01 +05:30
parent 1cc2f323de
commit 3d1af09090
1 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,62 +1,72 @@
import { log } from '../../../logger.js'; import { log } from '../../../logger.js';
import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js'; import { labelHelper, updateNodeBounds } from './util.js';
import type { Node } from '../../types.d.ts'; import type { Node } from '../../types.d.ts';
import type { SVG } from '../../../diagram-api/types.js'; import type { SVG } from '../../../diagram-api/types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
export const iconCircle = async (parent: SVG, node: Node) => { export const iconCircle = async (parent: SVG, node: Node, dir: string) => {
const translateHorizontal = dir === 'TB' || dir === 'BT' || dir === 'TD' || dir === 'DT';
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
const assetWidth = node.assetWidth ?? 48;
const iconSize = Math.max(assetHeight, assetWidth);
const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
node.width = Math.max(iconSize, defaultWidth ?? 0);
const { shapeSvg, bbox, halfPadding, label } = await labelHelper( const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
parent, parent,
node, node,
getNodeClasses(node) 'icon-shape default'
); );
const { cssStyles } = node; const { cssStyles } = node;
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
const iconHeight = node.assetHeight ?? 0;
const iconWidth = node.assetWidth ?? 0;
const iconSize = const diameter = iconSize + halfPadding * 2;
iconWidth || iconHeight const { themeVariables } = getConfig();
? Math.max(iconHeight, iconWidth) const { mainBkg } = themeVariables;
: Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48); const { stylesMap } = compileStyles(node);
const radius =
iconSize / 2 + Math.max(labelHeight / 2, labelWidth / 4) + halfPadding * 2 + iconSize / 5;
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;
options.fillStyle = 'solid'; options.fillStyle = 'solid';
} }
const roughNode = rc.circle(0, 0, radius * 2, options); const iconNode = rc.circle(0, 0, diameter, options);
const iconShape = shapeSvg.insert(() => roughNode, ':first-child'); const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
); );
const iconWidth = iconElem.node().getBBox().width; const iconBBox = iconElem.node().getBBox();
const iconHeight = iconElem.node().getBBox().height; const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + (topLabel ? labelHeight : 0)})` `translate(${-iconWidth / 2},${topLabel ? diameter / 2 - iconHeight - halfPadding + (translateHorizontal ? bbox.height / 2 : 0) : -diameter / 2 + halfPadding - (translateHorizontal ? bbox.height / 2 : 0)})`
); );
} }
label.attr(
'transform',
`translate(${-diameter / 2 + diameter / 2 - bbox.width / 2},${topLabel ? -diameter / 2 - 2.5 - (translateHorizontal ? bbox.height / 2 : bbox.height) : diameter / 2 + 5 - (translateHorizontal ? bbox.height / 2 : 0)})`
);
if (translateHorizontal) {
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
}
if (cssStyles && node.look !== 'handDrawn') { if (cssStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', cssStyles); iconShape.selectAll('path').attr('style', cssStyles);
} }
@@ -65,15 +75,11 @@ export const iconCircle = async (parent: SVG, node: Node) => {
iconShape.selectAll('path').attr('style', nodeStyles); iconShape.selectAll('path').attr('style', nodeStyles);
} }
label.attr( updateNodeBounds(node, shapeSvg);
'transform',
`translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${iconSize / 2 - labelHeight / 2 + halfPadding - (topLabel ? iconSize : 0) - (bbox.y - (bbox.top ?? 0))})`
);
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.circle(node, radius, point); const pos = intersect.rect(node, point);
return pos; return pos;
}; };