diff --git a/packages/nc-gui/components/erd/Flow.vue b/packages/nc-gui/components/erd/Flow.vue index 8e7611c9d0..bca1db9966 100644 --- a/packages/nc-gui/components/erd/Flow.vue +++ b/packages/nc-gui/components/erd/Flow.vue @@ -15,7 +15,7 @@ const props = defineProps() const { tables, config } = toRefs(props) -const { $destroy, fitView, onPaneReady, viewport } = useVueFlow({ minZoom: 0.1, maxZoom: 2 }) +const { $destroy, fitView, onPaneReady, viewport, onNodeDoubleClick } = useVueFlow({ minZoom: 0.1, maxZoom: 2 }) const { layout, elements } = useErdElements(tables, config) @@ -28,12 +28,20 @@ function init() { } } -function zoomIn() { - fitView({ duration: 300, minZoom: 0.3 }) +function zoomIn(nodeId?: string) { + fitView({ nodes: nodeId ? [nodeId] : undefined, duration: 300, minZoom: 0.4 }) } onPaneReady(init) +onNodeDoubleClick(({ node }) => { + if (showSkeleton.value) zoomIn() + + setTimeout(() => { + zoomIn(node.id) + }, 250) +}) + watch(tables, init) watch(showSkeleton, (isSkeleton) => { layout(isSkeleton)