Skip to main content

Release 6.70.0

· 3 min read
Simon Porritt
Simon Porritt
JsPlumb core team

In release 6.70.0 we've updated our Vue 3 integration to make it more modern and easier to use, with reduced boilerplate and better documentation.

It is now optional to set surfaceId on the SurfaceComponent, MiniviewComponent, ControlsComponent, ExportControlsComponent and ShapePaletteComponent - the components will use a default value if not provided.

With these changes you can now get up and running with JsPlumb Vue quicker than ever:

<template>
    <div style="width:100%;height:100%">
        <SurfaceComponent :data="this.getData()"/>
        <ControlsComponent/>
        <MiniviewComponent/>
    </div>
</template>
<script>
    
    import { defineComponent } from "vue"
    
    export default defineComponent({
      methods:{
        getData:function() {
          return {
            data:{
              nodes:[
                { id:"1", label:"1", left:50, top:50}, 
                { id:"2", label:"TWO", left:250, top:250}
              ],
              edges:[
                { source:"1", target:"2" }
              ]    
            }
          }
        }
      }
    })

</script>

We've also made a bunch of other nice changes in this release. The full changelog is:

Updates​

  • None of the Vue 3 components require a surface-id prop anymore. For the vast majority of apps, having a single surface, that means you can rely on the defaults and remove a bunch of boilerplate from your templates.

  • If you do not provide a component to map a node or a group, the Vue 3 integration will now use a default component.

  • Vue 3's loadSurface method now makes surfaceId optional: if you omit it, JsPlumb will use the default surface id.

  • We've added a ControlsComponent to our Vue 3 integration

  • We've added an ExportControlsComponent to our Vue 3 integration

  • We've added an ExportControlsComponent to our React integration

  • Our Vue 3 docs have been updated to be easier to follow and to find the things you need.

  • The ControlsComponent in the React integration was updated to honour an orientation prop set on it.

  • You can pass an optional typeParameter and/or categoryParameter to the constructor of ShapeLibraryImpl. This allows you to override the parameters the shape library will use from each vertex's data to resolve the shape to use.

Breaking changes​

A few components were renamed in the Vue 3 integration:

  • jsplumb-toolkit is now SurfaceComponent
  • jsplumb-miniview is now MiniviewComponent
  • jsplumb-shape is now ShapeComponent
  • jsplumb-shape-palette is now ShapePaletteComponent
  • jsplumb-edge-type-picker is now EdgeTypePicker

In the Vue 3 SurfaceComponent:

  • renderParams was renamed to renderOptions
  • view was renamed to viewOptions
  • toolkitParams was renamed to toolkitOptions

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.