Skip to main content

Release 6.40.0

· 5 min read
Simon Porritt
Simon Porritt
JsPlumb core team

Release 6.40.0 is a fairly big release, containing:

  • A major update to our React integration, with the introduction of contexts and providers, making it easier than ever before to rapidly build visual connectivity apps.

  • A vastly improved algorithm for repainting orthogonal connectors when the source or target node is dragged

  • Default node components in the Angular and React integration, allowing you to quickly prototype something without needing to focus on too many details upfront

  • Improvements to our documentation to make it easier to see how to achieve specific tasks with different integrations. This is an ongoing process but we've hit upon a basic structure now that we think works nicely.

  • A couple of bugfixes

  • An update to the Hierarchy layout to support ports.

React Updates​

In 6.40.0 we have introduced Contexts and Providers, and we've rewritten our components so that they are all context aware. You no longer need to mount components inside a useEffect as they can find the surface they should attach to via a context:

import React from "react"
import { MiniviewComponent, SurfaceComponent, ControlsComponent } from '@jsplumbtoolkit/browser-ui-react';

export default function DemoComponent({someProps}) {
    
    const data = {
        nodes:[
            { id:"1", label:"1", left:50, top:50}, 
            { id:"2", label:"TWO", left:250, top:250}
        ],
        edges:[
            { source:"1", target:"2" }
        ]    
    }
    
  return <div>
    <SurfaceComponent data={data}>
        <ControlsComponent/>
        <MiniviewComponent/>
    </SurfaceComponent>    
    </div>
        
}

These changes also apply to our new PaletteComponent, which is a replacement for the previous JsPlumbToolkitDragDropComponent. Here we see how to use one inside a SurfaceProvider:


import { PaletteComponent, SurfaceComponent, SurfaceProvder } from '@jsplumbtoolkit/browser-ui-react';

export default function MyApp() {
    
  const dataGenerator = function (el) { 
    return { 
        w:120, 
        h:80,
        type:el.getAttribute("data-node-type")
    }; 
  };
       
  return <div className="row">
    <SurfaceProvider>
      <div className="col-9">
        <SurfaceComponent/>
      </div>
      <div className="col-3">
        <PaletteComponent selector="li" dataGenerator={dataGenerator}>
          <ul>
            <li data-node-type="foo" jtk-is-group="true">FOO</li>
            <li data-node-type="bar">BAR</li>
          </ul>
        </PaletteComponent>
      </div>
     </SurfaceProvider>
     </div>    
}

We think these changes will make a big difference to how easy it is to build apps using JsPlumb React.

The full list of updates to React is:

  • SurfaceContext added to project. This is a Context that provides a Surface for other components to access.

  • SurfaceProvider added to project. This provides a SurfaceContext.

  • SurfaceComponent added. This is a new version of JsPlumbToolkitSurfaceComponent which is context aware, and which itself can act as a surface provider for other components.

  • MiniviewComponent and ControlsComponent have been updated to be functional components, and to be context aware. For the most part these components can now simply be declared in your JSX with no configuration or mounting necessary.

  • JsPlumbProvider added to project. This provides an instance of JsPlumbToolkit to any descendant components. Although not such a common use case, this provider can be used to render one instance of JsPlumb in multiple surfaces.

  • PaletteComponent added. This is a new, functional, version of the original SurfaceDropComponent. It is context aware and can discover a Surface provided either from a SurfaceComponent or a SurfaceProvider.

  • ShapeLibraryPaletteComponent is now a functional component that is context aware and can function within any context that provides a surface.

  • InspectorComponent added. This is a context aware React wrapper around JsPlumb's Inspector.

Orthogonal connector redraw​

We've made several improvements to the algorithm that repaints an orthogonal connector when its source or target is moved. These updates are particularly noticeable when the edge is using Continuous anchors.

Hierarchy layout​

The Hierarchy layout has been updated to support edges that are from ports on nodes/groups, not just edges from nodes/groups themselves.

Inspectors​

  • Added optional filter to Inspector, allowing you to control which elements the inspector will edit

  • Fixed an issue in the Inspector where in some cases the "active" css class was being added to its container even though there was no object to edit.

Default component mappings for React and Angular​

The Angular and React integrations now use a default node/group mapping if you do not provide one in your view. This lets you prototype things more quickly without having to get bogged down in details.

Breaking changes​

  • The default layout for a Surface is now the AbsoluteLayout, where previously it was EmptyLayout.

  • The default endpoint is now BlankEndpoint, where previously it was DotEndpoint.

  • The default anchor is now Continuous, where previously it was AnchorLocations.Bottom.

  • When a user relocates the anchor point in an orthogonal connector with the mouse, the connector's geometry is now reset. We've never been too happy with the way the connector tries to reconstruct the user's intent and in 6.40.0 we decided that changing the anchor point was a decisive enough gesture that it signalled the user wanted to re-route the entire connector.

In the React integration a few components have been renamed and several marked deprecated, due to the new components discussed below. Specifically, the changes are:

  • The original ShapeLibraryPaletteComponent is now JsPlumbToolkitShapeLibraryPaletteComponent
  • The original ControlsComponent is now JsPlumbToolkitControlsComponent
  • The original MiniviewComponent is now JsPlumbToolkitMiniviewComponent

It may not be evident that these changes have occurred since for each of the classes renamed we have created new versions with the original names, as functional components that are able to operate inside the SurfaceProvider which was introduced in 6.40.0.

Props and state for each of these components were also renamed - where you see something prefixed with JsPlumbToolkit, you know it's now legacy code and will be removed in a future release.

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.