GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #6092 from mermaid-js/master

Browse Source 
Merge back master to develop
This commit is contained in:
Ashish Jain 2024-11-27 18:24:31 +01:00 committed by GitHub
commit 64554a6c60
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 230 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
cypress/integration/rendering/flowchart-elk.spec.js
View File

@ -900,6 +900,153 @@ flowchart LR
n7@{ shape: rect} n7@{ shape: rect}
n8@{ shape: rect} n8@{ shape: rect}
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-1: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
subgraph S2
subgraph s1["APA"]
D{"Use the editor"}
end
D -- Mermaid js --> I{"fa:fa-code Text"}
D --> I
D --> I
end
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-2: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
a
subgraph s0["APA"]
subgraph s8["APA"]
subgraph s1["APA"]
D{"X"}
E[Q]
end
subgraph s3["BAPA"]
F[Q]
I
end
D --> I
D --> I
D --> I
I{"X"}
end
end
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-3: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
a
D{"Use the editor"}
D -- Mermaid js --> I{"fa:fa-code Text"}
D-->I
D-->I
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-4: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
subgraph s1["Untitled subgraph"]
n1["Evaluate"]
n2["Option 1"]
n3["Option 2"]
n4["fa:fa-car Option 3"]
end
subgraph s2["Untitled subgraph"]
n5["Evaluate"]
n6["Option 1"]
n7["Option 2"]
n8["fa:fa-car Option 3"]
end
A["Start"] -- Some text --> B("Continue")
B --> C{"Evaluate"}
C -- One --> D["Option 1"]
C -- Two --> E["Option 2"]
C -- Three --> F["fa:fa-car Option 3"]
n1 -- One --> n2
n1 -- Two --> n3
n1 -- Three --> n4
n5 -- One --> n6
n5 -- Two --> n7
n5 -- Three --> n8
n1@{ shape: diam}
n2@{ shape: rect}
n3@{ shape: rect}
n4@{ shape: rect}
n5@{ shape: diam}
n6@{ shape: rect}
n7@{ shape: rect}
n8@{ shape: rect}
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-5: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
A{A} --> B & C
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-6: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
A{A} --> B & C
subgraph "subbe"
A
end
`, `,
{ flowchart: { titleTopMargin: 0 } } { flowchart: { titleTopMargin: 0 } }
); );

88
cypress/platform/knsv2.html
View File

@ -88,33 +88,61 @@
</head> </head>
<body> <body>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
--- ---
flowchart LR flowchart LR
subgraph s1["Untitled subgraph"] subgraph S2
n1["Evaluate"] subgraph s1["APA"]
n2["Option 1"] D{"Use the editor"}
n3["Option 2"] end
n4["fa:fa-car Option 3"]
end
n1 -- One --> n2
n1 -- Two --> n3
n1 -- Three --> n4
n5
n1@{ shape: diam}
n2@{ shape: rect}
n3@{ shape: rect}
n4@{ shape: rect}
A["Start"] -- Some text --> B("Continue")
B --> C{"Evaluate"}
C -- One --> D["Option 1"]
C -- Two --> E["Option 2"]
C -- Three --> F["fa:fa-car Option 3"]
D -- Mermaid js --> I{"fa:fa-code Text"}
D --> I
D --> I
end
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
---
flowchart LR
a
subgraph s0["APA"]
subgraph s8["APA"]
subgraph s1["APA"]
D{"X"}
E[Q]
end
subgraph s3["BAPA"]
F[Q]
I
end
D --> I
D --> I
D --> I
I{"X"}
end
end
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
---
flowchart LR
a
D{"Use the editor"}
D -- Mermaid js --> I{"fa:fa-code Text"}
D-->I
D-->I
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
--- ---
@ -155,7 +183,7 @@ flowchart LR
n8@{ shape: rect} n8@{ shape: rect}
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@ -171,7 +199,7 @@ flowchart LR
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@ -180,7 +208,19 @@ flowchart LR
A{A} --> B & C A{A} --> B & C
</pre </pre
> >
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
---
config:
layout: elk
---
flowchart LR
A{A} --> B & C
subgraph "subbe"
A
end
</pre
>
<pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk

