projectstorm / react-diagrams

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

Node EventListeners don't work when setting a state from component #1017

Open MrEnte opened 9 months ago

MrEnte commented 9 months ago

I am developing a real time collaborative diagram editor. At the moment I am trying to implement the use case when a user sees a node is moved by another user. I thought that the EventListener positionChanged would be a nice fit for this use case. The Code looks like this:

When adding a node i add an EventListener. In there i change the state of serializedModel.

node.registerListener({
    positionChanged: (
        e: BaseEntityEvent<ClassNodeModel>
    ) => {
        window.console.error('positionChanged', e);
        setSerializedModel(model.serialize());
    },
});

serializedModel is just the return value of model.serialize().

Then there is this useEffect:

useEffect(() => {
      window.console.error('useEffect', serializedModel);
      sendJsonMessage({
          serialized_diagram: serializedModel,
      });
      engine.repaintCanvas();
  }, [serializedModel]);

In here a just send a message to my backend to synchronize with the other users.

The Problem right now is that the EventListener only works for a few seconds: image

But when i do not set a state in the EventListener. So something likes this:

node.registerListener({
    positionChanged: (
        e: BaseEntityEvent<ClassNodeModel>
    ) => {
        window.console.error('positionChanged', e);
    },
});

It works image