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

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;
}