Skip to main content

Release 6.80.0

· 5 min read
Simon Porritt
Simon Porritt
JsPlumb core team

Release 6.80.0 is a major update to our Svelte integration, with the introduction of a host of new components, plus a surface provider, making it easier than ever before to rapidly build visual connectivity apps.

Svelte Updates​

Where previously you'd have to manually instantiate a ControlsComponent or add a MiniviewPlugin, from 6.80.0 onwards these are supplied as Svelte components which can be declared as children of a SurfaceComponent:

<script>
  import { MiniviewComponent, SurfaceComponent, ControlsComponent } from '@jsplumbtoolkit/browser-ui-svelte';
  
  const data = {
      nodes:[
          { id:"1", label:"1", left:50, top:50}, 
          { id:"2", label:"TWO", left:250, top:250}
      ],
      edges:[
          { source:"1", target:"2" }
      ]    
  }
</script>

<SurfaceComponent data={data}>
    <ControlsComponent/>
    <MiniviewComponent/>
</SurfaceComponent>

SurfaceProvider​

In the above code, ControlsComponent and MiniviewComponent are able to locate the Surface to attach to because under the hood the SurfaceComponent has populated a Svelte context. We've also included a dedicated SurfaceProvider component which populates the context, and which you can use when you need to supply a surface reference to some other component, such as a PaletteComponent or InspectorComponent. You'll see this in a couple of the examples below.

PaletteComponent​

We've included a PaletteComponent, from which your users can drag new nodes/groups onto the canvas:

<script>
  import { MiniviewComponent, SurfaceComponent, ControlsComponent, PaletteComponent } from '@jsplumbtoolkit/browser-ui-svelte';
  
  const dataGenerator = function (el) { 
      return { 
          w:120, 
          h:80,
          type:el.getAttribute("data-node-type")
      }; 
    };
  
  const data = {
      nodes:[
          { id:"1", label:"1", left:50, top:50}, 
          { id:"2", label:"TWO", left:250, top:250}
      ],
      edges:[
          { source:"1", target:"2" }
      ]    
  }
</script>

<SurfaceProvider>
    <div class="row">
        <SurfaceComponent data={data} class="col-9">
            <ControlsComponent/>
            <MiniviewComponent/>
        </SurfaceComponent>
        <PaletteComponent selector="li" dataGenerator={dataGenerator} class="col-3">
          <ul>
            <li data-node-type="foo" jtk-is-group="true">FOO</li>
            <li data-node-type="bar">BAR</li>
          </ul>
        </PaletteComponent>
    </div>
</SurfaceProvider>

ShapeLibraryPaletteComponent​

We've included a ShapeLibraryPaletteComponent, a specialised instance of PaletteComponent that renders the contents of some ShapeLibrary and allows your uses to drag new SVG shapes onto the canvas.

<script>
  import { MiniviewComponent, 
  SurfaceComponent, 
  ControlsComponent, 
  ShapeLibraryPaletteComponent } from '@jsplumbtoolkit/browser-ui-svelte';
  
  import { ShapeLibraryImpl, FLOWCHART_SHAPES } from "@jsplumbtoolkit/browser-ui"
  
  const shapeLibrary = new ShapeLibraryImpl([FLOWCHART_SHAPES])
  
</script>

<SurfaceProvider>
    <div class="row">
        <SurfaceComponent data={data} class="col-9" shapeLibrary={shapeLibrary}>
            <ControlsComponent/>
            <MiniviewComponent/>
        </SurfaceComponent>
        <ShapeLibraryPaletteComponent class="col-3"/>
    </div>
</SurfaceProvider>

InspectorComponent​

We've included an InspectorComponent, which wraps the vanilla JS Inspector with a nice component-based API:

<script>
  import { SurfaceComponent, InspectorComponent } from '@jsplumbtoolkit/browser-ui-svelte';
  import { Node, Edge } from '@jsplumbtoolkit/browser-ui"
  
  import NodeInspector from "./NodeInspector.svelte"
  import EdgeInspector from "./EdgeInspector.svelte"
  
  const inspectors = {
      [Node.objectType]:NodeInspector,
      [Edge.objectType]:EdgeInspector
  }
  
</script>

<SurfaceProvider>
    <div class="row">
        <SurfaceComponent data={data} class="col-9" shapeLibrary={shapeLibrary}>
            <ControlsComponent/>
            <MiniviewComponent/>
        </SurfaceComponent>
        <InspectorComponent class="col-3" inspectors={inspectors}/>
    </div>
</SurfaceProvider>

Those are a few of the key items, but there's a lot in this Svelte upgrade. The full changelog is:

New functionality​

  • Added SurfaceProvider, an element that provides context for various other elements, allowing things like the miniview or controls components to find the surface to attach to.

  • Added MiniviewComponent, which provides a miniview attached to some surface.

  • Added ControlsComponent, which provides a set of controls with basic operations such as zoom to extents, undo/redo, etc.

  • Added ExportControlsComponent, which provides a set of buttons from which users can export a diagram to SVG, PNG or JPG.

  • Added PaletteComponent, a component from which users can drag new nodes/groups onto the canvas.

  • Added ShapeLibraryPaletteComponent, a specialized version of PaletteComponent that renders the contents of a shape library, from which users can drag shapes onto the canvas.

  • Added ShapeComponent, an SVG shape renderer.

  • Added InspectorComponent, a Svelte wrapper around JsPlumb's Inspector.

  • Added EdgeTypePickerComponent, a component that renders samples of a list of edge types, and allows a user to select one.

  • The Svelte SurfaceComponent will now render a default component for nodes/groups if no explicit mapping is found in the view. This is great for rapid prototyping.

  • Added full JS docs for all interfaces in the Svelte integration.

Breaking changes​

  • The props for the Svelte SurfaceComponent have changed:

    • renderParams is now renderOptions
    • viewParams is now viewOptions
    • toolkitParams is now modelOptions

  • You'll now need to use, at a minimum, Svelte 3.55. But we recommend using Svelte 4.

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.