refactor(nc-gui): remove edge colors and set marker color

packages/nc-gui/components/erd/Flow.vue

@@ -34,21 +34,17 @@ function zoomIn() {
 
 onPaneReady(init)
 
-watch(tables, init, { flush: 'post' })
-watch(
-  showSkeleton,
-  (isSkeleton) => {
-    layout(isSkeleton)
-    setTimeout(() => {
-      fitView({
-        duration: 300,
-        minZoom: isSkeleton ? undefined : viewport.value.zoom,
-        maxZoom: isSkeleton ? viewport.value.zoom : undefined,
-      })
-    }, 100)
-  },
-  { flush: 'post' },
-)
+watch(tables, init)
+watch(showSkeleton, (isSkeleton) => {
+  layout(isSkeleton)
+  setTimeout(() => {
+    fitView({
+      duration: 300,
+      minZoom: isSkeleton ? undefined : viewport.value.zoom,
+      maxZoom: isSkeleton ? viewport.value.zoom : undefined,
+    })
+  }, 100)
+})
 
 onScopeDispose($destroy)
 </script>

packages/nc-gui/components/erd/RelationEdge.vue

@@ -16,18 +16,22 @@ interface RelationEdgeProps extends EdgeProps {
     isManyToMany: boolean
     isSelfRelation: boolean
     label: string
+    color: string
   }
   style: CSSProperties
   selected?: boolean
   showSkeleton: boolean
   markerEnd: string
+  events: EdgeProps['events']
 }
 
 const props = defineProps<RelationEdgeProps>()
 
+const baseStroke = 2
+
 const data = toRef(props, 'data')
 
