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

suport dynamic resizing of rect shape

Browse Source
This commit is contained in:
Ashish Jain
2024-09-27 10:24:29 +02:00
parent 7a9ec739d9
commit b99e080337
3 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
cypress/platform/size-tester.html
View File

@@ -56,7 +56,7 @@
logLevel: 1, logLevel: 1,
}); });
let shape = 'pill'; let shape = 'rect';
let code = ` let code = `
flowchart TB flowchart TB
@@ -65,6 +65,8 @@
n81@{ shape: '${shape}'} n81@{ shape: '${shape}'}
n82@{ shape: '${shape}'} n82@{ shape: '${shape}'}
n83@{ label: "A single line of text", shape: '${shape}'} n83@{ label: "A single line of text", shape: '${shape}'}
n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
n84@{ shape: '${shape}'}
`; `;
let positions = { let positions = {
@@ -76,6 +78,12 @@
width: 300, width: 300,
height: 200, height: 200,
}, },
n80: {
x: -400,
y: 10,
width: 100,
height: 50,
},
n82: { n82: {
x: 400, x: 400,
y: 10, y: 10,
@@ -86,6 +94,12 @@
x: 800, x: 800,
y: 10, y: 10,
}, },
n84: {
x: 1200,
y: 10,
width: 300,
height: 200,
},
}, },
}; };

22
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@@ -8,20 +8,28 @@ import rough from 'roughjs';
export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => { export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
// console.log('IPI labelStyles:', labelStyles); // If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// also check if the width or height is less than minimum default values (50),
// if so set it to min value
if (node.width || node.height) {
node.width = (node?.width ?? 0) - options.labelPaddingX * 2; node.width = (node?.width ?? 0) - options.labelPaddingX * 2;
node.height = (node?.height ?? 0) - options.labelPaddingY * 2; if (node.width < 50) {
if (node.width < 100) { node.width = 50;
node.width = 100;
} }
node.height = (node?.height ?? 0) - options.labelPaddingY * 2;
if (node.height < 50) {
node.height = 50;
}
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width || 0) + options.labelPaddingX * 2; const totalWidth = Math.max(bbox.width, node?.width || 0) + options.labelPaddingX * 2;
const totalHeight = Math.max(bbox.height, node?.height || 0) + options.labelPaddingY * 2; const totalHeight = Math.max(bbox.height, node?.height || 0) + options.labelPaddingY * 2;
const x = -totalWidth / 2; const x = -totalWidth / 2;
const y = -totalHeight / 2; const y = -totalHeight / 2;
// log.info('IPI node = ', node);
let rect; let rect;
let { rx, ry } = node; let { rx, ry } = node;
const { cssStyles } = node; const { cssStyles } = node;

3
packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
View File

@@ -91,6 +91,9 @@ export const labelHelper = async (parent, node, _classes) => {
bbox = div.getBoundingClientRect(); bbox = div.getBoundingClientRect();
dv.attr('width', bbox.width); dv.attr('width', bbox.width);
if (node.height && node.height < bbox.height) {
bbox.height = node.height;
}
dv.attr('height', bbox.height); dv.attr('height', bbox.height);
} }