When you define a custom CellView, which listens to the underlying model changes and update itself (modifying its sub-elements directly) you should follow the instructions below in order to make the view work correctly in the async mode.

Note, that when a view needs an update (a model attribute has changed e.g. size has changed), it requests the update from the paper first. The paper confirms the update immediately (sync mode) or in the next animation frame (async mode). The updates may be also held by the paper as long as the paper is frozen and released when the paper changes its state to unfrozen.

The update requests are sent to the paper via flags and later received back all at once. The paper accumulates flags received and confirms the updates when the right time has come.

Methods and terminology

flagLabel - is an arbitrary string or array of strings

flags - are encoded flag labels

CellView.prototype.presentationAttributes - is an object that maps model attributes to flag labels.

CellView.prototype.confirmUpdate(flags, opt) - This method receives all scheduled flags and based on them updates the view

CellView.prototype.hasFlag(flags, flagLabel) - Checks whether a flagLabel is present in the current update.

CellView.addPresentationAttributes(presentationAttributes) - Extends the CellView presentation attributes with another presentationAttributes. - The method makes sure the original CellView attributes are preserved. It returns a new object with all presentation attributes.

const FadeView = joint.dia.ElementView.extend({
    // Make sure that all super class presentation attributes are preserved
    presentationAttributes: joint.dia.ElementView.addPresentationAttributes({
        // mapping the model attributes to flag labels
        faded: 'flag:opacity'
    confirmUpdate(flags, ...args) {
        joint.dia.ElementView.prototype.confirmUpdate.call(this, flags, ...args);
        if (this.hasFlag(flags, 'flag:opacity')) this.toggleFade();
    toggleFade() {
        this.el.style.opacity = this.model.get('faded') ? 0.5 : 1;