mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 14:29:25 +02:00
Adjustements to support height and width
This commit is contained in:
@@ -19,27 +19,26 @@ export const icon = async (parent: SVG, node: Node) => {
|
||||
const topLabel = node.pos === 't';
|
||||
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
|
||||
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
|
||||
const iconHeight = node.assetHeight ?? 48;
|
||||
const iconWidth = node.assetWidth ?? 48;
|
||||
const iconHeight = node.assetHeight ?? 0;
|
||||
const iconWidth = node.assetWidth ?? 0;
|
||||
|
||||
const iconSize = Math.max(
|
||||
labelHeight - halfPadding,
|
||||
labelWidth - halfPadding,
|
||||
Math.max(iconHeight, iconWidth)
|
||||
);
|
||||
const iconSize =
|
||||
iconWidth || iconHeight
|
||||
? Math.max(iconHeight, iconWidth)
|
||||
: Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
|
||||
// const width = Math.max(labelWidth, iconSize);
|
||||
const height = labelHeight + iconSize;
|
||||
|
||||
if (node.icon) {
|
||||
const iconElem = shapeSvg.append('g');
|
||||
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 iconHeight = iconElem.node().getBBox().height;
|
||||
iconElem.attr(
|
||||
'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(
|
||||
'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);
|
||||
|
||||
|
@@ -23,14 +23,13 @@ export const iconCircle = async (parent: SVG, node: Node) => {
|
||||
const topLabel = node.pos === 't';
|
||||
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
|
||||
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
|
||||
const iconHeight = node.assetHeight ?? 48;
|
||||
const iconWidth = node.assetWidth ?? 48;
|
||||
const iconHeight = node.assetHeight ?? 0;
|
||||
const iconWidth = node.assetWidth ?? 0;
|
||||
|
||||
const iconSize = Math.max(
|
||||
labelHeight - halfPadding * 2,
|
||||
labelWidth - halfPadding * 2,
|
||||
Math.max(iconHeight, iconWidth)
|
||||
);
|
||||
const iconSize =
|
||||
iconWidth || iconHeight
|
||||
? Math.max(iconHeight, iconWidth)
|
||||
: Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
|
||||
|
||||
const radius =
|
||||
iconSize / 2 + Math.max(labelHeight / 2, labelWidth / 4) + halfPadding * 2 + iconSize / 5;
|
||||
|
@@ -24,14 +24,13 @@ export const iconSquare = async (parent: SVG, node: Node) => {
|
||||
const topLabel = node.pos === 't';
|
||||
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
|
||||
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
|
||||
const iconHeight = node.assetHeight ?? 48;
|
||||
const iconWidth = node.assetWidth ?? 48;
|
||||
const iconHeight = node.assetHeight ?? 0;
|
||||
const iconWidth = node.assetWidth ?? 0;
|
||||
|
||||
const iconSize = Math.max(
|
||||
labelHeight - halfPadding,
|
||||
labelWidth - halfPadding,
|
||||
Math.max(iconHeight, iconWidth)
|
||||
);
|
||||
const iconSize =
|
||||
iconWidth || iconHeight
|
||||
? Math.max(iconHeight, iconWidth)
|
||||
: Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
|
||||
const width = Math.max(labelWidth, iconSize);
|
||||
const height = labelHeight + iconSize;
|
||||
|
||||
@@ -59,13 +58,13 @@ export const iconSquare = async (parent: SVG, node: Node) => {
|
||||
if (node.icon) {
|
||||
const iconElem = shapeSvg.append('g');
|
||||
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 iconHeight = iconElem.node().getBBox().height;
|
||||
iconElem.attr(
|
||||
'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(
|
||||
'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);
|
||||
|
||||
|
Reference in New Issue
Block a user