From 8ab5aaa0709501cd55fc7f051fd3e8a5ef2be266 Mon Sep 17 00:00:00 2001
From: Harsimar Singh <harsimar985@gmail.com>
Date: Wed, 23 Oct 2024 20:01:26 -0400
Subject: [PATCH] fixed edge direction issue

---
 client/src/pages/CustomMarkers.tsx | 17 ++++++++---------
 client/src/pages/Editor.tsx        |  4 +++-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/src/pages/CustomMarkers.tsx b/client/src/pages/CustomMarkers.tsx
index 82a58fb..21f750c 100644
--- a/client/src/pages/CustomMarkers.tsx
+++ b/client/src/pages/CustomMarkers.tsx
@@ -2,21 +2,20 @@
 import React from 'react';
 
 const CustomMarkers = () => (
-<svg width="1" height="1" style={{ position: 'absolute', overflow: 'hidden' }}>
-
+  <svg width="1" height="1" style={{ position: 'absolute', overflow: 'hidden' }}>
     <defs>
       {/* Empty Arrow Marker */}
       <marker
-      id="emptyArrow"
+        id="emptyArrow"
         markerWidth="10"
         markerHeight="10"
-        refX="9"
+        refX="0"    // Position at the start
         refY="3"
         orient="auto"
         markerUnits="strokeWidth"  // Ensures size scales with edge thickness
-        fill = "none"
+        fill="none"
       >
-        <path d="M0,0 L0,6 L9,3 Z" fill="none" stroke="black" strokeWidth="1" />
+        <path d="M9,0 L0,3 L9,6 Z" fill="none" stroke="black" strokeWidth="1" />
       </marker>
 
       {/* Diamond Marker */}
@@ -24,7 +23,7 @@ const CustomMarkers = () => (
         id="diamond"
         markerWidth="12"
         markerHeight="12"
-        refX="10"
+        refX="0"    // Position at the start
         refY="6"
         orient="auto"
         markerUnits="strokeWidth"
@@ -37,12 +36,12 @@ const CustomMarkers = () => (
         id="filledArrow"
         markerWidth="10"
         markerHeight="10"
-        refX="9"
+        refX="0"    // Position at the start
         refY="3"
         orient="auto"
         markerUnits="strokeWidth"
       >
-        <path d="M0,0 L0,6 L9,3 Z" fill="black" />
+        <path d="M9,0 L0,3 L9,6 Z" fill="black" />
       </marker>
     </defs>
   </svg>
diff --git a/client/src/pages/Editor.tsx b/client/src/pages/Editor.tsx
index b9cb692..7fb76e5 100644
--- a/client/src/pages/Editor.tsx
+++ b/client/src/pages/Editor.tsx
@@ -500,8 +500,10 @@ const UMLDiagramEditor = ({ problemId }) => {
                 edge.data?.edgeType === "Implementation" ? "5, 5" : "0",
               strokeDashoffset: 100,
             },
-            markerEnd: markerId, // Use markerId here
+            markerStart: markerId, // Use markerId for the start (source)
+            markerEnd: undefined, // Use markerId here
           };
+          
         })}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}