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

Release v2.2.1

CHANGELOG

• utils - fix breakText() definition in Typescript
• dia.CellView - findAttribute() docs
• grunt - wrapper files use file extension .js.partial
• demos - improvements

Release v2.2.0

CHANGELOG

• update insecure dependencies (mainly Lodash v4.17.11)
• use Karma+Istanbul to run tests
• dia.Graph - getCellsBBox() takes cells' rotation into account
• dia.Graph - fix cell removal after dry flag passed
• dia.Paper - support relative dimensions (e.g. width='100%')
• dia.Paper - add stopDelegation interactive option
• dia.Paper - add magnetThreshold option (create a link when the pointer leaves the magnet)
• dia.Paper - allow to stop propagation of paper events
• dia.Element - add removePorts()
• dia.ElementView - add element:magnet:pointerclick, element:magnet:dblpointerclick, element:magnet:contextmenu events
• dia.ElementView - fix embeddingMode for Lodash v4+
• dia.ElementView - fix cell:pointerclick in Chrome after DOM change
• dia.LinkView - prevent multiple validate connections for already snapped magnets
• dia.LinkView - fix label rendering in IE
• dia.Cell - JSON Markup accepts textContent and groupSelector properties
• dia.CellView - presentaion attributes (attrs) are now applied in the order given
• mvc.View - prevent multiple onRender() calls
• mvc.View - add findAttribute()
• mvc.View - prevent className undefined
• dia.attributes - add ellipsis option for textWrap
• dia.atributes - add refWidth2 and refHeight2
• shapes.standard - add background to BorderedImage
• shapes.standard - add InscribedImage shape
• shapes.pn - fix PlaceView
• connectionPoints.Boundary - fix for non-graphical elements
• routers.manhattan - prevent rounding errors, add padding option
• routers.orthogonal - add padding option
• linkTools - fix touch interactions
• utils - normalize event.target in normalizeEvent() for <use> tag in IE
• utils - improve parseCssNumeric() for restrictUnit parameter
• Vectorizer - add isSVGGraphicsElement()
• fix legacy PortsViewInterface

Release v2.1.4

CHANGELOG

• reconfigure eslint
• add .editorconfig
• dia.Element - fix hasPorts() when no items defined
• dia.LinkView - stop preventing propagation for legacy link tools events

Release v2.1.3

CHANGELOG

• dia.CellView - fix ambigious magnet selector
• dia.LinkView - trigger missing link:pointerdown event on label pointerdown
• dia.LinkView - fix connection update for loop links
• dia.Link - improve reparenting (loop link embeds into the connected element, link connected to an ancestor and its decendant embeds into the ancestor)
• dia.Graph - getConnectedLinks() does not contain enclosed links (not necessary embedded links), add includeEnclosed option to get all connected links.
• dia.Paper - fix cell:contextmenu event
• dia.Paper - fix missing magnet reference for validateConnection()
• dia.LinkView - fix backwards compatibility for linkConnectionPoint option signature
• dia.attributes - fix textWrap attribute
• Geometry - improve polyline parsing
• improve advanced tutorials

Release v2.1.2

CHANGELOG

• dia.CellView - fix magnet lookup based on the port property
• docs - fix broken links

Release v2.1.1

CHANGELOG

• layout.PortLabel: fix manual position
• anchors: prevent exception when reference node not in the DOM

Release v2.1.0

CHANGELOG

• update Tutorials
• shapes.Standard - add new set of high-performance elements and links
• dia.LinkView - new flexible definitions based on geometric representation
• dia.LinkView - refactor event handlers
• dia.LinkView - introduce anchors, connectionPoints and connectionStrategy
• dia.LinkView - add getConnection(), getSerializedConnection(), getConnectionSubdivisions(), getPointAtRatio(), getTangentAtLength(), getTangentAtRatio() getClosestPoint() and getClosestPointLength()
• dia.LinkView - add getVertexIndex(), getLabelCoordinates()
• dia.Link - add vertex API
• dia.Link - add label API and allow define a default label
• dia.Link - add source(), target(), router(), connector()
• anchors - ready-to-use anchors (center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight, perpendicular, midSide)
• connectionPoints - ready-to-use connection points (anchor, bbox, rectangle, boundary),
• connectionStrategies - predefined connection strategies (defaulAnchor, pinAbsolute, pinRelative)
• dia.ElementView - allow element's rotation without rotatable group
• dia.ElementView - refactor event handlers
• dia.ElementView - apply vector-effect: non-scaling-stroke to nodes inside ths scalable group only
• dia.Element - add angle()
• dia.CellView - render markup from JSON (link, element, ports and labels)
• dia.Cell - avoid unnecessary z-index changes during toFront or toBack
• dia.ToolsView - set of tools for a link
• dia.ToolView - base class for a single link tool
• linkTools - ready-to-use tools (vertices, segments, anchor, arrowhead, boundary, remove button)
• dia.Paper - complete set of events
• dia.Paper - add allowLink option to revert/remove invalid links
• dia.Paper - add getContentArea()
• dia.Paper - findParentBy option can be defined as a function
• dia.Paper - consequitive pointerdown, pointermove and pointerup can share event data
• dia.Paper - fire pointerup event on touchcancel
• dia.Paper - improve preventing image dragging in FireFox
• dia.attributes - sourceMarker, targetMarker and vertextMarker receive default stroke, fill and opacity values from its context
• dia.attributes - add refRInscribed, refRCircumscribed, refD, refPoints, title, textVerticalAnchor attributes
• dia.attributes - add connection, atConnectionLength, atConnectionRatio
• routers.Manhattan - adaptive grid for pathfinding
• routers - supports anchors (don't necessary start and end in the center of the magnet)
• layout.DirectedGraph - prevent undesired input cells sorting
• Vectorizer - add toGeometryShape(), normalizePathData(), tagName() and id to prototype
• Vectorizer - add transformLine() and transformPolyline()
• Vectorizer - text() accepts textVerticalAnchor option
• Vectorizer - improve Kappa value
• Geometry - add Path and Curves
• Geometry - add Polyline bbox(), scale(), translate(), clone() and serialize()
• Geometry - implement intersections of line with various shapes
• Geometry - add Point lerp() for linear interpolation
• shapes.basic.TextBlock - sanitize text
• util - normalizeSides() validates input and accepts horizontal and vertical attributes
• util - add parseDOMJSON(), dataUriToBlob(), downloadBlob(), downloadDataUri() and isPercentage()

Release v2.0.1

CHANGELOG

• toggleFullscreen() - fix canceling fullscreen in an iframe
• dia.Link - fix default label font color (IE)
• dia.Cell - fix removeProp() on arrays
• dia.Graph - fromJSON() does not ignore dry option anymore