diff --git a/cypress/platform/min-size-tester.html b/cypress/platform/min-size-tester.html index f872cc598..cfbd642ce 100644 --- a/cypress/platform/min-size-tester.html +++ b/cypress/platform/min-size-tester.html @@ -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, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts index 40ce28675..82dfcb92b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts @@ -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; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts index e4efcf151..a7549e1d6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts @@ -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; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts index 74f41e48a..876282ef4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts @@ -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; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts index f3691fc98..3675378ef 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts @@ -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 }, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts index 21a5cfe52..971e4b210 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts @@ -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; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts index 9a50df334..6a785ad03 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts @@ -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; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts index ca35c2c70..490fb409e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts @@ -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 => { 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 { 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; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index 336fb30f4..b335e89c9 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -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;