marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-04 08:06: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-r';
// let shape = 'braces';
// let shape = 'bolt';
// let shape = 'doc';
// let shape = 'delay';
// let shape = 'h-cyl';
// let shape = 'lin-cyl';
// let shape = 'curv-trap';
// let shape = 'div-rect';
// let shape = 'tri';
// let shape = 'win-pane';
// let shape = 'bolt'; //Done
// let shape = 'doc'; // Done
// let shape = 'delay'; // Done
// let shape = 'h-cyl'; // Done
// let shape = 'lin-cyl'; // Done
// let shape = 'curv-trap'; // Done
// 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';
@@ -127,8 +127,8 @@ config:
n81: {
x: 0,
y: 10,
width: 30,
height: 30,
width: 80,
height: 80,
},
n80: {
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 labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
const minWidth = 80,
minHeight = 20;
const minWidth = 20,
minHeight = 5;
if (node.width || node.height) {
node.width = (node?.width ?? 0) - labelPaddingX * 2 * 1.25;
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 w = Math.max(minWidth, bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2 * 1.25;
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 * 1.25;
const h =
(node?.height ? node?.height : Math.max(minHeight, bbox.height)) + (labelPaddingY ?? 0) * 2;
const radius = h / 2;
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),
// if so set it to min value
if (node.width || node.height) {
node.width = Math.max((node?.width ?? 0) - paddingX * 2, 50);
node.height = Math.max((node?.height ?? 0) - paddingY * 2, 50);
node.width = Math.max((node?.width ?? 0) - paddingX * 2, 10);
node.height = Math.max((node?.height ?? 0) - paddingY * 2, 10);
}
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2;
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2;
const totalWidth = (node?.width ? node?.width : Math.max(bbox.width)) + paddingX * 2;
const totalHeight = (node?.height ? node?.height : Math.max(bbox.height)) + paddingY * 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) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const minWidth = 80,
minHeight = 50;
const minWidth = 15,
minHeight = 10;
const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (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 w = Math.max(minWidth, bbox.width, node?.width ?? 0) + paddingX * 2;
const h = Math.max(minHeight, bbox.height, node?.height ?? 0) + paddingY * 2;
const w = (node?.width ? node?.width : Math.max(minWidth, bbox.width)) + paddingX * 2;
const h = (node?.height ? node?.height : Math.max(minHeight, bbox.height)) + paddingY * 2;
const radius = h / 2;
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 gapY = Math.max(5, (node.height ?? 0) * 0.1);
const width = Math.max(50, node?.width ?? 0);
const height = Math.max(50, node?.height ?? 0);
const width = node?.width ? node?.width : 50;
const height = node?.height ? node?.height : 50;
const points = [
{ 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(' ');
};
const MIN_HEIGHT = 25;
const MIN_WIDTH = 25;
const MIN_HEIGHT = 10;
const MIN_WIDTH = 10;
export const linedCylinder = async (parent: SVGAElement, node: 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;
if (node.width || node.height) {
const originalWidth = node.width ?? 0;
node.width = (node.width ?? 0) - labelPaddingX;
if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH;
}
const rx = originalWidth / 2;
// based on this width, height is calculated
const ry = node.width / 2 / (2.5 + node.width / 50);
node.height = (node.height ?? 0) - labelPaddingY - (ry + ry * 0.05) * 3;
const ry = rx / (2.5 + originalWidth / 50);
node.height = (node.height ?? 0) - labelPaddingY - ry * 3;
if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT;
}
}
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 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
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(' ');
};
const MIN_HEIGHT = 25;
const MIN_WIDTH = 50;
const MIN_HEIGHT = 5;
const MIN_WIDTH = 10;
export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
@@ -58,13 +58,14 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
const nodePadding = node.padding ?? 0;
const labelPadding = node.look === 'neo' ? nodePadding : nodePadding / 2;
if (node.width || node.height) {
const originalHeight = node.height ?? 0;
node.height = (node.height ?? 0) - labelPadding;
if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT;
}
const ry = node.height / 2;
const ry = originalHeight / 2;
// 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;
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 h = Math.max(bbox.height, node.height ?? 0) + labelPadding;
const h = (node.height ? node.height : bbox.height) + labelPadding;
const ry = h / 2;
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;
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 { getConfig } from '../../../diagram-api/diagramAPI.js';
const MIN_HEIGHT = 25;
const MIN_WIDTH = 25;
const MIN_HEIGHT = 10;
const MIN_WIDTH = 10;
export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
if (node.width || node.height) {
node.width = (node?.width ?? 0) - labelPaddingX * 4;
node.width = ((node?.width ?? 0) - labelPaddingX) / 2;
if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH;
}
node.height = node?.height ?? 0;
if (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 useHtmlLabels = evaluate(getConfig().flowchart?.htmlLabels);
const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX;
const h = Math.max(w + bbox.height, node?.height ?? 0);
const w = (node?.width ? node?.width : bbox.width) + labelPaddingX;
const h = node?.height ? node?.height : w + bbox.height;
const tw = w + bbox.height;
const points = [
{ 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) {
adjustFinalHeight = false;
node.width = (node?.width ?? 0) - labelPaddingX * 2;
if (node.width < 50) {
node.width = 50;
if (node.width < 10) {
node.width = 10;
}
node.height = (node?.height ?? 0) - labelPaddingY * 2;
if (node.height < 50) {
node.height = 50;
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 / 8;
const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
const { cssStyles } = node;
// To maintain minimum width
const minWidth = 70;
const minWidth = 14;
const widthDif = minWidth - w;
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),
// if so set it to min value
if (node.width || node.height) {
node.width = Math.max((node?.width ?? 0) - paddingX * 2 - rectOffset, 50);
node.height = Math.max((node?.height ?? 0) - paddingY * 2 - rectOffset, 50);
node.width = Math.max((node?.width ?? 0) - paddingX * 2 - rectOffset, 10);
node.height = Math.max((node?.height ?? 0) - paddingY * 2 - rectOffset, 10);
}
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2 + rectOffset;
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2 + rectOffset;
const totalWidth = (node?.width ? node?.width : bbox.width) + paddingX * 2 + rectOffset;
const totalHeight = (node?.height ? node?.height : bbox.height) + paddingY * 2 + rectOffset;
const w = totalWidth - rectOffset;
const h = totalHeight - rectOffset;