Repository navigation
Nodes fall outside of <Provider> #266
Description
I'm very inexperienced with React, and have lost myself in this little experiment I chose for myself.
Starting from one of the examples, I wanted to create a custom node shape with a single toggle control on the node. The trick is that the toggle is shared among all nodes, where only one can be in the 'on' state across the whole graph.
Toggling that flag on a single node is fairly straight forward, but making it global is where I run into difficulty. I've tried all manner of Redux and React Hooks, but they all fail because the nodes that are created by my renderNode function fall out of the <Provider> tree. (According to the React Components debugger, this happens with standard nodes as well.)
Digging into your code, and an afternoon's worth of googling, it appears this happens because of the ref used to defer the drawing of the nodes.
https://github.com/uber/react-digraph/blob/master/src/components/graph-view.js#L1605
https://github.com/uber/react-digraph/blob/master/src/components/graph-view.js#L1375
Thanks for any help you can give. I was impressed with the project a few years ago when I first poked at it, and I'm very much so after returning to it this week.
Activity
ajbogh commentedon Nov 16, 2020
I'm not sure if your issue is similar, but this StackOverflow question has a similar problem with react-dom render.
https://stackoverflow.com/questions/37269530/how-to-render-redux-container-in-reactdom-render-method
Another method is to activate a side panel when the user clicks on the node and display all of the node's settings. The side panel would be within the Provider's context. Selecting the "on" state on one node could update the graph and the blue box would light up on that selected node while all others turn off. To force a graph update you need to produce a new nodes array in the process.
I also noticed that your edges aren't touching the sides of your nodes, instead they're pointing to the middle. We have edge-intercept code that should point them to the sides if you use similar code to our example project, having a width and height property in the correct places is the key.