GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Updated icon shape for background colour and icon colour

Browse Source
This commit is contained in:
saurabhg772244 2024-09-13 23:22:14 +05:30
parent 9f2f3bd780
commit e83a95d3ed
4 changed files with 21 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
View File

@ -1,21 +1,26 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { Node } from '../../types.d.ts';
import type { Node, RenderOptions } from '../../types.d.ts';
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 intersect from '../intersect/index.js';
import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
export const icon = async (parent: SVG, node: Node) => {
export const icon = async (
parent: SVG,
node: Node,
{ config: { themeVariables, flowchart } }: RenderOptions
) => {
const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
const assetWidth = node.assetWidth ?? 48;
const iconSize = Math.max(assetHeight, assetWidth);
const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
const defaultWidth = flowchart?.wrappingWidth;
node.width = Math.max(iconSize, defaultWidth ?? 0);
const { nodeBorder } = themeVariables;
const { stylesMap } = compileStyles(node);
const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
const topLabel = node.pos === 't';
@ -51,6 +56,7 @@ export const icon = async (parent: SVG, node: Node) => {
'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
}
label.attr(

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

@ -12,7 +12,7 @@ export const iconCircle = async (
node: Node,
{ config: { themeVariables, flowchart } }: RenderOptions
) => {
const { labelStyles, nodeStyles } = styles2String(node);
const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
const assetWidth = node.assetWidth ?? 48;
@ -24,14 +24,12 @@ export const iconCircle = async (
node,
'icon-shape default'
);
const { cssStyles } = node;
const topLabel = node.pos === 't';
const diameter = iconSize + halfPadding * 2;
const { mainBkg } = themeVariables;
const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node);
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
@ -44,9 +42,8 @@ export const iconCircle = async (
const iconNode = rc.circle(0, 0, diameter, options);
const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const iconElem = shapeSvg.append('g');
if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
);
@ -57,6 +54,7 @@ export const iconCircle = async (
'transform',
`translate(${-iconWidth / 2},${topLabel ? diameter / 2 - iconHeight - halfPadding + bbox.height / 2 : -diameter / 2 + halfPadding - bbox.height / 2})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
}
label.attr(
@ -66,14 +64,6 @@ export const iconCircle = async (
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
if (cssStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', nodeStyles);
}
updateNodeBounds(node, shapeSvg);
node.intersect = function (point) {

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

@ -13,7 +13,7 @@ export const iconRounded = async (
node: Node,
{ config: { themeVariables, flowchart } }: RenderOptions
) => {
const { labelStyles, nodeStyles } = styles2String(node);
const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
const assetWidth = node.assetWidth ?? 48;
@ -25,13 +25,12 @@ export const iconRounded = async (
node,
'icon-shape default'
);
const { cssStyles } = node;
const topLabel = node.pos === 't';
const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2;
const { mainBkg } = themeVariables;
const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node);
const x = -width / 2;
@ -62,6 +61,7 @@ export const iconRounded = async (
'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
}
label.attr(
@ -71,14 +71,6 @@ export const iconRounded = async (
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
if (cssStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', nodeStyles);
}
updateNodeBounds(node, shapeSvg);
node.intersect = function (point) {

14
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
View File

@ -12,7 +12,7 @@ export const iconSquare = async (
node: Node,
{ config: { themeVariables, flowchart } }: RenderOptions
) => {
const { labelStyles, nodeStyles } = styles2String(node);
const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
const assetWidth = node.assetWidth ?? 48;
@ -24,13 +24,12 @@ export const iconSquare = async (
node,
'icon-shape default'
);
const { cssStyles } = node;
const topLabel = node.pos === 't';
const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2;
const { mainBkg } = themeVariables;
const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node);
const x = -width / 2;
@ -61,6 +60,7 @@ export const iconSquare = async (
'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
}
label.attr(
@ -70,14 +70,6 @@ export const iconSquare = async (
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
if (cssStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', nodeStyles);
}
updateNodeBounds(node, shapeSvg);
node.intersect = function (point) {