feat(nc-gui): set edge marker type for skeleton mode

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

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