diff --git a/cypress/platform/knsv-pos.html b/cypress/platform/knsv-pos.html
index a39b2fd2d..34499a958 100644
--- a/cypress/platform/knsv-pos.html
+++ b/cypress/platform/knsv-pos.html
@@ -119,30 +119,24 @@
A
S --> T: angrepp
- T --> U: Apa
- T --> V: Varg
+ T --> U
+ T --> V
C
D
E
`;
- // code = `
- // stateDiagram
- // A0
- // state subbe {
- // subState
- // B
- // }
- // C
- // D
- // E
- // `;
+ code = `
+ stateDiagram
+ T --> U
+ T --> V
+ `;
let positions = {
nodes: {
S: { x: 0, y: 0 },
T: { x: 100, y: 100, width: 100, height: 100 },
- U: { x: 250, y: 160 },
+ U: { x: 250, y: 260 },
V: { x: 300, y: 120 },
Z: { x: 300, y: 10, width: 160, height: 100 },
X: { x: 300, y: 20, width: 80, height: 60 },
@@ -167,7 +161,7 @@
{ x: 150, y: 120 },
{ x: 190.19453144073486, y: 120 },
{ x: 190.19453144073486, y: 152.1556251525879 },
- { x: 230.38906288146973, y: 152.1556251525879 },
+ { x: 250, y: 152.1556251525879 },
{ x: 250, y: 160 },
],
},
@@ -182,11 +176,55 @@
},
};
- // positions = {
- // nodes: {},
- // edges: {},
- // };
+ positions = {
+ nodes: {
+ T: {
+ x: 37.964874267578125,
+ y: 24.99908971786499,
+ width: 38.10995101928711,
+ height: 25.998868942260742,
+ },
+ U: {
+ x: 31.61321258544922,
+ y: 85.99644947052002,
+ width: 39.22151184082031,
+ height: 25.998876571655273,
+ },
+ V: {
+ x: 105.83320808410645,
+ y: 85.99644947052002,
+ width: 39.22149658203125,
+ height: 25.998876571655273,
+ },
+ },
+ edges: {
+ edge0: {
+ points: [
+ // { x: 37.61160659790039, y: 24 },
+ { x: 31.61160659790039, y: 38 },
+ { x: 31.61160659790039, y: 55.5 },
+ { x: 31.61160659790039, y: 73 },
+ ],
+ },
+ edge1: {
+ points: [
+ // { x: 37.61160659790039, y: 24 },
+ { x: 44.31547546386719, y: 38 },
+ { x: 44.31547546386719, y: 51.5 },
+ { x: 45.487048339120996, y: 54.32842712474619 },
+ { x: 48.31547546386719, y: 55.5 },
+ { x: 101.83481979370117, y: 55.5 },
+ { x: 104.66324691844736, y: 56.67157287525381 },
+ { x: 105.83481979370117, y: 59.5 },
+ { x: 105.83481979370117, y: 66.25 },
+ { x: 105.83481979370117, y: 73 },
+ ],
+ },
+ },
+ };
+
+ // console.log('positions:', positions);
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
if (window?.calcIntersections) {
console.log(
diff --git a/cypress/platform/knsv-reset.html b/cypress/platform/knsv-reset.html
new file mode 100644
index 000000000..a9e653da0
--- /dev/null
+++ b/cypress/platform/knsv-reset.html
@@ -0,0 +1,306 @@
+
+
+
+---
+ title: hello2
+ config:
+ look: neo
+ layout: dagre
+ elk:
+ nodePlacementStrategy: BRANDES_KOEPF
+---
+flowchart
+ S
+ T
+ U
+ subgraph Z
+ subgraph X
+ Y[Ypsilon]
+ end
+ end
+ subgraph Q
+ Q1[Quintus]
+ end
+ A
+
+ S -- angrepp --> T
+ T -- Apa --> U
+ T -- Varge --> V
+ C
+ D
+ E
+
+
+
---
title: hello2
@@ -394,7 +427,7 @@ flowchart LR
-
+
flowchart TB
c1-->a2
subgraph one
@@ -432,7 +465,10 @@ flowchart TB
window.callback = function () {
alert('A callback was triggered');
};
- mermaid.initialize({
+ function callback() {
+ alert('It worked');
+ }
+ await mermaid.initialize({
// theme: 'base',
// handDrawnSeed: 12,
// look: 'handDrawn',
@@ -455,10 +491,9 @@ flowchart TB
fontSize: 12,
logLevel: 3,
securityLevel: 'loose',
+ callback,
});
- function callback() {
- alert('It worked');
- }
+
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
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 451583d85..8c059fcfc 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
@@ -15,18 +15,18 @@ import { getConfig } from '../../../diagram-api/diagramAPI.js';
let nodeDB = new Map();
-const fixInterSections = (points, startNodeId, endNodeId) => {
- const startNode = nodeDB.get(startNodeId);
- const endNode = nodeDB.get(endNodeId);
- // Get the intersections
- const startIntersection = startNode.intersect(points[1]);
- const endIntersection = endNode.intersect(points[points.length - 2]);
+// const fixInterSections = (points, startNodeId, endNodeId) => {
+// const startNode = nodeDB.get(startNodeId);
+// const endNode = nodeDB.get(endNodeId);
+// // Get the intersections
+// const startIntersection = startNode.intersect(points[1]);
+// const endIntersection = endNode.intersect(points[points.length - 2]);
- // Replace the first and last points with their respective intersections
- const fixedPoints = [startIntersection, ...points.slice(1, -1), endIntersection];
+// // Replace the first and last points with their respective intersections
+// const fixedPoints = [startIntersection, ...points.slice(1, -1), endIntersection];
- return fixedPoints;
-};
+// return points;
+// };
const calcIntersectionPoint = (node, point) => {
const intersection = node.intersect(point);
@@ -81,9 +81,9 @@ const calcIntersections = (startNodeId, endNodeId, startNodeSize, endNodeSize) =
const doRender = async (_elem, data4Layout, siteConfig, positions) => {
const elem = _elem.insert('g').attr('class', 'root');
elem.insert('g').attr('class', 'clusters');
+ const nodes = elem.insert('g').attr('class', 'nodes');
const edgePaths = elem.insert('g').attr('class', 'edgePaths');
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
- const nodes = elem.insert('g').attr('class', 'nodes');
if (!positions?.nodes || !positions?.edges) {
positions = {};
@@ -234,7 +234,8 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
],
};
}
- edge.points = fixInterSections(positions.edges[edge.id].points, edge.start, edge.end);
+ // edge.points = fixInterSections(positions.edges[edge.id].points, edge.start, edge.end);
+ edge.points = positions.edges[edge.id].points;
const paths = insertEdge(edgePaths, edge, {}, data4Layout.type, {}, {}, data4Layout.diagramId);
paths.updatedPath = paths.originalPath;
positionEdgeLabel(edge, paths);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 2b00e7486..ba7e596bd 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -376,14 +376,15 @@ const findAdjacentPoint = function (pointA, pointB, distance) {
const fixCorners = function (lineData) {
const { cornerPointPositions } = extractCornerPoints(lineData);
const newLineData = [];
+ const r = 4;
for (let i = 0; i < lineData.length; i++) {
if (cornerPointPositions.includes(i)) {
const prevPoint = lineData[i - 1];
const nextPoint = lineData[i + 1];
const cornerPoint = lineData[i];
- const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5);
- const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5);
+ const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, r);
+ const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, r);
const xDiff = newNextPoint.x - newPrevPoint.x;
const yDiff = newNextPoint.y - newPrevPoint.y;
@@ -397,7 +398,7 @@ const fixCorners = function (lineData) {
Math.abs(nextPoint.x - prevPoint.x),
Math.abs(nextPoint.y - prevPoint.y)
);
- const r = 5;
+
if (cornerPoint.x === newPrevPoint.x) {
newCornerPoint = {
x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
@@ -431,6 +432,8 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
const tail = startNode;
var head = endNode;
+ const pointsStr = btoa(JSON.stringify(points));
+
if (head.intersect && tail.intersect) {
points = points.slice(1, edge.points.length - 1);
points.unshift(tail.intersect(points[0]));
@@ -475,13 +478,16 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
lineData.splice(-1, 0, midPoint);
}
let curve = curveBasis;
+ // let curve = curveLinear;
+ // let curve = curveCardinal;
if (edge.curve) {
curve = edge.curve;
}
const { x, y } = getLineFunctionsWithOffset(edge);
const lineFunction = line().x(x).y(y).curve(curve);
-
+ // const pointsStr = btoa(JSON.stringify(lineData));
+ // console.log('Line data', lineData);
let strokeClasses;
switch (edge.thickness) {
case 'normal':
@@ -544,6 +550,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
svgPath.attr('data-edge', true);
svgPath.attr('data-et', 'edge');
svgPath.attr('data-id', edge.id);
+ svgPath.attr('data-points', pointsStr);
// DEBUG code, adds a red circle at each edge coordinate
// cornerPoints.forEach((point) => {
// elem
@@ -557,9 +564,9 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
// lineData.forEach((point) => {
// elem
// .append('circle')
- // .style('stroke', 'blue')
- // .style('fill', 'blue')
- // .attr('r', 3)
+ // .style('stroke', 'red')
+ // .style('fill', 'red')
+ // .attr('r', 1)
// .attr('cx', point.x)
// .attr('cy', point.y);
// });
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index b1ca2bca8..71eb93e25 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -53,7 +53,6 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
.attr('style', nodeStyles)
.attr('rx', rx)
.attr('data-id', node.id)
- .attr('data-et', 'node')
.attr('ry', ry)
.attr('x', x)
.attr('y', y)