Skip to content

Commit d3b2c7e

Browse files
knsvknsv
committed
Revert "#6080: Fix for issue with diamond intersections when using elk-layout"
This reverts commit 255279e.
1 parent 255279e commit d3b2c7e

File tree

3 files changed

+38
-176
lines changed

3 files changed

+38
-176
lines changed

Diff for: ‎cypress/integration/rendering/flowchart-elk.spec.js

-43
Original file line numberDiff line numberDiff line change
@@ -857,49 +857,6 @@ flowchart LR
857857
D --> E
858858
A["A"]
859859
860-
`,
861-
{ flowchart: { titleTopMargin: 0 } }
862-
);
863-
});
864-
it('6080: should handle diamond shape intersections', () => {
865-
imgSnapshotTest(
866-
`---
867-
config:
868-
layout: elk
869-
---
870-
flowchart LR
871-
subgraph s1["Untitled subgraph"]
872-
n1["Evaluate"]
873-
n2["Option 1"]
874-
n3["Option 2"]
875-
n4["fa:fa-car Option 3"]
876-
end
877-
subgraph s2["Untitled subgraph"]
878-
n5["Evaluate"]
879-
n6["Option 1"]
880-
n7["Option 2"]
881-
n8["fa:fa-car Option 3"]
882-
end
883-
A["Start"] -- Some text --> B("Continue")
884-
B --> C{"Evaluate"}
885-
C -- One --> D["Option 1"]
886-
C -- Two --> E["Option 2"]
887-
C -- Three --> F["fa:fa-car Option 3"]
888-
n1 -- One --> n2
889-
n1 -- Two --> n3
890-
n1 -- Three --> n4
891-
n5 -- One --> n6
892-
n5 -- Two --> n7
893-
n5 -- Three --> n8
894-
n1@{ shape: diam}
895-
n2@{ shape: rect}
896-
n3@{ shape: rect}
897-
n4@{ shape: rect}
898-
n5@{ shape: diam}
899-
n6@{ shape: rect}
900-
n7@{ shape: rect}
901-
n8@{ shape: rect}
902-
903860
`,
904861
{ flowchart: { titleTopMargin: 0 } }
905862
);

Diff for: ‎cypress/platform/knsv2.html

+24-118
Original file line numberDiff line numberDiff line change
@@ -88,134 +88,40 @@
8888
</head>
8989

9090
<body>
91-
<pre id="diagram4" class="mermaid2">
92-
---
93-
config:
94-
layout: elk
95-
---
96-
flowchart LR
97-
subgraph s1["Untitled subgraph"]
98-
n1["Evaluate"]
99-
n2["Option 1"]
100-
n3["Option 2"]
101-
n4["fa:fa-car Option 3"]
102-
end
103-
n1 -- One --> n2
104-
n1 -- Two --> n3
105-
n1 -- Three --> n4
106-
n5
107-
n1@{ shape: diam}
108-
n2@{ shape: rect}
109-
n3@{ shape: rect}
110-
n4@{ shape: rect}
111-
A["Start"] -- Some text --> B("Continue")
112-
B --> C{"Evaluate"}
113-
C -- One --> D["Option 1"]
114-
C -- Two --> E["Option 2"]
115-
C -- Three --> F["fa:fa-car Option 3"]
116-
117-
118-
</pre>
11991
<pre id="diagram4" class="mermaid">
12092
---
12193
config:
122-
layout: elk
123-
---
124-
flowchart LR
125-
subgraph s1["Untitled subgraph"]
126-
n1["Evaluate"]
127-
n2["Option 1"]
128-
n3["Option 2"]
129-
n4["fa:fa-car Option 3"]
130-
end
131-
subgraph s2["Untitled subgraph"]
132-
n5["Evaluate"]
133-
n6["Option 1"]
134-
n7["Option 2"]
135-
n8["fa:fa-car Option 3"]
136-
end
137-
A["Start"] -- Some text --> B("Continue")
138-
B --> C{"Evaluate"}
139-
C -- One --> D["Option 1"]
140-
C -- Two --> E["Option 2"]
141-
C -- Three --> F["fa:fa-car Option 3"]
142-
n1 -- One --> n2
143-
n1 -- Two --> n3
144-
n1 -- Three --> n4
145-
n5 -- One --> n6
146-
n5 -- Two --> n7
147-
n5 -- Three --> n8
148-
n1@{ shape: diam}
149-
n2@{ shape: rect}
150-
n3@{ shape: rect}
151-
n4@{ shape: rect}
152-
n5@{ shape: diam}
153-
n6@{ shape: rect}
154-
n7@{ shape: rect}
155-
n8@{ shape: rect}
156-
157-
</pre>
158-
<pre id="diagram4" class="mermaid2">
159-
---
160-
config:
161-
layout: elk
94+
look: handDrawn
95+
theme: default
16296
---
16397
flowchart LR
164-
subgraph s1["Untitled subgraph"]
165-
n1["Evaluate"]
166-
n2["Option 1"]
167-
end
168-
n1 -- One --> n2
169-
170-
171-
172-
98+
n00@{ shape: triangle, label: 'This is a label for triangle shape' }
99+
n11@{ shape: sloped-rectangle, label: 'This is a label for sloped-rectangle shape' }
100+
n22@{ shape: horizontal-cylinder, label: 'This is a label for horizontal-cylinder shape' }
101+
n33@{ shape: flipped-triangle, label: 'This is a label for flipped-triangle shape' }
102+
n44@{ shape: hourglass, label: 'This is a label for hourglass shape' }
103+
n00 --> n11
104+
n00 --> n22
105+
n00 --> n33
106+
n00 --> n44
107+
n11 --> n22
108+
n11 --> n33
109+
n11 --> n44
110+
n22 --> n33
111+
n22 --> n44
112+
n33 --> n44
173113
</pre>
174-
<pre id="diagram4" class="mermaid2">
175-
---
176-
config:
177-
layout: elk
178-
---
179-
flowchart LR
180-
A{A} --> B & C
181-
</pre
182-
>
183-
<pre id="diagram4" class="mermaid2">
114+
<pre id="diagram4" class="mermaid">
184115
---
185116
config:
186-
layout: elk
117+
look: handDrawn
118+
theme: default
187119
---
188120
flowchart LR
189-
n2@{ shape: rect}
190-
n3@{ shape: rect}
191-
n4@{ shape: rect}
192-
A["Start"] -- Some text --> B("Continue")
193-
B --> C{"Evaluate"}
194-
C -- One --> D["Option 1"]
195-
C -- Two --> E["Option 2"]
196-
C -- Three --> F["fa:fa-car Option 3"]
197-
%% C@{ shape: hexagon}
198-
199-
200-
</pre>
201-
<pre id="diagram4" class="mermaid2">
202-
---
203-
config:
204-
kanban:
205-
ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
206-
---
207-
kanban
208-
Backlog
209-
task1[📝 Define project requirements]@{ ticket: a101 }
210-
To Do
211-
task2[🔍 Research technologies]@{ ticket: a102 }
212-
Review
213-
task4[🔍 Code review for login feature]@{ ticket: a104 }
214-
Done
215-
task5[✅ Deploy initial version]@{ ticket: a105 }
216-
In Progress
217-
task3[💻 Develop login feature]@{ ticket: 103 }
218-
121+
n22@{ shape: h-cyl }
122+
n00 --> n11
123+
n00 --> n22
124+
n11 --> n22
219125
</pre>
220126
<pre id="diagram4" class="mermaid2">
221127
flowchart LR

Diff for: ‎packages/mermaid-layout-elk/src/render.ts

+14-15
Original file line numberDiff line numberDiff line change
@@ -484,8 +484,6 @@ export const render = async (
484484
const r3 = a1 * q1.x + b1 * q1.y + c1;
485485
const r4 = a1 * q2.x + b1 * q2.y + c1;
486486

487-
const epsilon = 1e-6;
488-
489487
// Check signs of r3 and r4. If both point 3 and point 4 lie on
490488
// same side of line 1, the line segments do not intersect.
491489
if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
@@ -504,7 +502,7 @@ export const render = async (
504502
// Check signs of r1 and r2. If both point 1 and point 2 lie
505503
// on same side of second line segment, the line segments do
506504
// not intersect.
507-
if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
505+
if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
508506
return /*DON'T_INTERSECT*/;
509507
}
510508

@@ -549,11 +547,11 @@ export const render = async (
549547
{ x: x1 - w / 2, y: y1 },
550548
];
551549
log.debug(
552-
`APA16 diamondIntersection calc abc89:
550+
`UIO diamondIntersection calc abc89:
553551
outsidePoint: ${JSON.stringify(outsidePoint)}
554552
insidePoint : ${JSON.stringify(insidePoint)}
555-
node-bounds : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
556-
JSON.stringify(polyPoints)
553+
node : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
554+
polyPoints
557555
);
558556

559557
const intersections = [];
@@ -566,17 +564,17 @@ export const render = async (
566564
minY = Math.min(minY, entry.y);
567565
});
568566

569-
const left = x1 - w / 2 - minX;
570-
const top = y1 - h / 2 - minY;
567+
// const left = x1 - w / 2;
568+
// const top = y1 + h / 2;
571569

572570
for (let i = 0; i < polyPoints.length; i++) {
573571
const p1 = polyPoints[i];
574572
const p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
575573
const intersect = intersectLine(
576574
bounds,
577575
outsidePoint,
578-
{ x: left + p1.x, y: top + p1.y },
579-
{ x: left + p2.x, y: top + p2.y }
576+
{ x: p1.x, y: p1.y },
577+
{ x: p2.x, y: p2.y }
580578
);
581579

582580
if (intersect) {
@@ -755,6 +753,7 @@ export const render = async (
755753
}
756754
}
757755
});
756+
log.debug('returning points', points);
758757
return points;
759758
};
760759

@@ -969,17 +968,17 @@ export const render = async (
969968
startNode.innerHTML
970969
);
971970
}
972-
if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
971+
if (startNode.shape === 'diamond') {
973972
edge.points.unshift({
974973
x: startNode.x + startNode.width / 2 + offset.x,
975974
y: startNode.y + startNode.height / 2 + offset.y,
976975
});
977976
}
978-
if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
977+
if (endNode.shape === 'diamond') {
979978
const x = endNode.x + endNode.width / 2 + offset.x;
980979
// Add a point at the center of the diamond
981980
if (
982-
Math.abs(edge.points[edge.points.length - 1].y - endNode.y - offset.y) > 0.01 ||
981+
Math.abs(edge.points[edge.points.length - 1].y - endNode.y - offset.y) > 0.001 ||
983982
Math.abs(edge.points[edge.points.length - 1].x - x) > 0.001
984983
) {
985984
edge.points.push({
@@ -998,7 +997,7 @@ export const render = async (
998997
height: startNode.height,
999998
padding: startNode.padding,
1000999
},
1001-
startNode.shape === 'diamond' || startNode.shape === 'diam'
1000+
startNode.shape === 'diamond'
10021001
).reverse();
10031002

10041003
edge.points = cutPathAtIntersect(
@@ -1010,7 +1009,7 @@ export const render = async (
10101009
height: endNode.height,
10111010
padding: endNode.padding,
10121011
},
1013-
endNode.shape === 'diamond' || endNode.shape === 'diam'
1012+
endNode.shape === 'diamond'
10141013
);
10151014

10161015
const paths = insertEdge(

0 commit comments

Comments
 (0)