Modeler.js 6.4 KB

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