-const baseStroke = 2
+const isHovering = ref(false)
 
 const edgePath = computed(() => {
   if (data.value.isSelfRelation) {
@@ -39,6 +43,14 @@ const edgePath = computed(() => {
 
   return getBezierPath({ ...props })
 })
+
+props.events?.mouseEnter?.(() => {
+  isHovering.value = true
+})
+
+props.events?.mouseLeave?.(() => {
+  isHovering.value = false
+})
 </script>
 
 <script lang="ts">
@@ -60,7 +72,7 @@ export default {
 
   <path
     :id="id"
-    class="opacity-100 hover:(opacity-0)"
+    class="opacity-100 hover:(opacity-0) stroke-slate-500"
     :class="selected ? 'opacity-0' : ''"
     :style="style"
     :stroke-width="showSkeleton ? baseStroke * 4 : baseStroke"
@@ -68,28 +80,34 @@ export default {
     :d="edgePath[0]"
     :marker-end="showSkeleton ? markerEnd : ''"
   />
+
   <path
     class="opacity-0 hover:(opacity-100 transition-all duration-100 ease)"
     :class="selected ? 'opacity-100' : ''"
     style="stroke: url(#linear-gradient)"
-    :stroke-width="showSkeleton ? baseStroke * 8 : 7"
+    :stroke-width="(showSkeleton ? baseStroke * 12 : baseStroke * 8) / (isHovering || selected ? 2 : 1)"
     fill="none"
     :d="edgePath[0]"
     :marker-end="showSkeleton ? markerEnd : ''"
   />
 
-  <EdgeText
-    v-if="data.label?.length > 0"
-    :class="`nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
-    :x="edgePath[1]"
-    :y="edgePath[2]"
-    :label="data.label"
-    :label-style="{ fill: 'white' }"
-    :label-show-bg="true"
-    :label-bg-style="{ fill: '#10b981' }"
-    :label-bg-padding="[2, 4]"
-    :label-bg-border-radius="2"
-  />
+  <path class="opacity-0" :stroke-width="showSkeleton ? baseStroke * 12 : baseStroke * 8" fill="none" :d="edgePath[0]" />
+
+  <Transition name="layout">
+    <EdgeText
+      v-if="data.label?.length > 0 && isHovering"
+      :key="`edge-text-${id}.${showSkeleton}`"
+      :class="`nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
+      :x="edgePath[1]"
+      :y="edgePath[2]"
+      :label="data.label"
+      :label-style="{ fill: 'white', fontSize: `${showSkeleton ? baseStroke * 2 : baseStroke / 2}rem` }"
+      :label-show-bg="true"
+      :label-bg-style="{ fill: data.color }"
+      :label-bg-padding="[8, 6]"
+      :label-bg-border-radius="2"
+    />
+  </Transition>
 
   <template v-if="!showSkeleton">
     <rect

packages/nc-gui/components/erd/TableNode.vue

@@ -56,7 +56,7 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
         class="text-slate-600 text-md py-2 border-slate-500 rounded-t-lg w-full h-full px-3 font-semibold flex items-center"
       >
         <MdiTableLarge v-if="data.type === 'table'" class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
-        <MdiEyeCircleOutline v-else class="text-primary" />
+        <MdiEyeCircleOutline v-else class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
 
         <div :class="showSkeleton ? 'text-6xl' : ''" class="flex px-2">
           {{ data.title }}

packages/nc-gui/components/erd/utils.ts

@@ -1,10 +1,11 @@
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
-import type { Edge, Elements } from '@vue-flow/core'
+import type { Edge, EdgeMarker, Elements } from '@vue-flow/core'
 import type { MaybeRef } from '@vueuse/core'
 import { MarkerType, Position, isEdge, isNode } from '@vue-flow/core'
 import { scaleLinear as d3ScaleLinear } from 'd3-scale'
+import tinycolor from 'tinycolor2'
 import { computed, ref, unref, useMetas, useTheme } from '#imports'
 
 export interface ErdFlowConfig {
@@ -160,18 +161,26 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
         sourceHandle: `s-${sourceColumnId}-${source}`,
         targetHandle: `d-${targetColumnId}-${target}`,
         type: 'custom',
-        markerEnd: MarkerType.ArrowClosed,
+        markerEnd: {
+          id: 'arrow-colored',
+          type: MarkerType.ArrowClosed,
+        },
         data: {
           isManyToMany: type === 'mm',
           isSelfRelation: source === target && sourceColumnId === targetColumnId,
           label: edgeLabel,
         },
-      })
+      } as Edge)
 
       return acc
     }, [])
   }
 
+  const boxShadow = (skeleton: boolean, color: string) => ({
+    border: 'none !important',
+    boxShadow: `0 0 0 ${skeleton ? '12' : '2'}px ${color}`,
+  })
+
   function connectNonConnectedNodes() {
     const connectedNodes = new Set<string>()
 
@@ -213,7 +222,7 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
     elements.value.forEach((el) => {
       if (isNode(el)) {
         dagreGraph.setNode(el.id, {
-          width: skeleton ? nodeWidth * 2 : nodeWidth,
+          width: skeleton ? nodeWidth * 2.5 : nodeWidth,
           height: nodeHeight + (skeleton ? 250 : nodeHeight * el.data.columnLength),
         })
       } else if (isEdge(el)) {
@@ -237,11 +246,20 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
         el.position = { x: nodeWithPosition.x, y: nodeWithPosition.y }
         el.class = ['rounded-lg'].join(' ')
         el.data.color = color
-        el.style = { boxShadow: `0 0 0 ${skeleton ? '15px' : '2px'} ${color}` }
+
+        el.style = (n) => {
+          if (n.selected) {
+            return boxShadow(skeleton, color)
+          }
+
+          return boxShadow(skeleton, '#64748B')
+        }
       } else if (isEdge(el)) {
         const node = elements.value.find((nodes) => nodes.id === el.source)
         if (node) {
-          el.style = { stroke: node.data.color }
+          const color = node.data.color
+          el.data.color = color
+          ;(el.markerEnd as EdgeMarker).color = skeleton ? `#${tinycolor(color).toHex()}` : undefined
         }
       }
     })