diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index b8174f323..896096ff5 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -91,8 +91,8 @@
---
config:
- look: handdrawn
-
+ look: neo
+ layout: elk
---
flowchart LR
n1["n1"] --- C
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 0405947bc..99bcaf7aa 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -883,7 +883,6 @@ export const render = async (
// Iterate through all nodes and add the top level nodes to the graph
const nodes = data4Layout.nodes;
- const count = 3;
nodes.forEach((n: { id: string | number }) => {
const node = nodeDb[n.id];
@@ -920,29 +919,6 @@ export const render = async (
delete node.width;
delete node.height;
}
- if (node.id === 'A' || node.id === 'E') {
- node.layoutOptions = {
- ...node.layoutOptions,
- 'partitioning.partition': 1,
- };
- node.x = 0;
- }
- if (node.id === 'B') {
- node.layoutOptions = {
- ...node.layoutOptions,
- 'partitioning.partition': 2,
- };
- node.x = 300;
- }
- if (node.id === 'C' || node.id === 'D' || node.id === 'F') {
- node.layoutOptions = {
- ...node.layoutOptions,
- 'partitioning.partition': 3,
- };
- node.x = 800;
- }
- // count = count - 1;
- // console.log('APA13 node partition node id=', node.id, 'count = ', count);
});
elkGraph.edges.forEach((edge: any) => {
const source = edge.sources[0];
@@ -955,10 +931,7 @@ export const render = async (
setIncludeChildrenPolicy(target, ancestorId);
}
});
- const copy = JSON.parse(JSON.stringify({ ...elkGraph }));
- console.log('APA13 layout before', JSON.stringify({ ...elkGraph }));
const g = await elk.layout(elkGraph);
- console.log('APA13 layout', JSON.parse(JSON.stringify(g)));
// debugger;
await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
g.edges?.map(
@@ -1045,7 +1018,10 @@ export const render = async (
startNode.innerHTML
);
}
- if (startNode.calcIntersect) {
+ if (startNode.intersect) {
+ // Remove the first point of the edge points
+ edge.points.shift();
+
// console.log(
// 'APA13 calculating start intersection start node',
// startNode.id,
@@ -1058,7 +1034,7 @@ export const render = async (
// '\nPos',
// edge.points[0]
// );
- const intersection = startNode.calcIntersect(
+ const intersection2 = startNode.calcIntersect(
{
x: startNode.offset.posX + startNode.width / 2,
y: startNode.offset.posY + startNode.height / 2,
@@ -1067,14 +1043,16 @@ export const render = async (
},
edge.points[0]
);
- // const intersection = startNode.intersect(edge.points[0]);
+ const intersection = startNode.intersect(edge.points[0]);
- if (distance(intersection, edge.points[0]) > epsilon) {
- edge.points.unshift(intersection);
+ if (distance(intersection2, edge.points[0]) > epsilon) {
+ edge.points.unshift(intersection2);
}
}
- if (endNode.calcIntersect) {
- const intersection = endNode.calcIntersect(
+ if (endNode.intersect) {
+ // Remove the last point of the edge points
+ edge.points.pop();
+ const intersection2 = endNode.calcIntersect(
{
x: endNode.offset.posX + endNode.width / 2,
y: endNode.offset.posY + endNode.height / 2,
@@ -1084,7 +1062,7 @@ export const render = async (
edge.points[edge.points.length - 1]
);
console.log('APA13 intersection2', endNode);
- const intersection2 = endNode.intersect(edge.points[edge.points.length - 1]);
+ const intersection = endNode.intersect(edge.points[edge.points.length - 1]);
// if (edge.id === 'L_n4_C_10_0') {
// console.log('APA14 lineData', edge.points, 'intersection:', intersection);
// console.log(
@@ -1092,16 +1070,14 @@ export const render = async (
// distance(intersection, edge.points[edge.points.length - 1])
// );
// }
+ console.log('APA13 intersection2.2', intersection, intersection2);
- if (distance(intersection, edge.points[edge.points.length - 1]) > epsilon) {
+ if (distance(intersection2, edge.points[edge.points.length - 1]) > epsilon) {
// console.log('APA13! distance ok\nintersection:', intersection);
- edge.points.push(intersection);
+ edge.points.push(intersection2);
// console.log('APA13! distance ok\npoints:', edge.points);
}
}
- // Add coordinates of the start node and end node to the edge points as insert edge will remove those
- edge.points.unshift({ x: endNode.x, y: endNode.y });
- edge.points.push({ x: endNode.x, y: endNode.y });
const paths = insertEdge(
edgesEl,
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
index c117fe6c2..f6bdac2f2 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -305,6 +305,7 @@ export const render = async (data4Layout, svg) => {
log.debug('Edges:', data4Layout.edges);
data4Layout.edges.forEach((edge) => {
+ edge.trim = true;
// Handle self-loops
if (edge.start === edge.end) {
const nodeId = edge.start;
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
index 145424e48..fce711821 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
@@ -380,18 +380,20 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
};
}
}
-
+ // ###############################################################
+ // Edge trimming - this could affect Collab!!!
+ // ###############################################################
+ // we can remove the edge trimming if we want
+ // if we don't set trim to true this will not happen and we dont need to add the start and end positions
+ // to the edge
+ edge.trim = true;
edge.points = positions.edges[edge.id].points;
+
const paths = insertEdge(edgePaths, edge, {}, data4Layout.type, {}, {}, data4Layout.diagramId);
paths.updatedPath = paths.originalPath;
positionEdgeLabel(edge, paths);
}
- if (window) {
- // TODO: Remove this now that we can do:
- // import { calcIntersections, calcNodeIntersections } from '@mermaid-chart/mermaid';
- window.calcIntersections = calcIntersections;
- window.calcNodeIntersections = calcNodeIntersections;
- }
+
return { elem, diff: 0 };
};
/**
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 946150c8b..4865d553b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -370,8 +370,8 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
}
edgeClassStyles.push(edge.cssCompiledStyles[key]);
}
-
- if (head.intersect && tail.intersect) {
+ console.log('APA13 edge.trim', edge.trim);
+ if (head.intersect && tail.intersect && edge.trim) {
points = points.slice(1, edge.points.length - 1);
points.unshift(tail.intersect(points[0]));
log.debug(
@@ -460,8 +460,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
let svgPath;
let linePath =
edge.curve === 'rounded'
- ? // ? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 5)
- generateRoundedPath(lineData, 5)
+ ? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 5)
: lineFunction(lineData);
const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
let animatedEdge = false;