Back to jointjs.com.

CHANGELOG

• Prevent prototype pollution - fix util.setByPath()

    const obj = {};
    // assert: obj.polluted === undefined
    joint.util.setByPath({}, [['__proto__'], 'polluted'], true, '/');
    // assert: obj.polluted === undefined
  

---

• demo.List - an element with a vertical list of items

  The list item is a port with an arbitrary size and markup.

  

  Live List Demo

  Typescript Source Code

---

• apps.Database - add remove and arrowhead link tools

  Live Database Demo

---

• apps.Chatbot - various fixes

  • use useModelGeometry for “Resize To Fit” to work as expected
  • hide the JSON Editor with ngIf (Angular) to prevent parsing the JSON when it’s hidden.
  • update JSON Editor on dia.CommandManager change

    const history = new dia.CommandManager({ graph });
    history.on('stack', () => {
        // It is called only when there is a change in the graph
        // that modifies the undo/redo stack.
        // (e.g. if the user drags and element and leaves it on the exact
        // same position, this callback is not triggered)
    });
  

---

• Various TypeScript improvements

    // Better use of generic Backbone.View
    cellView.el // is SVGGraphicElement
    paper.el // is an HTMLElement
    cellView.vel // is always a Vectorizer (mvc.View with svgElement=true)
    paper.vel // is always null (mvc.View with svgElement=false)
  
    // Better use of generic Backbone.Model
    graph.get('cells') // is a Backbone.Collection
    element.get('position') // is dia.Point
  
    // Cloning
    cell.clone() // returns the same type as the original cell
    element.clone({ deep: true }) // is an array of dia.Cell
    element.clone({ deep: false }) // returns the type of the element
  
    // ui.Inspector
    new ui.Inspector({
        /* ... */
        cell: graph // (is a dia.Graph)
        // It's possible to edit properties of the graph
        // (of an arbitrary Backbone.Model)
    });
  

---

• ui.SelectBox - fix CSS syntax error

---

• ui.Stencil - fix paperDragOptions defined as a function

    new ui.Stencil({
        /* ... */
        paperDragOptions: () => {
            // The temporary paper to draw the element being dragged
            return {
                model: new dia.Graph({}, { cellNamespace: customNamespace })
            }
        }
    })
  

---

• ui.Toolbar - fix zoom-to-fit options

    const toolbar = new joint.ui.Toolbar({
        tools: [{
            type: 'zoom-to-fit',
            max: 3,
            min: 0.2,
            step: 0.2,
            useModelGeometry: true, // works now
            padding: 10, // works now
        }],
        references: {  paperScroller}
    });
  

---

• dia.Paper - skip update of connected links when isolate flag used

  You can pass { isolate: true } flag to the set(), attr() or prop() cell methods if the property change does not affect the connected links. Typically, changing the link color has zero effect on attached links. By default, the link and all connected links are updated.</p>

    element.attr(['body', 'fill'], 'red', { isolate: true });
  

---

• dia.LinkView - optimize connector only update

    link.set('connector', { name: 'rounded'});
    // It is not necessary to re-calculate new `route`. Run the
    // `connector` only as set the new path data to the link.
  

---

• dia.Cell - support preinitilize() lifecycle method

  Backbone v1.4 added a preinitialize() method to allow modifying Backbone objects before instantiation logic is run. For more information please see Backbone PR.

    class MyElementView extends dia.ElementView {
  
        constructor(...args) {
            // In ES6 classes you can not use `this` before `super()`
            // as `this` is being born in the base class
            super(); // instantiation logic
        }
  
        preinitialize() {
            // run before instantiation logic
        }
  
        initialize() {
            // run after instantiation logic
        }
    }
  

---

• dia.Cell - fix toJSON() when defaults() is defined as a method

    class MyElement extends dia.Element {
        defaults() {
            return {
                ...super.defaults,
                type: 'MyElement',
                attrs: {
                    /* default `attrs` */
                }
            }
        }
    }
  
    const myEl = new MyElement();
    // This will filter out the default `attrs` from the output JSON
    myEl.toJSON();
  

---

• connectors.jumpover - prevent unnecessary route calculation to improve performance

  When the jumps require an update, only the jumpover connector (and not the router e.g. manhattan) is run.

---

• Vectorizer - fix multi-line text line heights when 100% of the line is annotated

    V('text', { 'font-size': 20 }).text('line\nline', {
        lineHeight: 'auto',
        annotations: [
            { start: 0, end: 4, attrs: { fill: 'red' }},
            // The line has blue annotation from start to end
            // and no font-size defined
            { start: 5, end: 9, attrs: { fill: 'blue' }}
        ]
    });
    // Assert: the line height is based on the `font-size`
    // defined on the text (20)