Moving nodes in Collaborative mode.

[Kost927]

Hello, I'm currently using collaborative mode and have encountered an issue. When two users are connected to the flow chart and each selects a different node (for example, user 1 selects a circle node and user 2 selects a rectangle node), if user 1 moves their selected node, the node selected by user 2 also moves involuntarily. Is this normal behavior, and is there a way to resolve this issue? Ideally, I'd like users to be able to move their nodes independently. Any insights or suggestions would be greatly appreciated. Thank you!

[Kost927]

I think this happens, because users click on nodes, selected prop becomes "true", and that's why all nodes move by one user.

[chrtze]

This is an interesting finding. We'll look into this and post a solution here.

[chrtze]

Hey @Kost927,

we did some digging and found a possible solution for your issue: To prevent changes from being synced between local and remote state, you can change the observer code to distinguish between local and remote updates:

useNodesStateSynced.ts:73

// here we are observing the nodesMap and updating the nodes state whenever the map changes.
useEffect(() => {
  const observer = (_: unknown, transaction: Transaction) => {
    // The idea here is that when the update originates from a local mutation to
    // the `nodesMap`, we want to update the nodes state directly...
    if (transaction.local) {
      setNodes(Array.from(nodesMap.values()));
    }
    // ... but when the change is coming from remote, we want to *only* sync
    // the properties defined in `syncedProperties` and keep the rest of the
    // state local.
    else {
      const nextNodes = Array.from(nodesMap.values());

      setNodes(
        nextNodes.map((node) => {
          // this is for demo purposes, you probably want to implement your own syncing logic here
          node.selected = false;
          return node;
        })
      );
    }
  };

  nodesMap.observe(observer);
  return () => nodesMap.unobserve(observer);
}, [setNodes]);

Thanks for raising this issue, we'll update the pro example to reflect these changes.

[Kost927]

Thank you for your response. I've tested the solution, and unfortunately, it won't work for our requirements. We only have one prop, selected, which can be either true or false. With this approach, if two or more collaborators work separately and select different nodes simultaneously, all other selected nodes become unselected. This means there's no way for each user to work independently on their own nodes and edges on one Flow Chart.

I believe we need to implement a feature that tracks the connected client ID of the user making changes. This way, we can determine who made each change and ensure that users can work on the flow chart independently. While this isn't a bug, it's a feature that could be considered for future releases if feasible.

[Nicolas-PredictaLab]

Same problem and I've ended up founding my own solution:
I've totaly avoid using selected props for my UI and actions and I've handle a "selected elements" array locally, non shared, so each user can select their own. Disabling many default behaviours can be done by props in ReactFlow component and custom selection logic can be done using onNodeClick and onEdgeClick props. Sadly only thing I couldn't achieve to keep is the selection by drawing a rectangle thing since I can't use the onSelectionChange because it's being propagated to others connected users.