GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues 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
Show Stats 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: ${options.nodeBorder};
stroke-width: 1px; 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; text-anchor: middle;
} }
// .flowchart-label .text-outer-tspan { // .flowchart-label .text-outer-tspan {
@ -75,7 +75,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
stroke-width: 1px; stroke-width: 1px;
} }
.rough-node .label,.node .label { .rough-node .label,.node .label, .image-shape .label, .icon-shape .label {
text-align: center; text-align: center;
} }
.node.clickable { .node.clickable {
@ -164,20 +164,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
stroke-width: 0; stroke-width: 0;
} }
.icon-shape { .icon-shape, .image-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 {
background-color: ${options.edgeLabelBackground}; background-color: ${options.edgeLabelBackground};
p { p {
background-color: ${options.edgeLabelBackground}; 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 bbox = textElement.node().getBBox();
const padding = 2; const padding = 2;
bkg bkg
.attr('x', -padding) .attr('x', bbox.x - padding)
.attr('y', -padding) .attr('y', bbox.y - padding)
.attr('width', bbox.width + 2 * padding) .attr('width', bbox.width + 2 * padding)
.attr('height', bbox.height + 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( label.attr(
'transform', '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( 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); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
label.attr( label.attr(
'transform', '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( 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( label.attr(
'transform', '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( 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( label.attr(
'transform', '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( 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( label.attr(
'transform', '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( iconShape.attr(