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

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.

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:

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.