search

projectstorm / react-diagrams

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

Passing data from one node to another linked node #839

Closed SHRIRAM0509 closed 3 years ago

SHRIRAM0509 commented 3 years ago

React-Diagrams

As in the image, custom nodes A and B are linked to C. Whenever the input value in A or B changes, I want to pass the value to node C. Gave #164 a read, but I have no idea how to use sourcePortChanged for this use case. Or is there another way? How can I achieve this? Some guidance on this would be helpful. Thanks!

renato-bohler commented 3 years ago

Hmm it depends on why exactly do you need this.

Do you want to display this information on Node C? In this case, you would probably have to implement some logic on your node model to somehow update all nodes conected to it when the user changes the input. I've never done this, but I believe it would be possible...

Do you want to make some processing after the user designed the diagram? In this case, you could let this information live on Node A and whenever you need to perform this processing, you could implement the logic to "forward" this parameter to all connected nodes, or something like that...

SHRIRAM0509 commented 3 years ago

Thanks for replying.

Do you want to display this information on Node C - No, I want to use this to handle some logic in Node C and forward it. I want to automate a flow. I Tried using Node-RED. Dropped it, as it required more configurations than I imagined for my use case. If I can forward the message like it's done in Node-RED, that'll solve my problem.

Do you want to make some processing after the user designed the diagram? - Yes, to be precise users drag and drop items from the side tray (as in one of the examples). I've modeled in such a way that when the user drags an item from the side tray, it gets converted to a set of linked nodes (in the image I've connected two input nodes and a node that processes). So there are specific nodes that collect input, that process data, perform some action. So, a user can easily create flows with it.

you could let this information live on Node A - I've done this part. It's part of the model (set this input value on submit).

"forward" this parameter to all connected nodes, or something like that... - Some head start on how I can do this will be super helpful. I'm struggling with this part only.

Thanks.

renato-bohler commented 3 years ago

You can serialize the diagram and work with that.

If your node model is serializing this information (you do that by overriding the serialize method), you'll have access to this field on the output JSON. You can now use this JSON to identify which nodes are connected to which and do whatever you need.

SHRIRAM0509 commented 3 years ago

Thanks!