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

Updated labels for shapes

Browse Source
This commit is contained in:
saurabhg772244
2024-09-10 19:34:53 +05:30
parent ee17e020cf
commit 194684e27b
4 changed files with 52 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
cypress/platform/saurabh.html
View File

@@ -60,15 +60,29 @@
</style> </style>
</head> </head>
<body> <body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart BT
A --> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 400, w: 50 }@ --> C A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@
B2 --test--> C
</pre </pre
> >
<pre id="diagram5" class="mermaid2"> <pre id="diagram43" class="mermaid">
flowchart flowchart BT
A --> B2@{ icon: "fa:bell", form: "circle", label: "test awbd dauwdug wdgauyd yagyua aygua", pos: "t", w: 50, h: 50 }@ --> C A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }@
B2 --test--> C
</pre
>
<pre id="diagram4" class="mermaid">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", label: "B2", pos: "b", h: 40, w: 30 }@
B2 --test--> C
</pre
>
<pre id="diagram43" class="mermaid">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", label: "B2", pos: "t", h: 40, w: 30 }@
B2 --test--> C
</pre </pre
> >
<pre id="diagram6" class="mermaid2"> <pre id="diagram6" class="mermaid2">
@@ -89,9 +103,7 @@
{ {
name: 'fa', name: 'fa',
loader: () => loader: () =>
fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) => fetch('https://unpkg.com/@iconify-json/fa6-solid/icons.json').then((res) => res.json()),
res.json()
),
}, },
]); ]);
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {

7
packages/mermaid/src/diagrams/flowchart/styles.ts
View File

@@ -163,6 +163,13 @@ const getStyles = (options: FlowChartStyleOptions) =>
fill: none; fill: none;
stroke-width: 0; stroke-width: 0;
} }
.icon-shape {
p {
background-color: ${options.edgeLabelBackground};
padding: 2px;
}
}
`; `;
export default getStyles; export default getStyles;

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

@@ -8,7 +8,8 @@ import intersect from '../intersect/index.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js';
export const icon = async (parent: SVG, node: Node) => { export const icon = 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 assetHeight = node.assetHeight ?? 48;
@@ -16,17 +17,13 @@ export const icon = async (parent: SVG, node: Node) => {
const iconSize = Math.max(assetHeight, assetWidth); const iconSize = Math.max(assetHeight, assetWidth);
const defaultWidth = getConfig()?.flowchart?.wrappingWidth; const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
node.width = Math.max(iconSize, defaultWidth ?? 0); node.width = Math.max(iconSize, defaultWidth ?? 0);
const { shapeSvg, bbox, halfPadding, label } = await labelHelper( const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
parent,
node,
'icon-square default'
);
const { cssStyles } = node; const { cssStyles } = node;
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const height = (node.label ? iconSize + bbox.height : iconSize) + halfPadding * 2; const height = iconSize;
const width = Math.max(iconSize, bbox.width) + halfPadding * 2; const width = Math.max(iconSize, bbox.width);
const x = -width / 2; const x = -width / 2;
const y = -height / 2; const y = -height / 2;
@@ -54,15 +51,19 @@ export const icon = async (parent: SVG, node: Node) => {
const iconHeight = iconBBox.height; const iconHeight = iconBBox.height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding / 2 : -height / 2 + halfPadding / 2})` `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + (translateHorizontal ? bbox.height / 2 : 0) : -height / 2 - (translateHorizontal ? bbox.height / 2 : 0)})`
); );
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 + halfPadding / 2 : -height / 2 + halfPadding * 1.5 + iconSize})` `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 2.5 - (translateHorizontal ? bbox.height / 2 : bbox.height) : height / 2 + 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);
} }
@@ -71,7 +72,7 @@ export const icon = async (parent: SVG, node: Node) => {
iconShape.selectAll('path').attr('style', nodeStyles); iconShape.selectAll('path').attr('style', nodeStyles);
} }
updateNodeBounds(node, iconShape); updateNodeBounds(node, shapeSvg);
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);

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

@@ -8,7 +8,8 @@ import intersect from '../intersect/index.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js';
export const iconSquare = async (parent: SVG, node: Node) => { export const iconSquare = 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 assetHeight = node.assetHeight ?? 48;
@@ -19,14 +20,14 @@ export const iconSquare = async (parent: SVG, node: Node) => {
const { shapeSvg, bbox, halfPadding, label } = await labelHelper( const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
parent, parent,
node, node,
'icon-square default' 'icon-shape default'
); );
const { cssStyles } = node; const { cssStyles } = node;
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const height = (node.label ? iconSize + bbox.height : iconSize) + halfPadding * 2; const height = iconSize + halfPadding * 2;
const width = Math.max(iconSize, bbox.width) + halfPadding * 2; const width = iconSize + halfPadding * 2;
const { themeVariables } = getConfig(); const { themeVariables } = getConfig();
const { mainBkg } = themeVariables; const { mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
@@ -57,15 +58,19 @@ export const iconSquare = async (parent: SVG, node: Node) => {
const iconHeight = iconBBox.height; const iconHeight = iconBBox.height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding / 2 : -height / 2 + halfPadding / 2})` `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + (translateHorizontal ? bbox.height / 2 : 0) : -height / 2 + halfPadding - (translateHorizontal ? bbox.height / 2 : 0)})`
); );
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 + halfPadding / 2 : -height / 2 + halfPadding * 1.5 + iconSize})` `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 2.5 - (translateHorizontal ? bbox.height / 2 : bbox.height) : height / 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);
} }
@@ -74,7 +79,7 @@ export const iconSquare = async (parent: SVG, node: Node) => {
iconShape.selectAll('path').attr('style', nodeStyles); iconShape.selectAll('path').attr('style', nodeStyles);
} }
updateNodeBounds(node, iconShape); updateNodeBounds(node, shapeSvg);
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);