custom-bundle

custom-bundle example

How to role a customized, pre-packaged version of bpmn-js.

Note: This is an advanced topic.

About

This example extends the bpmn-js viewer via custom modules and shows how Rollup can be used to generate a UMD bundle of that custom viewer.

In a Nutshell

Create a sub-class of Viewer or Modeler, depending on which variant you would like to extend:

import inherits from 'inherits';

import Viewer from 'bpmn-js/lib/Viewer';

import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';

import CustomLoggingModule from './features/logging';


/**
 * A viewer that includes mouse navigation and other goodies.
 *
 * @param {Object} options
 */
function CustomViewer(options) {
  Viewer.call(this, options);
}

inherits(CustomViewer, Viewer);

module.exports = CustomViewer;

Add additional modules to your custom bpmn-js prototype:

CustomViewer.prototype._customModules = [
  ZoomScrollModule,
  MoveCanvasModule,
  CustomLoggingModule
];

CustomViewer.prototype._modules = [].concat(
  Viewer.prototype._modules,
  CustomViewer.prototype._customModules
);

Package the file as UMD for the browser, using a module bundler such as Rollup, Browserify or Webpack.

We're using rollup to bundle the files based on this configuration:

rollup -c

Include the bundle in your webpage, as you would include our pre-package distributions:

<script src="dist/custom-viewer.bundled.js"></script>
<script>
  var viewer = new CustomBpmnJS({
    container: '#canvas'
  });

  // ...
</script>

Build this Example

npm install
npm run all

License

MIT