refactor(nc-gui): replace initial transition and with fit view

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

@@ -24,8 +24,6 @@ const { metasWithIdAsKey } = useMetas()
 
 const { $destroy, fitView } = useVueFlow()
 
-const isTransitioning = ref(true)
-
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
 
@@ -179,57 +177,49 @@ const layoutNodes = () => {
   })
 }
 
-const init = (reset = false) => {
+const init = () => {
   initDagre()
   populateInitialNodes()
   populateEdges()
   layoutNodes()
 
-  if (reset) {
+  setTimeout(() => fitView({ duration: 300 }))
-    setTimeout(() => fitView({ duration: 300 }))
-  }
 }
 
 init()
 
 onScopeDispose($destroy)
 
-watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre' })
+watch([() => tables, () => config], init, { deep: true, flush: 'pre' })
-
-useEventListener('transitionend', () => {
-  isTransitioning.value = false
-})
 </script>
 
 <template>
-  <Transition name="layout" mode="out-in">
+  <VueFlow :nodes="nodes" :edges="edges" elevate-edges-on-select>
-    <VueFlow v-if="!isTransitioning" :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
+    <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
-      <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
+
-
+    <template #node-custom="props">
-      <template #node-custom="props">
+      <TableNode :data="props.data" />
-        <TableNode :data="props.data" />
+    </template>
-      </template>
+
-
+    <template #edge-custom="props">
-      <template #edge-custom="props">
+      <RelationEdge v-bind="props" />
-        <RelationEdge v-bind="props" />
+    </template>
-      </template>
+
-
+    <Background />
-      <Background />
+
-
+    <div
-      <div
+      v-if="!config.singleTableMode"
-        v-if="!config.singleTableMode"
+      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
-        class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
+      style="font-size: 0.6rem"
-        style="font-size: 0.6rem"
+    >
-      >
+      <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
-        <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
+        <MdiTableLarge class="text-primary" />
-          <MdiTableLarge class="text-primary" />
+        <div>{{ $t('objects.table') }}</div>
-          <div>{{ $t('objects.table') }}</div>
+      </div>
-        </div>
+      <div class="flex flex-row items-center space-x-1 pt-1">
-        <div class="flex flex-row items-center space-x-1 pt-1">
+        <MdiEyeCircleOutline class="text-primary" />
-          <MdiEyeCircleOutline class="text-primary" />
+        <div>{{ $t('objects.sqlVIew') }}</div>
-          <div>{{ $t('objects.sqlVIew') }}</div>
-        </div>
       </div>
-    </VueFlow>
+    </div>
-  </Transition>
+  </VueFlow>
 </template>