|
|
|
@ -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> |
|
|
|
|