marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-07 16:19:38 +02: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

36
cypress/platform/saurabh.html
View File

@@ -63,23 +63,21 @@
<body style="display: flex; gap: 2rem; flex-direction: row"> <body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart TD flowchart TD
B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "t", h: 80 }@ B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "b" }
W --> B2
X --> B2
Y --> B2
Z --> B2
B2 --<strong>sas</strong>--> C
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart TB flowchart TD
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@ B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
B2 --test--> C </pre
D --> B2 --> E >
style B2 fill:#f9f,stroke:#333,stroke-width:4px <pre id="diagram4" class="mermaid">
flowchart TD
B2@{ icon: "fa:bell", form: "circle", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
</pre
>
<pre id="diagram4" class="mermaid">
flowchart TD
B2@{ icon: "fa:bell", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
</pre </pre
> >
<pre id="diagram43" class="mermaid2"> <pre id="diagram43" class="mermaid2">
@@ -125,7 +123,9 @@
{ {
name: 'fa', name: 'fa',
loader: () => loader: () =>
fetch('https://unpkg.com/@iconify-json/fa6-solid/icons.json').then((res) => res.json()), fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
res.json()
),
}, },
]); ]);
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@@ -137,7 +137,7 @@
mermaid.initialize({ mermaid.initialize({
// theme: 'base', // theme: 'base',
// handdrawnSeed: 12, // handdrawnSeed: 12,
look: 'classic', // look: 'classic',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// 'elk.nodePlacement.strategy': 'SIMPLE', // 'elk.nodePlacement.strategy': 'SIMPLE',
// 'elk.nodePlacement.strategy': 'LAYERED', // 'elk.nodePlacement.strategy': 'LAYERED',

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 iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode); const outerShape = shapeSvg.insert(() => outerNode);
const iconElem = shapeSvg.append('g');
if (node.icon) { if (node.icon) {
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>`
); );
@@ -71,6 +71,7 @@ export const icon = async (
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : -outerHeight / 2 - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : -outerHeight / 2 - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
} }
label.attr( label.attr(
@@ -83,6 +84,14 @@ export const icon = async (
`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')) {
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); updateNodeBounds(node, outerShape);
node.intersect = function (point) { 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); node.width = Math.max(iconSize, defaultWidth ?? 0);
const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default'); 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 labelPadding = node.label ? 8 : 0;
const topLabel = node.pos === 't'; 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})` `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.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 - labelPadding / 2 : diameter / 2 - bbox.height / 2 + labelPadding / 2})` `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})` `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); updateNodeBounds(node, outerShape);
node.intersect = function (point) { 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 topLabel = node.pos === 't';
const height = iconSize + halfPadding * 2; const padding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const width = iconSize + halfPadding * 2;
const height = iconSize + padding * 2;
const width = iconSize + padding * 2;
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
@@ -60,9 +62,9 @@ export const iconRounded = async (
const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); 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) { if (node.icon) {
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>`
); );
@@ -73,9 +75,10 @@ export const iconRounded = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', '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.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
} }
label.attr( label.attr(
@@ -88,6 +91,14 @@ export const iconRounded = async (
`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')) {
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); updateNodeBounds(node, outerShape);
node.intersect = function (point) { 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 topLabel = node.pos === 't';
const height = iconSize + halfPadding * 2; const padding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const width = iconSize + halfPadding * 2;
const height = iconSize + padding * 2;
const width = iconSize + padding * 2;
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
@@ -59,9 +61,9 @@ export const iconSquare = async (
const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); 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) { if (node.icon) {
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>`
); );
@@ -72,9 +74,10 @@ export const iconSquare = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', '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.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
} }
label.attr( label.attr(
@@ -87,6 +90,14 @@ export const iconSquare = async (
`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')) {
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); updateNodeBounds(node, outerShape);
node.intersect = function (point) { node.intersect = function (point) {

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

@@ -115,6 +115,16 @@ const getStyles = (
stroke-width: 1px; 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} ${userStyles}
`; `;
}; };