From e28a7b4e740872a96add96489f430089aebb2dea Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 18 Oct 2022 09:13:42 +0200
Subject: [PATCH] chore(nc-gui): marker color

---
 packages/nc-gui/components/erd/RelationEdge.vue | 17 ++++++++++++++---
 packages/nc-gui/components/erd/utils.ts         |  3 ++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index c7a533180f..413049b4cb 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -19,6 +19,8 @@ interface RelationEdgeProps extends EdgeProps<EdgeData> {
   showSkeleton: boolean
   markerEnd: string
   events: EdgeProps['events']
+  sourceNode: EdgeProps['sourceNode']
+  targetNode: EdgeProps['targetNode']
 }
 
 const props = defineProps<RelationEdgeProps>()
@@ -119,7 +121,7 @@ export default {
       :width="8"
       :height="8"
       fill="#fff"
-      stroke="#6F3381"
+      :stroke="sourceNode.data.color"
       :stroke-width="2"
       :transform="`rotate(45,${sourceX + 2},${sourceY - 4})`"
     />
@@ -132,10 +134,19 @@ export default {
       :width="8"
       :height="8"
       fill="#fff"
-      stroke="#6F3381"
+      :stroke="sourceNode.data.color"
       :stroke-width="2"
       :transform="`rotate(45,${targetX + 2},${targetY - 4})`"
     />
-    <circle v-else class="nc-erd-edge-circle" :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="2" />
+    <circle
+      v-else
+      class="nc-erd-edge-circle"
+      :cx="targetX"
+      :cy="targetY"
+      fill="#fff"
+      :r="5"
+      :stroke="targetNode.data.color"
+      :stroke-width="2"
+    />
   </template>
 </template>
diff --git a/packages/nc-gui/components/erd/utils.ts b/packages/nc-gui/components/erd/utils.ts
index 68eb76464a..0b5ad04703 100644
--- a/packages/nc-gui/components/erd/utils.ts
+++ b/packages/nc-gui/components/erd/utils.ts
@@ -296,8 +296,9 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ER
         const node = elements.value.find((nodes) => nodes.id === el.source)
         if (node) {
           const color = node.data!.color
+
           el.data.color = color
-          ;(el.markerEnd as EdgeMarker).color = skeleton ? `#${tinycolor(color).toHex()}` : undefined
+          ;(el.markerEnd as EdgeMarker).color = `#${tinycolor(color).toHex()}`
         }
       }
     })