React-diagrams: How to pass data from widget to node?

[sedulka]

I have trouble with passing data from widget to node. I have textfield in my widget and I need to pass the text that is inputed to the node so that that text appears there while user prints text. I used demo and just added this features. Is it possible to pass data from there to the node?

[JokerNN]

I did it by implementing my own NodeFactory. I think DiamondNode demo (Demo 3) should demonstrate this. Anyways I can post an example later today

[drummerjolev]

@JokerNN would you mind posting an example using JSX? I can't make custom nodes work #281

[JokerNN]

Hey @sedulka, I think I misunderstood your question first time, so I didn't really do it before :) However I think I know what can be done, so Im fiddling in codesandbox and let's see how it goes

[jackietieu]

@JokerNN Nodes have a data property which is an object. You can store your data in there by modifying node.data directly in your widget. It breaks the one way data flow pattern of React, but it's the most simple and effective way to get the job done.

[dylanvorster]

https://github.com/projectstorm/react-diagrams/tree/master/demos/demo-custom-node1

[sedulka]

The demo that you send is not solving my issue. I am talking about widget with blocks, from where you can pull them to the diagram. I rewrote it in the other component and need to pass data from that widget to block.

[alex-enchi]

@sedulka
DiagramModel has method getNode(nodeId) you can get node, update properties and then repaint canvas via DiagramEngine method repaintCanvas

[mathiasbaldissera]

@sedulka
I don't know if it can help you, but if you're trying to pass data from a textInput to the model, look at my repository: https://github.com/mathiasbaldissera/react-diagrams-editable-node
There's a node that can be edited, and a serialization button to verify if the data was changed successfully on the model (just use CTRL+F to look the node "content")