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

updated icon and image shape for htmlLabels center alignment

Browse Source
This commit is contained in:
omkarht
2024-10-01 19:38:18 +05:30
parent 90b6df24a1
commit 6d916fb66f
7 changed files with 10 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,7 +59,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
stroke: ${options.nodeBorder};
stroke-width: 1px;
}
.rough-node .label text , .node .label text {
.rough-node .label text , .node .label text, .image-shape .label, .icon-shape .label {
text-anchor: middle;
}
// .flowchart-label .text-outer-tspan {
@@ -75,7 +75,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
stroke-width: 1px;
}
.rough-node .label,.node .label {
.rough-node .label,.node .label, .image-shape .label, .icon-shape .label {
text-align: center;
}
.node.clickable {
@@ -164,20 +164,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
stroke-width: 0;
}
.icon-shape {
background-color: ${options.edgeLabelBackground};
p {
background-color: ${options.edgeLabelBackground};
padding: 2px;
}
rect {
opacity: 0.5;
background-color: ${options.edgeLabelBackground};
fill: ${options.edgeLabelBackground};
}
text-align: center;
}
.image-shape {
.icon-shape, .image-shape {
background-color: ${options.edgeLabelBackground};
p {
background-color: ${options.edgeLabelBackground};

4
packages/mermaid/src/rendering-util/createText.ts
View File

@@ -141,8 +141,8 @@ function createFormattedText(
const bbox = textElement.node().getBBox();
const padding = 2;
bkg
.attr('x', -padding)
.attr('y', -padding)
.attr('x', bbox.x - padding)
.attr('y', bbox.y - padding)
.attr('width', bbox.width + 2 * padding)
.attr('height', bbox.height + 2 * padding);

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

@@ -75,7 +75,7 @@ export const icon = async (
label.attr(
'transform',
`translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
);
iconShape.attr(

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

@@ -70,7 +70,7 @@ export const iconCircle = async (
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
label.attr(
'transform',
`translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
);
iconShape.attr(

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

@@ -80,7 +80,7 @@ export const iconRounded = async (
label.attr(
'transform',
`translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
);
iconShape.attr(

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

@@ -79,7 +79,7 @@ export const iconSquare = async (
label.attr(
'transform',
`translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
);
iconShape.attr(

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
View File

@@ -92,7 +92,7 @@ export const imageSquare = async (
label.attr(
'transform',
`translate(${-bbox.width / 2},${topLabel ? -imageHeight / 2 - bbox.height / 2 - labelPadding / 2 : imageHeight / 2 - bbox.height / 2 + labelPadding / 2})`
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -imageHeight / 2 - bbox.height / 2 - labelPadding / 2 : imageHeight / 2 - bbox.height / 2 + labelPadding / 2})`
);
iconShape.attr(