16 April 2021

All about using JsPlumb in Angular to build a compliance tool

How to Build a compliance (law enforcement) tool using JsPlumb in Angular

What is a compliance framework? 

A compliance framework, also known as a compliance system, is a set of systematic guidelines and best practices that define company processes to meet legal requirements.

At the moment, companies need to respond to changing markets and laws. With law enforcement agencies help, companies can turn the compliance framework into a default decision-making process and use it with a single click. 

What is jsPlumb?

jsPlumb Toolkit is a widget collection that contains a drag/drop feature, pan/zoom, minimap widget, and data binding. This Toolkit is available in Angular, React, and Vue js.

Requirements

  • Angular CLI
  • Node Js
  • Node package manager
  • JSPlumb package

Benefits

  • One-click deployment
  • The easy-to-use display allows your media experts to transfer their knowledge to recurring processes quickly
  • Easy-to-draw drag-and-drop design
  • Build, Test, Apply, Repeat. Check in real-time and post with one click
  • Real-time statistics for intelligent data

Guidelines to Integrate jsPlum in Angular application

Imports  

Add these lines to your package.json:

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

Settings

import { jsPlumbToolkitModule } from "jsplumbtoolkit-angular"; 
 
... 
 
@NgModule({ 
    imports:  	[ BrowserModule, jsPlumbToolkitModule, jsPlumbToolkitDragDropModule, ROUTING ], 
    declarations: [ AppComponent, QuestionNodeComponent, ActionNodeComponent, StartNodeComponent, OutputNodeComponent, DatasetComponent, FlowchartComponent, ControlsComponent ], 
    bootstrap:	[ AppComponent ], 
    entryComponents: [ QuestionNodeComponent, ActionNodeComponent, StartNodeComponent, OutputNodeComponent ], 
    schemas:[ CUSTOM_ELEMENTS_SCHEMA ] 
})

Component imports

To import components inside a .ts file:

import { jsPlumbSurfaceComponent, jsPlumbMiniviewComponent, jsPlumbPaletteComponent } from "jsplumbtoolkit-angular";

jsPlumb Components

The Toolkit offers 2 Components and 2 Directives:

jsplumb-surface

This is the section that provides the Surface widget to provide the content of a specific example of the Toolbar.

<jsplumb-surface jtkId="toolkit" surfaceId="surfaceId" [renderParams]="anObjectReference" [view]="anObjectReference" [nodeResolver]="aFunctionReference"> 
</jsplumb-surface>

Qualities

All attributes can be selected without nodeResolver and jtkId.

  • jtkId ID, for example, Toolkit to provide.
  • SurfaceId Unique ID Surface widget. Required if you wish to attach a Mini view or Palette.
  • Provide parameters for transfer to Surface widget builder.
  • View View and Borders.

jsPlumb-mini view

This is the part that offers a Mini view that can be linked to a specific Surface.

<jsplumb-miniview surfaceId="surfaceId"></jsplumb-miniview>

Qualities

  • Surface ID for the Surface widget to which to attach the Mini view.
  • ElementFilter Optional filter used to control which Mini view nodes/groups will display.

In order to use elementFilter you need to provide the Reference reference, the signature of its method

(obj: Node|Group) => boolean;

For example,

<jsplumb-miniview [surfaceId]="surfaceId" [elementFilter]="redNodeFilter"></jsplumb-miniview>

After that in your code you may have:

    redNodeFilter(obj: Node | Group): boolean { 
      return obj.objectType === "Node" && obj.data.type === "red"; 
    }

Here, only Nodes with red type in miniview will be shown.

Ways

The Miniview section provides a way to repaint:

redraw()

This will disable minimal visibility, reset all controls, and bring everything closer to the mini-view hole.

Jsplumb-surface-drop

This Directive summarizes the example of a drag manager and is better than the previous JSplumb-palette in a few ways:

  • uses a portable pull-up handle, so you do not need to notify us when the contents of their child have been updated
  • the component can be allowed / disabled
  • Supports lowering nodes to edges

Setup

You need to add a few extra items to access this component:

"jsplumbtoolkit-drop": "file:../../jsplumbtoolkit-drop.tgz", 
"jsplumbtoolkit-angular-drop": "file:../../jsplumbtoolkit-angular-drop.tgz"

You also need to import and reference to jsPlumbToolkitDragDropModule:

... 
import { jsPlumbToolkitDragDropModule } from "jsplumbtoolkit-angular-drop"; 
... 
 
