feat: Workflow implements multi-select nodes

[shaohuzhang1]

fix: Wordflow implements multi-select nodes

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

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!

[shaohuzhang1]

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).

[shaohuzhang1]

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.