Unsaved changes

[pandika-csgi]

How to check if any changes on diagram?
For example in this demo https://resources.jointjs.com/demos/rappid/apps/KitchenSink/index.html, then we add some shape or make a change to the diagram, how do detect if graph/diagram has changed?

using graph.on('change:{every_element}') or anything else?

[jamesgeorgewilliams]

You can see the graph events here:
https://resources.jointjs.com/docs/jointjs/v3.6/joint.html#dia.Graph.events

// triggered when a new cell is added to the graph
graph.on('add', function(cell) { 
     console.log('New cell with id ' + cell.id + ' added to the graph.'); 
});

// generic event triggered for any change in the graph
graph.on('change', function(cell) { 
     console.log('Cell with id ' + cell.id + ' was changed.'); 
});

Or you could be more specific and listen to a change on a Link or Element:
https://resources.jointjs.com/docs/jointjs/v3.6/joint.html#dia.Element.events
https://resources.jointjs.com/docs/jointjs/v3.6/joint.html#dia.Link.events

---

If using JointJS+, you can use the stack event to listen to changes.
https://resources.jointjs.com/docs/rappid/v3.6/dia.CommandManager.html#dia.CommandManager.events

You can listen to when any change was made to the stacks i.e. when the graph actually changes.

An example of this can be found in our Chatbot application.

[jamesgeorgewilliams]

An option ignoreCommandManager can be used with the CommandManager plugin. You can see an example of it in the cmdBeforeAdd section in the documentation:
https://resources.jointjs.com/docs/rappid/v3.6/dia.CommandManager.html#dia.CommandManager.api

const namespace = joint.shapes;

const graph = new joint.dia.Graph({}, { cellNamespace: namespace });

const commandManager = new joint.dia.CommandManager({
    graph: graph,
    cmdBeforeAdd: function(cmdName, cell, graph, options) {
        options = options || {};
        return !options.ignoreCommandManager;
    }
});

commandManager.on('stack', function(opt) {
    console.log('stack event');
});

graph.set({
    type: 'new.graph',
    myGraph: {
        id: '',
        status: 'New',
    },
}, { ignoreCommandManager: true });  // 'stack' event not triggered

[pandika-csgi]

Thank you @jamesgeorgewilliams that really helps, can ignoreCommandManager be use with fromJSON?

I have an URL to load specific diagram, thus make I load diagram from JSON, when I try like this

this.graph = new dia.Graph({}, { cellNamespace: shapes });

this.commandManager = new dia.CommandManager({
  graph: this.graph,
  cmdBeforeAdd(cmdName, cell, graph, options) {
    options = options || {};
    return !options.ignoreCommandManager;
  },
});

this.graph.on('change', (cell) => {
  console.log('something happen', cell);
});

.....

this.graph.fromJSON(result.diagram, { ignoreCommandManager: true });

It still triggered graph on change, because on first load I modify the graph using fromJSON that make graph on change triggered, is there anything method to solve this?

Thank you

[kumilingus]

The graph reset event is currently not stored in the command manager history i.e. you don't have to try to ignore it.

Note there is also commandManager.reset() method to clear the history.

And commandManger.stopListening() and commmandManager.listen() to tell command manager to stop/start adding commands to stack (However, these methods are not public at the moment and are therefore subject to change).

[pandika-csgi]

Sorry which part of the graph reset refers to? and

If like that, what can be done to not triggered graph on change while I'm load graph using fromJSON?

[kumilingus]

graph.fromJSON({ cells: [], testAttribute: true }, { testOption: true });

Will trigger reset and change events on the graph.

• The reset event is ignored by the command manager.
• The change:testAttribute event can be ignored with cmdBeforeAdd callback as shown here earlier.