From 7aa43a6611bcf57f16f5693f37fe9eae1745f1f7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 14 Oct 2022 19:43:55 +0200
Subject: [PATCH] feat(nc-gui): zoom to node on dbl click

---
 packages/nc-gui/components/erd/Flow.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

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<Props>()
 
 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)