marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-14 17:54:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'neo-new-shapes' of github.com:Mermaid-Chart/alana-mermaid into neo-new-shapes

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-09-23 15:00:06 +02:00
parent 65d47dea24 6934c3eb5a
commit bb755c6e99
7 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,8 +38,10 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = bbox.width + (node.padding ?? 0); const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const h = bbox.height + (node.padding ?? 0); const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
const w = Math.max(bbox.width + paddingX, node.width ?? 0);
const h = Math.max(bbox.height + paddingY, node.height ?? 0);
const radius = Math.max(5, h * 0.1); const radius = Math.max(5, h * 0.1);
const { cssStyles } = node; const { cssStyles } = node;
@@ -96,7 +98,7 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => {
label.attr( label.attr(
'transform', 'transform',
`translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY / 2 - (bbox.y - (bbox.top ?? 0))})`
); );
updateNodeBounds(node, curlyBraceLeftShape); updateNodeBounds(node, curlyBraceLeftShape);

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

@@ -38,8 +38,10 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = bbox.width + (node.padding ?? 0); const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const h = bbox.height + (node.padding ?? 0); const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
const w = Math.max(bbox.width + paddingX, node.width ?? 0);
const h = Math.max(bbox.height + paddingY, node.height ?? 0);
const radius = Math.max(5, h * 0.1); const radius = Math.max(5, h * 0.1);
const { cssStyles } = node; const { cssStyles } = node;
@@ -96,7 +98,7 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => {
label.attr( label.attr(
'transform', 'transform',
`translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` `translate(${-w / 2 + paddingX / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY / 2 - (bbox.y - (bbox.top ?? 0))})`
); );
updateNodeBounds(node, curlyBraceRightShape); updateNodeBounds(node, curlyBraceRightShape);

10
packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts
View File

@@ -38,8 +38,10 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = bbox.width + (node.padding ?? 0); const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const h = bbox.height + (node.padding ?? 0); const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
const w = Math.max(bbox.width + paddingX, node.width ?? 0);
const h = Math.max(bbox.height + paddingY, node.height ?? 0);
const radius = Math.max(5, h * 0.1); const radius = Math.max(5, h * 0.1);
const { cssStyles } = node; const { cssStyles } = node;
@@ -83,7 +85,7 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => {
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { fill: 'none' }); const options = userNodeOverrides(node, { fill: 'transparent' });
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;
@@ -115,7 +117,7 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => {
label.attr( label.attr(
'transform', 'transform',
`translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` `translate(${-w / 2 + paddingX / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY / 2 - (bbox.y - (bbox.top ?? 0))})`
); );
updateNodeBounds(node, curlyBracesShape); updateNodeBounds(node, curlyBracesShape);

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

@@ -8,8 +8,10 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = bbox.width + node.padding; const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const h = bbox.height + node.padding; 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; const rectOffset = h * 0.2;
const x = -w / 2; const x = -w / 2;
@@ -53,7 +55,7 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
label.attr( label.attr(
'transform', 'transform',
`translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` `translate(${x + paddingX / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + paddingY / 2 - (bbox.y - (bbox.top ?? 0))})`
); );
updateNodeBounds(node, polygon); updateNodeBounds(node, polygon);

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

@@ -17,8 +17,10 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
const minWidth = 80, const minWidth = 80,
minHeight = 50; minHeight = 50;
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.padding ?? 0) * 2, node?.width ?? 0); const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const h = Math.max(minHeight, bbox.height + (node.padding ?? 0) * 2, node?.height ?? 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);
const radius = h / 2; const radius = h / 2;
const { cssStyles } = node; const { cssStyles } = node;

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

@@ -13,8 +13,10 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
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.padding ?? 0) * 2, node?.width ?? 0); const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 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 waveAmplitude = h / 4;
const finalH = h + waveAmplitude; const finalH = h + waveAmplitude;
const { cssStyles } = node; const { cssStyles } = node;
@@ -66,7 +68,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`);
label.attr( label.attr(
'transform', 'transform',
`translate(${-w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` `translate(${-w / 2 + paddingX + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})`
); );
updateNodeBounds(node, waveEdgeRect); updateNodeBounds(node, waveEdgeRect);

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

@@ -8,8 +8,10 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
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.padding ?? 0) * 2, node?.width ?? 0); const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 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; const rectOffset = 5;
const x = -w / 2; const x = -w / 2;
const y = -h / 2; const y = -h / 2;
@@ -27,8 +29,8 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
]; ];
const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset}
M${x - rectOffset},${y} L${x + w},${y} M${x - rectOffset},${y} L${x + w},${y} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y}
M${x},${y - rectOffset} L${x},${y + h}`; M${x},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x},${y + h} L${x},${y - rectOffset}`;
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;