jointjs 3.0.0

Release v3.0.0

on Node.js NPM

model.set({ a: 1, b: 2 }); //  will trigger `change:a`, `change:b` and `change`.

// PREVIOUSLY
joint.dia.ElementView.extend({
  initialize(...args) {
     joint.dia.ElementView.prototype.initialize.apply(this, ..args);
     this.listenTo(this.model, 'change:faded', this.toggleFade);
  },
  toggleFade() {
    this.el.style.opacity = this.model.get('faded') ? 0.5 : 1;
  }
});

// NOW 1. a quick backwards compatible fix which works in `sync` mode
joint.dia.ElementView.extend({
  initialize(...args) {
     joint.dia.ElementView.prototype.initialize.call(this, ...args);
     this.listenTo(this.model, 'change', this.onModelChange);
  },
  onModelChange() {
      if (this.model.hasChanged('faded')) this.toggleFade();
  },
  toggleFade() {
    this.el.style.opacity = this.model.get('faded') ? 0.5 : 1;
  }
});

// NOW 2. a fix which supports both `sync` and `async` mode and freezing/unfreezing feature
joint.dia.ElementView.extend({
  // `addPresentationAttribute()` makes sure that all super class presentation attributes are preserved
  presentationAttributes: joint.dia.ElementView.addPresentationAttributes({
     // mapping the model attributes to flags
     faded: 'flag:opacity'
  }),
  // this method receives all scheduled flags and based on them updates the view
  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;
  }
});

// read the actual stroke-width
const strokeWidth = elementView.model.attr('body/strokeWidth');
// add the half of the stroke width to all the sides of the bounding box
const strokeBBox = elementView.getBBox().inflate(strokeWidth / 2);

// PREVIOUSLY
paper.on('render:done', () => { /* all rendered */ });
graph.resetCells([el1, el2, l1]);

// NOW 1.
paper.once('render:done', () => { /* all rendered and this callback is removed */ })
graph.resetCells([el1, el2, l1]);
// NOW 2.
paper.freeze();
graph.resetCells(arrayOfCells);
paper.unfreeze({
   batchSize: 100,
   progress: (done, current, total) => {
      if (done) {
        paper.unfreeze(); // remove the progress callback 
        // hide a progress bar
      } else {
        // update a progress bar (current / total * 100)%
      }
   }
}) ;

// PREVIOUSLY
const paper = new joint.dia.Paper({ async: { batchSize: 200 }});

// NOW
const paper = new joint.dia.Paper({ frozen: true, async: true });
paper.unfreeze({ batchSize: 200 });

// PREVIOUSLY
// 1. transforming the paper
V(paper.viewport).scale(2,2);
// 2. reading transformation matrix of the paper
const transformationString = paper.viewport.getAttribute('transformation');
// 3. adding custom nodes to the viewport
const rect = V('rect', { x: 10, y: 10, width: 100, height: 100 });
V(paper.viewport).append(rect);

// NOW
// 1.
paper.scale(2,2);
// 2.
const transformationString = V.matrixToTransformString(paper.matrix());
// 3. 
const myLayer = V('g');
V(paper.layers).prepend(myLayer);
/*
All my nodes will be under the elements and links
Alternatively call `V(paper.layers).append(myLayer)` so the nodes will be above the cells
*/
const rect = V('rect', { x: 10, y: 10, width: 100, height: 100 });
myLayer.append(rect);
myLayer.empty() // remove all custom nodes

// PREVIOUSLY
const cellsBBox = graph.getBBox([el1, el2, el3]);

// NOW
const cellsBBox = graph.getCellsBBox([el1, el2, el2]);

// PREVIOUSLY
const cellsBBox = graph.getCellsBBox([el1, el2, l1, l2]);

// NOW
// Passing links could lead into a different result (vertices position can affect the resulting bounding box)
const cellsBBox = graph.getCellsBBox([el1, el2]);

// `xmlns:link` is now defined with the correct namespace
V(el).attr('xmlns:link', 'http://www.w3.org/1999/xlink');

// PREVIOUSLY
V.namespace.xmlns = 'http://www.w3.org/2000/svg';

// NOW
V.namespace.xmlns = 'http://www.w3.org/2000/xmlns/';
V.namespace.svg = 'http://www.w3.org/2000/svg';