GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

#6080: Fix for issue with diamond intersections when using elk-layout

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-11-25 17:15:35 +01:00
parent 69973eaa02
commit c7ae08abc3
2 changed files with 133 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
cypress/platform/knsv2.html
View File

@ -88,40 +88,134 @@
</head> </head>
<body> <body>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
look: handDrawn layout: elk
theme: default
--- ---
flowchart LR flowchart LR
n00@{ shape: triangle, label: 'This is a label for triangle shape' } subgraph s1["Untitled subgraph"]
n11@{ shape: sloped-rectangle, label: 'This is a label for sloped-rectangle shape' } n1["Evaluate"]
n22@{ shape: horizontal-cylinder, label: 'This is a label for horizontal-cylinder shape' } n2["Option 1"]
n33@{ shape: flipped-triangle, label: 'This is a label for flipped-triangle shape' } n3["Option 2"]
n44@{ shape: hourglass, label: 'This is a label for hourglass shape' } n4["fa:fa-car Option 3"]
n00 --> n11 end
n00 --> n22 n1 -- One --> n2
n00 --> n33 n1 -- Two --> n3
n00 --> n44 n1 -- Three --> n4
n11 --> n22 n5
n11 --> n33 n1@{ shape: diam}
n11 --> n44 n2@{ shape: rect}
n22 --> n33 n3@{ shape: rect}
n22 --> n44 n4@{ shape: rect}
n33 --> n44 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"]
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
look: handDrawn layout: elk
theme: default
--- ---
flowchart LR flowchart LR
n22@{ shape: h-cyl } subgraph s1["Untitled subgraph"]
n00 --> n11 n1["Evaluate"]
n00 --> n22 n2["Option 1"]
n11 --> n22 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}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
subgraph s1["Untitled subgraph"]
n1["Evaluate"]
n2["Option 1"]
end
n1 -- One --> n2
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
A{A} --> B & C
</pre
>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
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"]
%% C@{ shape: hexagon}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
kanban:
ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
---
kanban
Backlog
task1[📝 Define project requirements]@{ ticket: a101 }
To Do
task2[🔍 Research technologies]@{ ticket: a102 }
Review
task4[🔍 Code review for login feature]@{ ticket: a104 }
Done
task5[✅ Deploy initial version]@{ ticket: a105 }
In Progress
task3[💻 Develop login feature]@{ ticket: 103 }
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR

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

@ -484,6 +484,8 @@ export const render = async (
const r3 = a1 * q1.x + b1 * q1.y + c1; const r3 = a1 * q1.x + b1 * q1.y + c1;
const r4 = a1 * q2.x + b1 * q2.y + c1; const r4 = a1 * q2.x + b1 * q2.y + c1;
const epsilon = 1e-6;
// Check signs of r3 and r4. If both point 3 and point 4 lie on // Check signs of r3 and r4. If both point 3 and point 4 lie on
// same side of line 1, the line segments do not intersect. // same side of line 1, the line segments do not intersect.
if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) { if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
@ -502,7 +504,7 @@ export const render = async (
// Check signs of r1 and r2. If both point 1 and point 2 lie // Check signs of r1 and r2. If both point 1 and point 2 lie
// on same side of second line segment, the line segments do // on same side of second line segment, the line segments do
// not intersect. // not intersect.
if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) { if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
return /*DON'T_INTERSECT*/; return /*DON'T_INTERSECT*/;
} }
@ -547,11 +549,11 @@ export const render = async (
{ x: x1 - w / 2, y: y1 }, { x: x1 - w / 2, y: y1 },
]; ];
log.debug( log.debug(
`UIO diamondIntersection calc abc89: `APA16 diamondIntersection calc abc89:
outsidePoint: ${JSON.stringify(outsidePoint)} outsidePoint: ${JSON.stringify(outsidePoint)}
insidePoint : ${JSON.stringify(insidePoint)} insidePoint : ${JSON.stringify(insidePoint)}
node : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`, node-bounds : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
polyPoints JSON.stringify(polyPoints)
); );
const intersections = []; const intersections = [];
@ -564,8 +566,8 @@ export const render = async (
minY = Math.min(minY, entry.y); minY = Math.min(minY, entry.y);
}); });
// const left = x1 - w / 2; const left = x1 - w / 2 - minX;
// const top = y1 + h / 2; const top = y1 - h / 2 - minY;
for (let i = 0; i < polyPoints.length; i++) { for (let i = 0; i < polyPoints.length; i++) {
const p1 = polyPoints[i]; const p1 = polyPoints[i];
@ -573,8 +575,8 @@ export const render = async (
const intersect = intersectLine( const intersect = intersectLine(
bounds, bounds,
outsidePoint, outsidePoint,
{ x: p1.x, y: p1.y }, { x: left + p1.x, y: top + p1.y },
{ x: p2.x, y: p2.y } { x: left + p2.x, y: top + p2.y }
); );
if (intersect) { if (intersect) {
@ -753,7 +755,6 @@ export const render = async (
} }
} }
}); });
log.debug('returning points', points);
return points; return points;
}; };
@ -968,17 +969,17 @@ export const render = async (
startNode.innerHTML startNode.innerHTML
); );
} }
if (startNode.shape === 'diamond') { if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
edge.points.unshift({ edge.points.unshift({
x: startNode.x + startNode.width / 2 + offset.x, x: startNode.x + startNode.width / 2 + offset.x,
y: startNode.y + startNode.height / 2 + offset.y, y: startNode.y + startNode.height / 2 + offset.y,
}); });
} }
if (endNode.shape === 'diamond') { if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
const x = endNode.x + endNode.width / 2 + offset.x; const x = endNode.x + endNode.width / 2 + offset.x;
// Add a point at the center of the diamond // Add a point at the center of the diamond
if ( if (
Math.abs(edge.points[edge.points.length - 1].y - endNode.y - offset.y) > 0.001 || 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 Math.abs(edge.points[edge.points.length - 1].x - x) > 0.001
) { ) {
edge.points.push({ edge.points.push({
@ -997,7 +998,7 @@ export const render = async (
height: startNode.height, height: startNode.height,
padding: startNode.padding, padding: startNode.padding,
}, },
startNode.shape === 'diamond' startNode.shape === 'diamond' || startNode.shape === 'diam'
).reverse(); ).reverse();
edge.points = cutPathAtIntersect( edge.points = cutPathAtIntersect(
@ -1009,7 +1010,7 @@ export const render = async (
height: endNode.height, height: endNode.height,
padding: endNode.padding, padding: endNode.padding,
}, },
endNode.shape === 'diamond' endNode.shape === 'diamond' || endNode.shape === 'diam'
); );
const paths = insertEdge( const paths = insertEdge(