Application

The component that acts as the entry point of the application is defined in App.vue, which looks like this:

<template><divid="app"><divclass="jtk-demo-main"id="jtk-demo-flowchart"><divstyle="display:flex"><Palettesurface-id="surface"selector="[data-node-type]"/><divid="canvas"class="jtk-demo-canvas"><Controlssurface-id="surface"/><Flowchartsurface-id="surface"/></div></div><divclass="description"><p>ThissampleapplicationisacopyoftheFlowchartBuilderapplication,usingtheToolkit's Vue 2 integration components and Vue CLI 3. </p> <ul> <li>Drag new nodes from the palette on the left onto the workspace to add nodes</li> <li>Drag from the grey border of any node to any other node to establish a link, then provide a description for the link'slabel</li><li>Clickalinktoedititslabel.</li><li>Clickthe'Pencil'icontoenter'select'mode,thenselectseveralnodes.Clickthecanvastoexit.</li><li>Clickthe'Home'icontozoomoutandseeallthenodes.</li></ul></div></div></div></template><script>importVuefrom"vue"import{Dialogs,jsPlumbToolkit}from"jsplumbtoolkit"importFlowchartfrom'./components/Flowchart.vue'importPalettefrom'./components/Palette.vue'importControlsfrom'./components/Controls.vue'exportdefault{name:'app',components:{Flowchart,Palette,Controls},mounted:function(){jsPlumbToolkit.ready(()=>{Dialogs.initialize({selector:".dlg"});});}}</script>

Points to note:

The template uses 3 components that are also declared in this app - Flowchart, Palette and Controls. A discussion of each of these is below.

We initialise the Toolkit's Dialogs inside a jsPlumbToolkit.ready(..) function in the mounted callback of this component. You may not wish to
use the Toolkit's Dialogs; they are something we created for our demonstrations. It isn't always necessary to wrap their initialisation in a ready(..)
call, either, but in this demonstration we load them from an external file called templates.html and need to be sure they have loaded before we try to
initialise them.

Flowchart Component

This is where most of the functionality is coordinated. We'll break it up into sections and go through each one.

We use the jsplumb-toolkit component, providing several pieces of information:

ref="toolkitComponent" we want to be able to retrieve this component after mounting, as we need a reference to the underlying Toolkit instance for some of our business logic

url="flowchart-1.json" we provide the url for an initial dataset to load. This is of course optional.

v-bind:render-params="renderParams" These are the parameters passed to the Surface component that renders the dataset. As we will see below, we declare these
in the data section of the Flowchart component.

v-bind:view="view" This the view passed to the Surface component that renders the dataset. As we will see below, we declare this
in the data section of the Flowchart component.

id="toolkit" We give an id to the Toolkit instance we are creating, which is optional, and in fact in this app we do not use it.

surface-id="surface" We assign an ID to the surface for a couple of reasons: first, we need to nominate which surface to attach our miniview, controls and palette components to. Second, we need to access the surface for some of our app's functionality.

v-bind:toolkit-params="toolkitParams" These are the parameters passed to constructor of the Toolkit instance. As we will see below, we declare these
in the data section of the Flowchart component.