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

fix for min size for several shapes

Browse Source
This commit is contained in:
Ashish Jain
2024-10-01 18:52:26 +02:00
parent 5363e9545e
commit d2dfb639c8
17 changed files with 108 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
cypress/platform/min-size-tester.html
View File

@@ -34,6 +34,7 @@
font-family: 'Arial';
background-color: #333;
}
h3 {
color: white;
}
@@ -41,11 +42,9 @@
</head>
<body>
<div class="flex">
<h3>Fixed</h3>
<div class="flex w-full">
<div id="diagram-fixed"></div>
<div id="diagram-normal"></div>
<h3>Non fixed</h3>
</div>
<script type="module">
import mermaid from './mermaid.esm.mjs';
@@ -64,27 +63,27 @@
logLevel: 1,
});
// let shape = 'rect';
// let shape = 'rounded';
// let shape = 'stadium';
// let shape = 'fr-rect';
// let shape = 'cyl';
let shape = 'circle';
// let shape = 'odd';
// let shape = 'diam';
// let shape = 'hex';
// let shape = 'lean-r';
// let shape = 'lean-l';
// let shape = 'trap-b';
// let shape = 'trap-t';
// let shape = 'dbl-circ';
// let shape = 'text';
// let shape = 'notch-rect';
// let shape = 'lin-rect';
// let shape = 'sm-circ';
// let shape = 'fr-circ';
// let shape = 'fork';
// let shape = 'hourglass';
// let shape = 'rect'; // Done
//let shape = 'rounded'; // Done
//let shape = 'stadium'; // Done
// let shape = 'fr-rect'; // Done
// let shape = 'cyl'; // Done
//let shape = 'circle'; // Done
// let shape = 'odd'; // Done
// let shape = 'diam'; //Done
// let shape = 'hex'; // Done
// let shape = 'lean-r'; // Done
// let shape = 'lean-l'; // Done
// let shape = 'trap-b'; // Done
// let shape = 'trap-t'; // Done
// let shape = 'dbl-circ'; // Done
// let shape = 'text'; // Done
// let shape = 'notch-rect'; // Done
// let shape = 'lin-rect'; // Done
//let shape = 'sm-circ'; // Done
// let shape = 'fr-circ'; //Done
//let shape = 'fork'; // Done
//let shape = 'hourglass'; //Done
// let shape = 'brace';
// let shape = 'brace-r';
// let shape = 'braces';
@@ -117,9 +116,9 @@ 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: "X", shape: '${shape}'}
n82@{ label: "X", shape: '${shape}'}
n83@{ label: "Y", shape: '${shape}'}
n81@{ label: "n81", shape: '${shape}'}
%%n82@{ label: "n82", shape: '${shape}'}
%%n83@{ label: "n83", shape: '${shape}'}
`;
let positions = {
@@ -128,8 +127,8 @@ config:
n81: {
x: 0,
y: 10,
width: 37.2,
height: 10,
width: 30,
height: 30,
},
n80: {
x: -400,

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
View File

@@ -25,14 +25,14 @@ export async function card(parent: SVGAElement, node: Node): Promise<SVGAElement
// 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 - (node.padding ?? 0), 50);
node.height = Math.max(node?.height ?? 0 - (node.padding ?? 0), 50);
node.width = Math.max((node?.width ?? 0) - (node.padding ?? 0), 10);
node.height = Math.max((node?.height ?? 0) - (node.padding ?? 0), 10);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width || 0) + (node.padding ?? 0);
const totalHeight = Math.max(bbox.height, node?.height || 0) + (node.padding ?? 0);
const totalWidth = (node?.width ? node?.width : bbox.width) + (node.padding ?? 0);
const totalHeight = (node?.height ? node?.height : bbox.height) + (node.padding ?? 0);
const h = totalHeight;
const w = totalWidth;

12
packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
View File

@@ -63,14 +63,16 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
if (node.width || node.height) {
const originalWidth = node.width ?? 0;
node.width = (node.width ?? 0) - labelPaddingY;
if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH;
}
// based on this width, height is calculated
const ry = node.width / 2 / (2.5 + node.width / 50);
node.height = (node.height ?? 0) - labelPaddingX - (ry + ry * 0.05) * 3;
const rx = originalWidth / 2;
const ry = rx / (2.5 + originalWidth / 50);
node.height = (node.height ?? 0) - labelPaddingX - ry * 3;
if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT;
}
@@ -78,10 +80,10 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(bbox.width, node.width ?? 0) + labelPaddingY;
const w = (node.width ? node.width : bbox.width) + labelPaddingY;
const rx = w / 2;
const ry = rx / (2.5 + w / 50);
const h = Math.max(bbox.height, node.height ?? 0) + labelPaddingX + ry;
const h = (node.height ? node.height : bbox.height) + labelPaddingX + ry;
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
const { cssStyles } = node;

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

@@ -15,20 +15,15 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
// if so set it to min value
if (node.width || node.height) {
const padding = node.padding ?? 0;
node.width = (node?.width ?? 0) - padding * 2;
if (node.width < 50) {
node.width = 50;
}
node.height = (node?.height ?? 0) - (node.padding ?? 0) * 2;
if (node.height < 50) {
node.height = 50;
if (node.width || node.height) {
node.width = (node.width ?? 6) - padding * 2;
node.height = node.width;
}
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const outerRadius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0);
const outerRadius = (node?.width ? node?.width / 2 : bbox.width / 2) + (node.padding ?? 0);
const innerRadius = outerRadius - gap;
let circleGroup;

14
packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
View File

@@ -15,24 +15,24 @@ export const filledCircle = (
// 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),
// also check if the width or height is less than minimum default values (10),
// if so set it to min value
if (node.width || node.height) {
if ((node.width ?? 0) < 50) {
node.width = 50;
if ((node.width ?? 0) < 10) {
node.width = 10;
}
if ((node.height ?? 0) < 50) {
node.height = 50;
if ((node.height ?? 0) < 10) {
node.height = 10;
}
}
if (!node.width) {
node.width = 50;
node.width = 10;
}
if (!node.height) {
node.width = 50;
node.width = 10;
}
const shapeSvg = parent

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
View File

@@ -18,12 +18,12 @@ export const forkJoin = (
.attr('id', node.domId ?? node.id);
const { cssStyles } = node;
let width = Math.max(70, node?.width ?? 0);
let height = Math.max(10, node?.height ?? 0);
let width = node?.width ? node?.width : 70;
let height = node?.height ? node?.height : 10;
if (dir === 'LR') {
width = Math.max(10, node?.width ?? 0);
height = Math.max(70, node?.height ?? 0);
width = node?.width ? node?.width : 10;
height = node?.height ? node?.height : 70;
}
const x = (-1 * width) / 2;

18
packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
View File

@@ -26,16 +26,24 @@ export const createHexagonPathD = (
export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const f = 4;
node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
const h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0);
if (node.width || node.height) {
const originalHeight = node.height ?? 0;
const m = originalHeight / f;
node.width = (node?.width ?? 0) - 2 * m - labelPaddingY;
node.height = (node.height ?? 0) - labelPaddingX;
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = (node?.height ? node?.height : bbox.height) + labelPaddingX;
const m = h / f;
const w = Math.max(bbox.width + 2 * m + labelPaddingY, node?.width ?? 0);
const w = (node?.width ? node?.width : bbox.width) + 2 * m + labelPaddingY;
const points = [
{ x: m, y: 0 },
{ x: w - m, y: 0 },

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
View File

@@ -9,8 +9,8 @@ export const hourglass = async (parent: SVGAElement, node: Node) => {
node.label = '';
const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(50, node?.width ?? 0);
const h = Math.max(50, node?.height ?? 0);
const w = node?.width ? node?.width : 30;
const h = node?.height ? node?.height : 30;
const { cssStyles } = node;
// @ts-ignore - rough is not typed

12
packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
View File

@@ -28,21 +28,21 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2;
if (node.width || node.height) {
node.width = node?.width ?? 0;
if (node.width < 50) {
node.width = 50;
if (node.width < 10) {
node.width = 10;
}
node.height = node?.height ?? 0;
if (node.height < 50) {
node.height = 50;
if (node.height < 10) {
node.height = 10;
}
const _dx = (3 * node.height) / 6;
node.height = node.height - labelPaddingY;
node.width = node.width - 2 * _dx;
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
const w = Math.max(bbox.width, node?.width ?? 0);
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
const w = node?.width ? node?.width : bbox.width;
const points = [
{ x: 0, y: 0 },

12
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
View File

@@ -13,13 +13,13 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
if (node.width || node.height) {
node.width = node?.width ?? 0;
if (node.width < 50) {
node.width = 50;
if (node.width < 10) {
node.width = 10;
}
node.height = node?.height ?? 0;
if (node.height < 50) {
node.height = 50;
if (node.height < 10) {
node.height = 10;
}
const _dx = (3 * node.height) / 6;
node.height = node.height - labelPaddingY;
@@ -27,8 +27,8 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
const w = Math.max(bbox.width, node?.width ?? 0);
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
const w = node?.width ? node?.width : bbox.width;
const points = [
{ x: 0, y: 0 },
{ x: w + (3 * h) / 6, y: 0 },

12
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
View File

@@ -13,13 +13,13 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
if (node.width || node.height) {
node.width = node?.width ?? 0;
if (node.width < 50) {
node.width = 50;
if (node.width < 10) {
node.width = 10;
}
node.height = node?.height ?? 0;
if (node.height < 50) {
node.height = 50;
if (node.height < 10) {
node.height = 10;
}
const _dx = (3 * node.height) / 6;
node.height = node.height - labelPaddingY;
@@ -28,8 +28,8 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
const w = Math.max(bbox.width, node?.width ?? 0);
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
const w = node?.width ? node?.width : bbox.width;
const points = [
{ x: (-3 * h) / 6, y: 0 },

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
View File

@@ -22,8 +22,8 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
const padding = node.padding ?? 0;
if (node.width || node.height) {
node.width = (node?.width ?? 0) - padding * 8;
if (node.width < 20) {
node.width = 20;
if (node.width < 10) {
node.width = 10;
}
node.height = (node?.height ?? 0) - padding * 8;
@@ -33,7 +33,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const w = (Math.max(bbox.width, node?.width ?? 0) + padding * 8) / 2;
const w = ((node?.width ? node?.width : bbox.width) + padding * 8) / 2;
const h = w;
const s = w + h;

10
packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
View File

@@ -16,17 +16,17 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
// 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),
// also check if the width or height is less than minimum default values (10),
// if so set it to min value
if (node.width || node.height) {
node.width = Math.max((node?.width ?? 0) - paddingX * 2 - FRAME_WIDTH, 50);
node.height = Math.max((node?.height ?? 0) - paddingY * 2, 50);
node.width = Math.max((node?.width ?? 0) - paddingX * 2 - FRAME_WIDTH, 10);
node.height = Math.max((node?.height ?? 0) - paddingY * 2, 10);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2 + FRAME_WIDTH;
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2;
const totalWidth = (node?.width ? node?.width : bbox.width) + paddingX * 2 + FRAME_WIDTH;
const totalHeight = (node?.height ? node?.height : bbox.height) + paddingY * 2;
const w = totalWidth - FRAME_WIDTH;
const h = totalHeight;
const x = -(totalWidth - FRAME_WIDTH) / 2;

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
View File

@@ -76,8 +76,8 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
// const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
// const w = Math.max(bbox.width + h / 4, node?.width || 0, 150) + labelPaddingX;
const w = Math.max(bbox.width, node?.width || 0) + labelPaddingX * 2;
const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY * 2;
const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
let rect;
const { cssStyles } = node;

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
View File

@@ -20,11 +20,11 @@ export const stateEnd = (
// 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) {
if ((node.width ?? 0) < 50) {
if ((node.width ?? 0) < 14) {
node.width = 14;
}
if ((node.height ?? 0) < 50) {
if ((node.height ?? 0) < 14) {
node.height = 14;
}
}
@@ -40,7 +40,7 @@ export const stateEnd = (
const shapeSvg = parent
.insert('g')
.attr('class', 'node default')
.attr('id', node.domId || node.id);
.attr('id', node.domId ?? node.id);
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts
View File

@@ -12,8 +12,8 @@ export async function text(parent: SVGAElement, node: Node): Promise<SVGAElement
// width > labelWidth
// labelWidth > width
const totalWidth = node?.width ?? bbox.width;
const totalHeight = Math.max(bbox.height, node?.height ?? 0);
const totalWidth = node?.width ? node?.width : bbox.width;
const totalHeight = node?.height ? node?.height : bbox.height;
const x = -totalWidth / 2;
const y = -totalHeight / 2;

12
packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
View File

@@ -28,21 +28,21 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
if (node.width || node.height) {
node.width = node?.width ?? 0;
if (node.width < 50) {
node.width = 50;
if (node.width < 10) {
node.width = 10;
}
node.height = node?.height ?? 0;
if (node.height < 50) {
node.height = 50;
if (node.height < 10) {
node.height = 10;
}
const _dx = (3 * node.height) / 6;
node.height = node.height - labelPaddingY;
node.width = node.width - 2 * _dx;
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
const w = Math.max(bbox.width, node?.width ?? 0);
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
const w = node?.width ? node?.width : bbox.width;
const points = [
{ x: (-3 * h) / 6, y: 0 },