DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG

Vue 2 Integration

The jsPlumb Toolkit has several components to assist you in integrating with Vue 2. Since release 1.13.0 these are available in two formats:

  • as an ES6 module in dist/jsplumbtoolkit-vue2.tgz
  • as ES5 in dist/jsplumbtoolkit-vue2-legacy.tgz, and dist/js/jsplumbtoolkit-vue2-legacy.js.

The "legacy" version expects to find Vue available in the global context, and does not work with Vue's single page components. We recommend using the ES6 version.

In this document we are focusing on the ES6 module integration. There is a demonstration page for the legacy integration, documentation for which can be found demo-vue2-legacy.

You may also like to read the documentation for the demo-vue2

Imports

You need to include the jsPlumb Toolkit and the jsPlumb Toolkit Vue 2 adapter. Since the Toolkit edition is not open source, if you need to include it as an import in package.json, you can use (from NPM 3+) a local import:

ES6 Module

"dependencies": {
    ...
    "jsplumbtoolkit":"file:./somewhere/jsplumbtoolkit.tgz",
    "jsplumbtoolkit-vue2":"file:./somewhere/jsplumbtoolkit-vue2.tgz"
    ...
},

Legacy Adapter

Since the legacy adapter can be dropped straight into a page, you can either include it in your package json and then import it in your page:

"dependencies": {
    ...
    "jsplumbtoolkit":"file:./somewhere/jsplumbtoolkit.tgz",
    "jsplumbtoolkit-vue2":"file:./somewhere/jsplumbtoolkit-vue2-legacy.tgz"
    ...
},
<script src="node_modules/jsplumbtoolkit/dist/js/jsplumbtoolkit.js"></script>
<script src="node_modules/jsplumbtoolkit-vue2/dist/js/jsplumbtoolkit-vue2-legacy.js"></script>

..or you can copy the JS files from the dist/js directory somewhere and import those:

<script src="somewhere/jsplumbtoolkit.js"></script>
<script src="somewhere/jsplumbtoolkit-vue2-legacy.js"></script>

The legacy adapter is known not to work with Webpack. We really do recommend you use the ES6 module.


Setup

import { jsPlumbToolkitVue2 } from "jsplumbtoolkit-vue2";

The jsPlumbToolkitVue2 module coordinates the various Vue components offered by the Toolkit

jsPlumbToolkitVue2 module

Most of the integration work between the Toolkit and Vue is taken care of by the components the Toolkit offers (discussions of which follow below) via interaction with "private" methods on the jsPlumbToolkitVue2 module. There is one public method on the module that you may find yourself using, though:

  • getSurface(id:string, callback:(s:Surface)=>any):void

Retrieves the surface with the given ID. We will update this to return a Promise at some stage. It is asynchronous because it is feasible that a call could be made to this method prior to the Surface having been created.

jsPlumb Components

The Toolkit offers 2 components and 3 mixins:

jsplumb-toolkit

This component provides an instance of the Toolkit and a Surface widget to render the contents.

Example
<jsplumb-toolkit id="toolkit" surface-id="surfaceId" v-bind:render-params="anObjectReference" 
        v-bind:toolkit-params="anObjectReference" v-bind:view="anObjectReference">
</jsplumb-toolkit>
Attributes

All attributes are optional. Note that Vue prefers "kebab case" for attribute names, even if the actual property is camel case on the component (and of course Javascript does not like kebab case for property names).

  • id Unique ID for the Toolkit instance. Can be used to retrieve a Toolkit instance from the jsPlumbToolkitVue2 module.
  • surface-id Unique ID for the Surface widget. Required if you wish to attach a Miniview or a Palette. Also useful if you wish to interact with a Surface, to perform operations such as zooming, centering on content, etc.
  • render-params Parameters to pass in to the constructor of the Surface widget. Note here we use the v-bind: prefix to tell Vue that the object we are injecting is in the Vue instance's model.
  • toolkit-params Parameters to pass in to the constructor of the Toolkit instance. Note again the use of v-bind: in our example above.
  • view View parameters. Views are discussed here.

jsplumb-miniview

This is a component that provides a Miniview that can be attached to some Surface.

Example
<jsplumb-miniview surface-id="surfaceId"></jsplumb-miniview>
Attributes
  • surface-id ID for the Surface widget to which to attach the Miniview.

jsplumb-palette

This mixin provides the bulk of the required to implement drag/drop of new Nodes/Groups onto your Surface, but you are expected to provide a few pieces of implementation-specific code.

