refactor(nc-gui): cleanup simple view for erd

packages/nc-gui/assets/style.scss

@@ -249,3 +249,9 @@ a {
   transform: scale(75%);
   transform-origin: bottom right;
 }
+
+.nc-modal-erd {
+  .ant-modal {
+    transform: none !important;
+  }
+}

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[]>([])
 
@@ -180,9 +178,7 @@ const layoutNodes = () => {
 }
 
 const init = (reset = false) => {
-  if (reset) {
   initDagre()
-  }
   populateInitialNodes()
   populateEdges()
   layoutNodes()
@@ -192,22 +188,15 @@ const init = (reset = false) => {
   }
 }
 
-initDagre()
+init()
-
-onBeforeMount(init)
 
 onScopeDispose($destroy)
 
 watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre' })
-
-useEventListener('transitionend', () => {
-  isTransitioning.value = false
-})
 </script>
 
 <template>
-  <Transition name="layout" mode="in-out">
+  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init 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" />
 
     <template #node-custom="props">
@@ -235,5 +224,4 @@ useEventListener('transitionend', () => {
       </div>
     </div>
   </VueFlow>
-  </Transition>
 </template>

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

@@ -75,7 +75,7 @@ const relatedColumnId = (col: Record<string, any>) =>
       <div v-for="(col, index) in nonPkColumns" :key="col.title">
         <div
           class="w-full h-full flex items-center min-w-32 border-gray-100 py-2 px-1"
-          :class="index + 1 === nonPkColumns!.length ? 'rounded-b-lg' : 'border-b-1'"
+          :class="index + 1 === nonPkColumns.length ? 'rounded-b-lg' : 'border-b-1'"
         >
           <div
             v-if="col.uidt === UITypes.LinkToAnotherRecord"
@@ -88,6 +88,7 @@ const relatedColumnId = (col: Record<string, any>) =>
               type="source"
               :position="Position.Right"
             />
+
             <Handle
               :id="`d-${relatedColumnId(col)}-${data.id}`"
               class="-left-1 opacity-0"

packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue

@@ -245,7 +245,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 :deep(.ant-dropdown-menu-submenu-title) {
   @apply py-0;
 }