reaviz / reaflow

🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.

Home Page:https://reaflow.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unselectable inner node after switching dragType to "all"

carlescamig opened this issue · comments

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Im starting with a basic flow with 2 nodes and "multiPortOnly" dragType. Once a new node is added dragType is changed to "all" and only the 2nd nodes becomes unselectable
Users can create a new node by dragging an edge from the source node, this is done by using Node's onDragEnd event as you can see in the following code:
<Node onDragEnd={createNode} draggable={false} selectable={true} onClick={onClick} dragType={nodes.length > 2 ? "all" : "multiportOnly"} />

Expected behavior

The 2nd node should be able to be selected after creating the 3rd node and switching dragType to "all"
The way I chose to create nodes is by dragging Edges and my goal is to avoid creating nodes from connected ones

Minimal reproduction of the problem with instructions

You can see what I mean here https://codesandbox.io/s/reaflow-not-selectable-node-hk71yz?file=/src/App.js:1053-1508 just drag and edge from the 2nd node, then click all the nodes and you'll see they are all selectable except for the 2nd

  • Step 1: drag and drop an edge from node# 2
  • Step 2: click node 1, it's selectable
  • Step 3: click node 2, it's not selectable
  • Step 4: click node 3, it's selectable

What is the motivation / use case for changing the behavior?

The way I choose to create nodes is by dragging edges from nodes and my goal is to allow users to create nodes ONLY from those that don't have a children node.
The problem is that I need the click/selection event to be working on every node for config interaction purpose, but after dragType property to "all" the click/select event is not working on the middle node