Skip to main content

Release 1.2.13

· One min read

Release 1.2.13 is now available. In this release:

  • Added KeyboardManager and KeyboardShortcutsPlugin, offering a customizable means of binding keyboard events, with default bindings for undo, redo, delete, move vertex, cut/copy/paste and select all, and the ability to provide your own custom mappings.
  • Added support for "freehand" and "polygon" lasso modes.
  • Fixed resize frame alignment and resize/rotate operations for vertices inside rotated groups, including nested groups.
  • Fixed edge attachment and resize frame alignment for nodes and ports inside rotated SVG groups, including after dragging a child causes the group to resize and when undoing or redoing the drag.
  • Fixed line-crossing arches to follow their owning edge's live colour and stroke width, preserve fractional widths, and use the matching arch diameter for corner clearance.
  • Ported the Image Pipeline Processor starter app from JsPlumb to VisuallyJs, for all supported libraries:

Image processor starter app

Release 1.2.12

· One min read

Release 1.2.12 is now available. In this release:

  • Fix for group collapse: edges between ports of child vertices were not recognised as being internal to the group.
  • Added support for multiple outlines to edges.
  • Several improvements to the vertex avoidance routines for edges

release-1.2.11

· One min read

`--- title: Release 1.2.11 date: 2026-10-21​

` Release 1.2.11 is now available. In this release:

  • Significant performance enhancements for bulk operations in the underlying RTree.
  • Support for astarGridCellSize, astarVertexBorder and astarVertexBuffer added to the edges section of DiagramOptions - you can now fine-tune the behaviour of the vertex avoidance routines in a diagram.

Release 1.2.10

· One min read

Release 1.2.10 is now available. In this release:

General​

  • Refactored the internal approach to adding CSS classes to apply additions/removals in a batch, reducing reflows

React​

  • Refactored Surface and Paper components to improve rendering speed

Release 1.2.9

· One min read

Release 1.2.9 is now available. In this release:

General​

  • Refactored bulk loader code to implement a 4x performance improvement
  • Updated packages to remove the publishConfig section of the package.json. This improves the portability of the built artifacts, allowing them to be uploaded to private NPM repositories without retaining the reference to the VisuallyJs repository URL.
  • Added support for minZoom and maxZoom options on overlays: overlays can now be hidden/shown based upon the zoom level of the UI.

Release 1.2.8

· 2 min read

Release 1.2.8 is now available. In this release:

General​

  • Added a new GraphPropagationEngine class, plus associated GraphPropagationEnginePlugin. This offers a way to propagate properties from one vertex to another, based on a set of rules.
  • Added support for readOnly on a ShapePropertyDefinition - inspectors will show you the value but not allow you to edit it.
  • Fixed an issue in ShapePropertiesInspector components where radio buttons for a given value were not all assigned the same name
  • Updated our private NPM repository to respond to the NPM /whoami endpoint. This facilitates usage of our NPM repository as a remote repository in apps such as JFrog.
  • Updated our Logic Gates starter apps to include the graph propagation engine.
  • Added support for graphPropagation to DiagramOptions
  • Added support for cells.templateEvents in DiagramOptions, allowing delegated event handlers to be attached to elements inside rendered shape templates and receive the associated DiagramCell.

Angular​

  • Fixed an issue in ShapePropertiesInspector components where radio buttons for a given value were not all assigned the same name

React​

  • Fixed an issue in ShapePropertiesInspector components where radio buttons for a given value were not all assigned the same name

Vue​

  • Fixed an issue in ShapePropertiesInspector components where radio buttons for a given value were not all assigned the same name

Svelte​

  • Fixed an issue in ShapePropertiesInspector components where radio buttons for a given value were not all assigned the same name

Release 1.2.7

· 3 min read

Release 1.2.7 is now available. In this release:

General​

  • Added new Scada/HMI starter app to all libraries. This app provides a solid foundation on which you can build your own Scada/HMI apps, with a look and feel that is aligned with the HMI ISA-101 Standard.
  • Update bubble/scatter chart custom marker code to not require namespaced elements in the SVG snippets returned from a resolveMarker call
  • Added name to PropertyMappings. This is an optional human readable name that is used by inspectors.
  • Updated overlay definition code to handle the case that an overlay/marker is specified as an object with "type" but no "options"
  • Improved CSS/rendering for the edge type picker
  • Added support for boolean false for 'rotatable' property of Label/Custom overlay: with this set, the label never rotates to make the text upright.
  • Added new CSS vars to resize tools/diagram tools plugins:
    • --vjs-resize-handle-fill-color For the fill of the resize handles, defaults to #FFFFFF
    • --vjs-resize-frame-line-width For the stroke width of the resize frame, defaults to 2px

