feat: Workflow node search

Author: shaohuzhang1

ui/src/workflow/common/NodeContainer.vue

@@ -432,10 +432,34 @@ const closeNodeMenu = () => {
   showAnchor.value = false
   anchorData.value = undefined
 }
+/**
+ * 检索选中时候触发
+ * @param kw
+ */
+const selectOn = (kw: string) => {
+  props.nodeModel.setSelected(true)
+  console.log('selectOn', kw)
+}
+/**
+ * 定位时触发
+ * @param kw
+ */
+const focusOn = (kw: string) => {
+  console.log('focusOn', kw)
+}
+/**
+ * 清除时触发
+ */
+const clearSelectOn = () => {
+  console.log('onClearSearchSelect')
+}
 onMounted(() => {
   set(props.nodeModel, 'openNodeMenu', (anchorData: any) => {
     showAnchor.value ? closeNodeMenu() : openNodeMenu(anchorData)
   })
+  set(props.nodeModel, 'selectOn', selectOn)
+  set(props.nodeModel, 'focusOn', focusOn)
+  set(props.nodeModel, 'clearSelectOn', clearSelectOn)
 })
 </script>
 <style lang="scss" scoped>
@@ -455,5 +479,4 @@ onMounted(() => {
     }
   }
 }
-
 </style>

ui/src/workflow/common/NodeSearch.vue

@@ -10,23 +10,27 @@
       <div class="workflow-search-container flex-between">
         <el-input
           ref="searchInputRef"
-          v-model="searchText"
+          v-bind:modelValue="searchText"
+          @update:modelValue="handleSearch"
           :placeholder="$t('workflow.tip.searchPlaceholder')"
           clearable
-          @keyup.enter="handleSearch"
+          @keyup.enter="next"
           @keyup.esc="closeSearch"
         >
         </el-input>
         <span>
           <el-space :size="4">
-            <span class="lighter"> 2/3 </span>
+            <span class="lighter" v-if="selectedCount && selectedCount > 0">
+              {{ currentIndex + 1 }}/{{ selectedCount }}
+            </span>
+            <span class="lighter" v-else-if="searchText.length > 0"> 无结果 </span>
             <el-divider direction="vertical" />
 
             <el-button text>
-              <el-icon><ArrowUp /></el-icon>
+              <el-icon @click="up"><ArrowUp /></el-icon>
             </el-button>
             <el-button text>
-              <el-icon><ArrowDown /></el-icon>
+              <el-icon @click="next"><ArrowDown /></el-icon>
             </el-button>
             <el-button text @click="closeSearch()">
               <el-icon><Close /></el-icon>
@@ -43,15 +47,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
-
+import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
+import { MsgSuccess, MsgWarning } from '@/utils/message'
 // Props定义
 interface Props {
-  onSearch?: (keyword: string) => void // 搜索回调
+  lf?: any
 }
-const props = withDefaults(defineProps<Props>(), {
-  onSearch: undefined,
-})
+const props = withDefaults(defineProps<Props>(), {})
 
 // 状态
 const showSearch = ref(false)
@@ -72,6 +74,99 @@ const handleKeyDown = (e: KeyboardEvent) => {
   }
 }
 
