Release v3.3.1

CHANGELOG

• uglified files encode Unicode characters as ASCII
• use polyfills from core-js
• dia.Cell - remove() passes options to unembed() internally to maintain consistency

Release v3.3.0

CHANGELOG

• Prevent prototype pollution - lodash v4.17.20, fix util.setByPath()
• Prevent DoS - fix util.unsetByPath()
• add Element Tools tutorial
• highlighters - new API, add mask highlighter

screenshot

• demo.ELK - add Eclipse Layout Kernel demo

screenshot

• demo.Container - add collapse/expand container demo

screenshot

• demo.Typescript - show class style shape definition

code

import { shapes, dia } from './vendor/joint';

export class MyShape extends dia.Element {

    defaults() {
        return {
            ...super.defaults,
            type: 'myNamespace.MyShape',
            size: { width: 100, height: 80 },
            attrs: {
                body: {
                    refCx: '50%',
                    refCy: '50%',
                    refRx: '50%',
                    refRy: '50%',
                    strokeWidth: 2,
                    stroke: '#333333',
                    fill: '#FFFFFF'
                },
                label: {
                    textVerticalAnchor: 'middle',
                    textAnchor: 'middle',
                    refX: '50%',
                    refY: '50%',
                    fontSize: 14,
                    fill: '#333333'
                }
            }
        }
    }

    markup = [{
        tagName: 'ellipse',
        selector: 'body'
    }, {
        tagName: 'text',
        selector: 'label'
    }]

    test(): void {
        console.log(`A prototype method test for ${this.get('type')}`);
    }

    static staticTest(i: number): void {
        console.log(`A static method test with an argument: ${i}`);
    }
}

Object.assign(shapes, {
    myNamespace: {
        MyShape
    }
});

• demo.HTML - implement z-index sorting
• dia.Paper - add snapLabels option
• dia.Paper - restrictTranslate option defined as function returning a function
• dia.Graph - fix hasActiveBatch()
• dia.Element - prevent unnecessary rounding errors in resize()
• dia.Element - add insertPort() to support inserting port at a given position
• dia.Link - fix order of points in getPolyline()
• dia.LinkView - prevent connection validation on magnets previously validated
• dia.CellView - fix update order of nodes when ref in use
• dia.ToolsView - enable adding tool to a view, which has not been rendered
• util.breakText - fix height for a text with empty lines
• highlighters.stroke - add useFirstSubpath option
• routers.manhattan - fix scan directions order
• connectors.jumpover - request updates after batch:stop
• dia.attributes - add magnetSelector & containerSelector
• dia.attributes - textWrap takes letter-spacing into account
• Vectorizer - add createSVGStyle() and createCDATASection() static methods
• Geometry - add getSubpaths() to Path
• Geometry - add round() methods

Release v3.2.0

CHANGELOG

• add Sequence Diagram demo

screenshot

• add HTML Elements demo

screenshot

• upgrade jQuery dependency (~3.5.0)
• dia.Paper - add beforeRender and afterRender options, add hasScheduledUpdates(), trigger render:done in sync mode
• dia.Paper - fix missing initial render:done event
• dia.Paper - prevent the prototype options modification, persist functions passed as options

details

new joint.dia.Paper({
  // e.g. fixes `defaultConnector` option defined as a function
  defaultConnector: (sourcePoint, targetPoint, route) => {
     const polyline = new g.Polyline([sourcePoint, ...route, targetPoint]);
     return `M ${polyline.serialize()}`;
  }
});

• dia.Paper - scaleContentToFit() option padding accepts an object

details

paper.scaleContentToFit({ padding: { top: 50, bottom: 10, horizontal: 10 }});

• dia.Paper - fix isMounted argument of viewport() option

details

new joint.dia.Paper({
   viewport: function(view, isMounted) {
       if (isMounted) {
         // the view was already mounted
         // it's visible in the paper
       } else {
         // the view was just created or was detached by this function in the previous run
         // it's not visible in the paper (it's not in the DOM)
       }
      // return `true` to mount the view
      // return `false` to detach the view
   }
});

• dia.Paper - dynamic link update priorities (fix for "link connected to other two links" update bug)
• dia.Element - port removal runs in batch
• dia.Element - add getGroupPorts()
• dia.Element - prevent exception in getPointFromConnectedLink() when port does not exist
• dia.LinkView - fix never ending batch for legacy link tools
• dia.LinkView - add requestConnectionUpdate()
• dia.LinkView - trigger link:snap:connect and link:snap:disconnect events

video

source code

• dia.LinkView - prevent exception when labels and connection require update
• dia.LinkView - measure snap distance for links from magnet's boundary
• dia.LinkView - add getEndConnectionPoint()
• mvc.View - add DETACHABLE property to ignore viewport matching, FLAG_INSERT & FLAG_REMOVE defined on per view basis
• linkTools.Anchor: add resetAnchor option
• linkTools.Segments: add stopPropagation option
• connectionPoints.anchor - add align and alignOffset options
• attributes.textWrap: add maxLineCount option
• util.breakText - retain new line characters, add maxLineCount option
• util.sanitizeHTML: sanitize attribute values with "data:" and "vbscript:"
• Geometry - add parallel() to Line, add serialize() to Point and Line

Release v3.1.1

CHANGELOG

• dia.CellView - prevent DOM exceptions when invalid attrs provided
• dia.ToolView - prevent contextmenu event (uses paper.options.guard now)

Release v3.1.0

CHANGELOG

• add RoughJS demo

screenshot