React​

  • Made the options prop of all charts reactive, so that the chart re-initializes if it changes
  • Added EdgePropertyMappingsInspector component - an inspector that automatically renders a form for managing the properties of an edge from the installed edge property mappings.
  • Added ShapePropertiesInspector component - an inspector that automatically renders a form for managing the properties of some shape defined in a shape set

Angular​

  • Made the data, url and options inputs reactive on all charts
  • Added EdgePropertyMappingsInspector component - an inspector that automatically renders a form for managing the properties of an edge from the installed edge property mappings.
  • Added ShapePropertiesInspector component - an inspector that automatically renders a form for managing the properties of some shape defined in a shape set

Svelte​

  • Made the data, url and options props reactive on all charts
  • Added EdgePropertyMappingsInspector component - an inspector that automatically renders a form for managing the properties of an edge from the installed edge property mappings.
  • Added ShapePropertiesInspector component - an inspector that automatically renders a form for managing the properties of some shape defined in a shape set

Vue​

  • Made the data, url and options props reactive on all charts
  • Added EdgePropertyMappingsInspector component - an inspector that automatically renders a form for managing the properties of an edge from the installed edge property mappings.
  • Added ShapePropertiesInspector component - an inspector that automatically renders a form for managing the properties of some shape defined in a shape set

Release 1.2.6

· One min read

Release 1.2.6 is now available. In this release:

General​

  • Improved label placement for SVG shapes when label position is "top" or "bottom"
  • Added support for SVG shape label background.

Svelte​

  • Fixed issue in the ShapePaletteComponent with auto edge options

Release 1.2.5

· 3 min read

Release 1.2.5 is now available, and it's a big one! In this release:

General​

  • Added support for rotating elements that are being dragged from a palette by tapping/holding a specific key
  • Added the concept of "auto edge connect": elements that are being dragged from the palette can be automatically connected to existing vertices by dragging them over connection points.
  • The ShapePalette and DiagramPalette classes now support allowDropOnEdge - you can drag a shape onto an edge and drop it, and the edge will be automatically split.
  • Fixed painting issue with lasso in SVG containers
  • Fixed issue with incorrect location of port elements on a rotated node in an SVG container
  • Aesthetic improvements to the lasso in both apps and diagrams, including exposing several new CSS vars for theming.
  • Added support for data-vjs-anchor, data-vjs-source-anchor and data-vjs-target-anchor to edge drag/click to add functionality.

Starter Apps​

  • New starter app Fault Tree Analysis added. This is a dashboard containing a Fault Tree Analysis chart, with a Cut Sets view and a Risk Contribution view

fault tree analysis

  • New starter app Logic Gates added

fault tree analysis

  • New starter app Circuit Diagram added

fault tree analysis

Vue​

  • Made the data and url props of the SurfaceComponent and PaperComponent reactive, making these components easier to work with inside a Vue app.
  • Added support for rotating elements that are being dragged from a palette by tapping a specific key
  • Added auto edge connect support to PaletteComponent, DiagramPaletteComponent and ShapePaletteComponent

Svelte​

  • Made the data and url props of the SurfaceComponent and PaperComponent reactive, making these components easier to work with inside a Svelte app.
  • Added support for rotating elements that are being dragged from a palette by tapping a specific key
  • Added auto edge connect support to PaletteComponent, DiagramPaletteComponent and ShapePaletteComponent

React​

  • Added support for rotating elements that are being dragged from a palette by tapping a specific key
  • Added auto edge connect support to PaletteComponent, DiagramPaletteComponent and ShapePaletteComponent

Angular​

  • Added support for rotating elements that are being dragged from a palette by tapping a specific key
  • Added auto edge connect support to PaletteComponent, DiagramPaletteComponent and ShapePaletteComponent

Breaking​

  • The new updateTypeOnPaletteTap option for shape palettes and diagram palettes technically constitutes a breaking change, as this flag switches on behaviour that was previously on by default: when something is selected in the canvas and you click a shape in the palette, the selected vertices' type is changed to match the clicked shape.

Release 1.2.4

· One min read

Release 1.2.4 is now available. In this release:

General​

  • Added new Bowtie layout - a two sided hierarchy, such as you might use in a Mindmap.
  • Added support for autoArm and armTimeout to the lasso plugin - the plugin switches on after a long press on the canvas, without the user needing to switch the surface to select mode.
  • Our Mindmap starter apps were updated to use the new Bowtie layout instead of the custom layout they were previously using.
  • Ported JsPlumb's "neighbourhood views" starter app to VisuallyJs - an app that shows how you can provide several different views of the same dataset on a single page

Vue​

  • The renderer was updated to ensure that the vertex passed to Surface/Paper vertex components is marked raw, and not converted to a Proxy by Vue.
  • Added support for optional dataType prop on the Surface/Paper components

React​

  • Added support for optional dataType prop on the Surface/Paper components

Svelte​

  • Added support for optional dataType prop on the Surface/Paper components

Angular​

  • Added support for optional dataType prop on the Surface/Paper components