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.
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;
}
});