244 lines
7.4 KiB
JavaScript
244 lines
7.4 KiB
JavaScript
import inherits from 'inherits';
|
|
|
|
import Ids from 'ids';
|
|
|
|
import Viewer from './Viewer';
|
|
|
|
import NavigatedViewer from './NavigatedViewer';
|
|
|
|
import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
|
|
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
|
import TouchModule from 'diagram-js/lib/navigation/touch';
|
|
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
|
|
|
|
import AlignElementsModule from 'diagram-js/lib/features/align-elements';
|
|
import AutoPlaceModule from './features/auto-place';
|
|
import AutoResizeModule from './features/auto-resize';
|
|
import AutoScrollModule from 'diagram-js/lib/features/auto-scroll';
|
|
import BendpointsModule from 'diagram-js/lib/features/bendpoints';
|
|
import ConnectModule from 'diagram-js/lib/features/connect';
|
|
import ConnectionPreviewModule from './features/connection-preview';
|
|
import ContextPadModule from './features/context-pad';
|
|
import CopyPasteModule from './features/copy-paste';
|
|
import CreateModule from 'diagram-js/lib/features/create';
|
|
import DistributeElementsModule from './features/distribute-elements';
|
|
import EditorActionsModule from './features/editor-actions';
|
|
import GridSnappingModule from './features/grid-snapping';
|
|
import KeyboardModule from './features/keyboard';
|
|
import KeyboardMoveSelectionModule from 'diagram-js/lib/features/keyboard-move-selection';
|
|
import LabelEditingModule from './features/label-editing';
|
|
import ModelingModule from './features/modeling';
|
|
import MoveModule from 'diagram-js/lib/features/move';
|
|
import PaletteModule from './features/palette';
|
|
import ReplacePreviewModule from './features/replace-preview';
|
|
import ResizeModule from 'diagram-js/lib/features/resize';
|
|
import SnappingModule from './features/snapping';
|
|
import SearchModule from './features/search';
|
|
|
|
|
|
var initialDiagram =
|
|
'<?xml version="1.0" encoding="UTF-8"?>' +
|
|
'<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
|
|
'xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
|
|
'xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" ' +
|
|
'xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" ' +
|
|
'targetNamespace="http://bpmn.io/schema/bpmn" ' +
|
|
'id="Definitions_1">' +
|
|
'<bpmn:process id="Process_1" isExecutable="false">' +
|
|
'<bpmn:startEvent id="StartEvent_1"/>' +
|
|
'</bpmn:process>' +
|
|
'<bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
|
|
'<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
|
|
'<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
|
|
'<dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>' +
|
|
'</bpmndi:BPMNShape>' +
|
|
'</bpmndi:BPMNPlane>' +
|
|
'</bpmndi:BPMNDiagram>' +
|
|
'</bpmn:definitions>';
|
|
|
|
|
|
/**
|
|
* A modeler for BPMN 2.0 diagrams.
|
|
*
|
|
*
|
|
* ## Extending the Modeler
|
|
*
|
|
* In order to extend the viewer pass extension modules to bootstrap via the
|
|
* `additionalModules` option. An extension module is an object that exposes
|
|
* named services.
|
|
*
|
|
* The following example depicts the integration of a simple
|
|
* logging component that integrates with interaction events:
|
|
*
|
|
*
|
|
* ```javascript
|
|
*
|
|
* // logging component
|
|
* function InteractionLogger(eventBus) {
|
|
* eventBus.on('element.hover', function(event) {
|
|
* console.log()
|
|
* })
|
|
* }
|
|
*
|
|
* InteractionLogger.$inject = [ 'eventBus' ]; // minification save
|
|
*
|
|
* // extension module
|
|
* var extensionModule = {
|
|
* __init__: [ 'interactionLogger' ],
|
|
* interactionLogger: [ 'type', InteractionLogger ]
|
|
* };
|
|
*
|
|
* // extend the viewer
|
|
* var bpmnModeler = new Modeler({ additionalModules: [ extensionModule ] });
|
|
* bpmnModeler.importXML(...);
|
|
* ```
|
|
*
|
|
*
|
|
* ## Customizing / Replacing Components
|
|
*
|
|
* You can replace individual diagram components by redefining them in override modules.
|
|
* This works for all components, including those defined in the core.
|
|
*
|
|
* Pass in override modules via the `options.additionalModules` flag like this:
|
|
*
|
|
* ```javascript
|
|
* function CustomContextPadProvider(contextPad) {
|
|
*
|
|
* contextPad.registerProvider(this);
|
|
*
|
|
* this.getContextPadEntries = function(element) {
|
|
* // no entries, effectively disable the context pad
|
|
* return {};
|
|
* };
|
|
* }
|
|
*
|
|
* CustomContextPadProvider.$inject = [ 'contextPad' ];
|
|
*
|
|
* var overrideModule = {
|
|
* contextPadProvider: [ 'type', CustomContextPadProvider ]
|
|
* };
|
|
*
|
|
* var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});
|
|
* ```
|
|
*
|
|
* @param {Object} [options] configuration options to pass to the viewer
|
|
* @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
|
|
* @param {String|Number} [options.width] the width of the viewer
|
|
* @param {String|Number} [options.height] the height of the viewer
|
|
* @param {Object} [options.moddleExtensions] extension packages to provide
|
|
* @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
|
|
* @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
|
|
*/
|
|
export default function Modeler(options) {
|
|
Viewer.call(this, options);
|
|
|
|
// hook ID collection into the modeler
|
|
this.on('import.parse.complete', function(event) {
|
|
if (!event.error) {
|
|
this._collectIds(event.definitions, event.context);
|
|
}
|
|
}, this);
|
|
|
|
this.on('diagram.destroy', function() {
|
|
this.get('moddle').ids.clear();
|
|
}, this);
|
|
}
|
|
|
|
inherits(Modeler, Viewer);
|
|
|
|
Modeler.Viewer = Viewer;
|
|
Modeler.NavigatedViewer = NavigatedViewer;
|
|
|
|
/**
|
|
* Create a new diagram to start modeling.
|
|
*
|
|
* @param {Function} [done]
|
|
*/
|
|
Modeler.prototype.createDiagram = function(done) {
|
|
return this.importXML(initialDiagram, done);
|
|
};
|
|
|
|
/**
|
|
* Create a moddle instance, attaching ids to it.
|
|
*
|
|
* @param {Object} options
|
|
*/
|
|
Modeler.prototype._createModdle = function(options) {
|
|
var moddle = Viewer.prototype._createModdle.call(this, options);
|
|
|
|
// attach ids to moddle to be able to track
|
|
// and validated ids in the BPMN 2.0 XML document
|
|
// tree
|
|
moddle.ids = new Ids([ 32, 36, 1 ]);
|
|
|
|
return moddle;
|
|
};
|
|
|
|
/**
|
|
* Collect ids processed during parsing of the
|
|
* definitions object.
|
|
*
|
|
* @param {ModdleElement} definitions
|
|
* @param {Context} context
|
|
*/
|
|
Modeler.prototype._collectIds = function(definitions, context) {
|
|
|
|
var moddle = definitions.$model,
|
|
ids = moddle.ids,
|
|
id;
|
|
|
|
// remove references from previous import
|
|
ids.clear();
|
|
|
|
for (id in context.elementsById) {
|
|
ids.claim(id, context.elementsById[id]);
|
|
}
|
|
};
|
|
|
|
Modeler.prototype._interactionModules = [
|
|
// non-modeling components
|
|
KeyboardMoveModule,
|
|
MoveCanvasModule,
|
|
TouchModule,
|
|
ZoomScrollModule
|
|
];
|
|
|
|
Modeler.prototype._modelingModules = [
|
|
// modeling components
|
|
AlignElementsModule,
|
|
AutoPlaceModule,
|
|
AutoScrollModule,
|
|
AutoResizeModule,
|
|
BendpointsModule,
|
|
ConnectModule,
|
|
ConnectionPreviewModule,
|
|
ContextPadModule,
|
|
CopyPasteModule,
|
|
CreateModule,
|
|
DistributeElementsModule,
|
|
EditorActionsModule,
|
|
GridSnappingModule,
|
|
KeyboardModule,
|
|
KeyboardMoveSelectionModule,
|
|
LabelEditingModule,
|
|
ModelingModule,
|
|
MoveModule,
|
|
PaletteModule,
|
|
ReplacePreviewModule,
|
|
ResizeModule,
|
|
SnappingModule,
|
|
SearchModule
|
|
];
|
|
|
|
|
|
// modules the modeler is composed of
|
|
//
|
|
// - viewer modules
|
|
// - interaction modules
|
|
// - modeling modules
|
|
|
|
Modeler.prototype._modules = [].concat(
|
|
Modeler.prototype._modules,
|
|
Modeler.prototype._interactionModules,
|
|
Modeler.prototype._modelingModules);
|