marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-03 12:25:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

neoify icon shape

Browse Source
This commit is contained in:
saurabhg772244
2024-09-20 15:45:17 +05:30
parent cf53340672
commit b301138d93
6 changed files with 78 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,9 +55,9 @@ export const icon = async (
const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode);
const iconElem = shapeSvg.append('g');
if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
);
@@ -71,6 +71,7 @@ export const icon = async (
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : -outerHeight / 2 - iconY})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
}
label.attr(
@@ -83,6 +84,14 @@ export const icon = async (
`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')}`);
}
if (stylesMap.get('fill')) {
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
}
updateNodeBounds(node, outerShape);
node.intersect = function (point) {

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

@@ -21,7 +21,7 @@ export const iconCircle = async (
node.width = Math.max(iconSize, defaultWidth ?? 0);
const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
const padding = 20;
const padding = node.look === 'neo' ? 30 : 20;
const labelPadding = node.label ? 8 : 0;
const topLabel = node.pos === 't';
@@ -68,6 +68,7 @@ export const iconCircle = async (
`translate(${-iconWidth / 2 - iconX},${topLabel ? diameter / 2 - iconHeight - padding + bbox.height / 2 - iconY + labelPadding / 2 : -diameter / 2 + padding - bbox.height / 2 - labelPadding / 2 - iconY})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
label.attr(
'transform',
`translate(${-bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 - labelPadding / 2 : diameter / 2 - bbox.height / 2 + labelPadding / 2})`
@@ -78,6 +79,14 @@ export const iconCircle = async (
`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')}`);
}
if (stylesMap.get('fill')) {
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
}
updateNodeBounds(node, outerShape);
node.intersect = function (point) {

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

@@ -28,8 +28,10 @@ export const iconRounded = async (
const topLabel = node.pos === 't';
const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2;
const padding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const height = iconSize + padding * 2;
const width = iconSize + padding * 2;
const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node);
@@ -60,9 +62,9 @@ export const iconRounded = async (
const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode);
const iconElem = shapeSvg.append('g');
if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
);
@@ -73,9 +75,10 @@ export const iconRounded = async (
const iconY = iconBBox.y;
iconElem.attr(
'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})`
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - padding - iconY : -outerHeight / 2 + padding - iconY})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
}
label.attr(
@@ -88,6 +91,14 @@ export const iconRounded = async (
`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')}`);
}
if (stylesMap.get('fill')) {
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
}
updateNodeBounds(node, outerShape);
node.intersect = function (point) {

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

@@ -27,8 +27,10 @@ export const iconSquare = async (
const topLabel = node.pos === 't';
const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2;
const padding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const height = iconSize + padding * 2;
const width = iconSize + padding * 2;
const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node);
@@ -59,9 +61,9 @@ export const iconSquare = async (
const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode);
const iconElem = shapeSvg.append('g');
if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
);
@@ -72,9 +74,10 @@ export const iconSquare = async (
const iconY = iconBBox.y;
iconElem.attr(
'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})`
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - padding - iconY : -outerHeight / 2 + padding - iconY})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
}
label.attr(
@@ -87,6 +90,14 @@ export const iconSquare = async (
`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')}`);
}
if (stylesMap.get('fill')) {
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
}
updateNodeBounds(node, outerShape);
node.intersect = function (point) {

10
packages/mermaid/src/styles.ts
View File

@@ -115,6 +115,16 @@ const getStyles = (
stroke-width: 1px;
}
[data-look="neo"].icon-shape .icon path {
fill: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow};
}
[data-look="neo"].icon-shape path {
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow};
}
${userStyles}
`;
};