+const focusOn = (node: any) => {
+  console.log(node)
+  props.lf?.graphModel.transformModel.focusOn(
+    node.x,
+    node.y,
+    props.lf?.container.clientWidth,
+    props.lf?.container.clientHeight,
+  )
+}
+const selectedNodes = ref<Array<any>>()
+const currentIndex = ref<number>(0)
+const selectedCount = computed(() => {
+  return selectedNodes.value?.length
+})
+
+const getSelectNodes = (kw: string) => {
+  const result: Array<any> = []
+  const graph_data = props.lf?.getGraphData()
+  graph_data.nodes.filter((node: any) => {
+    if (node.properties.stepName.includes(kw)) {
+      result.push({
+        ...node,
+        order: 1,
+        focusOn: () => {
+          focusOn(node)
+          props.lf?.graphModel.getNodeModelById(node.id).focusOn(searchText.value)
+        },
+        selectOn: () => {
+          props.lf?.graphModel.getNodeModelById(node.id).selectOn(searchText.value)
+        },
+        clearSelectOn: () => {
+          props.lf?.graphModel.getNodeModelById(node.id).clearSelectOn(searchText.value)
+        },
+      })
+    }
+    if (node.type == 'loop-body-node') {
+      const nodeModel = props.lf?.graphModel
+      const childNodeModel = nodeModel.getNodeModelById(node.id)
+      childNodeModel.getSelectNodes(searchText.value).map((childNode: any) => {
+        result.push({
+          ...childNode,
+          order: 2,
+          focusOn: () => {
+            focusOn(node)
+            childNodeModel.focusOn({ node: childNode, kw: searchText.value })
+          },
+          selectOn: () => {
+            childNodeModel.selectOn({ node: childNode, kw: searchText.value })
+          },
+          clearSelectOn: () => {
+            childNodeModel.clearSelectOn({ node: childNode, kw: searchText.value })
+          },
+        })
+      })
+    }
+  })
+  result.sort((a, b) => a.order - b.order || a.y - b.y || a.x - b.x)
+  return result
+}
+const selectNodes = (nodes: Array<any>) => {
+  nodes.forEach((node) => node.selectOn())
+}
+const next = () => {
+  if (selectedNodes.value && selectedNodes.value.length > 0) {
+    if (selectedNodes.value.length - 1 >= currentIndex.value + 1) {
+      currentIndex.value++
+    } else {
+      currentIndex.value = 0
+    }
+    selectedNodes.value[currentIndex.value].focusOn()
+  }
+}
+const up = () => {
+  if (selectedNodes.value && selectedNodes.value.length > 0) {
+    if (currentIndex.value - 1 <= 0) {
+      currentIndex.value = selectedNodes.value.length - 1
+    } else {
+      currentIndex.value--
+    }
+    selectedNodes.value[currentIndex.value].focusOn()
+  }
+}
+
+const onSearch = (kw: string) => {
+  if (selectedNodes.value === undefined) {
+    const selected = getSelectNodes(kw)
+    if (selected && selected.length > 0) {
+      selectedNodes.value = selected
+      selectNodes(selected)
+      selected[currentIndex.value].focusOn()
+    }
+  }
+}
 // 打开搜索
 const openSearch = () => {
   showSearch.value = true
@@ -84,14 +179,31 @@ const openSearch = () => {
 
 // 关闭搜索
 const closeSearch = () => {
+  clearSelect()
   showSearch.value = false
   searchText.value = ''
 }
-
+const clearSelect = () => {
+  if (selectedNodes.value) {
+    selectedNodes.value[currentIndex.value].clearSelectOn()
+  }
+  selectedNodes.value = undefined
+  currentIndex.value = 0
+  props.lf?.graphModel.clearSelectElements()
+  const graph_data = props.lf?.getGraphData()
+  graph_data.nodes.forEach((node: any) => {
+    if (node.type == 'loop-body-node') {
+      props.lf?.graphModel.getNodeModelById(node.id).clearSelectElements()
+    }
+  })
+}
 // 执行搜索
-const handleSearch = () => {
+const handleSearch = (kw: string) => {
+  searchText.value = kw
+  clearSelect()
+
   if (searchText.value.trim()) {
-    props.onSearch?.(searchText.value)
+    onSearch?.(searchText.value)
   }
 }
 
@@ -123,7 +235,7 @@ onUnmounted(() => {
   width: 360px;
   :deep(.el-input__wrapper) {
     box-shadow: none;
-    padding: 0 8px 0 1px!important;
+    padding: 0 8px 0 1px !important;
   }
 }
 </style>

ui/src/workflow/index.vue

@@ -3,7 +3,7 @@
   <!-- 辅助工具栏 -->
   <Control class="workflow-control" v-if="lf" :lf="lf"></Control>
   <TeleportContainer :flow-id="flowId" />
-  <NodeSearch class="workflow-search" :on-search="onSearch"></NodeSearch>
+  <NodeSearch class="workflow-search" :lf="lf"></NodeSearch>
 </template>
 <script setup lang="ts">
 import LogicFlow from '@logicflow/core'
@@ -18,7 +18,7 @@ import { initDefaultShortcut } from '@/workflow/common/shortcut'
 import Dagre from '@/workflow/plugins/dagre'
 import { disconnectAll, getTeleport } from '@/workflow/common/teleport'
 import { WorkflowMode } from '@/enums/application'
-import { MsgSuccess, MsgWarning } from '@/utils/message'
+
 import NodeSearch from '@/workflow/common/NodeSearch.vue'
 const nodes: any = import.meta.glob('./nodes/**/index.ts', { eager: true })
 const workflow_mode = inject('workflowMode') || WorkflowMode.Application
@@ -52,43 +52,6 @@ onUnmounted(() => {
 const render = (data: any) => {
   lf.value.render(data)
 }
-const searchQueue: Array<string> = []
-const selectNode = (node: any) => {
-  lf.value.graphModel.selectNodeById(node.id)
-  lf.value.graphModel.transformModel.focusOn(
-    node.x,
-    node.y,
-    lf.value.container.clientWidth,
-    lf.value.container.clientHeight,
-  )
-  searchQueue.push(node.id)
-}
-const onSearch = (kw: string) => {
-  const graph_data = lf.value.getGraphData()
-  for (let index = 0; index < graph_data.nodes.length; index++) {
-    const node = graph_data.nodes[index]
-    let firstNode = null
-    if (node.properties.stepName.includes(kw)) {
-      if (!firstNode) {
-        firstNode = node
-      }
-
-      if (!searchQueue.includes(node.id)) {
-        selectNode(node)
-        break
-      }
-    }
-    if (index === graph_data.nodes.length - 1) {
-      searchQueue.length = 0
-      if (firstNode) {
-        selectNode(firstNode)
-      } else {
-        lf.value.graphModel.clearSelectElements()
-        MsgWarning('不存在的节点')
-      }
-    }
-  }
-}
 
 const renderGraphData = (data?: any) => {
   const container: any = document.querySelector('#container')

ui/src/workflow/nodes/loop-body-node/index.vue

@@ -166,12 +166,53 @@ const loopLayout = () => {
   LoopBodyContainerRef.value?.zoom()
   lf.value?.extension?.dagre.layout()
 }
+const selectOn = (node: any, kw: string) => {
+  lf.value?.graphModel.getNodeModelById(node.id).selectOn(kw)
+}
+const focusOn = (node: any, kw: string) => {
+  lf.value?.graphModel.transformModel.focusOn(
+    node.x,
+    node.y,
+    lf.value?.container.clientWidth,
+    lf.value?.container.clientHeight,
+  )
+  lf.value?.graphModel.getNodeModelById(node.id).focusOn(kw)
+}
+
+const getSelectNodes = (kw: string) => {
+  const graph_data = lf.value?.getGraphData()
+  return graph_data.nodes.filter((node: any) => node.properties.stepName.includes(kw))
+}
+const onSearchSelect = (node: any, kw: string) => {
+  lf.value?.graphModel.getNodeModelById(node.id).selectOn(kw)
+}
+const onClearSearchSelect = (node: any, kw: string) => {
+  lf.value?.graphModel.getNodeModelById(node.id).clearSelectOn(kw)
+}
+const clearSelectElements = () => {
+  lf.value.graphModel.clearSelectElements()
+}
 onMounted(() => {
   renderGraphData(cloneDeep(props.nodeModel.properties.workflow))
   set(props.nodeModel, 'validate', validate)
   set(props.nodeModel, 'set_loop_body', set_loop_body)
   set(props.nodeModel, 'loopLayout', loopLayout)
+  set(props.nodeModel, 'getSelectNodes', getSelectNodes)
+  set(props.nodeModel, 'focusOn', (event: any) => {
+    focusOn(event.node, event.kw)
+  })
+  set(props.nodeModel, 'selectOn', (event: any) => {
+    selectOn(event.node, event.kw)
+  })
+  set(props.nodeModel, 'clearSelectOn', (event: any) => {
+    onSearchSelect(event.node, event.kw)
+  })
+  set(props.nodeModel, 'clearSelectElements', clearSelectElements)
+  set(props.nodeModel, 'onClearSearchSelect', (event: any) => {
+    onClearSearchSelect(event.node, event.kw)
+  })
 })
+
 onUnmounted(() => {
   disconnectByFlow(lf.value.graphModel.flowId)
   lf.value = null