import inherits from 'inherits'; import BaseModeler from './BaseModeler'; 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 'diagram-js/lib/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 InteractionEventsModule from './features/interaction-events'; 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'; import { wrapForCompatibility } from './util/CompatibilityUtil'; var initialDiagram = '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; /** * 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} [options.modules] a list of modules to override the default modules * @param {Array} [options.additionalModules] a list of modules to use with the default modules */ export default function Modeler(options) { BaseModeler.call(this, options); } inherits(Modeler, BaseModeler); Modeler.Viewer = Viewer; Modeler.NavigatedViewer = NavigatedViewer; /** * The createDiagram result. * * @typedef {Object} CreateDiagramResult * * @property {Array} warnings */ /** * The createDiagram error. * * @typedef {Error} CreateDiagramError * * @property {Array} warnings */ /** * Create a new diagram to start modeling. * * Returns {Promise} */ Modeler.prototype.createDiagram = wrapForCompatibility(function createDiagram() { return this.importXML(initialDiagram); }); 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, InteractionEventsModule, 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( Viewer.prototype._modules, Modeler.prototype._interactionModules, Modeler.prototype._modelingModules );