6
packages/mermaid-layout-elk/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @mermaid-js/layout-elk # @mermaid-js/layout-elk
## 0.1.7
### Patch Changes
- [#6090](https://github.com/mermaid-js/mermaid/pull/6090) [`654097c`](https://github.com/mermaid-js/mermaid/commit/654097c43801b2d606bc3d2bef8c6fbc3301e9e4) Thanks [@knsv](https://github.com/knsv)! - fix: Updated offset calculations for diamond shape when handling intersections
## 0.1.6 ## 0.1.6
### Patch Changes ### Patch Changes

2
packages/mermaid-layout-elk/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@mermaid-js/layout-elk", "name": "@mermaid-js/layout-elk",
"version": "0.1.6", "version": "0.1.7",
"description": "ELK layout engine for mermaid", "description": "ELK layout engine for mermaid",
"module": "dist/mermaid-layout-elk.core.mjs", "module": "dist/mermaid-layout-elk.core.mjs",
"types": "dist/layouts.d.ts", "types": "dist/layouts.d.ts",

34
packages/mermaid-layout-elk/src/render.ts
View File

@ -705,14 +705,11 @@ export const render = async (
bounds: { x: any; y: any; width: any; height: any; padding: any }, bounds: { x: any; y: any; width: any; height: any; padding: any },
isDiamond: boolean isDiamond: boolean
) => { ) => {
log.debug('UIO cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond); log.debug('APA18 cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond);
const points: any[] = []; const points: any[] = [];
let lastPointOutside = _points[0]; let lastPointOutside = _points[0];
let isInside = false; let isInside = false;
_points.forEach((point: any) => { _points.forEach((point: any) => {
// const node = clusterDb[edge.toCluster].node;
log.debug(' checking point', point, bounds);
// check if point is inside the boundary rect // check if point is inside the boundary rect
if (!outsideNode(bounds, point) && !isInside) { if (!outsideNode(bounds, point) && !isInside) {
// First point inside the rect found // First point inside the rect found
@ -906,7 +903,7 @@ export const render = async (
const offset = calcOffset(sourceId, targetId, parentLookupDb); const offset = calcOffset(sourceId, targetId, parentLookupDb);
log.debug( log.debug(
'offset', 'APA18 offset',
offset, offset,
sourceId, sourceId,
' ==> ', ' ==> ',
@ -971,29 +968,22 @@ export const render = async (
} }
if (startNode.shape === 'diamond' || startNode.shape === 'diam') { if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
edge.points.unshift({ edge.points.unshift({
x: startNode.x + startNode.width / 2 + offset.x, x: startNode.offset.posX + startNode.width / 2,
y: startNode.y + startNode.height / 2 + offset.y, y: startNode.offset.posY + startNode.height / 2,
}); });
} }
if (endNode.shape === 'diamond' || endNode.shape === 'diam') { if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
const x = endNode.x + endNode.width / 2 + offset.x; edge.points.push({
// Add a point at the center of the diamond x: endNode.offset.posX + endNode.width / 2,
if ( y: endNode.offset.posY + endNode.height / 2,
Math.abs(edge.points[edge.points.length - 1].y - endNode.y - offset.y) > 0.01 || });
Math.abs(edge.points[edge.points.length - 1].x - x) > 0.001
) {
edge.points.push({
x: endNode.x + endNode.width / 2 + offset.x,
y: endNode.y + endNode.height / 2 + offset.y,
});
}
} }
edge.points = cutPathAtIntersect( edge.points = cutPathAtIntersect(
edge.points.reverse(), edge.points.reverse(),
{ {
x: startNode.x + startNode.width / 2 + offset.x, x: startNode.offset.posX + startNode.width / 2,
y: startNode.y + startNode.height / 2 + offset.y, y: startNode.offset.posY + startNode.height / 2,
width: sw, width: sw,
height: startNode.height, height: startNode.height,
padding: startNode.padding, padding: startNode.padding,
@ -1004,8 +994,8 @@ export const render = async (
edge.points = cutPathAtIntersect( edge.points = cutPathAtIntersect(
edge.points, edge.points,
{ {
x: endNode.x + ew / 2 + endNode.offset.x, x: endNode.offset.posX + endNode.width / 2,
y: endNode.y + endNode.height / 2 + endNode.offset.y, y: endNode.offset.posY + endNode.height / 2,
width: ew, width: ew,
height: endNode.height, height: endNode.height,
padding: endNode.padding, padding: endNode.padding,