marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-16 05:49:43 +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 21:35:30 +02:00
parent d2dfb639c8
commit eb346e1c51
10 changed files with 59 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -87,15 +87,15 @@
// let shape = 'brace'; // let shape = 'brace';
// let shape = 'brace-r'; // let shape = 'brace-r';
// let shape = 'braces'; // let shape = 'braces';
// let shape = 'bolt'; // let shape = 'bolt'; //Done
// let shape = 'doc'; // let shape = 'doc'; // Done
// let shape = 'delay'; // let shape = 'delay'; // Done
// let shape = 'h-cyl'; // let shape = 'h-cyl'; // Done
// let shape = 'lin-cyl'; // let shape = 'lin-cyl'; // Done
// let shape = 'curv-trap'; // let shape = 'curv-trap'; // Done
// let shape = 'div-rect'; // let shape = 'div-rect'; // Done
// let shape = 'tri'; //let shape = 'tri'; // Done
// let shape = 'win-pane'; // let shape = 'win-pane'; //Done
// let shape = 'f-circ'; // let shape = 'f-circ';
// let shape = 'lin-doc'; // let shape = 'lin-doc';
// let shape = 'notch-pent'; // let shape = 'notch-pent';
@@ -127,8 +127,8 @@ config:
n81: { n81: {
x: 0, x: 0,
y: 10, y: 10,
width: 30, width: 80,
height: 30, height: 80,
}, },
n80: { n80: {
x: -400, x: -400,

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

@@ -16,8 +16,8 @@ export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
const nodePadding = node.padding ?? 0; const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding; const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
const minWidth = 80, const minWidth = 20,
minHeight = 20; minHeight = 5;
if (node.width || node.height) { if (node.width || node.height) {
node.width = (node?.width ?? 0) - labelPaddingX * 2 * 1.25; node.width = (node?.width ?? 0) - labelPaddingX * 2 * 1.25;
if (node.width < minWidth) { if (node.width < minWidth) {
@@ -32,8 +32,10 @@ export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(minWidth, bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2 * 1.25; const w =
const h = Math.max(minHeight, bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2; (node?.width ? node?.width : Math.max(minWidth, bbox.width)) + (labelPaddingX ?? 0) * 2 * 1.25;
const h =
(node?.height ? node?.height : Math.max(minHeight, bbox.height)) + (labelPaddingY ?? 0) * 2;
const radius = h / 2; const radius = h / 2;
const { cssStyles } = node; const { cssStyles } = node;

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

@@ -16,14 +16,14 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
// 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 (50),
// if so set it to min value // if so set it to min value
if (node.width || node.height) { if (node.width || node.height) {
node.width = Math.max((node?.width ?? 0) - paddingX * 2, 50); node.width = Math.max((node?.width ?? 0) - paddingX * 2, 10);
node.height = Math.max((node?.height ?? 0) - paddingY * 2, 50); node.height = Math.max((node?.height ?? 0) - paddingY * 2, 10);
} }
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2; const totalWidth = (node?.width ? node?.width : Math.max(bbox.width)) + paddingX * 2;
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2; const totalHeight = (node?.height ? node?.height : Math.max(bbox.height)) + paddingY * 2;
const rectOffset = totalHeight * 0.2; const rectOffset = totalHeight * 0.2;

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

@@ -14,8 +14,8 @@ import rough from 'roughjs';
export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => { export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const minWidth = 80, const minWidth = 15,
minHeight = 50; minHeight = 10;
const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0); const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
@@ -34,8 +34,8 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(minWidth, bbox.width, node?.width ?? 0) + paddingX * 2; const w = (node?.width ? node?.width : Math.max(minWidth, bbox.width)) + paddingX * 2;
const h = Math.max(minHeight, bbox.height, node?.height ?? 0) + paddingY * 2; const h = (node?.height ? node?.height : Math.max(minHeight, bbox.height)) + paddingY * 2;
const radius = h / 2; const radius = h / 2;
const { cssStyles } = node; const { cssStyles } = node;

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

@@ -16,8 +16,8 @@ export const lightningBolt = (parent: SVG, node: Node) => {
const gapX = Math.max(5, (node.width ?? 0) * 0.1); const gapX = Math.max(5, (node.width ?? 0) * 0.1);
const gapY = Math.max(5, (node.height ?? 0) * 0.1); const gapY = Math.max(5, (node.height ?? 0) * 0.1);
const width = Math.max(50, node?.width ?? 0); const width = node?.width ? node?.width : 50;
const height = Math.max(50, node?.height ?? 0); const height = node?.height ? node?.height : 50;
const points = [ const points = [
{ x: width, y: 0 }, { x: width, y: 0 },

15
packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
View File

@@ -55,8 +55,8 @@ export const createInnerCylinderPathD = (
return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' '); return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
}; };
const MIN_HEIGHT = 25; const MIN_HEIGHT = 10;
const MIN_WIDTH = 25; const MIN_WIDTH = 10;
export const linedCylinder = async (parent: SVGAElement, node: Node) => { export const linedCylinder = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
@@ -66,24 +66,27 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => {
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
if (node.width || node.height) { if (node.width || node.height) {
const originalWidth = node.width ?? 0;
node.width = (node.width ?? 0) - labelPaddingX; node.width = (node.width ?? 0) - labelPaddingX;
if (node.width < MIN_WIDTH) { if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH; node.width = MIN_WIDTH;
} }
const rx = originalWidth / 2;
// based on this width, height is calculated // based on this width, height is calculated
const ry = node.width / 2 / (2.5 + node.width / 50); const ry = rx / (2.5 + originalWidth / 50);
node.height = (node.height ?? 0) - labelPaddingY - (ry + ry * 0.05) * 3; node.height = (node.height ?? 0) - labelPaddingY - ry * 3;
if (node.height < MIN_HEIGHT) { if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT; node.height = MIN_HEIGHT;
} }
} }
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX; const w = (node?.width ? node?.width : bbox.width) + labelPaddingX;
const rx = w / 2; const rx = w / 2;
const ry = rx / (2.5 + w / 50); const ry = rx / (2.5 + w / 50);
const h = Math.max(bbox.height, node?.height ?? 0) + ry + labelPaddingY; const h = (node?.height ? node?.height : bbox.height) + ry + labelPaddingY;
const outerOffset = h * 0.1; // 10% of height const outerOffset = h * 0.1; // 10% of height
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>; let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;

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

@@ -49,8 +49,8 @@ export const createInnerCylinderPathD = (
return [`M${x + width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 0,${height}`].join(' '); return [`M${x + width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 0,${height}`].join(' ');
}; };
const MIN_HEIGHT = 25; const MIN_HEIGHT = 5;
const MIN_WIDTH = 50; const MIN_WIDTH = 10;
export const tiltedCylinder = async (parent: SVGAElement, node: Node) => { export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
@@ -58,13 +58,14 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
const nodePadding = node.padding ?? 0; const nodePadding = node.padding ?? 0;
const labelPadding = node.look === 'neo' ? nodePadding : nodePadding / 2; const labelPadding = node.look === 'neo' ? nodePadding : nodePadding / 2;
if (node.width || node.height) { if (node.width || node.height) {
const originalHeight = node.height ?? 0;
node.height = (node.height ?? 0) - labelPadding; node.height = (node.height ?? 0) - labelPadding;
if (node.height < MIN_HEIGHT) { if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT; node.height = MIN_HEIGHT;
} }
const ry = node.height / 2; const ry = originalHeight / 2;
// based on this height, width is calculated // based on this height, width is calculated
const rx = ry / (2.5 + node.height / 50); const rx = ry / (2.5 + originalHeight / 50);
node.width = (node.width ?? 0) - labelPadding - rx * 3; node.width = (node.width ?? 0) - labelPadding - rx * 3;
if (node.width < MIN_WIDTH) { if (node.width < MIN_WIDTH) {
@@ -73,10 +74,10 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
} }
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node.height ?? 0) + labelPadding; const h = (node.height ? node.height : bbox.height) + labelPadding;
const ry = h / 2; const ry = h / 2;
const rx = ry / (2.5 + h / 50); const rx = ry / (2.5 + h / 50);
const w = Math.max(bbox.width, node.width ?? 0) + rx + labelPadding; const w = (node.width ? node.width : bbox.width) + rx + labelPadding;
const { cssStyles } = node; const { cssStyles } = node;
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>; let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;

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

@@ -8,21 +8,19 @@ import { createPathFromPoints } from './util.js';
import { evaluate } from '../../../diagrams/common/common.js'; import { evaluate } from '../../../diagrams/common/common.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js';
const MIN_HEIGHT = 25; const MIN_HEIGHT = 10;
const MIN_WIDTH = 25; const MIN_WIDTH = 10;
export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0; const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding; const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
if (node.width || node.height) { if (node.width || node.height) {
node.width = (node?.width ?? 0) - labelPaddingX * 4; node.width = ((node?.width ?? 0) - labelPaddingX) / 2;
if (node.width < MIN_WIDTH) { if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH; node.width = MIN_WIDTH;
} }
node.height = node?.height ?? 0; node.height = node?.height ?? 0;
if (node.height < MIN_HEIGHT) { if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT; node.height = MIN_HEIGHT;
@@ -31,10 +29,8 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAEle
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const useHtmlLabels = evaluate(getConfig().flowchart?.htmlLabels); const useHtmlLabels = evaluate(getConfig().flowchart?.htmlLabels);
const w = (node?.width ? node?.width : bbox.width) + labelPaddingX;
const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX; const h = node?.height ? node?.height : w + bbox.height;
const h = Math.max(w + bbox.height, node?.height ?? 0);
const tw = w + bbox.height; const tw = w + bbox.height;
const points = [ const points = [
{ x: 0, y: 0 }, { x: 0, y: 0 },

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

@@ -22,25 +22,25 @@ export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
if (node.width || node.height) { if (node.width || node.height) {
adjustFinalHeight = false; adjustFinalHeight = false;
node.width = (node?.width ?? 0) - labelPaddingX * 2; node.width = (node?.width ?? 0) - labelPaddingX * 2;
if (node.width < 50) { if (node.width < 10) {
node.width = 50; node.width = 10;
} }
node.height = (node?.height ?? 0) - labelPaddingY * 2; node.height = (node?.height ?? 0) - labelPaddingY * 2;
if (node.height < 50) { if (node.height < 10) {
node.height = 50; node.height = 10;
} }
} }
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2; const w = (node?.width ? node?.width : bbox.width) + (labelPaddingX ?? 0) * 2;
const h = Math.max(bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2; const h = (node?.height ? node?.height : bbox.height) + (labelPaddingY ?? 0) * 2;
const waveAmplitude = h / 8; const waveAmplitude = h / 8;
const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude); const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
const { cssStyles } = node; const { cssStyles } = node;
// To maintain minimum width // To maintain minimum width
const minWidth = 70; const minWidth = 14;
const widthDif = minWidth - w; const widthDif = minWidth - w;
const extraW = widthDif > 0 ? widthDif / 2 : 0; const extraW = widthDif > 0 ? widthDif / 2 : 0;

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

@@ -19,14 +19,14 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
// 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 (50),
// if so set it to min value // if so set it to min value
if (node.width || node.height) { if (node.width || node.height) {
node.width = Math.max((node?.width ?? 0) - paddingX * 2 - rectOffset, 50); node.width = Math.max((node?.width ?? 0) - paddingX * 2 - rectOffset, 10);
node.height = Math.max((node?.height ?? 0) - paddingY * 2 - rectOffset, 50); node.height = Math.max((node?.height ?? 0) - paddingY * 2 - rectOffset, 10);
} }
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2 + rectOffset; const totalWidth = (node?.width ? node?.width : bbox.width) + paddingX * 2 + rectOffset;
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2 + rectOffset; const totalHeight = (node?.height ? node?.height : bbox.height) + paddingY * 2 + rectOffset;
const w = totalWidth - rectOffset; const w = totalWidth - rectOffset;
const h = totalHeight - rectOffset; const h = totalHeight - rectOffset;