Page Setup

CSS

Angular CLI expects a CSS file to be placed at src/styles.css. Out styles.css contains
styles for the demo and also imports 3 other css files:

syntax-highlighter.css For the json dump underneath the canvas.

jsplumbtoolkit-defaults.css Provides sane defaults for the Toolkit. You should start building your app with this in the cascade; you can
remove it eventually, of course, but you just need to ensure you have provided values elsewhere in your cascade. Generally the safest thing to
do is to just include it at the top of your cascade.

jsplumbtoolkit-demo.css Some basic common styles for all the demo pages.

As with Nodes, if you're using the Absolute layout, you can specify left/top properties for the element.

Additionally, Groups are considered to have a type, just like Nodes, whose default value is default, but which can
be overridden in the same way as that of Nodes. Here we see the Group 2 is defined to be of type constrained, which we
will discuss in the View section below.

The relationship between Nodes and Groups is written into each Node's data, not into the Group data. Here we see that
4 of the Nodes in our dataset have a group declared.

The single Node mapping is the most basic Node mapping possible; Nodes derive their Anchor and Endpoint definitions from
the jsPlumb params passed in to the Surface parameters discussed above.

The Group mappings, though, bear a little discussion. First, the default Group mapping:

template - ID of the template to use to render Groups of this type

endpoint - Definition of the Endpoint to use for Connections to the Group when it is collapsed.

anchor - Definition of the Anchor to use for Connections to the Group when it is collapsed.

revert - Whether or not to revert Nodes back into the Group element if they were dropped outside.

orphan - Whether or not to remove Nodes from the Group if they were dragged outside of it and dropped. In actual fact
we did not need to set revert to false if orphan is set to true, but in this demo we included all the possible flags
just for completeness.

constrain - Whether or not to constrain Nodes from being dragged outside of the Group's element.

The constrained Group mapping is declared to extend default, so it gets all of the values defined therein, but it
overrides constrain to be true: Nodes cannot be dragged out of the Group element for this type of Group (in this demo
we set Group 2 to be of type constrained, and Group 1 - and any Groups dragged on - to be of type default).

Selecting Nodes

Lasso selection is enabled by default on the Surface widget. To activate the lasso, click the pencil icon in the toolbar:

This is handled by the component defined in controls.ts.

Exiting Select Mode

The Surface widget automatically exits select mode once the user has selected something. In this application we also listen to clicks on the whitespace in the widget and switch back to pan mode when we detect one. This is the events argument to the render call:

events:{canvasClick:(e:Event)=>{toolkit.clearSelection();}}

clearSelection clears the current selection and switches back to Pan mode.

Adding New Nodes/Groups

As discussed above, a jsplumb-palette is declared, which configures all of its child li elements to be droppable onto
the Surface canvas. When a drop occurs, the type of the newly dragged node is calculated by the typeExtractor
function declared on the main component:

Another point to note is that the Toolkit does not take any specific action to "collapse" your Groups visually. It is left
up to you to respond to the jsplumb-group-collapsed class as you need to. In this demo, we simply hide the group content
area: