refactor(nc-gui): switch to basic styles for edges in skeleton mode

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

@@ -24,12 +24,14 @@ const showSkeleton = computed(() => viewport.value.zoom < 0.25)
 function init() {
   layout(showSkeleton.value)
   if (!showSkeleton.value) {
-    setTimeout(() => {
-      fitView({ duration: 300 })
-    }, 100)
+    setTimeout(zoomIn, 100)
   }
 }
 
+function zoomIn() {
+  fitView({ duration: 300, minZoom: 0.3 })
+}
+
 onPaneReady(init)
 
 watch(tables, init, { flush: 'post' })
@@ -48,10 +50,6 @@ watch(
   { flush: 'post' },
 )
 
-const zoomIn = () => {
-  fitView({ duration: 300, minZoom: 0.3 })
-}
-
 onScopeDispose($destroy)
 </script>
 

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

@@ -27,22 +27,17 @@ const props = defineProps<RelationEdgeProps>()
 
 const data = toRef(props, 'data')
 
+const baseStroke = 2
+
 const edgePath = computed(() => {
   if (data.value.isSelfRelation) {
     const { sourceX, sourceY, targetX, targetY } = props
     const radiusX = (sourceX - targetX) * 0.6
     const radiusY = 50
-    return `M ${sourceX} ${sourceY} A ${radiusX} ${radiusY} 0 1 0 ${targetX} ${targetY}`
+    return [`M ${sourceX} ${sourceY} A ${radiusX} ${radiusY} 0 1 0 ${targetX} ${targetY}`]
   }
 
-  return getBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  })
+  return getBezierPath({ ...props })
 })
 </script>
 
@@ -68,7 +63,7 @@ export default {
     class="opacity-100 hover:(opacity-0)"
     :class="selected ? 'opacity-0' : ''"
     :style="style"
-    :stroke-width="2"
+    :stroke-width="showSkeleton ? baseStroke * 4 : baseStroke"
     fill="none"
     :d="edgePath[0]"
     :marker-end="showSkeleton ? markerEnd : ''"
@@ -77,7 +72,7 @@ export default {
     class="opacity-0 hover:(opacity-100 transition-all duration-100 ease)"
     :class="selected ? 'opacity-100' : ''"
     style="stroke: url(#linear-gradient)"
-    :stroke-width="7"
+    :stroke-width="showSkeleton ? baseStroke * 8 : 7"
     fill="none"
     :d="edgePath[0]"
     :marker-end="showSkeleton ? markerEnd : ''"
@@ -96,29 +91,31 @@ export default {
     :label-bg-border-radius="2"
   />
 
-  <rect
-    class="nc-erd-edge-rect"
-    :x="sourceX"
-    :y="sourceY - 4"
-    width="8"
-    height="8"
-    fill="#fff"
-    stroke="#6F3381"
-    :stroke-width="1.5"
-    :transform="`rotate(45,${sourceX + 2},${sourceY - 4})`"
-  />
+  <template v-if="!showSkeleton">
+    <rect
+      class="nc-erd-edge-rect"
+      :x="sourceX"
+      :y="sourceY - 4"
+      :width="8"
+      :height="8"
+      fill="#fff"
+      stroke="#6F3381"
+      :stroke-width="2"
+      :transform="`rotate(45,${sourceX + 2},${sourceY - 4})`"
+    />
 
-  <rect
-    v-if="data.isManyToMany"
-    class="nc-erd-edge-rect"
-    :x="targetX"
-    :y="targetY - 4"
-    width="8"
-    height="8"
-    fill="#fff"
-    stroke="#6F3381"
-    :stroke-width="1.5"
-    :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="1.5" />
+    <rect
+      v-if="data.isManyToMany"
+      class="nc-erd-edge-rect"
+      :x="targetX"
+      :y="targetY - 4"
+      :width="8"
+      :height="8"
+      fill="#fff"
+      stroke="#6F3381"
+      :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" />
+  </template>
 </template>