Open
Description
Describe the bug
Conditional diagram changes causes weird bugs. If changing the diagram is set up to be changed conditionally, based on some flag, it will result in inconsistent diagram between toggles. Try to lock the diagram by preventing the calls to the onChange
event, do some changes to the diagram visually, nothing should change (which is normal), unlock the diagram, and you will notice your changes (made while the diagram was locked) to be applied instantly on the diagram.
To Reproduce
Reproduction
Steps to reproduce the behavior:
- Go to https://c5y6s.sse.codesandbox.io/.
- Try to move any node, nothing moves, which is normal giving that the diagram is locked.
- Press the "unlock" button below, and you will notice that your changes (made while the diagram was locked) are applied.
Expected behavior
For changes made while the diagram is locked not to be applied once the diagram is unlocked.
Desktop (please complete the following information):
- OS: Win64
- Browser: Chrome
- Version: 91
Activity
obadakhalili commentedon Jun 16, 2021
I've looked into the source code, and it turned out it's an easy fix (assuming I'm not breaking anything):
https://github.com/beautifulinteractions/beautiful-react-diagrams/blob/c18805eb503b810ec8ec53fc3923d8d6d1ae0d7e/src/Diagram/NodesCanvas/NodesCanvas.js#L16-L21
In the above code snippet, you are updating the nodes coordinates only if the
onChange
event prop istrue
, which is always the case given that it's always passed the reference of the function expressiononNodesChange
:https://github.com/beautifulinteractions/beautiful-react-diagrams/blob/c18805eb503b810ec8ec53fc3923d8d6d1ae0d7e/src/Diagram/Diagram.js#L23-L27
https://github.com/beautifulinteractions/beautiful-react-diagrams/blob/c18805eb503b810ec8ec53fc3923d8d6d1ae0d7e/src/Diagram/Diagram.js#L74-L86
Fixing it should be as easy as passing the
onChange
prop provided by the user to theonChange
prop of theNodesCanvas
component, instead of passing it the always-trueonNodesChange
function expression.