Example
Vue.component('my-palette', {
    props:[ "nodeTypes" ],
    mixins:[ jsPlumbToolkitVue2.Palette ],
    selector:'[data-type]',
    template:'<ul><li v-for="node in nodeTypes" :data-type="type"></li></ul>',
    methods:{
        typeExtractor: function (el) {
            return el.getAttribute("jtk-node-type");
        },
        dataGenerator: function (type) {
            return { w:120, h:80 };
        }
    }
})

The properties for the component in this code snippet are:

  • props Implementation specific (and therefore optional): indicates that the component expects nodeTypes to be passed in; these are used by the template.
  • template Required. The template used to render your component.
  • mixins Required. This is how you include the Palette mixin.
  • selector Required. A CSS3 selector instructing the Toolkit how to identify which elements in the component represent draggable node types
  • methods Optional, but usually you'll want to provide at least a typeExtractor, which is a function the Palette mixin uses to extract the related node type from some element that has been dragged and dropped. This page has a discussion of the various methods you could provide here.

Sample data for nodeTypes might be:

[
    { "type":"fish", "label":"Fish" },
    { "type":"cow", "label":"Cow" },
    { "type":"aardvark", "label":"Aardvark" },
]

In your markup you might call your node palette like this:

<my-palette v-bind:node-types="your node types object" surface-id="surface"></my-palette>
Attributes
  • surface-id Required. Provides the ID for the Surface widget to which to attach the Palette.

For further reading on the concept of Palettes, see this page .

BaseNodeComponent

This mixin should be included in any component you will use to render a node (see #rendering for discussion of this). Several helper methods are exposed by this mixin:

  • getNode() Gets the underlying Toolkit node that the component is rendering
  • removeNode() Instructs the Toolkit to remove the node that the component is rendering. This will of course result in the destruction of the component.
  • getToolkit() Gets the underlying Toolkit instance for the node the component is rendering.
  • updateNode(data:any) Updates the underlying node that the component is rendering.

Nodes rendered with this mixin are fully reactive: calls to updateNode will result in a repaint of the component with no further effort involved on your part.

BaseGroupComponent

This mixin should be included in any component you will use to render a group (see #rendering for discussion of this). Several helper methods are exposed by this mixin:

  • getGroup() Gets the underlying Toolkit group that the component is rendering
  • removeGroup(removeChildNodes?:boolean) Instructs the Toolkit to remove the group that the component is rendering, and possibly all of the child nodes of the group too. This will of course result in the destruction of the component.
  • getToolkit() Gets the underlying Toolkit instance for the group the component is rendering.
  • updateGroup(data:any) Updates the underlying group that the component is rendering.

Groups rendered with this mixin are fully reactive: calls to updateGroup will result in a repaint of the component with no further effort involved on your part.

TOP


Rendering Nodes and Groups

To render nodes and groups you have two options:

  • use the Toolkit's default template renderer, Rotors
  • use a Vue component for each node/group type

Using a Vue component is of course far more appealing, and we'll discuss that first. It's pretty straightforward: you create a component, import it into the code that's handling your Toolkit instance, and then map it via the view. Imagine you make this component inside MyNode.vue:

<template>
    <div>
        <h1></h1>
        <button v-on:click="clicked()">CLICK ME</button>
    </div>
</template>


<script>
    import { BaseNodeComponent } from "jsplumbtoolkitvue2";

    export default {
        mixins:[ BaseNodeComponent ],
        methods:{
            clicked:function() {
                alert(this.getNode().data.label);
            }
        }
    }
</script>

And you make this component, to manage an instance of the Toolkit:

<template>
    <jsplumb-toolkit 
            ref="toolkitComponent" 
            url="flowchart-1.json" 
            v-bind:render-params="renderParams" 
            v-bind:view="view" 
            id="toolkit" 
            surface-id="surface" 
            v-bind:toolkit-params="toolkitParams">
    </jsplumb-toolkit>    
</template>

<script>

    import MyNode from './MyNode.vue';

    export default {

        name: 'jsp-toolkit',
        props:["surfaceId"],
        data:() => {
            renderParams:{ ... },
            view:{
                nodes:{
                    default:{
                        component:MyNode
                    }                
                }
            }
        }
    }
</script>

MyNode is mapped to the component used to render nodes of type "default" (which for the Toolkit means any node). The jsplumb-toolkit declaration in the template is the one from the demo-vue2, which is a good place to look to get a feel for how a whole application can be built using the Toolkit.


Rendering Ports

The Angular and React integrations that ship with the Toolkit offer specific support for rendering ports as well as node and groups. The initial release of the Toolkit's upgraded Vue integration does not yet offer this, but we're working on it for our next release. This functionality is of specific use if you are building an application like the demo-angular-database-visualiser.