Skip to main content

Release 6.60.0

· 3 min read
Simon Porritt
Simon Porritt
JsPlumb core team

In release 6.60.0 we've updated our Angular integration to make it more modern and easier to use, with support for signals, reduced boilerplate, and better documentation. The @jsplumbtoolkit/browser-ui-angular package now requires Angular 16 or later. Don't worry, though, if you're on a version of Angular older than 16: we've renamed our existing Angular integration to @jsplumbtoolkit/browser-ui-angular-legacy, and you can still use it.

Signals​

You may recall a post we wrote a few months ago, detailing how signals could be integrated with JsPlumb Angular. We've taken the code we sketched out in that post and integrated it into a brand new BaseNodeComponent, which exposes the underlying vertex data as a signal - objSignal - and ensures that the signal is kept up to date to changes in the node's data.

import { Component, computed } from "@angular/core";

import { BaseNodeComponent } from "@jsplumbtoolkit/browser-ui-angular";

@Component({
    template: `<div>{{myComputedValue()}}</div>`
})
export class NodeComponent extends BaseNodeComponent {
    readonly myComputedValue = computed( () =>
        this.objSignal().values.join(",")
    );
}

We've also created BaseGroupComponent, for the sake of completeness. Prior to 6.60.0 users had to extend BaseNodeComponent when creating a component to render a group.

BasePortComponent has also been updated to expose its underlying data object as a signal.

Reduced boilerplate​

  • It is now optional to set toolkitId on a SurfaceComponent; the component will use a default value if not provided. Given that most apps have only one Toolkit model having to always provide a toolkitId was largely redundant.

  • It is now optional to set surfaceId on the SurfaceComponent, MiniviewComponent, ControlsComponent and ShapeLibraryPaletteComponent; the components will use a default value if not provided.

With these changes you can now get up and running with JsPlumb Angular quicker than ever:


import { Component } from "@angular/core";
import { NodeComponent } from "./node.component";

@Component({
    selector: 'app-component',
    template: `<div>
        <jsplumb-surface [view]="view" 
            [renderParams]="renderParams">
        </jsplumb-surface>
        <jsplumb-miniview></jsplumb-miniview>
        <jsplumb-controls></jsplumb-controls>
        </div>
        `
})
export class AppComponent {
    view = {
        nodes:{
            default:NodeComponent
        }
    }
    
    renderParams = {
        ...    
    }
}

Breaking changes​

  • The @jsplumbtoolkit/browser-ui-angular package now requires Angular 16 or later. If you are using a version of Angular older than 16, you will need to use our @jsplumbtoolkit/browser-ui-angular-legacy package.

A few classes were renamed in the Angular integration (although note their selectors were unchanged):

  • jsPlumbSurfaceComponent is now SurfaceComponent
  • jsPlumbMiniviewComponent is now MiniviewComponent
  • jsPlumbSurfaceDropComponent is now SurfaceDropComponent
  • jsPlumbDragDropComponent is now DragDropComponent
  • The original BaseNodeComponent is now LegacyBaseNodeComponent
  • The original BasePortComponent is now LegacyBasePortComponent

Further reading​

Start a free trial

Sending your evaluation request...

Interested in the concepts discussed in this article? Start a free trial and see how JsPlumb can help bring your ideas to market in record time.

Get in touch!​

If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.