Home > @jsplumbtoolkit/browser-ui-vue2

browser-ui-vue2 package

Provides integration with Vue 2.

Classes

Class	Description
BrowserUIVue2

Functions

Function	Description
addComponent(surfaceId, params, type)	Add a component to the Surface with the given id. If the Surface already exists and has been initialised the component will be added immediately; otherwise it will be enqueued for later processing.
addMiniview(surfaceId, params)	Add a Miniview to the Surface with the given id. If the Surface already exists and has been initialised the Miniview will be added immediately; otherwise it will be enqueued for later processing. This is just a wrapper around addComponent.
addPalette(surfaceId, params)	Add a Palette to the Surface with the given id. If the Surface already exists and has been initialised the Palette will be added immediately; otherwise it will be enqueued for later processing. This is really just a wrapper around addComponent.
addSurface(toolkitComponent, toolkit, surfaceId, container, renderParams, view)
addToolkit(id, toolkitParams)
getSurface(surfaceId, callback)
newInstance(options)

Interfaces

Interface	Description
Vue2RenderOptions

Variables

Variable	Description
BaseGroupComponent	Provides a mixin you should use to create a component that renders a group. Usage:

Vue.component('MyGroup', {
 props:[ ... ],
 mixins:[ jsPlumbToolkitVue2.BaseGroupComponent],
 template:'...your group template.......',
 methods:{
     ...
 }
})

| | BaseNodeComponent |

Provides a mixin you should use to create a component that renders a node.

Usage:

Vue.component('MyNode', {
 props:[ ... ],
 mixins:[ jsPlumbToolkitVue2.BaseNodeComponent],
 template:'...your node template.......',
 methods:{
     ...
 }
})

| | JsPlumbToolkitVue2Plugin |

The Toolkit's Vue2 integration plugin. To use this you need to first import it, and then use it:

import { JsPlumbToolkitVue2Plugin } from '@jsplumbtoolkit/browser-ui-vue2'
Vue.use(JsPlumbToolkitVue2Plugin)

| | Palette |

Provides a mixin you can use to create a component that controls a set of droppable nodes for a Surface.

Usage:

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

|