Blog post preview
December 22, 2015

JointJS+ v1.7 Released

The highlight of JointJS+ 1.7 release is the following three features:

  • a powerful and efficient graph data model with traversing algorithms,
  • a flexible tree layout engine and
  • improved inline text editing.

Read further to find out what else has been added in the new version of JointJS+ HTML 5 diagramming toolkit. JointJS+ gives you all the tools you need to build state-of-the-art products integrating visual interfaces for editing workflow, BPMN and flowchart diagrams, among others.

New features

A Powerful Graph Data Model

The JointJS+ core graph data model has been extended with many functions dealing with traversing directed graphs and accessing structural information. For this, we have implemented an efficient representation of the graph allowing us to make fast lookups. The following is a list of some of the new functions available on the graph object:

  • dfs() (Depth-first search algorithm)
JointS – A Powerful Graph Data Model
  • bfs() (Breadth-first search algorithm)
JointJS – A Powerful Graph Data Model
  • isSuccessor(), isPredecessor(), isNeighbor(), getPredecessors(), getSuccessors(), getSubgraph()
  • isSource(), isSink(), getSources(), getSinks()
  • cloneCells(), cloneSubgraph()

All these functions not only work on flat graphs but also hierarchical ones.

Flexible Tree Layout Engine

TreeLayout and its accompanying TreeLayoutView now support not only left-to-right, right-to-left but also top-to-bottom and bottom-to-top layout types.

JointJS – Flexible Tree Layout Engine
JointJS – Flexible Tree Layout Engine
JointJS – Flexible Tree Layout Engine

It is even possible to have different intermixed layout types on a per-node basis!

JointJS – Flexible Tree Layout Engine

Improved Inline Text Editing

The TextEditor component, which implements powerful SVG inline text editing of any text in any diagram object, now uses native browser selections and supports editing of link labels (rich-text and rotated text too!). The native browser selection has made selecting large amounts of text much more efficient with smoother, more-comfortable user interaction.

JointJS – Improved Inline Text Editing

Improved inline editing of link labels is another great addition and can be enabled literally in four lines of code.

JointJS – Improved Inline Text Editing

... and much more!

  • Inspector widget now provides an easy way to add custom field types.
  • PaperScroller introduces new methods scroll(), scrollToElement() andcenterElement() for programmatic scrolling (even animated)
  • Halo control panel has been improved and extended with a way to display more than one pie menu toggle at the same time
  • dia.Paper adds a new option multiLinks as a quick way to switch off the possibility to create two links connecting the same elements
  • A critical bug fix for an upcoming version of Google Chrome which removed the native getTransformToElement() method on SVG elements
  • ... and there's more!

See the JointJS+ 1.7 CHANGELOG page for full details.


If you missed our previous release, visit our blog post to see what components were added and which ones were improved in JointJS+ 1.6 version.

Blog post author
David Durman
Serial entrepreneur, three-time father and a big believer in No-Code/Low-Code technologies.
No items found.
Stay in the loop

Speed up your development with a powerful library