Remove/change event not firing

[psaju]

Introduction

I'm writing an app that generates wiring diagrams. Every fusebox is a different diagram, and the user has the possibility to add comments to the diagram. Switching between the diagrams causes the graph to be replaced with another one. The issue I'm having is that no change or remove events are fired for the diagrams (add works ok), which causes the diagram not to update, even if the view is correct.

I have added the code as an attachment in the zip file.

diagramService.zip

CodeSandBox

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

How to reproduce the problem? I'm not sure what to look at in the file.
Note that remove event is not triggered if you call resetCells() or graph.fromJSON(). A single reset event is fired instead.

[psaju]

In initGraph I initialize the paper and graph. In generateDiagramData I generate graphs off screen for them to be ready upon loading the DOM. In renderDiagram in render the currently selected graph. In initEvents I initialize different listeners.

The problem I am having is that the graphs aren't always updated - I can dynamically add a cell to a diagram and it persists after switching the graphs. If I change the added cell's label or position it does not persist. I want to save the data, and the obvious way would be to add a graph.on('change') listener and save the data in the callback, but that listener does not fire, but graph.on('all') does fire on the change event. I'm thinking that maybe I made some kind of logical error or false assumption about the graph should work, and that may cause further problems down the road.

[kumilingus]

Are you able to create a minimal example that demonstrates the issue?

const g1 = new dia.Graph();
const g2 = new dia.Graph();
/* ... */
g1.on('change', console.log);
/* .. */
cell.set('attribute', 'value');

// no change event is triggered