marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-20 15:59:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated shapes

Browse Source
This commit is contained in:
saurabhg772244
2024-09-21 16:44:19 +05:30
parent eeeb5fcdd9
commit d01e180caf
5 changed files with 48 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
cypress/integration/rendering/newShapes.spec.ts
View File

@@ -1,7 +1,7 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
const looks = ['classic'] as const;
const directions = ['TB'] as const;
const looks = ['classic', 'handDrawn'] as const;
const directions = ['TB', 'BT', 'LR', 'RL'] as const;
const newShapesSet1 = [
'triangle',
'sloped-rectangle',
@@ -68,7 +68,7 @@ looks.forEach((look) => {
it(`with label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -76,7 +76,7 @@ looks.forEach((look) => {
it(`connect all shapes with each other`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
});
for (let i = 0; i < newShapesSet.length; i++) {
for (let j = i + 1; j < newShapesSet.length; j++) {
@@ -89,7 +89,7 @@ looks.forEach((look) => {
it(`with very long label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -97,7 +97,7 @@ looks.forEach((look) => {
it(`with markdown htmlLabels:true`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -105,7 +105,7 @@ looks.forEach((look) => {
it(`with markdown htmlLabels:false`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, {
look,
@@ -117,7 +117,7 @@ looks.forEach((look) => {
it(`with styles`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
});
imgSnapshotTest(flowchartCode, { look });
@@ -127,7 +127,7 @@ looks.forEach((look) => {
let flowchartCode = `flowchart ${direction}\n`;
flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
flowchartCode += ` n${index}${index}:::customClazz\n`;
});
imgSnapshotTest(flowchartCode, { look });

23
cypress/platform/saurabh.html
View File

@@ -63,16 +63,10 @@
<body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid">
flowchart LR
B2@{ icon: "fa:address-book", form: "square", pos: "b", h: 80 }
W --> B2 --> x1
X --> B2 --> x2
Y --> B2 --> x3
Z --> B2 --> x4
B2 --<strong>sas</strong>--> C
A --> B2
n21@{ shape: subproc,label: "Untitled Node"}
n52@{ shape: internal-storage,label: "Untitled Node"}
n53@{ shape: div-rect,label: "Untitled Node"}
n54@{ shape: lin-doc,label: "Untitled Node"}
</pre>
@@ -150,14 +144,17 @@
// htmlLabels: false,
flowchart: { titleTopMargin: 10, htmlLabels: true },
// fontFamily: 'Caveat',
fontFamily: 'Kalam',
// fontFamily: 'courier',
// fontFamily: 'Kalam',
fontFamily: 'courier',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
fontSize: 12,
themeVariables: {
fontSize: 50,
fontFamily: 'courier',
},
logLevel: 0,
securityLevel: 'loose',
});

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

@@ -1,4 +1,4 @@
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.d.ts';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
@@ -25,23 +25,22 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
options.fillStyle = 'solid';
}
const outerPathPoints = [
{ x, y: y },
{ x, y: -y },
const pts = [
{ x, y: y + rectOffset },
{ x: -x, y: y + rectOffset },
{ x: -x, y: -y },
{ x: -x, y: y },
];
const innerPathPoints = [
{ x: x, y: y + rectOffset },
{ x, y: -y },
{ x, y },
{ x: -x, y },
{ x: -x, y: y + rectOffset },
];
const outerPathData = createPathFromPoints(outerPathPoints);
const outerNode = rc.path(outerPathData, options);
const innerPathData = createPathFromPoints(innerPathPoints);
const innerNode = rc.path(innerPathData, options);
const polygon = shapeSvg.insert(() => outerNode, ':first-child');
polygon.insert(() => innerNode);
const poly = rc.polygon(
pts.map((p) => [p.x, p.y]),
options
);
const polygon = shapeSvg.insert(() => poly, ':first-child');
polygon.attr('class', 'basic label-container');
if (cssStyles && node.look !== 'handDrawn') {
@@ -60,7 +59,7 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
updateNodeBounds(node, polygon);
node.intersect = function (point) {
const pos = intersect.polygon(node, outerPathPoints, point);
const pos = intersect.rect(node, point);
return pos;
};

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

@@ -3,7 +3,6 @@ import {
updateNodeBounds,
getNodeClasses,
generateFullSineWavePoints,
createPathFromPoints,
} from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.d.ts';
@@ -30,6 +29,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
}
const points = [
{ x: -w / 2 - (w / 2) * 0.1, y: -finalH / 2 },
{ x: -w / 2 - (w / 2) * 0.1, y: finalH / 2 },
...generateFullSineWavePoints(
-w / 2 - (w / 2) * 0.1,
@@ -41,24 +41,17 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
),
{ x: w / 2 + (w / 2) * 0.1, y: -finalH / 2 },
{ x: -w / 2 - (w / 2) * 0.1, y: -finalH / 2 },
{ x: -w / 2, y: -finalH / 2 },
{ x: -w / 2, y: (finalH / 2) * 1.1 },
{ x: -w / 2, y: -finalH / 2 },
];
const x = -w / 2;
const y = -finalH / 2;
const poly = rc.polygon(
points.map((p) => [p.x, p.y]),
options
);
const innerPathPoints = [
{ x: x, y: y },
{ x: x, y: -y * 1.1 },
];
const waveEdgeRectPath = createPathFromPoints(points);
const waveEdgeRectNode = rc.path(waveEdgeRectPath, options);
const innerSecondPath = createPathFromPoints(innerPathPoints);
const innerSecondNode = rc.path(innerSecondPath, options);
const waveEdgeRect = shapeSvg.insert(() => innerSecondNode, ':first-child');
waveEdgeRect.insert(() => waveEdgeRectNode, ':first-child');
const waveEdgeRect = shapeSvg.insert(() => poly, ':first-child');
waveEdgeRect.attr('class', 'basic label-container');

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

@@ -1,4 +1,4 @@
import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js';
import type { Node } from '../../types.d.ts';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
@@ -26,31 +26,18 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
{ x: x + w, y: y - rectOffset },
];
const innerPathPoints = [
{ x: x - rectOffset, y },
{ x: x + w, y },
];
const innerSecondPathPoints = [
{ x, y: y - rectOffset },
{ x, y: y + h },
];
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},${y - rectOffset} L${x},${y + h}`;
if (node.look !== 'handDrawn') {
options.roughness = 0;
options.fillStyle = 'solid';
}
const outerPath = createPathFromPoints(outerPathPoints);
const outerNode = rc.path(outerPath, options);
const innerPath = createPathFromPoints(innerPathPoints);
const innerNode = rc.path(innerPath, options);
const innerSecondPath = createPathFromPoints(innerSecondPathPoints);
const innerSecondNode = rc.path(innerSecondPath, options);
const no = rc.path(path, options);
const windowPane = shapeSvg.insert(() => innerNode, ':first-child');
windowPane.insert(() => innerSecondNode, ':first-child');
windowPane.insert(() => outerNode, ':first-child');
const windowPane = shapeSvg.insert(() => no, ':first-child');
windowPane.attr('transform', `translate(${rectOffset / 2}, ${rectOffset / 2})`);
windowPane.attr('class', 'basic label-container');