Skip to main content

Release 6.50.0

· 3 min read
Simon Porritt
Simon Porritt
JsPlumb core team

This release sees a few more updates to our React integration to make it easier than ever to use:

  • The ShapeLibraryPaletteComponent in the React integration no longer needs to be provided with a shapeLibrary as a prop - it retrieves the shape library from the Surface it is attached to.

  • A new ShapeComponent was added to the React integration. This component is functional and takes as a prop the ctx that the Surface passes to the mapping your view.

  • We've introduced a JsxWrapperProps interface to define the ctx member that the surface passes in to JSX mapped in your viewOptions.

We've used these updates in our React Flowchart Builder starter app - they've really simplified the JSX in a couple of places. For example, our palette can now locate the shape library to use from the context given by the SurfaceProvider:

<SurfaceProvider>
  <SurfaceComponent shapeLibrary={shapeLibrary} ....>
        ...
  </SurfaceComponent>

  <div className="jtk-demo-rhs">
  
    <ShapeLibraryPaletteComponent className="node-palette" 
                                  dataGenerator={dataGenerator} 
                                  initialSet={FLOWCHART_SHAPES.id}/>
                                  
    <Inspector edgeMappings={edgeMappings()}/>
  </div>

</SurfaceProvider>

And when using a shape component to render some SVG we now only need to pass in the ctx :

export function NodeComponent({ctx}) {
    return <div className="flowchart-object" data-jtk-target="true">
        <ShapeComponent ctx={ctx} showLabels={true} labelProperty="text"/>        
        </div>
}

ShapeComponent gets the surface it is attached to from the context, and then it gets the shape library to use from the surface.

Changelog​

The full changelog is:

Updates​

  • The algorithm used to select a Dynamic anchor was adjusted to not add the delta between some anchor and the element's center to its calculations.

  • A new ShapeComponent was added to the React integration. This component is functional and takes as a prop the ctx that the Surface passes to the mapping your view.

  • The ShapeLibraryPaletteComponent in the React integration no longer needs to be provided with a shapeLibrary as a prop - it retrieves the shape library from the Surface it is attached to.

  • We've introduced a JsxWrapperProps interface to define the ctx member that the surface passes in to JSX mapped in your viewOptions.

Breaking​

  • In the React integration, the original ShapeComponent has been renamed to LegacyShapeComponent.

  • In jsplumbtoolkit.css, the .jtk-miniview class is now specified position:absolute instead of position:relative. This better reflects how a miniview is typically used in the majority of UIs.

Further reading​

Start a free trial

Interested in the concepts discussed in this article? JsPlumb is now in maintenance mode, but the good news is that we've released a bigger and better library - VisuallyJs. If you can do it in JsPlumb you can do it more easily in VisuallyJs.

To read more about VisuallyJs, check out the home page, or if you want to get started on a trial right now, head over to the trial page at https://visuallyjs.com/trial

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.