Trapezoids and document

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-chart/mermaid",
-  "version": "11.2.0-b.8",
+  "version": "11.2.0-b.9",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts

@@ -23,13 +23,26 @@ import { insertPolygonShape } from './insertPolygonShape.js';
 export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const nodePadding = node.padding ?? 0;
-  const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding * 2;
-  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2;
 
-  const w = Math.max(bbox.width + labelPaddingY, node?.width ?? 0);
+  const nodePadding = node.padding ?? 0;
-  const h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0);
+  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2;
+  if (node.width || node.height) {
+    node.width = node?.width ?? 0;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = node?.height ?? 0;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+    const _dx = (3 * node.height) / 6;
+    node.height = node.height - labelPaddingY;
+    node.width = node.width - 2 * _dx;
+  }
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
+  const w = Math.max(bbox.width, node?.width ?? 0);
 
   const points = [
     { x: 0, y: 0 },

packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts

@@ -23,12 +23,27 @@ import { insertPolygonShape } from './insertPolygonShape.js';
 export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const nodePadding = node.padding ?? 0;
-  const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
-  const w = bbox.width + labelPaddingY;
+
-  const h = bbox.height + labelPaddingX;
+  if (node.width || node.height) {
+    node.width = node?.width ?? 0;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = node?.height ?? 0;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+    const _dx = (3 * node.height) / 6;
+    node.height = node.height - labelPaddingY;
+    node.width = node.width - 2 * _dx;
+  }
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
+  const w = Math.max(bbox.width, node?.width ?? 0);
+
   const points = [
     { x: (-3 * h) / 6, y: 0 },
     { x: w + (3 * h) / 6, y: 0 },

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

@@ -13,14 +13,30 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + (labelPaddingX ?? 0) * 2, node?.width ?? 0);
+
-  const h = Math.max(bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 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;
+    }
+
+    node.height = (node?.height ?? 0) - labelPaddingY * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+
+  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 waveAmplitude = h / 8;
-  const finalH = h + waveAmplitude;
+  const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
   const { cssStyles } = node;
 
   // To maintain minimum width