@NgModule({ 
	... 
    imports:[ ..., jsPlumbToolkitDragDropModule, ...], 
	... 
     
})

For Example

This is from the Angular Flowchart Builder display:

<div class="sidebar node-palette"  
     jsplumb-surface-drop  
     selector="div"  
     surfaceId="flowchartSurface"  
     [dataGenerator]="dataGenerator"> 
  <div *ngFor="let nodeType of nodeTypes" class="sidebar-item" [attr.data-node-type]="nodeType.type" title="Drag to add new" [attr.jtk-width]="nodeType.w" [attr.jtk-height]="nodeType.h">{{nodeType.label}}</div> 
</div>

Qualities

  • selector: string A valid CSS3 selector that identifies the generation nodes to be configured as a drag / drop.
  • dataGenerator: (el: HTMLElement) => T This function is used to provide the default data for a specific Node / Group. Your dataGenerator function is expected to determine the “type” of the drag, and place it on the data object when required.
  • SurfaceId Required. Surface ID to which you attach the Drop Manager
  • allowDropOnGroup: boolean Optional, default to true. If true, then items can be thrown in nodes / groups, and in the event that they do, the onDrop method will be called.
  • allowDropOnCanvas: boolean Optional, default be true. When an object is lowered to a white canvas, it is added to the database and rendered.
  • allowDropOnEdge: boolean Optional, default be true. If it is true, things can be thrown to the edge, and if an object is brought down to the edge, a new node/group is inserted and inserted between the source and the target edge, and the first edge is discarded.
  • Generator type: (data: T) => string Optional. A function that can return the correct type of data object representing the object can be dragged. By default, the Toolkit will use a member of the data object type.
  • GroupIdentifier: (d: T, el: HTMLElement) => boolean Optional. By default, the Toolkit detects the jtk-is-group attribute in the drag object. If found, with the “true” value, the Toolkit assumes that the group is dragged. You can provide your job to make this decision.

Jsplumb-drag-drop

This Directive summarizes the Drop Manager model and is better than the previous JSplumb-palette in a few ways:

  • This Directive summarizes the Drop Manager model and is better than the previous JSplumb-palette in a few ways:
  • the component can be allowed / disabled
  • Supports lowering nodes to edges

Setting

You need to add a few extra items to access this component:

"jsplumbtoolkit-drop": "file:../../jsplumbtoolkit-drop.tgz", 
"jsplumbtoolkit-angular-drop": "file:../../jsplumbtoolkit-angular-drop.tgz"

You also need to import and reference to jsPlumbToolkitDragDropModule:

... 
import { jsPlumbToolkitDragDropModule } from "jsplumbtoolkit-angular-drop"; 
... 

@NgModule({ 
	... 
    imports:[ ..., jsPlumbToolkitDragDropModule, ...], 
	... 
     
})

For example

This is from an earlier version of the Angular Flowchart Builder display, which now uses Surface Drop Manager:

<div class="sidebar node-palette"  
     jsplumb-drag-drop  
     selector="div"  
     surfaceId="flowchartSurface"  
     [dataGenerator]="dataGenerator" 
     [onCanvasDrop]="onCanvasDrop" 
     [onEdgeDrop]="onEdgeDrop"> 
  <div *ngFor="let nodeType of nodeTypes" class="sidebar-item" [attr.data-node-type]="nodeType.type" title="Drag to add new" [attr.jtk-width]="nodeType.w" [attr.jtk-height]="nodeType.h">{{nodeType.label}}</div> 
</div>

Qualities

  • Picker A valid CSS3 selector that identifies areas for generations to be adjusted as drag / drop.
  • SurfaceId Area ID is where you can enter the Palette.
  • dataGenerator (el: HTMLElement): T This optional function can be used to provide the default data for a particular Node / Group. Your dataGenerator function is expected to determine the “type” of the drag, and place it on the data object when required.
  • in CanvasDrop (above: Face, data: T, positionOnSurface: CanvasLocation): void Optional. If present, dumping in whitespace is enabled. Dropping an item on whitespace will result in the so-called method being called.
  • OnEdgeDrop (above: Face, data: T, edge: Edge, locationOnSurface: CanvasLocation) Options. If present, drop-off is enabled. Dropping an item on the edge will result in this approach being called.
  • onDrop (data: T, target: Node | Group, drag Element ?: HTMLElement, e ?: Event, position ?: PointArray) Options. Where we are, discarding nodes / groups is enabled, and dumping an item in a node / group will result in the method being named.

