Blog post preview
May 8, 2018

Introducing JointJS+ version 2.3

Welcome to JointJS+ version 2.3!

We're please to share with you the latest update to the JointJS+ library, full of the usual updates, fixes and cool new features you've come to expect. Take a look below for the main highlights as well as the full changelog.

JointJS+ 2.3 Highlights:

New format.Print plugin for custom diagrams or showing previews

New format.Print plugin for custom diagrams or showing previews

The brand new format.Print plugin allows you to print the whole diagram or any custom rectangular area using the browser print dialog. Not only you can define the standard paper properties such as width, height, format, margins and orientation but you can also let JointJS+ automatically split the diagram into multiple sheets. All of that with a single function call!

Heavily improved Link tools, optimized link and shape performance

Heavily improved Link tools, optimized link and shape performance

Link and element internals have been completely refactored, leading to a much higher performance, more flexibility in defining custom tools and elements, a better UX and user-friendly API. New built-in link tools allow manipulation of vertices, segments, anchors, arrowheads and boundaries.

Improvements and new API methods for UI, curves and geometries

Improvements and new API methods for UI, curves and geometries

New abstractions for Paths and Curves and methods allowing JavaScript only calculation of their intersection with other shapes. New methods added to PaperScroller for scrolling and positioning diagram content. Lightbox adds a new cross-browser client-side file download.

Plenty of great new tutorials

Plenty of great new tutorials!

The Tutorials section has been completely updated including new tutorials for step-by-step creation of diagrams, such as: how to listen to events both on the UI layer (paper) and on the data model (graph) to run custom functions; definition of custom shapes and links; link labels and tools; and how to serialize/de-serialize your diagrams to/from JSON so that you can store it in your back-end.

Complete JointJS+ v2.3 Changelog:

  • KitchenSink revamped
  • AST app revamped
  • VectorEditor app does not scale strokes in IE
  • updated Tutorials
  • format.Print - print custom areas and posters or show a preview
  • ui.PaperScroller - add positionContent(), positionElement(), positionPoint(), scrollToContent() and getClientSize()
  • ui.Selection - honors paper's restricted area
  • ui.Inspector - prevent model's properties removal for the lists (properties not being edited by the inspector stay untouched)
  • ui.Inspector - add overwrite option per input
  • ui.Inspector - prevent multiple updates on a single input change
  • ui.LightBox - add downloadable, fileName, downloadAction and buttons options
  • ui.PathEditor - fix removeAnchorPoint bug
  • 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()
  • dia.Link - fix default label font color (IE)
  • 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.Cell - fix removeProp() on arrays
  • 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.Graph - fromJSON() does not ignore dry option anymore
  • 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
  • layout.GridLayout - prevent undesired input cells sorting
  • layouty.TreeLayout - prevent maximum call stack size exceed
  • 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()
  • util - toggleFullscreen() - fix canceling fullscreen in an iframe

We hope you you'll get the most from these new features, fixes and updates. Please don't hesitate to get in touch with questions or comments.

Happy diagramming!

- The JointJS Team

Blog post author
David Durman
Serial entrepreneur, three-time father and a big believer in No-Code/Low-Code technologies.
Roman Bruckner
Diagramming enthusiast from an early age, traveler and a persistent contributor to the developer community.
Stay in the loop

Speed up your development with a powerful library