Modeler.js 7.0 KB

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