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

Adjustements to support height and width

Browse Source
This commit is contained in:
saurabhg772244
2024-09-09 14:53:17 +05:30
parent 2259a59ac6
commit 1d1766b5c3
3 changed files with 24 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,27 +19,26 @@ export const icon = async (parent: SVG, node: Node) => {
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0); const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0); const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
const iconHeight = node.assetHeight ?? 48; const iconHeight = node.assetHeight ?? 0;
const iconWidth = node.assetWidth ?? 48; const iconWidth = node.assetWidth ?? 0;
const iconSize = Math.max( const iconSize =
labelHeight - halfPadding, iconWidth || iconHeight
labelWidth - halfPadding, ? Math.max(iconHeight, iconWidth)
Math.max(iconHeight, iconWidth) : Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
);
// const width = Math.max(labelWidth, iconSize); // const width = Math.max(labelWidth, iconSize);
const height = labelHeight + iconSize; const height = labelHeight + iconSize;
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize - 4 * halfPadding, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
); );
const iconWidth = iconElem.node().getBBox().width; const iconWidth = iconElem.node().getBBox().width;
const iconHeight = iconElem.node().getBBox().height; const iconHeight = iconElem.node().getBBox().height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + halfPadding + (topLabel ? labelHeight : 0)})` `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 - halfPadding + (topLabel ? labelHeight : halfPadding * 2)})`
); );
} }
@@ -53,7 +52,7 @@ export const icon = async (parent: SVG, node: Node) => {
label.attr( label.attr(
'transform', 'transform',
`translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : 0) - (bbox.y - (bbox.top ?? 0))})` `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : -halfPadding) - (bbox.y - (bbox.top ?? 0))})`
); );
updateNodeBounds(node, shapeSvg); updateNodeBounds(node, shapeSvg);

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

@@ -23,14 +23,13 @@ export const iconCircle = async (parent: SVG, node: Node) => {
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0); const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0); const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
const iconHeight = node.assetHeight ?? 48; const iconHeight = node.assetHeight ?? 0;
const iconWidth = node.assetWidth ?? 48; const iconWidth = node.assetWidth ?? 0;
const iconSize = Math.max( const iconSize =
labelHeight - halfPadding * 2, iconWidth || iconHeight
labelWidth - halfPadding * 2, ? Math.max(iconHeight, iconWidth)
Math.max(iconHeight, iconWidth) : Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
);
const radius = const radius =
iconSize / 2 + Math.max(labelHeight / 2, labelWidth / 4) + halfPadding * 2 + iconSize / 5; iconSize / 2 + Math.max(labelHeight / 2, labelWidth / 4) + halfPadding * 2 + iconSize / 5;

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

@@ -24,14 +24,13 @@ export const iconSquare = async (parent: SVG, node: Node) => {
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0); const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0); const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
const iconHeight = node.assetHeight ?? 48; const iconHeight = node.assetHeight ?? 0;
const iconWidth = node.assetWidth ?? 48; const iconWidth = node.assetWidth ?? 0;
const iconSize = Math.max( const iconSize =
labelHeight - halfPadding, iconWidth || iconHeight
labelWidth - halfPadding, ? Math.max(iconHeight, iconWidth)
Math.max(iconHeight, iconWidth) : Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
);
const width = Math.max(labelWidth, iconSize); const width = Math.max(labelWidth, iconSize);
const height = labelHeight + iconSize; const height = labelHeight + iconSize;
@@ -59,13 +58,13 @@ export const iconSquare = async (parent: SVG, node: Node) => {
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize - halfPadding * 4, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
); );
const iconWidth = iconElem.node().getBBox().width; const iconWidth = iconElem.node().getBBox().width;
const iconHeight = iconElem.node().getBBox().height; const iconHeight = iconElem.node().getBBox().height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + (topLabel ? labelHeight : 0)})` `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 - halfPadding + (topLabel ? labelHeight : halfPadding * 2)})`
); );
} }
@@ -79,7 +78,7 @@ export const iconSquare = async (parent: SVG, node: Node) => {
label.attr( label.attr(
'transform', 'transform',
`translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : 0) - (bbox.y - (bbox.top ?? 0))})` `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : -halfPadding) - (bbox.y - (bbox.top ?? 0))})`
); );
updateNodeBounds(node, iconShape); updateNodeBounds(node, iconShape);