chore(nc-gui): add transition to edge labels

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

@@ -92,29 +92,27 @@ export default {
 
   <path class="opacity-0" :stroke-width="showSkeleton ? baseStroke * 12 : baseStroke * 8" fill="none" :d="edgePath[0]" />
 
-  <Transition name="layout">
+  <EdgeLabelRenderer>
-    <EdgeLabelRenderer>
+    <div
-      <div
+      :style="{
-        :style="{
+        position: 'absolute',
-          position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${edgePath[1]}px,${edgePath[2]}px)`,
-          transform: `translate(-50%, -50%) translate(${edgePath[1]}px,${edgePath[2]}px)`,
+        color: 'white',
-          color: 'white',
+        fontSize: `${showSkeleton ? baseStroke * 2 : baseStroke / 2}rem`,
-          fontSize: `${showSkeleton ? baseStroke * 2 : baseStroke / 2}rem`,
+        backgroundColor: data.color,
-          backgroundColor: data.color,
+        borderRadius: '0.25rem',
-          borderRadius: '0.25rem',
+        padding: '0.25rem 0.5rem',
-          padding: '0.25rem 0.5rem',
+      }"
-        }"
+      class="nodrag nopan color-transition z-1000"
-        class="nodrag nopan"
+      :class="[
-        :class="[
+        selected || isHovering ? 'opacity-100' : 'opacity-0 !pointer-events-none',
-          selected || isHovering ? 'opacity-100 z-1000' : 'opacity-0 !pointer-events-none',
+        showSkeleton ? '!text-6xl' : '!text-xs',
-          showSkeleton ? '!text-6xl' : '!text-xs',
+        `nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`,
-          `nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`,
+      ]"
-        ]"
+    >
-      >
+      {{ showSkeleton ? data.simpleLabel : data.label }}
-        {{ showSkeleton ? data.simpleLabel : data.label }}
+    </div>
-      </div>
+  </EdgeLabelRenderer>
-    </EdgeLabelRenderer>
-  </Transition>
 
   <template v-if="!showSkeleton">
     <rect