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

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.