diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
index 53908e06e..680972bb9 100644
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -60,15 +60,29 @@
-
+
- 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
-
- flowchart
- A --> B2@{ icon: "fa:bell", form: "circle", label: "test awbd dauwdug wdgauyd yagyua aygua", pos: "t", w: 50, h: 50 }@ --> C
+
+ flowchart BT
+ A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }@
+ B2 --test--> C
+
+
+ flowchart BT
+ A --test2--> B2@{ icon: "fa:bell", label: "B2", pos: "b", h: 40, w: 30 }@
+ B2 --test--> C
+
+
+ flowchart BT
+ A --test2--> B2@{ icon: "fa:bell", label: "B2", pos: "t", h: 40, w: 30 }@
+ B2 --test--> C
@@ -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) {
diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
index 2c0feb5bf..491ed291b 100644
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
index fc56cd5ac..f5506d348 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -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);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index 1b069cf38..7b598d5d7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -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);