Diagram.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import { Injector } from 'didi';
  2. import CoreModule from './core';
  3. /**
  4. * @typedef { import('didi').ModuleDeclaration } Module
  5. */
  6. /**
  7. * Bootstrap an injector from a list of modules, instantiating a number of default components
  8. *
  9. * @param {Array<Module>} modules
  10. *
  11. * @return {Injector} a injector to use to access the components
  12. */
  13. function bootstrap(modules) {
  14. var injector = new Injector(modules);
  15. injector.init();
  16. return injector;
  17. }
  18. /**
  19. * Creates an injector from passed options.
  20. *
  21. * @param {Object} options
  22. * @return {Injector}
  23. */
  24. function createInjector(options) {
  25. options = options || {};
  26. var configModule = {
  27. 'config': [ 'value', options ]
  28. };
  29. var modules = [ configModule, CoreModule ].concat(options.modules || []);
  30. return bootstrap(modules);
  31. }
  32. /**
  33. * The main diagram-js entry point that bootstraps the diagram with the given
  34. * configuration.
  35. *
  36. * To register extensions with the diagram, pass them as Array<Module> to the constructor.
  37. *
  38. * @class djs.Diagram
  39. * @memberOf djs
  40. * @constructor
  41. *
  42. * @example
  43. *
  44. * <caption>Creating a plug-in that logs whenever a shape is added to the canvas.</caption>
  45. *
  46. * // plug-in implemenentation
  47. * function MyLoggingPlugin(eventBus) {
  48. * eventBus.on('shape.added', function(event) {
  49. * console.log('shape ', event.shape, ' was added to the diagram');
  50. * });
  51. * }
  52. *
  53. * // export as module
  54. * export default {
  55. * __init__: [ 'myLoggingPlugin' ],
  56. * myLoggingPlugin: [ 'type', MyLoggingPlugin ]
  57. * };
  58. *
  59. *
  60. * // instantiate the diagram with the new plug-in
  61. *
  62. * import MyLoggingModule from 'path-to-my-logging-plugin';
  63. *
  64. * var diagram = new Diagram({
  65. * modules: [
  66. * MyLoggingModule
  67. * ]
  68. * });
  69. *
  70. * diagram.invoke([ 'canvas', function(canvas) {
  71. * // add shape to drawing canvas
  72. * canvas.addShape({ x: 10, y: 10 });
  73. * });
  74. *
  75. * // 'shape ... was added to the diagram' logged to console
  76. *
  77. * @param {Object} options
  78. * @param {Array<Module>} [options.modules] external modules to instantiate with the diagram
  79. * @param {Injector} [injector] an (optional) injector to bootstrap the diagram with
  80. */
  81. export default function Diagram(options, injector) {
  82. // create injector unless explicitly specified
  83. this.injector = injector = injector || createInjector(options);
  84. // API
  85. /**
  86. * Resolves a diagram service
  87. *
  88. * @method Diagram#get
  89. *
  90. * @param {string} name the name of the diagram service to be retrieved
  91. * @param {boolean} [strict=true] if false, resolve missing services to null
  92. */
  93. this.get = injector.get;
  94. /**
  95. * Executes a function into which diagram services are injected
  96. *
  97. * @method Diagram#invoke
  98. *
  99. * @param {Function|Object[]} fn the function to resolve
  100. * @param {Object} locals a number of locals to use to resolve certain dependencies
  101. */
  102. this.invoke = injector.invoke;
  103. // init
  104. // indicate via event
  105. /**
  106. * An event indicating that all plug-ins are loaded.
  107. *
  108. * Use this event to fire other events to interested plug-ins
  109. *
  110. * @memberOf Diagram
  111. *
  112. * @event diagram.init
  113. *
  114. * @example
  115. *
  116. * eventBus.on('diagram.init', function() {
  117. * eventBus.fire('my-custom-event', { foo: 'BAR' });
  118. * });
  119. *
  120. * @type {Object}
  121. */
  122. this.get('eventBus').fire('diagram.init');
  123. }
  124. /**
  125. * Destroys the diagram
  126. *
  127. * @method Diagram#destroy
  128. */
  129. Diagram.prototype.destroy = function() {
  130. this.get('eventBus').fire('diagram.destroy');
  131. };
  132. /**
  133. * Clear the diagram, removing all contents.
  134. */
  135. Diagram.prototype.clear = function() {
  136. this.get('eventBus').fire('diagram.clear');
  137. };