• add dia.elementTools: Button, Remove, Boundary
• improve low-level performance for large graphs
• fix ES5 dependencies
• dia.Paper - validateMagnet() callback has evt argument
• dia.Paper - ignore viewport when removing views, register unmounted views on render
• dia.Graph - fix bfs() stop condition
• dia.Element - make sure only elements are taken into account in fitEmbeds()
• dia.LinkView - fix label rendering after multiple changes made to model
• dia.LinkView - fix missing pointerup event for non-interactive labels
• linkTools.Boundary - padding can be defined separately for each side
• dia.ToolView - support reusable tools
• connectors.jumpover - add radius option to make corners rounded
• layout.DirectedGraph - remove unnecessary vertices
• dia.attributes - add stubs option to connection attribute

screenshot

• dia.attributes - add displayEmpty for text elements
• Vectorizer - fix e2c() overflowing the stack in normalizePathData()
• Geometry - add simplify() to Polyline (remove redundant points)

Release v3.0.4

CHANGELOG

• package.json - add a browser key to point to dist (fix Webpack build in IE11)
• dia.Paper - pass Backbone model options to view update (cell removal & z change)
• dia.CellView - fix mouseleave event in async mode
• linkTools.Vertices - fix vertexAdding option

Release v3.0.3

CHANGELOG

• allow for automatic patch upgrades for dependencies
• changes to config options are respected
• dia.Paper - ensure SVG document has id
• dia.Paper - fix viewport matching for links
• dia.Graph - make hasActiveBatches() use the same logic for various signatures
• dia.CellView - properly separate elements and ports CSS selectors

Release v3.0.2

CHANGELOG

• layout.DirectedGraph - allow injecting dagre and graphlib as an option property
• routers.Manhattan - use fallback when source and target are exactly the same
• fix markup TypeScript definition

Release v3.0.1

CHANGELOG

• remove all global variables
• dia.LinkView - fix cell:pointerup event

Release v3.0.0

CHANGELOG

Compatibilty warnings

• dia.CellView - support for asynchronous updates and freezing

details

A major breaking change of the release.

When a view needs an update, 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.

A CellView is no longer listening for a specific attribute change (e.g change:size). It listens to the change event, which is fired after all attributes have changed.

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

In order to support async mode the following changes are necessary. The update requests are sent to the paper via flags (a flag is an arbitrary string or array of strings) and later received back all at once. The paper accumulates flags received and confirms the updates when the right time has come.

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

• dia.CellView - remove deprecated getStrokeBBox()

details

The implementation of the method above was naive and didn't work in the majority of cases.

// 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);

• dia.Paper - async mode revamped (viewport matching, rendering progress)

details

render:done event is triggered anytime scheduled updates are done (rendered/updated).

// 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)%
      }
   }
}) ;

batchSize in the paper async option is ignored.

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

• dia.Paper - cells are rendered into the paper.cells (previously called paper.viewport), transformations are applied to paper.layers (parent of paper.cells)

details

A minor change which will allow us to implement other features in the future without breaking changes (layers for cells, labels on top of all other cells)
paper.viewport is now deprecated and refers to the same node as paper.cells

// 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

• dia.Graph - getBBox() accepts no parameters and returns the bounding box of the entire graph

details

To retrieve the bounding box of multiple cells use getCellsBBox() instead

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

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

• dia.Graph - getCellsBBox(cells) does not ignore links passed via cells parameter

details

// 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]);

• Vectorizer - fix attr() for attributes in xmlns namespace

details

Will not affect you unless you use the namespace below directly.

// `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';

• remove deprecated PortsModelInterface and PortsViewInterface from joint.shapes.basic

details

Use Element Ports API instead.

Notable changes

• upgrade dependencies (Backbone v1.4.0, Dagre v0.8.4, Graphlib v2.1.6, jQuery v3.4.1)
• full support for ES Modules
• support for Link to Link connections

screenshot

• add Mix Bus demo

screenshot

• dia.Paper - implement viewport matching (remove views from the DOM when not in the viewport) via viewport option and checkViewport()
• dia.Paper - add freeze(), unfreeze(), isFrozen() and option frozen to stop/start views updates
• dia.Paper - add requireView(), dumpViews(), updateViews() to force views to update
• dia.Paper - add sorting options (none, approximate, exact)
• dia.Paper - add anchorNamespace, linkAnchorNamespace, connectionPointNamespace, defaultLinkAnchor options
• dia.Paper - add useModelGeometry for scaleContentToFit(), fitToContent(), getContentBBox(), getContentArea()
• dia.Paper - add contentArea for scaleContentToFit(), fitToContent()
• dia.Paper - fitToContent() returns area (g.Rect) of the content
• dia.Graph - add indirect option for getNeighbors(), getConnectedLinks(), isNeighbor() for link-link connections
• dia.Link - add priority attribute for anchors
• dia.Link - add getSourceCell(), getTargetCell(), getPolyline(), getSourcePoint(), getTargetPoint(), getBBox()
• dia.Link - getSourceElement() and getTargetElement() finds also indirect elements
• dia.Link - add angle, keepGradient and ensureLegibility options for labels
• dia.ElementView - add findPortNode()
• dia.LinkView - properly revert pointer-events attribute after a link interaction
• dia.LinkView - add root node selector for string markup
• dia.CellView - keep a dragged view always under the pointer (esp. when restrictTranslate in use)
• dia.CellView - make sure cell:mouseleave and cell:mouseenter events are always called when the mouse leaves/enters a cell
• dia.CellView - fix referenced bounding box for nodes outside the rotatable group
• dia.Cell - add generateId(), generatePortId()
• anchors - modelCenter anchor accepts dx, dy options
• linkAnchors - add anchors for link-link connection (ratio, length, perpendicular...