|
|
@ -24,8 +24,6 @@ const { metasWithIdAsKey } = useMetas() |
|
|
|
|
|
|
|
|
|
|
|
const { $destroy, fitView } = useVueFlow() |
|
|
|
const { $destroy, fitView } = useVueFlow() |
|
|
|
|
|
|
|
|
|
|
|
const isTransitioning = ref(true) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const nodes = ref<Node[]>([]) |
|
|
|
const nodes = ref<Node[]>([]) |
|
|
|
const edges = ref<Edge[]>([]) |
|
|
|
const edges = ref<Edge[]>([]) |
|
|
|
|
|
|
|
|
|
|
@ -179,57 +177,49 @@ const layoutNodes = () => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const init = (reset = false) => { |
|
|
|
const init = () => { |
|
|
|
initDagre() |
|
|
|
initDagre() |
|
|
|
populateInitialNodes() |
|
|
|
populateInitialNodes() |
|
|
|
populateEdges() |
|
|
|
populateEdges() |
|
|
|
layoutNodes() |
|
|
|
layoutNodes() |
|
|
|
|
|
|
|
|
|
|
|
if (reset) { |
|
|
|
setTimeout(() => fitView({ duration: 300 })) |
|
|
|
setTimeout(() => fitView({ duration: 300 })) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
init() |
|
|
|
init() |
|
|
|
|
|
|
|
|
|
|
|
onScopeDispose($destroy) |
|
|
|
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> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
</VueFlow> |
|
|
|
</div> |
|
|
|
</Transition> |
|
|
|
</VueFlow> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|