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

Merge branch 'neo-new-shapes' into perb-fix-circles-resize

Browse Source
This commit is contained in:
Per Brolin
2024-09-29 22:45:46 +02:00
parent 32d7f470dc 9b269ecf3b
commit 5ad1a6082b
33 changed files with 614 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/mermaid/package.json
View File

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

4
packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
View File

@@ -206,8 +206,8 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
await Promise.all(
data4Layout.nodes.map(async function (node) {
let pos = positions.nodes[node.id];
node.height = pos?.height || 50;
node.width = pos?.width || 50;
node.height = pos?.height;
node.width = pos?.width;
if (node.isGroup) {
node.x = 0;

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

@@ -13,7 +13,9 @@ function generateArcPoints(
ry: number,
clockwise: boolean
) {
const numPoints = 20;
// this must be an odd number, so that the midpoint is included
// otherwise the width of the bowtie will be off
const numPoints = 21;
// Calculate midpoint
const midX = (x1 + x2) / 2;
const midY = (y1 + y2) / 2;
@@ -70,19 +72,55 @@ function generateArcPoints(
return points;
}
/**
* Calculates the sagitta of an arc of an ellipse given its chord and radii.
*
* @param chord - The chord of the arc (e.g. the line connecting the two points on the circle)
* @param radiusX - The x-radius of the ellipse.
* @param radiusY - The y-radius of the ellipse.
*/
function calculateArcSagitta(chord: number, radiusX: number, radiusY: number) {
const [semiMajorAxis, semiMinorAxis] = [radiusX, radiusY].sort((a, b) => b - a);
return semiMinorAxis * (1 - Math.sqrt(1 - (chord / semiMajorAxis / 2) ** 2));
}
export const bowTieRect = async (parent: SVGAElement, node: Node) => {
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 * 2 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
const w = Math.max(bbox.width + labelPaddingX + 20, node?.width ?? 0);
const h = Math.max(bbox.height + labelPaddingY, node?.height ?? 0);
const ry = h / 2;
const rx = ry / (2.5 + h / 50);
const calcTotalHeight = (labelHeight: number) => labelHeight + labelPaddingY * 2;
const calcEllipseRadius = (totalHeight: number) => {
const ry = totalHeight / 2;
const rx = ry / (2.5 + totalHeight / 50);
return [rx, ry];
};
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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);
const totalHeight = calcTotalHeight(node.height);
const [rx, ry] = calcEllipseRadius(totalHeight);
node.width = Math.max(
(node?.width ?? 0) - labelPaddingX * 2 - calculateArcSagitta(totalHeight, rx, ry),
50
);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalHeight = calcTotalHeight(Math.max(bbox.height, node?.height ?? 0));
const [rx, ry] = calcEllipseRadius(totalHeight);
const sagitta = calculateArcSagitta(totalHeight, rx, ry);
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2 + sagitta;
const w = totalWidth - sagitta;
const h = totalHeight;
// let shape: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
const { cssStyles } = node;

27
packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
View File

@@ -13,25 +13,40 @@ import { createPathFromPoints } from './util.js';
// return pointStrings.join(' ');
// };
/// Size of the notch on the top left corner
const NOTCH_SIZE = 12;
export async function card(parent: SVGAElement, node: Node): Promise<SVGAElement> {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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 - (node.padding ?? 0), 50);
node.height = Math.max(node?.height ?? 0 - (node.padding ?? 0), 50);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = bbox.height + node.padding;
const padding = 12;
const w = bbox.width + node.padding + padding;
const totalWidth = Math.max(bbox.width, node?.width || 0) + (node.padding ?? 0);
const totalHeight = Math.max(bbox.height, node?.height || 0) + (node.padding ?? 0);
const h = totalHeight;
const w = totalWidth;
const left = 0;
const right = w;
const top = -h;
const bottom = 0;
const points = [
{ x: left + padding, y: top },
{ x: left + NOTCH_SIZE, y: top },
{ x: right, y: top },
{ x: right, y: bottom },
{ x: left, y: bottom },
{ x: left, y: top + padding },
{ x: left + padding, y: top },
{ x: left, y: top + NOTCH_SIZE },
{ x: left + NOTCH_SIZE, y: top },
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;

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

@@ -7,14 +7,13 @@ import { userNodeOverrides } from './handDrawnShapeStyles.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
function createLine(r: number) {
const xAxis45 = Math.cos(Math.PI / 4); // cosine of 45 degrees
const yAxis45 = Math.sin(Math.PI / 4); // sine of 45 degrees
const axis45 = Math.SQRT1_2; // cosine of 45 degrees = 1/sqrt(2)
const lineLength = r * 2;
const pointQ1 = { x: (lineLength / 2) * xAxis45, y: (lineLength / 2) * yAxis45 }; // Quadrant I
const pointQ2 = { x: -(lineLength / 2) * xAxis45, y: (lineLength / 2) * yAxis45 }; // Quadrant II
const pointQ3 = { x: -(lineLength / 2) * xAxis45, y: -(lineLength / 2) * yAxis45 }; // Quadrant III
const pointQ4 = { x: (lineLength / 2) * xAxis45, y: -(lineLength / 2) * yAxis45 }; // Quadrant IV
const pointQ1 = { x: (lineLength / 2) * axis45, y: (lineLength / 2) * axis45 }; // Quadrant I
const pointQ2 = { x: -(lineLength / 2) * axis45, y: (lineLength / 2) * axis45 }; // Quadrant II
const pointQ3 = { x: -(lineLength / 2) * axis45, y: -(lineLength / 2) * axis45 }; // Quadrant III
const pointQ4 = { x: (lineLength / 2) * axis45, y: -(lineLength / 2) * axis45 }; // Quadrant IV
return `M ${pointQ2.x},${pointQ2.y} L ${pointQ4.x},${pointQ4.y}
M ${pointQ1.x},${pointQ1.y} L ${pointQ3.x},${pointQ3.y}`;
@@ -26,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(30, node?.width ?? 0);
const radius = Math.max(25, (node?.width ?? 0) / 2, (node?.height ?? 0) / 2);
const { cssStyles } = node;
// @ts-ignore - rough is not typed

23
packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
View File

@@ -13,14 +13,27 @@ import rough from 'roughjs';
export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const minWidth = 80,
minHeight = 20;
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(minWidth, (bbox.width + (labelPaddingX ?? 0) * 2) * 1.25, node?.width ?? 0);
const h = Math.max(minHeight, bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0);
const minWidth = 80,
minHeight = 20;
if (node.width || node.height) {
node.width = (node?.width ?? 0) - labelPaddingX * 2 * 1.25;
if (node.width < minWidth) {
node.width = minWidth;
}
node.height = (node?.height ?? 0) - labelPaddingY * 2;
if (node.height < minHeight) {
node.height = minHeight;
}
}
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 radius = h / 2;
const { cssStyles } = node;

25
packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
View File

@@ -49,20 +49,39 @@ export const createInnerCylinderPathD = (
): string => {
return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
};
const MIN_HEIGHT = 25;
const MIN_WIDTH = 25;
export const cylinder = async (parent: SVGAElement, node: Node) => {
const { themeVariables } = getConfig();
const { useGradient } = themeVariables;
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 + labelPaddingY, node.width ?? 0);
if (node.width || node.height) {
node.width = (node.width ?? 0) - labelPaddingY;
if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH;
}
// based on this width, height is calculated
const ry = node.width / 2 / (2.5 + node.width / 50);
node.height = (node.height ?? 0) - labelPaddingX - (ry + ry * 0.05) * 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) + labelPaddingY;
const rx = w / 2;
const ry = rx / (2.5 + w / 50);
const h = Math.max(bbox.height + ry + labelPaddingX, node.height ?? 0);
const h = Math.max(bbox.height, node.height ?? 0) + labelPaddingX + ry;
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
const { cssStyles } = node;

23
packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
View File

@@ -7,13 +7,28 @@ import rough from 'roughjs';
export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0);
const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0);
const rectOffset = h * 0.2;
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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);
}
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 rectOffset = totalHeight * 0.2;
const w = totalWidth;
const h = totalHeight - rectOffset;
const x = -w / 2;
const y = -h / 2 - rectOffset / 2;

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

@@ -6,15 +6,30 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { createPathFromPoints } from './util.js';
const MIN_HEIGHT = 25;
const MIN_WIDTH = 25;
export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
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), node?.width ?? 0);
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;
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 tw = w + bbox.height;

