React-diagrams: Nodes rendering every time?

[jardg]

Hi.First of all thanks for the awesome libray.
I got a working project where I created a model with a custom Widget like in the Diamond example. I usually have 10-20 nodes generated dinamically based on a json input.The nodes are interacted by the user. Interacting in one node(introducing a value per example) causes some other nodes to change the data on their model, so does their view change too.

What I have observed is that all nodes are being rendered again because DiagramWidget is listening to onMouseDown event(which is is triggered every time the user interacts with a node) and this changes the state so DiagramWidget is rendered. This renders NodeLayerWidget which calls to the generateWidgetForNode of every node so every node is being rendered and created again by my WidgetFactory every time the user interacts with a node(calling this.forceUpdate) or when clicking on the background instead even with the diagram locked.

Is there any way to avoid this or am I doing something wrong?I would like to only re-render the nodes which model changed by the user interaction.Also I cant use shouldComponentUpdate since the factory is creating new elements every time and the Inmutability isnt working since I receive new objects. I tried to use:
diagramEngine.enableRepaintEntities(entities: BaseModel[]); without luck because paintableWidgets are null again once I click outside a node.

I know probably this is done like this by design to control when you move nodes, move links and stuff like that. Just wanted know if there's a workaround or its meant to re-render all nodes on changes, anyways the performance is pretty good.

Also an architecture question.If you are meant to modify the props directly like I read on another issue then I should modify the other nodes model passing the engine to my Widget props in the factory?So I can modify the other nodes model inside my Widget's methods and I can avoid passing down props from my React element wrapper for every event and the code is cleaner. Is this correct?

Thanks for your time!

[dylanvorster]

Hi there, The nodes are all repainted yes, but they go through componentShouldUpdate which is dynamically controlled via the DiagramEngine. This means that although all the nodes are trigged for repaint, only the nodes which actually need to move, are repainted. The only thing that needs some optimisation still, is when translating the canvas, but translating any other node or combination of nodes/links, will only repaint all effected nodes.

[dylanvorster]

Take a look at: https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/NodeWidget.tsx#L23 which wraps every node

[jardg]

Thanks for the help I could work and control what I wanted to render using engine.paintableWidgets and checking in the widget factory some conditions