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

• New starter app Logic Gates added

• New starter app Circuit Diagram added

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

Release 1.2.3 is now available, with a great new plugin that places markers at the intersection of orthogonal connectors:

By default, the plugin draws a bridge at each intersection, but a few different bridge types are supported.

Bridge types​

Arch​

This is the default:

Gap​

Draws a gap in one of the edges

Dot​

Draws a dot at the point of intersection

You can change the dot radius and provide your own color if you wish:

Release 1.2.2 is now available, with new background components for Angular and Vue, as well some reactivity enhancements to Angular and Svelte, overlays, and some minor fixes and improvements. Also in this release we've pushed a version of our popular AI Agent Builder for Svelte and Vue.

General​

• Internal updates to the update*** methods to ensure that any associated type change is grouped along with the updates in a transaction.
• Added new relayoutOnVertexRemove option to Surface and Paper. Useful when you're using a static layout such as the Hierarchy layout.

Vue​

• Added BackgroundComponent, GridBackgroundComponent, ImageBackgroundComponent and TiledImageBackgroundComponent
• Internal updates to the re-render mechanism
• Introduced edge specific VueEdgeWrapperProps interface for overlay component props

Angular​

• Added BackgroundComponent, GridBackgroundComponent, ImageBackgroundComponent and TiledImageBackgroundComponent
• Added new $edgeData(), $sourceData() and $targetData() signals to the BaseAngularOverlayComponent. These give you reactive access to the data for the edge and for its source and target vertices.

Svelte​

• Added BackgroundComponent, GridBackgroundComponent, ImageBackgroundComponent and TiledImageBackgroundComponent
• Added usePaper hook
• Added hide prop to the snippet passed to SurfacePopup.
• Updated Svelte component overlays to make the edge (and its source/target) reactive, so the overlay can now show a live view of the edge's backing data or that of its source/target.

Issue Fixes​

• #5 - Lasso consumes tap event on edge
• Vue/Angular Fix for the SurfacePopup's hide function - it was not locating the ref correctly.

Breaking​

• The refreshLayoutOnEdgeConnect Surface/Paper render option was renamed to relayoutOnEdgeConnect

We've pleased to announce the release of VisuallyJs 1.2.1, containing several useful new features and a couple of great starter apps.

• Popups - components that VisuallyJs automatically keeps aligned with some vertex in your canvas, adjusting for pan/zoom as necessary
• A brand AI Agent Builder starter app was added
• Component overlays for Vue and Svelte - use components as overlays, fully wired into the reactive state and the VisuallyJs data model
• Support for marking up properties inside inspectors as belonging to ports on a vertex, allowing you to edit ports in your data model alongside the nodes they belong to
• Several new signals were added to the BaseVertexComponent in Angular, providing reactive state that exposes the edges attached to the vertex.
• We added a new renderer - the Paper component. This is a "static" version of the Surface: nodes, groups and edges are all rendered in the same way, but the view does not support pan or zoom, and the canvas is scaled automatically so that the content is always visible in the viewport.
• We dusted off the FIFA World Cup visualization from 2018 and released it as a starter app for VisuallyJs.

Popups​

AI Agent Builder​

Everyone's got one of these, and now we do too! But we're pleased to be able to report that this app required far fewer lines of code than similar demonstrations from other libraries (almost 1/5th of the size of the codebase from another well-known diagramming library!). Our AI Agent Builder is fully featured and ready for you to drop in to your app, or use as a base for your own. Check it out here - a link to the repository is on the demo page.

Component overlays​

Support for using components as overlays has been in our Angular and React integrations for some time now. In 1.2.1 we've also added this feature to our Vue and Svelte integrations.

Port Inspectors​

Inspectors provide a convenient means of wiring up property editors to the vertices in your app. Prior to 1.2.1, though, if you wanted to edit the properties of ports on your vertices, you'd have to setup a separate rendering condition for them. In 1.2.1 we've added support for a new vjs-port attribute, which allows you to tell VisuallyJs that some input field in your inspector pertains to a port, not the vertex:

<div>
  <input vjs-att="label"/>  
  <input vjs-port="yes" vjs-att="label"/>
  <input vjs-port="no" vjs-att="label"/>
</div>

Here, our inspector allows us to edit the 'label' property on the vertex itself, as well as each of the vertex's ports.