21
packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
View File

@@ -16,11 +16,26 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
node.labelStyle = labelStyles;
const minWidth = 80,
minHeight = 50;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
const w = Math.max(minWidth, bbox.width + paddingX * 2, node?.width ?? 0);
const h = Math.max(minHeight, bbox.height + paddingY * 2, node?.height ?? 0);
if (node.width || node.height) {
node.height = (node?.height ?? 0) - paddingY * 2;
if (node.height < minHeight) {
node.height = minHeight;
}
node.width = (node?.width ?? 0) - paddingX * 2;
if (node.width < minWidth) {
node.width = minWidth;
}
}
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 radius = h / 2;
const { cssStyles } = node;

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
View File

@@ -9,8 +9,8 @@ export const hourglass = async (parent: SVGAElement, node: Node) => {
node.label = '';
const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(30, node?.width ?? 0);
const h = Math.max(30, node?.height ?? 0);
const w = Math.max(50, node?.width ?? 0);
const h = Math.max(50, node?.height ?? 0);
const { cssStyles } = node;
// @ts-ignore - rough is not typed

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

@@ -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 h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0);
const nodePadding = node.padding ?? 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 },

23
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
View File

@@ -8,12 +8,27 @@ import { insertPolygonShape } from './insertPolygonShape.js';
export const lean_left = 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 = Math.max(bbox.width + (labelPaddingY ?? 0), node?.width ?? 0);
const h = Math.max(bbox.height + (labelPaddingX ?? 0), node?.height ?? 0);
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 },
{ x: w + (3 * h) / 6, y: 0 },

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

