Skip to main content

Hello world

The Toolkit would not be a real piece of software without a Hello World example. Here we present a basic Hello World application written in ES6, demonstrating:

  • Usage of a view to map node types to templates and events
  • Usage of render params to configure a surface
  • How to specify an edge label (in shorthand) and color
  • How to specify an edge overlay

Hello World - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

ES6

To visualise the contents of a Toolkit, it needs to be rendered. To do that, the Toolkit needs 3 pieces of information:

  • container Which DOM element should the Toolkit render into?
  • view How should the Toolkit map nodes/groups/edges to their visual representations?
  • renderParams What configuration should the Toolkit apply to the surface that is rendering your content?

import { ready, newInstance, AbsoluteLayout, BlankEndpoint, AnchorLocations, ArrowOverlay, DEFAULT } from "@jsplumbtoolkit/browser-ui"

ready(() => {

// Get a new Toolkit instance
const toolkit = newInstance()

// Get the DOM element to render into
const container = document.getElementById("container")

// Render to a Surface.
const surface = toolkit.render(container, {
layout:{
// there are several layouts that ship with the toolkit.
type:AbsoluteLayout.type,
options:{
//... if your chosen layout is configurable, options go here
}
},
// Allows us to specify edge color (and line width) in each edge's backing data
simpleEdgeStyles:true,
// Use a Continuous anchor and a blank endpoint by default.
defaults:{
anchor:AnchorLocations.Continuous,
endpoint:BlankEndpoint.type
},
// map node types and edge types to appearance and behaviour
view:{
nodes:{
// abstract parent node definition - declares a tap listener
clickable:{
events:{
tap:(p) => alert(`You clicked on node ${p.obj.id}`)
}
},
// definition for 'hello' nodes. Extends 'clickable' to get the tap listener.
hello:{
parent:"clickable",
template:'<div class="hello-node">{{label}}</div>'
},
// definition for 'world' nodes. Extends 'clickable' to get the tap listener.
world:{
parent:"clickable",
template:'<div class="world-node">{{label}}</div>'
}
},
edges:{
// a default edge definition. Declares an arrow overlay at its tip and extracts 'label' from
// edge data and displays it as a label overlay (by default at location 0.5)
[DEFAULT]:{
overlays:[
{
type:ArrowOverlay.type,
options:{
location: 1
}
}
],
label:"{{label}}"
}
}
}
})
})

HTML

<html>
<head>
<script src="node_modules/@jsplumbtoolkit/browser-ui/js/jsplumbtoolkit.browser-ui.umd.js"></script>
<link rel="stylesheet" href="node_modules/@jsplumbtoolkit/browser-ui/css/jsplumbtoolkit.css">
<link rel="stylesheet" href="app.css">
</head>
<body>

<div id="container" style="width:600px;height:600px;outline:1px solid;"></div>

<script type="module" src="app.js"></script>

</body>

</html>

CSS


.jtk-node {
outline:1px solid;
padding:3px;
display:flex;
align-items:center;
justify-content:center;
}

.hello-node {
width:100px;
height:80px;
background-color:white;
}

.world-node {
width:80px;
height:80px;
border-radius:50%;
background-color:purple;
color:white;
font-weight:bold;
}