marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 17:29:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix for min size for more shapes

Browse Source
This commit is contained in:
Ashish Jain
2024-10-01 23:45:32 +02:00
parent eb346e1c51
commit f1674b8b04
8 changed files with 54 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,

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

@@ -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;

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
View File

@@ -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

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

@@ -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<SVGAElement> => {
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 },

24
packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
View File

@@ -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

9
packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
View File

@@ -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;

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

@@ -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;

9
packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
View File

@@ -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