From b99e080337d9cfac7bf124cd0d28c57612609b4e Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Fri, 27 Sep 2024 10:24:29 +0200 Subject: [PATCH] suport dynamic resizing of rect shape --- cypress/platform/size-tester.html | 22 +++++++++++++---- .../rendering-elements/shapes/drawRect.ts | 24 ++++++++++++------- .../rendering-elements/shapes/util.js | 3 +++ 3 files changed, 37 insertions(+), 12 deletions(-) diff --git a/cypress/platform/size-tester.html b/cypress/platform/size-tester.html index 3c9a147c8..ab5b6c42b 100644 --- a/cypress/platform/size-tester.html +++ b/cypress/platform/size-tester.html @@ -48,15 +48,15 @@ }; mermaid.initialize({ startOnLoad: false, - // look: 'handdrawn', + //look: 'handdrawn', layout: 'fixed', theme: 'neo-dark', - // layout: 'elk', + //layout: 'elk', fontFamily: 'Kalam', logLevel: 1, }); - let shape = 'pill'; + let shape = 'rect'; let code = ` flowchart TB @@ -65,7 +65,9 @@ n81@{ shape: '${shape}'} n82@{ 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 = { edges: {}, @@ -76,6 +78,12 @@ width: 300, height: 200, }, + n80: { + x: -400, + y: 10, + width: 100, + height: 50, + }, n82: { x: 400, y: 10, @@ -86,6 +94,12 @@ x: 800, y: 10, }, + n84: { + x: 1200, + y: 10, + width: 300, + height: 200, + }, }, }; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts index 89f0e22a5..d540fb8c5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts @@ -8,20 +8,28 @@ import rough from 'roughjs'; export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; - // console.log('IPI labelStyles:', labelStyles); - node.width = (node?.width ?? 0) - options.labelPaddingX * 2; - node.height = (node?.height ?? 0) - options.labelPaddingY * 2; - if (node.width < 100) { - node.width = 100; + // 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; + if (node.width < 50) { + node.width = 50; + } + + 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 totalWidth = Math.max(bbox.width, node?.width || 0) + options.labelPaddingX * 2; const totalHeight = Math.max(bbox.height, node?.height || 0) + options.labelPaddingY * 2; const x = -totalWidth / 2; const y = -totalHeight / 2; - - // log.info('IPI node = ', node); - let rect; let { rx, ry } = node; const { cssStyles } = node; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js index 977db517d..646d94093 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js @@ -91,6 +91,9 @@ export const labelHelper = async (parent, node, _classes) => { bbox = div.getBoundingClientRect(); dv.attr('width', bbox.width); + if (node.height && node.height < bbox.height) { + bbox.height = node.height; + } dv.attr('height', bbox.height); }