React-diagrams: View-only mode?

[gothy]

Hi folks, thanks for the great tool!

I'm trying to wrap react-diagrams into a react component that would take some list of nodes and links between them and (maybe) auto-position them.
The thing is DiagramWidget is stateful and events are emitted just to notify on the change.
Is there (planned?) a way to disable some user interactions like removing the node or a link?

The only way to do it that I see now is to just re-create the engine, model, etc. and re-render the new DiagramWidget.

[dylanvorster]

Hi there, thanks for reaching out!

So I see two things here that would be great to add:

Formatters and Automatic Layout utilities

So this is something ive wanted to implement for a long time, even in the old version, but it is a very difficult problem to solve. If you are considering doing such a thing, it would be really awesome if you made the logic that can layout the nodes and links, separate from your widget so that we can use it to auto layout diagrams (such as right click -> format etc..).

Making models and nodes locked

So this is one possible way to achieve this. If we implemented a property on the CommonModel that is the basis for all the other models (NodeModel, LinkModel etc..) then we could have the DiagramWidget lock the resulting rendered widgets so that they cannot be modified via any interaction. This would solve your problem, but would also add a 'locked/unlocked' feature to the core, where only certain elements can be interacted with.

So TLDR: I would like to implement this, and wanted to from the very beginning and it is definitely on the roadmap. If you want to have a go at implementing it yourself, or have any suggestions on a potentially better way to do so, then I would gladly appreciate it :)

[m4rcelofs]

+1 for disabling interactions, maybe there's a way to generalize it on the engine using event.preventDefault() as usual in other DOM-related things? Similar discussion here.

[dylanvorster]

I implemented this at a core level now on all models.

You can lock any models by calling setLocked(true). It also uses a hierarchal system (see below)

• DiagramModel -> nothing can be changed
• LinkModel -> cannot move/delete/translate link, or add/remove/move/delete points
• NodeModel -> cannot move/delete/translate NodeModel
• PointModel -> cannot move/delete/translate this specific point

In addition, you can lock the canvas translations and zooming using new properties on the DiagramWidget

[gothy]

WOW! That was fast!
Thank you! 👍

[tommcgurl]

thanks @dylanvorster this is awesome! 👍

[bogomya]

In addition, you can lock the canvas translations and zooming using new properties on the DiagramWidget

@dylanvorster. Can't wind a way to lock canvas translations (on drag event). Is it something that has been removed?