Skip to content

Conditional diagram changes causes weird bugs #148

Open
@obadakhalili

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:

  1. Go to https://c5y6s.sse.codesandbox.io/.
  2. Try to move any node, nothing moves, which is normal giving that the diagram is locked.
  3. 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

obadakhalili commented on Jun 16, 2021

@obadakhalili
Author

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 is true, which is always the case given that it's always passed the reference of the function expression onNodesChange:

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 the onChange prop of the NodesCanvas component, instead of passing it the always-true onNodesChange function expression.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

      Participants

      @obadakhalili

      Issue actions

        Conditional diagram changes causes weird bugs · Issue #148 · antonioru/beautiful-react-diagrams