Merge pull request #539 from tapdata/feat/TAP-10595-dag

feat: implement node focus functionality to ensure selected nodes are…

Author: cn-xufei

packages/dag/src/EditorView.vue

@@ -139,7 +139,7 @@ function onClipboardPaste(plainTextData: string) {
 
 watch([() => dag.value.nodes.length, () => dag.value.edges.length], () => {
   if (isInitialized.value) {
-    dataflowStore.patchDataflowDebounce()
+    dataflowStore.patchDataflow()
   }
 })
 

packages/dag/src/components/NodesPanel.vue

@@ -9,6 +9,7 @@ import { debounce, escapeRegExp } from 'lodash-es'
 import { computed, inject, nextTick, reactive, ref, shallowRef } from 'vue'
 import { useCreateTable } from '../composables/useCreateTable'
 import { makeNode, makeProcessorNode, useDnD } from '../composables/useDnD'
+import { useNodeFocus } from '../composables/useNodeFocus'
 import { useDataflowStore } from '../stores/dataflow.store'
 import { useHistoryStore } from '../stores/history.store'
 import BaseNode from './BaseNode.vue'
@@ -251,6 +252,8 @@ useI18n()
 const { findNode, getOutgoers, screenToFlowCoordinate, viewportRef } =
   useVueFlow()
 
+const { focusNode } = useNodeFocus()
+
 const historyStore = useHistoryStore()
 
 const X_OFFSET = 100
@@ -434,6 +437,9 @@ const handleDblClickAddNode = (node: any) => {
   }
 
   historyStore.stopRecordingUndo()
+
+  // 选中新添加的节点并确保可见
+  focusNode(node.id)
 }
 
 const handleDblClickConnection = (item: any) => {

packages/dag/src/components/elements/NodesPopover.vue

@@ -7,6 +7,7 @@ import { computed, inject, onBeforeUnmount, ref, watch, type Ref } from 'vue'
 import { useCreateTable } from '../../composables/useCreateTable'
 import { makeNode, makeProcessorNode } from '../../composables/useDnD'
 import { useFetchConnections } from '../../composables/useFetchConnections'
+import { useNodeFocus } from '../../composables/useNodeFocus'
 import { useDataflowStore } from '../../stores/dataflow.store'
 import { useHistoryStore } from '../../stores/history.store'
 import ConnectionType from '../ConnectionType.vue'
@@ -24,6 +25,7 @@ const Y_OFFSET = 40
 const props = defineProps<Props>()
 
 const { findNode, getOutgoers, getIncomers } = useVueFlow()
+const { focusNode } = useNodeFocus()
 
 const { t } = useI18n()
 
@@ -237,6 +239,7 @@ const handleAddNode = (node: any) => {
     })
 
     historyStore.stopRecordingUndo()
+    focusNode(node.id)
     return
   } else if (prevNodeId && !nextNodeId) {
     // 在节点后面添加
@@ -308,6 +311,7 @@ const handleAddNode = (node: any) => {
   }
 
   historyStore.stopRecordingUndo()
+  focusNode(node.id)
 }
 
 const onClickConnection = (item: any) => {

packages/dag/src/composables/useNodeFocus.ts

@@ -0,0 +1,71 @@
+import { useVueFlow } from '@vue-flow/core'
+import { watch } from 'vue'
+import { useDataflowStore } from '../stores/dataflow.store'
+
+/**
+ * 提供 focusNode 方法：选中指定节点并确保其在视口中可见。
+ *
+ * 内部会等待 VueFlow 完成节点 DOM 渲染和尺寸测量后，
+ * 再执行选中 + fitView，避免 nextTick / setTimeout 的时序问题。
+ */
+export function useNodeFocus() {
+  const {
+    findNode,
+    addSelectedNodes,
+    removeSelectedNodes,
+    getNodes,
+    fitView,
+    viewport,
+  } = useVueFlow()
+
+  const dataflowStore = useDataflowStore()
+
+  /**
+   * 选中节点并平移视口使其可见
+   * @param nodeId 要聚焦的节点 ID
+   */
+  function focusNode(nodeId: string) {
+    // store 级别选中（打开右侧设置面板），不依赖尺寸，立即执行
+    dataflowStore.selectNodeById(nodeId)
+
+    const graphNode = findNode(nodeId)
+
+    // 如果节点已经在 VueFlow 中且尺寸已测量完毕，直接执行
+    if (graphNode && graphNode.dimensions?.width > 0) {
+      removeSelectedNodes(getNodes.value)
+      addSelectedNodes([graphNode])
+      fitView({
+        nodes: [nodeId],
+        duration: 200,
+        maxZoom: viewport.value.zoom,
+        padding: 0.2,
+      })
+      return
+    }
+
+    // 否则等待 VueFlow 测量完节点尺寸后再执行
+    const stop = watch(
+      () => findNode(nodeId)?.dimensions?.width,
+      (width) => {
+        if (width && width > 0) {
+          stop()
+          const node = findNode(nodeId)
+          if (node) {
+            removeSelectedNodes(getNodes.value)
+            addSelectedNodes([node])
+          }
+          fitView({
+            nodes: [nodeId],
+            duration: 200,
+            maxZoom: viewport.value.zoom,
+            padding: 0.2,
+          })
+        }
+      },
+      { flush: 'post' },
+    )
+  }
+
+  return { focusNode }
+}
+