react-diagrams icon indicating copy to clipboard operation
react-diagrams copied to clipboard

Custom Nodes with Form Input

Open kristopher-wood opened this issue 3 years ago • 0 comments

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

kristopher-wood avatar Nov 30 '21 03:11 kristopher-wood