diff --git a/cypress/platform/min-size-tester.html b/cypress/platform/min-size-tester.html
index cfbd642ce..eecbbf290 100644
--- a/cypress/platform/min-size-tester.html
+++ b/cypress/platform/min-size-tester.html
@@ -84,9 +84,6 @@
// let shape = 'fr-circ'; //Done
//let shape = 'fork'; // Done
//let shape = 'hourglass'; //Done
- // let shape = 'brace';
- // let shape = 'brace-r';
- // let shape = 'braces';
// let shape = 'bolt'; //Done
// let shape = 'doc'; // Done
// let shape = 'delay'; // Done
@@ -96,16 +93,21 @@
// let shape = 'div-rect'; // Done
//let shape = 'tri'; // Done
// let shape = 'win-pane'; //Done
- // let shape = 'f-circ';
- // let shape = 'lin-doc';
- // let shape = 'notch-pent';
- // let shape = 'flip-tri';
- // let shape = 'sl-rect';
- // let shape = 'docs';
- // let shape = 'st-rect';
+ // let shape = 'f-circ'; // Done
+ // let shape = 'lin-doc'; // Done
+ // let shape = 'notch-pent'; // Done
+ // let shape = 'flip-tri'; // Done
+ // let shape = 'sl-rect'; // Done
+ // let shape = 'cross-circ'; // Done
+ // let shape = 'bow-rect'; // Done
+ // let shape = 'st-rect'; // Done
+
// let shape = 'flag';
- // let shape = 'bow-rect';
- // let shape = 'cross-circ';
+
+ // let shape = 'docs';
+ // let shape = 'brace';
+ // let shape = 'brace-r';
+ // let shape = 'braces';
// let shape = 'tag-doc';
let configFixed = `---
@@ -116,7 +118,7 @@ config:
let code = `flowchart TB
%% 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"]
%% n80@{ shape: '${shape}'}
- n81@{ label: "n81", shape: '${shape}'}
+ n81@{ label: "Ashish", shape: '${shape}'}
%%n82@{ label: "n82", shape: '${shape}'}
%%n83@{ label: "n83", shape: '${shape}'}
`;
@@ -127,8 +129,8 @@ config:
n81: {
x: 0,
y: 10,
- width: 80,
- height: 80,
+ width: 107.7,
+ height: 65,
},
n80: {
x: -400,
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
index 80f4a0bed..7721b3fad 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
@@ -103,21 +103,21 @@ export const bowTieRect = async (parent: SVGAElement, node: Node) => {
// 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.height = Math.max((node?.height ?? 0) - labelPaddingY * 2, 50);
+ node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2, 10);
const totalHeight = calcTotalHeight(node.height);
const [rx, ry] = calcEllipseRadius(totalHeight);
node.width = Math.max(
(node?.width ?? 0) - labelPaddingX * 2 - calculateArcSagitta(totalHeight, rx, ry),
- 50
+ 10
);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
- const totalHeight = calcTotalHeight(Math.max(bbox.height, node?.height ?? 0));
+ const totalHeight = calcTotalHeight(node?.height ? node?.height : bbox.height);
const [rx, ry] = calcEllipseRadius(totalHeight);
const sagitta = calculateArcSagitta(totalHeight, rx, ry);
- const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2 + sagitta;
+ const totalWidth = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2 + sagitta;
const w = totalWidth - sagitta;
const h = totalHeight;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
index ff298c5d3..346bf0a26 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
@@ -25,7 +25,7 @@ export const crossedCircle = (parent: SVG, node: Node) => {
.insert('g')
.attr('class', getNodeClasses(node))
.attr('id', node.domId ?? node.id);
- const radius = Math.max(25, (node?.width ?? 0) / 2, (node?.height ?? 0) / 2);
+ const radius = node?.width ? node?.width / 2 : node?.height ? node?.height / 2 : 25;
const { cssStyles } = node;
// @ts-ignore - rough is not typed
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
index 7f13e5aa6..0944e9e50 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
@@ -6,8 +6,8 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { createPathFromPoints } from './util.js';
-const MIN_HEIGHT = 25;
-const MIN_WIDTH = 25;
+const MIN_HEIGHT = 10;
+const MIN_WIDTH = 10;
export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
@@ -15,24 +15,24 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<
const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-
if (node.width || node.height) {
node.height = node?.height ?? 0;
if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT;
}
- node.width = node?.width ?? 0 - labelPaddingX * 4;
+ node.width = (node?.width ?? 0) - labelPaddingX - labelPaddingX / 2;
if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH;
}
}
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
- const w = Math.max(bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0);
- const h = Math.max(w + bbox.height, node?.width ?? 0);
+ const w = (node?.width ? node?.width : bbox.width) + (labelPaddingX ?? 0);
+ const h = node?.height ? node?.height : w + bbox.height;
const tw = w + bbox.height;
+
const points = [
{ x: 0, y: -h },
{ x: tw, y: -h },
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
index e21686757..6950a8ebd 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
@@ -16,25 +16,25 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : (node.padding ?? 0);
const labelPaddingY = node.look === 'neo' ? nodePadding * 2 : (node.padding ?? 0);
-
- let adjustFinalHeight = true;
if (node.width || node.height) {
- adjustFinalHeight = false;
- node.width = (node?.width ?? 0) - labelPaddingX * 2;
- if (node.width < 50) {
- node.width = 50;
+ const originalWidth = node.width;
+ node.width = ((originalWidth ?? 0) * 10) / 11 - labelPaddingX * 2;
+ if (node.width < 10) {
+ node.width = 10;
}
+ const originalHeight = node.height;
- node.height = (node?.height ?? 0) - labelPaddingY * 2;
- if (node.height < 50) {
- node.height = 50;
+ node.height = ((originalHeight ?? 0) * 3) / 4 - labelPaddingY * 2;
+ //node.height = (node?.height ?? 0) - labelPaddingY * 2;
+ if (node.height < 10) {
+ node.height = 10;
}
}
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
- const w = Math.max(bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2;
- const h = Math.max(bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2;
+ const w = (node?.width ? node?.width : bbox.width) + (labelPaddingX ?? 0) * 2;
+ const h = (node?.height ? node?.height : bbox.height) + (labelPaddingY ?? 0) * 2;
const waveAmplitude = h / 6;
- const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
+ const finalH = h + waveAmplitude;
const { cssStyles } = node;
// @ts-ignore - rough is not typed
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
index 447f78037..a70311b89 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
@@ -17,14 +17,15 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
// 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 = Math.max((node?.width ?? 0) - labelPaddingX * 2 - 2 * rectOffset, 50);
- node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2 - 2 * rectOffset, 50);
+ node.width = Math.max((node?.width ?? 0) - labelPaddingX * 2 - 2 * rectOffset, 10);
+ node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2 - 2 * rectOffset, 10);
}
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
- const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2 + 2 * rectOffset;
- const totalHeight = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2 + 2 * rectOffset;
+ const totalWidth = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2 + 2 * rectOffset;
+ const totalHeight =
+ (node?.height ? node?.height : bbox.height) + labelPaddingY * 2 + 2 * rectOffset;
const w = totalWidth - 2 * rectOffset;
const h = totalHeight - 2 * rectOffset;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
index 1a17c330f..7996ea456 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
@@ -16,14 +16,14 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => {
// 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 = Math.max((node?.width ?? 0) - labelPaddingX * 2, 50);
- node.height = Math.max((node?.height ?? 0) / 1.5 - labelPaddingY * 2, 50);
+ node.width = Math.max((node?.width ?? 0) - labelPaddingX * 2, 10);
+ node.height = Math.max((node?.height ?? 0) / 1.5 - labelPaddingY * 2, 10);
}
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
- const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2;
- const totalHeight = (Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2) * 1.5;
+ const totalWidth = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
+ const totalHeight = ((node?.height ? node?.height : bbox.height) + labelPaddingY * 2) * 1.5;
const w = totalWidth;
const h = totalHeight / 1.5;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
index 22f2df4cb..d218e925b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
@@ -10,8 +10,8 @@ export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
- const minWidth = 60,
- minHeight = 20;
+ const minWidth = 15,
+ minHeight = 5;
if (node.width || node.height) {
node.height = (node.height ?? 0) - labelPaddingY * 2;
if (node.height < minHeight) {
@@ -26,8 +26,9 @@ export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
- const w = Math.max(minWidth, bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2;
- const h = Math.max(minHeight, bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2;
+ const w = (node?.width ? node?.width : Math.max(minWidth, bbox.width)) + (labelPaddingX ?? 0) * 2;
+ const h =
+ (node?.height ? node?.height : Math.max(minHeight, bbox.height)) + (labelPaddingY ?? 0) * 2;
const { cssStyles } = node;
// @ts-ignore - rough is not typed