Rendering Nodes and Groups

Each Node or Group in your UI is provided as a single component. These item descriptions need to be included in the declarations and EntryComponents members of your application module definition.

Definition

As an example, consider the part we use to contribute to the Action node in Flowchart builder demonstration:

@Component({ templateUrl:"templates/action.html" })

export class ActionNodeComponent extends BaseEditableNodeComponent { }

Here, BaseEditableNodeComponent is a section that outlines a few common editing methods for that particular display. But there is a key clip in the BaseEditableNodeComponent  announcement to consider:

class BaseEditableNodeComponent extends BaseNodeComponent { 
 
}

… the fact that it extends the BaseNodeComponent. Your items should be extended to the BaseNodeComponent.

Template

Object description edits templateUrl. Here’s what the template looks like in this example:

<div [style.width]="obj.w + 'px'" [style.height]="obj.h +'px'" class="flowchart-object flowchart-action"> 
    <div> 
        <div class="node-edit node-action" (click)="editNode(obj)"> 
            <i class="fa fa-pencil-square-o"></i> 
        </div> 
        <div class="node-delete node-action" (click)="removeNode(obj)"> 
            <i class="fa fa-times"></i> 
        </div> 
        <svg [attr.width]="obj.w" [attr.height]="obj.h"> 
            <rect [attr.x]="0" [attr.y]="0" [attr.width]="obj.w" [attr.height]="obj.h" class="outer"/> 
            <rect [attr.x]="10" [attr.y]="10" [attr.width]="obj.w-20" [attr.height]="obj.h-20" class="inner"/> 
            <text text-anchor="middle" [attr.x]="obj.w/2" [attr.y]="obj.h/2" dominant-baseline="central">{{obj.text}}</text> 
        </svg> 
    </div> 
    <jtk-target port-type="target"></jtk-target> 
    <jtk-source port-type="source" filter=".outer"></jtk-source> 
</div>

It is a standard Angular template. The critical thing to note here is that the Node or Group support details are presented as the template’s objective member. You do not need to use the templateUrl method – you can provide the template in any Angular-supported method, including directly as a multi-character unit by the template parameter.

Marking type

Map elements of node / group types in view. Here is a section of nodes from the Angular Flowchart Builder app:

view = { 
    nodes:{ 
      "start":{ 
        component:StartNodeComponent 
      }, 
      "selectable": { 
        events: { 
          tap: (params:any) => { 
            this.toggleSelection(params.node); 
          } 
        } 
      }, 
      "question":{ 
        parent:"selectable", 
        component:QuestionNodeComponent 
      }, 
      "output":{ 
        parent:"selectable", 
        component:OutputNodeComponent 
      }, 
      "action":{ 
        parent:"selectable", 
        component:ActionNodeComponent 
      } 
    }, 
    edges: { 
     
	... 
    } 
}

In previous versions of the Toolkit’s Angular integration, it was necessary to map object names to genuine parts with nodeResolver function, but from 1.11.0, this is no longer necessary.

Declaration

You must announce each part of the Node / Group in both declarations and members of your module’s entry components description. Here is a description of the Flowchart builder exhibition module, example:

import { jsPlumbToolkitModule } from "jsplumbtoolkit-angular"; 
 
... 
 
@NgModule({ 
    imports:  	[ BrowserModule, jsPlumbToolkitModule, jsPlumbToolkitDragDropModule, ROUTING ], 
    declarations: [ AppComponent, QuestionNodeComponent, ActionNodeComponent, StartNodeComponent, OutputNodeComponent, DatasetComponent, FlowchartComponent, ControlsComponent ], 
    bootstrap:	[ AppComponent ], 
    entryComponents: [ QuestionNodeComponent, ActionNodeComponent, StartNodeComponent, OutputNodeComponent ], 
    schemas:[ CUSTOM_ELEMENTS_SCHEMA ] 
})

Checklist

  • Each section of your port extends BasePortComponent from the integration of Toolkit’s Angular
  • Identifies basic information about member obj in your object templates
  • Each item of your item is declared in the list of declarations in your module description
  • Each component of your property is declared in the entry components list in the description of your module
  • Mark each expected hole in the section in your view

We hope you can now set up the jsPlumb in an angular application. In case of any further queries, do not hesitate to contact the DEV IT experts here.

Back to Index