Browse Source

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

pull/3612/head
braks 2 years ago committed by Muhammed Mustafa
parent
commit
46c1e83f19
  1. 16
      packages/nc-gui/components/erd/SimpleView.vue

16
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,31 +177,24 @@ const layoutNodes = () => {
})
}
const init = (reset = false) => {
const init = () => {
initDagre()
populateInitialNodes()
populateEdges()
layoutNodes()
if (reset) {
setTimeout(() => fitView({ duration: 300 }))
}
}
init()
onScopeDispose($destroy)
watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre' })
useEventListener('transitionend', () => {
isTransitioning.value = false
})
watch([() => tables, () => config], init, { deep: true, flush: 'pre' })
</script>
<template>
<Transition name="layout" mode="out-in">
<VueFlow v-if="!isTransitioning" :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
<VueFlow :nodes="nodes" :edges="edges" 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">
@ -231,5 +222,4 @@ useEventListener('transitionend', () => {
</div>
</div>
</VueFlow>
</Transition>
</template>

Loading…
Cancel
Save