Skip to content

feat: Workflow implements multi-select nodes #4183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 1 commit into from
Oct 14, 2025
Merged

feat: Workflow implements multi-select nodes #4183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/src/views/problem/component/DetailProblemDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 4 additions & 2 deletions ui/src/workflow/common/NodeContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code has an issue with the parameter mousedown. The function should accept an optional parameter called event to handle event-related actions like checking if shift key is pressed before clearing select elements.

Here's a suggested correction:

const mousedown = (event?: MouseEvent | TouchEvent) => {
  if (!event?.shiftKey) {
    props.nodeModel.graphModel.clearSelectElements();
  }
  set(props.nodeModel, 'isSelected', true);
  set(props.nodeModel, 'isHovered', true);
  props.nodeModel.graphModel.toFront(props.nodeModel.id);
}

This ensures that the code handles both mouse events (MouseEvent) and touch events (TouchEvent). Additionally, make sure that you've imported the necessary types and interfaces for these event objects (MouseEvent and optionally TouchEventArgs, depending on your implementation).

Expand Down
12 changes: 6 additions & 6 deletions ui/src/workflow/common/shortcut.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet contains no apparent syntax errors, but there might be concerns regarding its structure and functionality. Specifically:

  1. Uncommented Code: The commented-out section containing MsgConfirm is not used in the current state of the code. This can lead to unnecessary overhead.

  2. Missing Variable Declaration: If 'start-node', 'base-node', and 'loop-body-node' types are defined elsewhere, they should be declared before being used. Ensure these type definitions are available globally.

  3. Internationalization (t Function): The calls to the translation function t suggest that some internationalizations are missing or referenced incorrectly. Make sure all translations are correctly set up and accessible within this context.

  4. Potential Future Changes: Un-commenting sections like the one with MsgConfirm could introduce bugs if those functions were meant to execute instead.

Here’s an optimized version without comments, assuming necessary variable declarations and translations are in place:

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;
  }

  // Uncomment the line below if you want to add confirmation logic
  MsgConfirm(t('common.tip'), t('views.applicationWorkflow.delete.confirmTitle'), {
    confirmButtonText: t('common.confirm'),
    confirmButtonClass: 'danger'
  });
}

If you need further changes based on specific requirements or additional functionalities, please provide more details!

Expand Down
6 changes: 4 additions & 2 deletions ui/src/workflow/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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?.()))
}
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code has minor improvements such as removing unnecessary semicolons; adding comments to explain some parts of the code for better understanding; and including import statements for missing external dependencies.

No major issues have been found that impact functionality, but here's a suggestion:

To improve performance, consider rendering only the necessary portion of the graph initially. Since renderGraphData is called when the component mounts, you could fetch only essential data for the initial display instead of sending all node information. This would reduce the amount of data processed at startup.

const renderGraphData = async (initialNodes?: Array<any>): Promise<void> => {
  if (!initialNodes || initialNodes.length === 0) return;
  
  const container: any = document.querySelector('#container');
  if (container && lf.value) {

    lf.value.graphModel.batch(() => {
      
      // Assuming 'data' contains an array of nodes IDs
      const nodesToAdd: Array<Record<string, string|number>> =
        await fetchSomeInitialNodeData(initialNodes).then(responses => responses.json());

      // Clear existing edges and nodes, then add the specified initial nodes
      lf.value.deleteAll();

This change reduces the number of operations during initialization, potentially improving app load times. Make sure that fetchSomeInitialNodeData() is implemented as described.

Expand Down
Loading