UNPKG

6.57 kBJavaScriptView Raw
1import inherits from 'inherits';
2
3import BaseModeler from './BaseModeler';
4
5import Viewer from './Viewer';
6import NavigatedViewer from './NavigatedViewer';
7
8import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
9import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
10import TouchModule from 'diagram-js/lib/navigation/touch';
11import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
12
13import AlignElementsModule from 'diagram-js/lib/features/align-elements';
14import AutoPlaceModule from './features/auto-place';
15import AutoResizeModule from './features/auto-resize';
16import AutoScrollModule from 'diagram-js/lib/features/auto-scroll';
17import BendpointsModule from 'diagram-js/lib/features/bendpoints';
18import ConnectModule from 'diagram-js/lib/features/connect';
19import ConnectionPreviewModule from 'diagram-js/lib/features/connection-preview';
20import ContextPadModule from './features/context-pad';
21import CopyPasteModule from './features/copy-paste';
22import CreateModule from 'diagram-js/lib/features/create';
23import DistributeElementsModule from './features/distribute-elements';
24import EditorActionsModule from './features/editor-actions';
25import GridSnappingModule from './features/grid-snapping';
26import InteractionEventsModule from './features/interaction-events';
27import KeyboardModule from './features/keyboard';
28import KeyboardMoveSelectionModule from 'diagram-js/lib/features/keyboard-move-selection';
29import LabelEditingModule from './features/label-editing';
30import ModelingModule from './features/modeling';
31import MoveModule from 'diagram-js/lib/features/move';
32import PaletteModule from './features/palette';
33import ReplacePreviewModule from './features/replace-preview';
34import ResizeModule from 'diagram-js/lib/features/resize';
35import SnappingModule from './features/snapping';
36import SearchModule from './features/search';
37
38
39var initialDiagram =
40 '<?xml version="1.0" encoding="UTF-8"?>' +
41 '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
42 'xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
43 'xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" ' +
44 'xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" ' +
45 'targetNamespace="http://bpmn.io/schema/bpmn" ' +
46 'id="Definitions_1">' +
47 '<bpmn:process id="Process_1" isExecutable="false">' +
48 '<bpmn:startEvent id="StartEvent_1"/>' +
49 '</bpmn:process>' +
50 '<bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
51 '<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
52 '<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
53 '<dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>' +
54 '</bpmndi:BPMNShape>' +
55 '</bpmndi:BPMNPlane>' +
56 '</bpmndi:BPMNDiagram>' +
57 '</bpmn:definitions>';
58
59
60/**
61 * A modeler for BPMN 2.0 diagrams.
62 *
63 *
64 * ## Extending the Modeler
65 *
66 * In order to extend the viewer pass extension modules to bootstrap via the
67 * `additionalModules` option. An extension module is an object that exposes
68 * named services.
69 *
70 * The following example depicts the integration of a simple
71 * logging component that integrates with interaction events:
72 *
73 *
74 * ```javascript
75 *
76 * // logging component
77 * function InteractionLogger(eventBus) {
78 * eventBus.on('element.hover', function(event) {
79 * console.log()
80 * })
81 * }
82 *
83 * InteractionLogger.$inject = [ 'eventBus' ]; // minification save
84 *
85 * // extension module
86 * var extensionModule = {
87 * __init__: [ 'interactionLogger' ],
88 * interactionLogger: [ 'type', InteractionLogger ]
89 * };
90 *
91 * // extend the viewer
92 * var bpmnModeler = new Modeler({ additionalModules: [ extensionModule ] });
93 * bpmnModeler.importXML(...);
94 * ```
95 *
96 *
97 * ## Customizing / Replacing Components
98 *
99 * You can replace individual diagram components by redefining them in override modules.
100 * This works for all components, including those defined in the core.
101 *
102 * Pass in override modules via the `options.additionalModules` flag like this:
103 *
104 * ```javascript
105 * function CustomContextPadProvider(contextPad) {
106 *
107 * contextPad.registerProvider(this);
108 *
109 * this.getContextPadEntries = function(element) {
110 * // no entries, effectively disable the context pad
111 * return {};
112 * };
113 * }
114 *
115 * CustomContextPadProvider.$inject = [ 'contextPad' ];
116 *
117 * var overrideModule = {
118 * contextPadProvider: [ 'type', CustomContextPadProvider ]
119 * };
120 *
121 * var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});
122 * ```
123 *
124 * @param {Object} [options] configuration options to pass to the viewer
125 * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
126 * @param {String|Number} [options.width] the width of the viewer
127 * @param {String|Number} [options.height] the height of the viewer
128 * @param {Object} [options.moddleExtensions] extension packages to provide
129 * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
130 * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
131 */
132export default function Modeler(options) {
133 BaseModeler.call(this, options);
134}
135
136inherits(Modeler, BaseModeler);
137
138
139Modeler.Viewer = Viewer;
140Modeler.NavigatedViewer = NavigatedViewer;
141
142/**
143 * Create a new diagram to start modeling.
144 *
145 * @param {Function} [done]
146 */
147Modeler.prototype.createDiagram = function(done) {
148 return this.importXML(initialDiagram, done);
149};
150
151
152Modeler.prototype._interactionModules = [
153
154 // non-modeling components
155 KeyboardMoveModule,
156 MoveCanvasModule,
157 TouchModule,
158 ZoomScrollModule
159];
160
161Modeler.prototype._modelingModules = [
162
163 // modeling components
164 AlignElementsModule,
165 AutoPlaceModule,
166 AutoScrollModule,
167 AutoResizeModule,
168 BendpointsModule,
169 ConnectModule,
170 ConnectionPreviewModule,
171 ContextPadModule,
172 CopyPasteModule,
173 CreateModule,
174 DistributeElementsModule,
175 EditorActionsModule,
176 GridSnappingModule,
177 InteractionEventsModule,
178 KeyboardModule,
179 KeyboardMoveSelectionModule,
180 LabelEditingModule,
181 ModelingModule,
182 MoveModule,
183 PaletteModule,
184 ReplacePreviewModule,
185 ResizeModule,
186 SnappingModule,
187 SearchModule
188];
189
190
191// modules the modeler is composed of
192//
193// - viewer modules
194// - interaction modules
195// - modeling modules
196
197Modeler.prototype._modules = [].concat(
198 Viewer.prototype._modules,
199 Modeler.prototype._interactionModules,
200 Modeler.prototype._modelingModules
201);