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

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.