fixed edge direction issue

utmgdsc · Oct 24, 2024 · 8ab5aaa · 8ab5aaa
1 parent ca9b077
commit 8ab5aaa
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/client/src/pages/CustomMarkers.tsx b/client/src/pages/CustomMarkers.tsx
@@ -2,29 +2,28 @@
 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 */}
       <marker
         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
@@ -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}