Angular Signals​

With every release we're modernising and tightening up our Angular integration, and 1.2.1 is no exception - we've added several signals to the BaseVertexComponent, allowing you to reactively access the edges attached to a given vertex. This makes it easy to do things like showing an 'add child' button if the node has no children, for example:

@Component({
  template:`<div>
  <h1>{{$data().label}}</h1>
  @if(sourceEdges().length === 0) {
    <button (click)="addChild">Add Child</button>
  }`
})

export class MyComponent extends BaseNodeComponent {}

You can get the list of source/target edges connected to just the vertex itself, or all of the source/target edges connected to the vertex and any of its ports.

We've also updated the SurfaceComponent, PaperComponent and DiagramComponent to convert the data and url inputs into signals. You can still use them as plain old inputs, but now you can wire them up to signals and have the component reload dynamically.

Paper Component​

Sometimes you want to render a static view of your dataset, without given users the ability to pan, zoom or drag elements around - but you still want them to be able to interact with, and update, the model. The Paper component gives you that. It's a version of the Surface without pan, zoom or element dragging, and it automatically scales its canvas to fit inside the bounds of the viewport (unless you don't want it to; you can switch off scaling and have it fill its natural size, and the parent will scroll if needs be).

We're using this component in the Group Stage and Journey View components of our FIFA World Cup visualizer - we look forward to seeing what you build with it!

FIFA World Cup​

We released this for JsPlumb back in 2018 but we've always had a soft spot for some of the visualizations it contains, so we've updated it for VisuallyJs and added to our list of starter apps. It's a great showcase for the range of things you can easily build with VisuallyJs, containing several different views of the data, and integrating natively with React, Angular, Vue and Svelte.

The group stage view, with its high "data-ink" ratio, is one of our favourites:

We're also quite partial to the "journey view", which takes advantage of our new Paper component to render a static view:

Check out the demonstration here. There's a link to the repo if you want to clone it.

Changelog​

General​

• The EVENT_GRAPH_CLEARED event, fired by the model, now passes the model that fired it as a payload.
• The Surface was updated to fix an issue where it was holding on to stale viewport dimensions: calling zoomToFit after external change to viewport element size would use the cached dimensions.
• Added the data-vjs-no-events attribute which can be set on any element inside a node vertex, marking it as excluded from firing mouse events for that vertex.
• Updated centerOn and centerOnAndZoom in the Surface to support optional centering on multiple elements as opposed to just a single one.
• Added support for a vjs-port attribute on controls inside an inspector. This allows you to edit properties on ports inside your vertices from the vertex inspector.

Breaking​

• The previous Index class was renamed to GraphSearchIndex
• In BaseAngularOverlayComponent, the surface member was renamed to ui; its type is now derived from a type parameter on the class (which you declare when you create a subclass)

React​

• The useZoom hook no longer requires that a ui can be passed in: it can derive one from the context.
• overlays is now marked optional in the ReactEdgeMapping interface used in view options
• Added SurfacePopup component, an automatic mechanism for launching a popup on a vertex component and keeping it located correctly as the user pans, zooms and drags the vertex.
• InspectorComponent updated to function correctly inside a PaperProvider or PaperComponent

Vue​

• Added SurfacePopup component, an automatic mechanism for launching a popup on a vertex component and keeping it located correctly as the user pans, zooms and drags the vertex.
• Added support for Vue component overlays

Svelte​

• Added SurfacePopup component, an automatic mechanism for launching a popup on a vertex component and keeping it located correctly as the user pans, zooms and drags the vertex.
• Added support for Svelte component overlays

Angular​

• Added SurfacePopup component, an automatic mechanism for launching a popup on a vertex component and keeping it located correctly as the user pans, zooms and drags the vertex.
• Added several new signals to the BaseVertexComponent - sourceEdges(), allSourceEdges(), targetEdges() and allTargetEdges(). With these signals you can dynamically respond to connectivity changes inside your templates.
• Added PaperComponent - a fixed view version of SurfaceComponent, with the same support for rendering but no pan/zoom, and which automatically adjusts its dimensions to fit into its viewport. The "data" and "url" inputs on the SurfaceComponent, PaperComponent and DiagramComponent of the Angular integration were updated to be reactive - you can hook them up to some state and have the component reload the dataset automatically.