DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG

Webpack

This is an example of how to use WebPack to bundle the jsPlumb Toolkit.

package.json

{
  "name": "jsplumb-webpack-demo",
  "version": "1.0.0",
  "description": "example of using webpack to bundle jsplumb",
  "main": "index.js",
  "author": "jsPlumb <hello@jsplumbtoolkit.com> (https://jsplumbtoolkit.com)",
  "license": "Commercial",
  "devDependencies": {
    "grunt-webpack": "^1.0.11",
    "font-awesome": "^4.7.0",
    "jsplumbtoolkit": "file:../../jsplumbtoolkit.tgz",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

TOP


Webpack Config

var path = require("path");
var webpack = require("webpack");
module.exports = {
    cache: true,
    entry: {
        bundle: "./index.js"
    },
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "dist/",
        filename: "[name].js",
        chunkFilename: "[chunkhash].js"
    }
};

TOP


Demo Javascript

This is a very simple demo. The key piece is the first line, in which the Toolkit is imported via a require statement.

var toolkit = require("./node_modules/jsplumbtoolkit/dist/js/jsplumbtoolkit.js").jsPlumbToolkit.newInstance();

toolkit.load({
    data:{
        nodes:[
            { id:"hey", label:"Hey" },
            { id:"ho", label:"Ho" }
        ],
        edges:[
            {
                source:"hey",
                target:"ho"
            }
        ]
    }
});

console.log(toolkit.exportData());

toolkit.render({
    container:document.getElementById("canvas"),
    layout:{
        type:"Spring"
    },
    consumeRightClick:false,
    jsPlumb:{
        Connector:"Straight",
        Anchor:"Center"
    }
});

TOP