projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.46k stars 1.16k forks source link

Custom Nodes with Form Input #911

Open kristopher-wood opened 2 years ago

kristopher-wood commented 2 years ago

Hi all!

I'd like to know how I can add form input for custom nodes. I'm building an interface for configuring back end processes which have inputs and outputs at various steps. What I'd like to do is one of two things:

  1. Include form input inside of the shapes, with different fields and values available for the various shapes, or...
  2. When a shape is clicked, update the state of a "controls" panel off to the side which contains the configuration for the selected shape.

How could either of these be achieved? So far I've managed to put a text or select field inside a custom shape (option 1) but whenever the focus goes off the selected shape, the fields lose their values, which lead me to thinking of option 2.

The field values would ideally be stored with the serialized diagram when saving it for future editing.

Thanks in advance! Kris