What is a recommended way to re-render other React components based on changes in a diagram

[optimistiks]

Let's say I have a sidebar with some buttons. When I click on a button, I do this

engine.getModel().addNode(node);
engine.repaintCanvas();

The node appears on the canvas, no issue here.

Now, I want to display a little checkmark next to the button, indicating that the node is present on the canvas. And I want to remove the checkmark when node is removed from the canvas. However, the sidebar is not re-rendered since adding the node is imperative, and nothing really changes. engine instance is not changed, getModel() return value is not changed. I thought about ways to solve it:

• Serialize the whole diagram on every change and re-render based on it. Could hurt performance.
• Keep the nodes array in the state. Solves the problem when adding / removing nodes, but not with other types of changes.
• Listen to events and increment a "version number" on events that I need, re-render when version number is changed.

Or am I missing something? Is there some internal state which I can pull out into React component state to get the re-renders?

[renato-bohler]

Maybe you can listen to the entityRemoved event on the node and react to that. Something like:

node.registerListener({ entityRemoved: ({ entity }) => console.log('Removed entity', entity) });
engine.getModel().addNode(node);
engine.repaintCanvas();

You can then replace the console.log with some setState, a redux action dispatch or something like that.

[optimistiks]

Thanks! Could you confirm that re-creating an engine (with createEngine) on every render is a bad idea? Because I've seen it in some examples, but in other examples it's only created once.

[renato-bohler]

I'm not absolutely sure if this is really bad, but I would certainly avoid it.