Modeler.js 6.4 KB

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