From c3dee740748a03e40a117f8eed217d7a6354b64d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 14 Oct 2022 16:14:36 +0200
Subject: [PATCH] feat(nc-gui): set edge marker type for skeleton mode

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

diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index 8f32cd14f1..0805bc5529 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -20,6 +20,7 @@ interface RelationEdgeProps extends EdgeProps {
   style: CSSProperties
   selected?: boolean
   showSkeleton: boolean
+  markerEnd: string
 }
 
 const props = defineProps<RelationEdgeProps>()
@@ -70,6 +71,7 @@ export default {
     :stroke-width="2"
     fill="none"
     :d="edgePath[0]"
+    :marker-end="showSkeleton ? markerEnd : ''"
   />
   <path
     class="opacity-0 hover:(opacity-100 transition-all duration-100 ease)"
@@ -78,6 +80,7 @@ export default {
     :stroke-width="7"
     fill="none"
     :d="edgePath[0]"
+    :marker-end="showSkeleton ? markerEnd : ''"
   />
 
   <EdgeText
diff --git a/packages/nc-gui/components/erd/utils.ts b/packages/nc-gui/components/erd/utils.ts
index bf58879bd1..4e4060bed7 100644
--- a/packages/nc-gui/components/erd/utils.ts
+++ b/packages/nc-gui/components/erd/utils.ts
@@ -3,7 +3,7 @@ import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
 import type { Edge, Elements } from '@vue-flow/core'
 import type { MaybeRef } from '@vueuse/core'
-import { Position, isEdge, isNode } from '@vue-flow/core'
+import { MarkerType, Position, isEdge, isNode } from '@vue-flow/core'
 import { scaleLinear as d3ScaleLinear } from 'd3-scale'
 import { computed, ref, unref, useMetas, useTheme } from '#imports'
 
@@ -160,6 +160,7 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
         sourceHandle: `s-${sourceColumnId}-${source}`,
         targetHandle: `d-${targetColumnId}-${target}`,
         type: 'custom',
+        markerEnd: MarkerType.ArrowClosed,
         data: {
           isManyToMany: type === 'mm',
           isSelfRelation: source === target && sourceColumnId === targetColumnId,
@@ -213,7 +214,7 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
       if (isNode(el)) {
         dagreGraph.setNode(el.id, {
           width: skeleton ? nodeWidth * 2 : nodeWidth,
-          height: nodeHeight + (skeleton ? 100 : nodeHeight * el.data.columnLength),
+          height: nodeHeight + (skeleton ? 250 : nodeHeight * el.data.columnLength),
         })
       } else if (isEdge(el)) {
         // avoid duplicate edges when using skeleton