fix: Wordflow implements multi-select nodes (#4183)

Co-authored-by: wangdan-fit2cloud <[email protected]>

Author: shaohuzhang1

ui/src/views/problem/component/DetailProblemDrawer.vue

@@ -19,7 +19,7 @@
               <template v-for="(item, index) in paragraphList" :key="index">
                 <CardBox
                   :title="item.title || '-'"
-                  class="cursor mb-8"
+                  class="cursor mb-8 w-full"
                   :showIcon="false"
                   @click.stop="permissionPrecise.doc_edit(id as string) && editParagraph(item)"
                   style="height: 210px"

ui/src/workflow/common/NodeContainer.vue

@@ -265,8 +265,10 @@ const editName = async (formEl: FormInstance | undefined) => {
   })
 }
 
-const mousedown = () => {
-  props.nodeModel.graphModel.clearSelectElements()
+const mousedown = (event?: any) => {
+  if (!event?.shiftKey) {
+    props.nodeModel.graphModel.clearSelectElements()
+  }
   set(props.nodeModel, 'isSelected', true)
   set(props.nodeModel, 'isHovered', true)
   props.nodeModel.graphModel.toFront(props.nodeModel.id)

ui/src/workflow/common/shortcut.ts

@@ -100,12 +100,12 @@ export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
     const nodes = elements.nodes.filter((node) =>
       ['start-node', 'base-node', 'loop-body-node'].includes(node.type),
     )
-    if (nodes.length > 0) {
-      MsgError(
-        `${nodes[0].properties?.stepName}${t('views.applicationWorkflow.delete.deleteMessage')}`,
-      )
-      return
-    }
+    // if (nodes.length > 0) {
+    //   MsgError(
+    //     `${nodes[0].properties?.stepName}${t('views.applicationWorkflow.delete.deleteMessage')}`,
+    //   )
+    //   return
+    // }
     MsgConfirm(t('common.tip'), t('views.applicationWorkflow.delete.confirmTitle'), {
       confirmButtonText: t('common.confirm'),
       confirmButtonClass: 'danger',

ui/src/workflow/index.vue

@@ -10,6 +10,7 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import AppEdge from './common/edge'
 import loopEdge from './common/loopEdge'
 import Control from './common/NodeControl.vue'
+import { SelectionSelect } from '@logicflow/extension'
 import '@logicflow/extension/lib/style/index.css'
 import '@logicflow/core/dist/style/index.css'
 import { initDefaultShortcut } from '@/workflow/common/shortcut'
@@ -50,7 +51,7 @@ const renderGraphData = (data?: any) => {
   const container: any = document.querySelector('#container')
   if (container) {
     lf.value = new LogicFlow({
-      plugins: [Dagre],
+      plugins: [Dagre, SelectionSelect],
       textEdit: false,
       adjustEdge: false,
       adjustEdgeStartAndEnd: false,
@@ -107,12 +108,13 @@ const renderGraphData = (data?: any) => {
       // 清除当前节点下面的子节点的所有缓存
       data.nodeModel.clear_next_node_field(false)
     })
-
+    lf.value.openSelectionSelect()
     setTimeout(() => {
       lf.value?.fitView()
     }, 500)
   }
 }
+
 const validate = () => {
   return Promise.all(lf.value.graphModel.nodes.map((element: any) => element?.validate?.()))
 }