marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +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>
</head>
<body>
<body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid">
flowchart LR
A --> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 400, w: 50 }@ --> C
flowchart BT
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@
B2 --test--> C
</pre
>
<pre id="diagram5" class="mermaid2">
flowchart
A --> B2@{ icon: "fa:bell", form: "circle", label: "test awbd dauwdug wdgauyd yagyua aygua", pos: "t", w: 50, h: 50 }@ --> C
<pre id="diagram43" class="mermaid">
flowchart BT
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 id="diagram6" class="mermaid2">
@@ -89,9 +103,7 @@
{
name: 'fa',
loader: () =>
fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
res.json()
),
fetch('https://unpkg.com/@iconify-json/fa6-solid/icons.json').then((res) => res.json()),
},
]);
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;
stroke-width: 0;
}
.icon-shape {
p {
background-color: ${options.edgeLabelBackground};
padding: 2px;
}
}
`;
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 { 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);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
@@ -16,17 +17,13 @@ export const icon = async (parent: SVG, node: Node) => {
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(
parent,
node,
'icon-square default'
);
const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
const { cssStyles } = node;
const topLabel = node.pos === 't';
const height = (node.label ? iconSize + bbox.height : iconSize) + halfPadding * 2;
const width = Math.max(iconSize, bbox.width) + halfPadding * 2;
const height = iconSize;
const width = Math.max(iconSize, bbox.width);
const x = -width / 2;
const y = -height / 2;
@@ -54,15 +51,19 @@ export const icon = async (parent: SVG, node: Node) => {
const iconHeight = iconBBox.height;
iconElem.attr(
'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(
'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') {
iconShape.selectAll('path').attr('style', cssStyles);
}
@@ -71,7 +72,7 @@ export const icon = async (parent: SVG, node: Node) => {
iconShape.selectAll('path').attr('style', nodeStyles);
}
updateNodeBounds(node, iconShape);
updateNodeBounds(node, shapeSvg);
node.intersect = function (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 { 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);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
@@ -19,14 +20,14 @@ export const iconSquare = async (parent: SVG, node: Node) => {
const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
parent,
node,
'icon-square default'
'icon-shape default'
);
const { cssStyles } = node;
const topLabel = node.pos === 't';
const height = (node.label ? iconSize + bbox.height : iconSize) + halfPadding * 2;
const width = Math.max(iconSize, bbox.width) + halfPadding * 2;
const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2;
const { themeVariables } = getConfig();
const { mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node);
@@ -57,15 +58,19 @@ export const iconSquare = async (parent: SVG, node: Node) => {
const iconHeight = iconBBox.height;
iconElem.attr(
'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(
'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') {
iconShape.selectAll('path').attr('style', cssStyles);
}
@@ -74,7 +79,7 @@ export const iconSquare = async (parent: SVG, node: Node) => {
iconShape.selectAll('path').attr('style', nodeStyles);
}
updateNodeBounds(node, iconShape);
updateNodeBounds(node, shapeSvg);
node.intersect = function (point) {
log.info('iconSquare intersect', node, point);