Home > @jsplumbtoolkit/browser-ui-vue3
browser-ui-vue3 package#
Provides integration with Vue 3.
Classes#
| Class | Description |
|---|---|
| BrowserUIVue3 | Toolkit instance for use with Vue3 integration. |
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. |
| bindToDevLifecycle(event, handler) | |
| loadSurface(surfaceId, callback) | Loads the Surface with the given ID. |
| newInstance(options) | Create a new instance of the Toolkit to use with the Vue 3 integration. |
Interfaces#
| Interface | Description |
|---|---|
| Vue3RenderOptions |
Variables#
| Variable | Description |
|---|---|
| BaseGroupComponent | Provides a mixin you should use to create a component that renders a group.Usage: |
Vue.component('MyGroup', { props:{ ... }, mixins:[ jsPlumbToolkitVue3.BaseGroupComponent], template:'...your node template.......', methods:{ ... }})
| | BaseNodeComponent | Provides a mixin you should use to create a component that renders a node.Usage:
Vue.component('MyNode', { props:{ ... }, mixins:[ jsPlumbToolkitVue3.BaseNodeComponent], template:'...your node template.......', methods:{ ... }})
|
| COMPONENT_MINIVIEW | |
| COMPONENT_TOOLKIT | |
| EVENT_VERTEX_UPDATED | |
| EVENT_VERTICES_RENDERED | |
| JsPlumbToolkitVue3Plugin | The Toolkit's Vue3 integration plugin. To use this you need to first import it, and then use it:
import { JsPlumbToolkitVue3Plugin } from '@jsplumbtoolkit/browser-ui-vue3'Vue.use(JsPlumbToolkitVue3Plugin)
| | 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:[ jsPlumbToolkitVue3.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 }; } }})
| | PROP_CLASS_NAME | | | PROP_DATA | | | PROP_ID | | | PROP_RENDER_PARAMS | | | PROP_SURFACE_ID | | | PROP_TOOLKIT_PARAMS | | | PROP_URL | | | PROP_VIEW | |