DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG

Angular Integration

The jsPlumb Toolkit has several components to assist you in integrating with Angular (4.x and 2.x - for Angular 1.x integration, refer to this page ).

Typescript vs Javascript

The default, and recommended, language for writing applications in Angular is Typescript. The jsPlumb Toolkit supports only Typescript.


CLI vs SystemJS

Early Angular 2 applications typically used SystemJS as a module loader, but it seems now that the Angular community has a preference for Angular CLI. jsPlumb uses CLI for its demonstrations, although there is still a version of the flowchart builder using SystemJS that is included in evaluation and licensee packages.


Available Components

Angular is component based. The Toolkit offers 3 components:

jsplumb-toolkit

This is an element component that provides an instance of the Toolkit and a Surface widget to render the contents.

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

All attributes are optional except nodeResolver.

  • jtkId Unique ID for the Toolkit instance. Can be used to retrieve a Toolkit instance from the jsPlumb module.
  • surfaceId Unique ID for the Surface widget. Required if you wish to attach a Miniview or a Palette.
  • renderParams Parameters to pass in to the constructor of the Surface widget.
  • toolkitParams Parameters to pass in to the constructor of the Toolkit instance.
  • view View parameters. Views are discussed here.
  • nodeResolver This function is given thetype of some Node/Group to render, and is expected to return a component to render an object of that given type.

jsplumb-miniview

This is an element component that provides a Miniview that can be attached to some Surface.

<jsplumb-miniview surfaceId="surfaceId"></jsplumb-miniview>
Attributes
  • surfaceId ID for the Surface widget to which to attach the Miniview.

jsplumb-palette

This is an "attribute component": it is created by adding this attribute to some other element. The Palette component provides a means to implement drag/drop of new Nodes/Groups onto your Surface.

<div class="someClass" jsplumb-palette selector="li" surfaceId="surfaceId" [typeExtractor]="typeExtractor">
    <ul>
        <li data-node-type="foo">FOO</li>
        <li data-node-type="bar">BAR</li>
    </ul>
</div>
Attributes
  • selector A valid CSS3 selector identifying descendant nodes that are to be configured as draggable/droppables.
  • surfaceId The ID of the Surface to which to attach the Palette.
  • typeExtractor A Function that, given some DOM element, can return the type of the Node/Group the element represents. In this example, our typeExtractor function would return the value of the data-node-type attribute.
  • dataGenerator Not shown in our example, this optional Function can be used to provide default data for some Node/Group type.

For further reading on the concept of Palettes, see this page .

TOP


package.json

We use a package.json that looks like this:

{
    "name": "jsplumb-toolkit-angular-groups",
    "version": "1.3.5",
    "license": "Commercial",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "prod-build":"ng build --prod --base-href .",
        "lint": "ng lint",
        "tscr":"tsc -traceResolution",
        "tsc":"tsc"
    },
    "private": true,
    "dependencies": {
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "core-js": "^2.4.1",
        "rxjs": "^5.1.0",
        "zone.js": "^0.8.5",
        "jsplumbtoolkit": "file:../../jsplumbtoolkit.tgz",
        "jsplumbtoolkittypes":"file:../../types/jsplumbtoolkit",
        "jsplumbtypes":"file:../../types/jsplumb"
    },
    "devDependencies": {
        "@angular/cli": "1.1",
        "@angular/compiler-cli": "^4.0.0",
        "@types/jasmine": "2.5.38",
        "@types/node": "~6.0.60",
        "codelyzer": "~2.0.0",
        "ts-node": "~2.0.0",
        "tslint": "~4.4.2",
        "typescript": "~2.2.0"
    }
}

We use the prod-build npm task when we build our demos for hosting on our site or for distribution in a licensee download:

ng build --prod --base-href .

Since we import Angular CLI 1.1, a production build includes AOT, the ahead of time compilation ("tree shaking") process. Note also that we set a value for --base-href of .; we do this because Angular writes a <base> tag into the output HTML and by default it has a value of /. For our purposes we need the base to be the current directory.


tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true

  },
  "include":[ "src/**/*" ]
}

module needs to be set to commonjs and moduleResolution needs to be set to node.


Imports

You need to include the jsPlumb Toolkit source, the Toolkit edition types, the Community edition types, and the jsPlumb Toolkit Angular Typescript adapter. The first three of these are shown in the package.json above.

Toolkit Edition

You can include the Toolkit as a local import in package.json (you need NPM 3+):

"dependencies": {
    ...
    "jsplumbtoolkit":"file:./somewhere/jsplumbtoolkit.tgz",
    ...
},
<script src="node_modules/jsplumbtoolkit/dist/js/jsplumbtoolkit.js"></script>

Typescript Definitions

Since the jsPlumb Community and Toolkit editions are Javascript files, you will need to import the Typescript Definition files for these. The Typescript definition files are stored in the types directory in the root of your licensed download: there's a jsplumb and a jsplumbtoolkit directory, each of which contains an index.d.ts and a package.json.

Here's how the Angular demo imports the Typescript definitions:

"dependencies": {
    ...    
    "jsplumbtoolkittypes":"file:../../types/jsplumbtoolkit",
    "jsplumbtypes":"file:../../types/jsplumb",
    ...
}

When you run npm install these definitions are copied into node_modules/@types/jsplumb and node_modules/@types/jsplumbtoolkit. These are appropriate locations for the Typescript module loader to find, as long as you use "moduleResolution": "node", in your Typescript config.

Angular Typescript adapter

This - jsplumbtoolkit-angular.ts - is a Typescript file. The easiest thing to do is to include it alongside the other Typescript files in your application.


Setup

To import the Toolkit into your module:

import { jsPlumbToolkitModule } from "./jsplumbtoolkit-angular";

...

@NgModule({
    imports:      [ BrowserModule, jsPlumbToolkitModule ],
    declarations: [ AppComponent, QuestionNodeComponent, ActionNodeComponent, StartNodeComponent, OutputNodeComponent ],
    bootstrap:    [ AppComponent ],
    entryComponents: [ QuestionNodeComponent, ActionNodeComponent, StartNodeComponent, OutputNodeComponent ],
    schemas:[ CUSTOM_ELEMENTS_SCHEMA ]
})

The important bit here is the imports array. This example comes from the Angular demonstration that ships with the Toolkit.

Component imports

To import components inside a .ts file:

import { jsPlumbToolkitComponent, jsPlumbMiniviewComponent, jsPlumbPaletteComponent } from "./jsplumbtoolkit-angular";

Further Reading

We refer you to the Angular Demonstration documentation. It uses all of the Angular integration discussed here.

TOP