@@ -8,13 +8,29 @@ import { insertPolygonShape } from './insertPolygonShape.js';
export const lean_right = 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 = Math.max(bbox.width + labelPaddingY, node?.width ?? 0);
const h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0);
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, y: 0 },

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 - gapX);
const height = Math.max(50, node?.height ?? 0 - gapY);
const width = Math.max(50, node?.width ?? 0);
const height = Math.max(50, node?.height ?? 0);
const points = [
{ x: width, y: 0 },

25
packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
View File

@@ -54,17 +54,36 @@ export const createInnerCylinderPathD = (
): string => {
return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
};
const MIN_HEIGHT = 25;
const MIN_WIDTH = 25;
export const linedCylinder = 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, node?.width ?? 0);
if (node.width || node.height) {
node.width = (node.width ?? 0) - labelPaddingX;
if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH;
}
// 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;
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 rx = w / 2;
const ry = rx / (2.5 + w / 50);
const h = Math.max(bbox.height + ry + labelPaddingY, node?.height ?? 0);
const h = Math.max(bbox.height, node?.height ?? 0) + ry + labelPaddingY;
const outerOffset = h * 0.1; // 10% of height
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;

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

@@ -12,13 +12,29 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
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;
}
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 paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0);
const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0);
const waveAmplitude = h / 4;
const finalH = h + waveAmplitude;
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 / 6;
const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
const { cssStyles } = node;
// @ts-ignore - rough is not typed
@@ -68,7 +84,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`);
label.attr(
'transform',
`translate(${-w / 2 + paddingX + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})`
`translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))},${-(bbox.height / 2) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})`
);
updateNodeBounds(node, waveEdgeRect);

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

@@ -7,13 +7,28 @@ import intersect from '../intersect/index.js';
export const multiRect = 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);
const rectOffset = node.look === 'neo' ? 10 : 5;
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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);
}
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 w = totalWidth - 2 * rectOffset;
const h = totalHeight - 2 * rectOffset;
const x = -w / 2;
const y = -h / 2;
const { cssStyles } = node;

30
packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts
View File

@@ -18,10 +18,32 @@ export const multiWaveEdgedRectangle = 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 w = Math.max(bbox.width + labelPaddingX * 2, node?.width ?? 0);
const h = Math.max(bbox.height + labelPaddingY * 2, node?.height ?? 0);
const waveAmplitude = h / 4;
const finalH = h + waveAmplitude;
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 * 3;
if (node.height < 50) {
node.height = 50;
}
// Adjustments for wave amplitude
const waveAmplitude = 30;
const waveMultiplier = 0.3319;
node.height = Math.round(node.height - labelPaddingY - waveAmplitude * waveMultiplier);
node.width = node.width - labelPaddingX;
}
const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2;
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 3;
const waveAmplitude = 30;
const finalH = h + (adjustFinalHeight ? waveAmplitude / 2 : -waveAmplitude / 2);
const x = -w / 2;
const y = -finalH / 2;
const rectOffset = 5;

18
packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
View File

@@ -19,10 +19,22 @@ export const createDecisionBoxPathD = (x: number, y: number, size: number): stri
export const question = 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 padding = node.padding ?? 0;
if (node.width || node.height) {
node.width = (node?.width ?? 0) - padding * 8;
if (node.width < 50) {
node.width = 50;
}
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
node.height = (node?.height ?? 0) - padding * 8;
if (node.height < 50) {
node.height = 50;
}
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const w = (Math.max(bbox.width, node?.width ?? 0) + padding * 8) / 2;
const h = w;
const s = w + h;
const points = [

40
packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
View File

@@ -4,16 +4,33 @@ import type { Node } from '../../types.d.ts';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
/// Width of the frame on the left of the shape
const FRAME_WIDTH = 8;
export const shadedProcess = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0);
const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0);
const x = -bbox.width / 2 - paddingX;
const y = -bbox.height / 2 - paddingY;
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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 - FRAME_WIDTH, 50);
node.height = Math.max((node?.height ?? 0) - paddingY * 2, 50);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2 + FRAME_WIDTH;
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2;
const w = totalWidth - FRAME_WIDTH;
const h = totalHeight;
const x = -(totalWidth - FRAME_WIDTH) / 2;
const y = -totalHeight / 2;
const { cssStyles } = node;
// @ts-ignore - rough is not typed
@@ -27,10 +44,10 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
const points = [
{ x, y },
{ x: x + w + 8, y },
{ x: x + w + 8, y: y + h },
{ x: x - 8, y: y + h },
{ x: x - 8, y: y },
{ x: x + w, y },
{ x: x + w, y: y + h },
{ x: x - FRAME_WIDTH, y: y + h },
{ x: x - FRAME_WIDTH, y: y },
{ x, y },
{ x, y: y + h },
];
@@ -52,11 +69,6 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
rect.selectAll('path').attr('style', nodeStyles);
}
label.attr(
'transform',
`translate(${-w / 2 + 4 + paddingX - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY - (bbox.y - (bbox.top ?? 0))})`
);
updateNodeBounds(node, rect);
node.intersect = function (point) {

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

@@ -7,12 +7,26 @@ import rough from 'roughjs';
export const slopedRect = 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);
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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);
}
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 w = totalWidth;
const h = totalHeight / 1.5;
const x = -w / 2;
const y = -h / 2;

25
packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
View File

@@ -56,15 +56,28 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
node.width = (node?.width ?? 0) - labelPaddingX;
node.height = (node?.height ?? 0) - labelPaddingY;
if (node.width < 100) {
node.width = 100;
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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 = (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 } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
const w = Math.max(bbox.width + h / 4, node?.width || 0, 150) + labelPaddingX;
// const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
// const w = Math.max(bbox.width + h / 4, node?.width || 0, 150) + labelPaddingX;
const w = Math.max(bbox.width, node?.width || 0) + labelPaddingX * 2;
const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY * 2;
let rect;
const { cssStyles } = node;

42
packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
View File

@@ -32,21 +32,37 @@ export const createSubroutinePathD = (
].join(' ');
};
// width of the frame on the left and right side of the shape
const FRAME_WIDTH = 8;
export const subroutine = async (parent: SVGAElement, node: Node) => {
const { themeVariables } = getConfig();
const { useGradient } = themeVariables;
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const nodePadding = node?.padding || 8;
// const labelPaddingX = node.padding;
// const labelPaddingY = node.padding;
const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
const w = bbox.width + labelPaddingX;
const h = bbox.height + labelPaddingY;
const x = -bbox.width / 2 - labelPaddingX / 2;
const y = -bbox.height / 2 - labelPaddingY / 2;
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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 * FRAME_WIDTH, 50);
node.height = Math.max((node?.height ?? 0) - labelPaddingY, 50);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width || 0) + 2 * FRAME_WIDTH + labelPaddingX;
const totalHeight = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
const w = totalWidth - 2 * FRAME_WIDTH;
const h = totalHeight;
const x = -totalWidth / 2;
const y = -totalHeight / 2;
const points = [
{ x: 0, y: 0 },
@@ -54,11 +70,11 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
{ x: w, y: -h },
{ x: 0, y: -h },
{ x: 0, y: 0 },
{ x: -8, y: 0 },
{ x: w + 8, y: 0 },
{ x: w + 8, y: -h },
{ x: -8, y: -h },
{ x: -8, y: 0 },
{ x: -FRAME_WIDTH, y: 0 },
{ x: w + FRAME_WIDTH, y: 0 },
{ x: w + FRAME_WIDTH, y: -h },
{ x: -FRAME_WIDTH, y: -h },
{ x: -FRAME_WIDTH, y: 0 },
];
if (node.look === 'handDrawn' || (node.look === 'neo' && !useGradient)) {
@@ -71,7 +87,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
options.fillStyle = 'solid';
}
const roughNode = rc.rectangle(x - 8, y, w + 16, h, options);
const roughNode = rc.rectangle(x - FRAME_WIDTH, y, w + 2 * FRAME_WIDTH, h, options);
const l1 = rc.line(x, y, x, y + h, options);
const l2 = rc.line(x + w, y, x + w, y + h, options);

32
packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
View File

@@ -4,19 +4,41 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
/// The width/height of the tag in comparison to the height of the node
const TAG_RATIO = 0.2;
export const taggedRect = async (parent: SVGAElement, node: Node) => {
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 * 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);
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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.width = Math.max(
(node?.width ?? 0) - labelPaddingX * 2 - TAG_RATIO * (node.height + labelPaddingY * 2),
50
);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2;
const tagWidth = TAG_RATIO * totalHeight;
const tagHeight = TAG_RATIO * totalHeight;
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2 + tagWidth;
const w = totalWidth - tagWidth;
const h = totalHeight;
const x = -w / 2;
const y = -h / 2;
const tagWidth = 0.2 * h;
const tagHeight = 0.2 * h;
const { cssStyles } = node;
// @ts-ignore - rough is not typed

28
packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts
View File

@@ -13,16 +13,32 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
export const taggedWaveEdgedRectangle = 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 * 2, node?.width ?? 0);
const h = Math.max(bbox.height + labelPaddingY * 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 * 3;
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) * 3;
const waveAmplitude = h / 4;
const tagWidth = 0.2 * w;
const tagHeight = 0.2 * h;
const finalH = h + waveAmplitude;
const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
const { cssStyles } = node;
// @ts-ignore - rough is not typed
@@ -50,7 +66,9 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node)
];
const x = -w / 2 + (w / 2) * 0.1;
const y = -finalH / 2 - tagHeight * 0.4;
const y = !adjustFinalHeight
? -finalH / 2 - 1.25 * waveAmplitude - 1 * tagHeight
: -finalH / 2 - 0.4 * tagHeight;
const tagPoints = [
{ x: x + w - tagWidth, y: (y + h) * 1.4 },

31
packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
View File

@@ -49,19 +49,34 @@ 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;
export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label, halfPadding } = await labelHelper(
parent,
node,
getNodeClasses(node)
);
const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const h = bbox.height + labelPadding;
const nodePadding = node.padding ?? 0;
const labelPadding = node.look === 'neo' ? nodePadding : nodePadding / 2;
if (node.width || node.height) {
node.height = (node.height ?? 0) - labelPadding;
if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT;
}
const ry = node.height / 2;
// based on this height, width is calculated
const rx = ry / (2.5 + node.height / 50);
node.width = (node.width ?? 0) - labelPadding - rx * 3;
if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH;
}
}
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node.height ?? 0) + labelPadding;
const ry = h / 2;
const rx = ry / (2.5 + h / 50);
const w = bbox.width + rx + labelPadding;
const w = Math.max(bbox.width, node.width ?? 0) + rx + labelPadding;
const { cssStyles } = node;
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;

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

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

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

@@ -7,15 +7,27 @@ import rough from 'roughjs';
export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
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 * 2 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
const minWidth = 60,
minHeight = 20;
const w = Math.max(minWidth, bbox.width + (labelPaddingX ?? 0) * 2, node?.width ?? 0);
const h = Math.max(minHeight, bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0);
if (node.width || node.height) {
node.height = (node.height ?? 0) - labelPaddingY * 2;
if (node.height < minHeight) {
node.height = minHeight;
}
node.width = (node.width ?? 0) - labelPaddingX * 2;
if (node.width < minWidth) {
node.width = minWidth;
}
}
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 { cssStyles } = node;
// @ts-ignore - rough is not typed

22
packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
View File

@@ -8,15 +8,31 @@ 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;
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;
if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH;
}
node.height = node?.height ?? 0;
if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT;
}
}
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const useHtmlLabels = evaluate(getConfig().flowchart?.htmlLabels);
const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
const w = Math.max(bbox.width + (labelPaddingX ?? 0), node?.width ?? 0);
const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX;
const h = Math.max(w + bbox.height, node?.height ?? 0);
const tw = w + bbox.height;

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

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

42
packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts
View File

@@ -13,30 +13,31 @@ import rough from 'roughjs';
export const waveRectangle = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const minWidth = 100; // Minimum width
const minHeight = 50; // Minimum height
const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
const baseWidth = Math.max(bbox.width + labelPaddingX * 2, node?.width ?? 0);
const baseHeight = Math.max(bbox.height + labelPaddingY * 2, node?.height ?? 0);
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
const aspectRatio = baseWidth / baseHeight;
let w = baseWidth;
let h = baseHeight;
if (w > h * aspectRatio) {
h = w / aspectRatio;
} else {
w = h * aspectRatio;
if (node.width || node.height) {
node.width = node?.width ?? 0;
if (node.width < 100) {
node.width = 100;
}
w = Math.max(w, minWidth);
h = Math.max(h, minHeight);
node.height = node?.height ?? 0;
if (node.height < 50) {
node.height = 50;
}
// Adjust for wave amplitude
const waveAmplitude = Math.min(node.height * 0.2, node.height / 4);
node.height = Math.ceil(node.height - labelPaddingY - waveAmplitude * (20 / 9));
node.width = node.width - labelPaddingX * 2;
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2;
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
const waveAmplitude = Math.min(h * 0.2, h / 4);
const finalH = h + waveAmplitude * 2;
@@ -73,6 +74,9 @@ export const waveRectangle = async (parent: SVGAElement, node: Node) => {
waveRect.selectAll('path').attr('style', nodeStyles);
}
node.width = w;
node.height = finalH;
updateNodeBounds(node, waveRect);
node.intersect = function (point) {
const pos = intersect.polygon(node, points, point);

25
packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
View File

@@ -4,15 +4,32 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
/// Width of the frame on the top and left of the shape
const rectOffset = 5;
export const windowPane = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0);
const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0);
const rectOffset = 5;
// If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account
// 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);
}
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 w = totalWidth - rectOffset;
const h = totalHeight - rectOffset;
const x = -w / 2;
const y = -h / 2;
const { cssStyles } = node;