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 = 'fr-circ'; //Done
//let shape = 'fork'; // Done //let shape = 'fork'; // Done
//let shape = 'hourglass'; //Done //let shape = 'hourglass'; //Done
// let shape = 'brace';
// let shape = 'brace-r';
// let shape = 'braces';
// let shape = 'bolt'; //Done // let shape = 'bolt'; //Done
// let shape = 'doc'; // Done // let shape = 'doc'; // Done
// let shape = 'delay'; // Done // let shape = 'delay'; // Done
@@ -96,16 +93,21 @@
// let shape = 'div-rect'; // Done // let shape = 'div-rect'; // Done
//let shape = 'tri'; // Done //let shape = 'tri'; // Done
// let shape = 'win-pane'; //Done // let shape = 'win-pane'; //Done
// let shape = 'f-circ'; // let shape = 'f-circ'; // Done
// let shape = 'lin-doc'; // let shape = 'lin-doc'; // Done
// let shape = 'notch-pent'; // let shape = 'notch-pent'; // Done
// let shape = 'flip-tri'; // let shape = 'flip-tri'; // Done
// let shape = 'sl-rect'; // let shape = 'sl-rect'; // Done
// let shape = 'docs'; // let shape = 'cross-circ'; // Done
// let shape = 'st-rect'; // let shape = 'bow-rect'; // Done
// let shape = 'st-rect'; // Done
// let shape = 'flag'; // 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 shape = 'tag-doc';
let configFixed = `--- let configFixed = `---
@@ -116,7 +118,7 @@ config:
let code = `flowchart TB 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["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}'} %% n80@{ shape: '${shape}'}
n81@{ label: "n81", shape: '${shape}'} n81@{ label: "Ashish", shape: '${shape}'}
%%n82@{ label: "n82", shape: '${shape}'} %%n82@{ label: "n82", shape: '${shape}'}
%%n83@{ label: "n83", shape: '${shape}'} %%n83@{ label: "n83", shape: '${shape}'}
`; `;
@@ -127,8 +129,8 @@ config:
n81: { n81: {
x: 0, x: 0,
y: 10, y: 10,
width: 80, width: 107.7,
height: 80, height: 65,
}, },
n80: { n80: {
x: -400, 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), // 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.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 totalHeight = calcTotalHeight(node.height);
const [rx, ry] = calcEllipseRadius(totalHeight); const [rx, ry] = calcEllipseRadius(totalHeight);
node.width = Math.max( node.width = Math.max(
(node?.width ?? 0) - labelPaddingX * 2 - calculateArcSagitta(totalHeight, rx, ry), (node?.width ?? 0) - labelPaddingX * 2 - calculateArcSagitta(totalHeight, rx, ry),
50 10
); );
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); 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 [rx, ry] = calcEllipseRadius(totalHeight);
const sagitta = calculateArcSagitta(totalHeight, rx, ry); 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 w = totalWidth - sagitta;
const h = totalHeight; 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') .insert('g')
.attr('class', getNodeClasses(node)) .attr('class', getNodeClasses(node))
.attr('id', node.domId ?? node.id); .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; const { cssStyles } = node;
// @ts-ignore - rough is not typed // @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 rough from 'roughjs';
import { createPathFromPoints } from './util.js'; import { createPathFromPoints } from './util.js';
const MIN_HEIGHT = 25; const MIN_HEIGHT = 10;
const MIN_WIDTH = 25; const MIN_WIDTH = 10;
export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
@@ -15,24 +15,24 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<
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;
if (node.width || node.height) { if (node.width || node.height) {
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;
} }
node.width = node?.width ?? 0 - labelPaddingX * 4; node.width = (node?.width ?? 0) - labelPaddingX - labelPaddingX / 2;
if (node.width < MIN_WIDTH) { if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH; node.width = MIN_WIDTH;
} }
} }
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); const w = (node?.width ? node?.width : bbox.width) + (labelPaddingX ?? 0);
const h = Math.max(w + bbox.height, node?.width ?? 0); const h = node?.height ? node?.height : w + bbox.height;
const tw = w + bbox.height; const tw = w + bbox.height;
const points = [ const points = [
{ x: 0, y: -h }, { x: 0, y: -h },
{ x: tw, 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 nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : (node.padding ?? 0); const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : (node.padding ?? 0);
const labelPaddingY = 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) { if (node.width || node.height) {
adjustFinalHeight = false; const originalWidth = node.width;
node.width = (node?.width ?? 0) - labelPaddingX * 2; node.width = ((originalWidth ?? 0) * 10) / 11 - labelPaddingX * 2;
if (node.width < 50) { if (node.width < 10) {
node.width = 50; node.width = 10;
} }
const originalHeight = node.height;
node.height = (node?.height ?? 0) - labelPaddingY * 2; node.height = ((originalHeight ?? 0) * 3) / 4 - labelPaddingY * 2;
if (node.height < 50) { //node.height = (node?.height ?? 0) - labelPaddingY * 2;
node.height = 50; if (node.height < 10) {
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 / 6; const waveAmplitude = h / 6;
const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude); const finalH = h + waveAmplitude;
const { cssStyles } = node; const { cssStyles } = node;
// @ts-ignore - rough is not typed // @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), // 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) - labelPaddingX * 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, 50); node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2 - 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) + labelPaddingX * 2 + 2 * rectOffset; const totalWidth = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2 + 2 * rectOffset;
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2 + 2 * rectOffset; const totalHeight =
(node?.height ? node?.height : bbox.height) + labelPaddingY * 2 + 2 * rectOffset;
const w = totalWidth - 2 * rectOffset; const w = totalWidth - 2 * rectOffset;
const h = totalHeight - 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), // 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) - labelPaddingX * 2, 50); node.width = Math.max((node?.width ?? 0) - labelPaddingX * 2, 10);
node.height = Math.max((node?.height ?? 0) / 1.5 - labelPaddingY * 2, 50); node.height = Math.max((node?.height ?? 0) / 1.5 - labelPaddingY * 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) + labelPaddingX * 2; const totalWidth = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
const totalHeight = (Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2) * 1.5; const totalHeight = ((node?.height ? node?.height : bbox.height) + labelPaddingY * 2) * 1.5;
const w = totalWidth; const w = totalWidth;
const h = totalHeight / 1.5; 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 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 = 60, const minWidth = 15,
minHeight = 20; minHeight = 5;
if (node.width || node.height) { if (node.width || node.height) {
node.height = (node.height ?? 0) - labelPaddingY * 2; node.height = (node.height ?? 0) - labelPaddingY * 2;
if (node.height < minHeight) { 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 { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(minWidth, bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2; const w = (node?.width ? node?.width : Math.max(minWidth, bbox.width)) + (labelPaddingX ?? 0) * 2;
const h = Math.max(minHeight, bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2; const h =
(node?.height ? node?.height : Math.max(minHeight, bbox.height)) + (labelPaddingY ?? 0) * 2;
const { cssStyles } = node; const { cssStyles } = node;
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed