admin 管理员组

文章数量: 1086019

React Flow: Prevent onSelectionChange from Triggering on Node Click and Drag

Issue

I'm using React Flow (XYFlow) to implement a selection box that, when released, fits the view to the selected nodes. However, event handlers are clashing:

  1. onNodeClick and onSelectionChange trigger simultaneously when clicking a node.
  2. onSelectionChange is also triggered when dragging a node.
  3. onSelectionEnd fires when clicking outside the selection box, zooming into previously selected node.

Desired Behavior

  • onNodeClick should only handle node clicks.
  • onSelectionChange should only handle selection box updates.
  • onSelectionEnd should trigger only when a selection box is explicitly created and released.

Current Implementation

const onSelectionChange = (params:{nodes: Node[]; edges:Edge[];}) => {
    console.log("Change: ", params, selectedNodeIds);
    if (params.nodes.length>0){
      const selectedIds = params.nodes
      .map((node: { id: string; }) => node.id);
      setSelectedNodeIds(selectedIds);
    }
  }

  const onSelectionEnd = (event:any)=>{
    console.log("Selection End", event);
    if (selectedNodeIds.length > 0){
      const selectedNodes = selectedNodeIds
      .map((id) => reactFlowInstance?.getNode(id))
      .filter((node) => node !== undefined);

      if (selectedNodes.length === 0) return;

      reactFlowInstance?.fitView({
        nodes:selectedNodes,
        duration:1000,
      }).then(() => {
        setSelectedNodeIds([]);
      }).catch((error)=>{
        console.error("There was an error: ", error)
      })
    }
  }

  const onNodeClick = (event: React.MouseEvent, node:Node) =>{
    console.log("Node clicked!?")
    // other logic
  }

<ReactFlowProvider>
  <ReactFlow
    onSelectionChange={onSelectionChange}
    onSelectionEnd={onSelectionEnd}
    onNodeClick={onNodeClick}
  />
</ReactFlowProvider>

Concised Question

How can I prevent onSelectionChange from triggering on node clicks and drags, while ensuring onSelectionEnd only fires for actual selection box usage? Are there better event handlers or patterns to use in React Flow?

I tried to check logic faults from my end. I tried to order the event handler in with onNodeClick followed by onSelectionChange. which failed obviously.

本文标签：

Error[2]: Invalid argument supplied for foreach(), File: /www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm, Line: 58
File: /www/wwwroot/roclinux.cn/tmp/route_read.php, Line: 205, include(/www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm)
File: /www/wwwroot/roclinux.cn/tmp/index.inc.php, Line: 129, include(/www/wwwroot/roclinux.cn/tmp/route_read.php)
File: /www/wwwroot/roclinux.cn/index.php, Line: 29, include(/www/wwwroot/roclinux.cn/tmp/index.inc.php)

版权声明：本文标题：reactjs - How to Separate Drag, Click, and Select Events in React Flow to seperate onNodeClick and onSelectionChange Behavior Cl 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1739996990a2115519.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。