DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG

React Skeleton

This demonstration shows how to perform the basic tasks needed to get a Toolkit application up and running with React. The app was created with create-react-app. The code is documented throughout so this page just gives a brief overview.

Imports

{
    "dependencies":{
        ...
        "jsplumbtoolkit": "file:../../jsplumbtoolkit.tgz",
        "jsplumbtoolkit-react": "file:../../jsplumbtoolkit-react.tgz",
        ...
    }
}

Setup/Initialization

The app consists of a DemoComponent which creates a Toolkit instance, and then renders a JsPlumbToolkitSurfaceCompoment. In this application we wrap our bootstrap in a jsPlumbToolkit.ready(..) function; we don't expect that real world apps will bootstrap themselves in this way.

This is the code for the demo component class. We'll refer to this in the sections below.

import React from 'react';
import ReactDOM from 'react-dom';

import { JsPlumbToolkitSurfaceComponent }  from 'jsplumbtoolkit-react';
import { jsPlumbToolkit } from 'jsplumbtoolkit';

import { KneeBoneComponent } from './knee-bone-component.jsx';
import { ShinBoneComponent } from './shin-bone-component.jsx';


jsPlumbToolkit.ready(() => {

    class DemoComponent extends React.Component {

        constructor(props) {
            super(props);
            this.toolkit = jsPlumbToolkit.newInstance();

            this.view = {
                nodes: {
                    "shin": {
                        component:ShinBoneComponent
                    },
                    "knee":{
                        component:KneeBoneComponent
                    }
                },
                edges:{
                    "default":{
                        connector:"Straight",
                        anchor:"Continuous",
                        overlays:[
                            [ "Label", { location:0.5, label:"${label}"}],
                            [ "Arrow", { location:1} ],
                            [ "Arrow", {location:0, direction:-1}]
                        ],
                        endpoint:"Blank"
                    }
                }
            };

            this.renderParams = {
                layout:{
                    type:"Spring"
                },
                zoomToFit:true,
                consumeRightClick:false
            };
        }

        render() {
            return <div style=>
                <JsPlumbToolkitSurfaceComponent renderParams={this.renderParams} toolkit={this.toolkit} view={this.view} ref={ (c) => this.surface = c.surface }/>
            </div>
        }

        componentDidMount() {
            this.toolkit.load({
                url:"data/data.json"
            });

        }
    }

    ReactDOM.render(<DemoComponent/>, document.querySelector(".jtk-demo-canvas"));

});

Rendering

The Surface is rendered in the render() method of the demo component:

render() {
    return <div style=>
        <JsPlumbToolkitSurfaceComponent renderParams={this.renderParams} toolkit={this.toolkit} view={this.view} ref={ (c) => this.surface = c.surface }/>
    </div>
}

It is provided with four attributes:

  • toolkit - The instance of the Toolkit to use. We create it in the constructor of the demo component.
  • view - Options for rendering nodes/groups/ports/edges.
  • renderParams - Options for the Surface component
  • ref - Not actually needed for this demo, but we do this in the other React demonstration, and its something you will need to do if your application makes use of a miniview and/or a palette, as the React Flowchart Builder demonstration does.

View

The view is where we configure the renderer for, and behaviour of, nodes, edges, groups and ports. In this demonstration we map two node types:

this.view = {
    nodes: {
        "shin": {
            component:ShinBoneComponent
        },
        "knee":{
            component:KneeBoneComponent
        }
    },
    edges:{
        "default":{
            connector:"Straight",
            anchor:"Continuous",
            overlays:[
                [ "Label", { location:0.5, label:"${label}"}],
                [ "Arrow", { location:1} ],
                [ "Arrow", {location:0, direction:-1}]
            ],
            endpoint:"Blank"
        }
    }
};

ShinBoneComponent and KneeBoneComponent are React components, each of which extend a common BoneComponent.

We define how the "default" edge type will look - all edges implicitly have this type if one is not provided in the edge data. You can read more about edge types here.

Read more about views here.

#### Render Params

 this.renderParams = {
     layout:{
         type:"Spring"
     },
     zoomToFit:true,
     consumeRightClick:false
 };

We use a Spring layout, we allow right click on the canvas, and we zoom the canvas to fit on data load.

Components

As mentioned above, KneeBoneComponent and ShinBoneComponent both extend BoneComponent. The source for each is shown below. Both components use the same template - bone-component.html to render themselves.

BoneComponent

import React from 'react';
import { BaseNodeComponent } from "jsplumbtoolkit-react";

export class BoneComponent extends BaseNodeComponent {

    constructor(props) {
        super(props)
    }

    render() {
        return <div>
            {this.boneType} BONE
            <button onClick={this.hitMe.bind(this)}>HIT ME</button>
        </div>
    }

    hitMe() {
        alert("ouch! My " + this.getNode().data.type + "!")
    }
}

BoneComponent provides the render method for its subclasses. ``

ShinBoneComponent

import React from 'react';
import { BoneComponent } from "./bone-component.jsx";

export class ShinBoneComponent extends BoneComponent {


    constructor(props) {
        super(props)

        this.boneType = "SHIN";
    }

}

We extend BoneComponent and declare the type of bone to be "SHIN".

KneeBoneComponent

import React from 'react';
import { BoneComponent } from "./bone-component.jsx";

export class KneeBoneComponent extends BoneComponent {

    constructor(props) {
        super(props)
        this.boneType = "KNEE";
    }
}

This is the "KNEE" bone.