From a65fb3b9794c5d07bae48e1082cd1e6fdaa7e8b6 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 1 Mar 2023 13:38:26 +0100
Subject: [PATCH] #4168 Adding the correct offset for the edges

---
 packages/mermaid/package.json                     |  2 +-
 .../diagrams/flowchart/elk/flowRenderer-elk.js    | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 248092f6e2..4606ad57e5 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.0.1-rc.3",
+  "version": "10.0.1-rc.4",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 0a92af1b3d..426d22dbbc 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -371,6 +371,10 @@ const getEdgeStartEndPoint = (edge, dir) => {
   let source = edge.start;
   let target = edge.end;
 
+  // Save the original source and target
+  const sourceId = source;
+  const targetId = target;
+
   const startNode = nodeDb[source];
   const endNode = nodeDb[target];
 
@@ -387,7 +391,7 @@ const getEdgeStartEndPoint = (edge, dir) => {
   }
 
   // Add the edge to the graph
-  return { source, target };
+  return { source, target, sourceId, targetId };
 };
 
 /**
@@ -530,14 +534,17 @@ export const addEdges = function (edges, diagObj, graph, svg) {
 
     const labelEl = insertEdgeLabel(labelsEl, edgeData);
 
-    // calculate start and end points of the edge
-    const { source, target } = getEdgeStartEndPoint(edge, dir);
+    // calculate start and end points of the edge, note that the source and target
+    // can be modified for shapes that have ports
+    const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
     log.debug('abc78 source and target', source, target);
     // Add the edge to the graph
     graph.edges.push({
       id: 'e' + edge.start + edge.end,
       sources: [source],
       targets: [target],
+      sourceId,
+      targetId,
       labelEl: labelEl,
       labels: [
         {
@@ -698,7 +705,7 @@ const calcOffset = function (src, dest, parentLookupDb) {
 };
 
 const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) {
-  const offset = calcOffset(edge.sources[0], edge.targets[0], parentLookupDb);
+  const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb);
 
   const src = edge.sections[0].startPoint;
   const dest = edge.sections[0].endPoint;