bpmn-js 12.1.0 → 13.0.0

package/lib/BaseViewer.js

@@ -35,22 +35,89 @@ import {
   wrapForCompatibility
 } from './util/CompatibilityUtil';
 
+/**
+ * @template T
+ *
+ * @typedef {import('diagram-js/lib/core/EventBus').EventBusEventCallback<T>} EventBusEventCallback
+ */
 
 /**
  * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
  *
- * @typedef {import('./BaseViewer').BaseModelerOptions} BaseModelerOptions
- * @typedef {import('./BaseViewer').ModdleElement} ModdleElement
- * @typedef {import('./BaseViewer').ImportXMLResult} ImportXMLResult
- * @typedef {import('./BaseViewer').ImportXMLError} ImportXMLError
- * @typedef {import('./BaseViewer').ImportDefinitionsResult} ImportDefinitionsResult
- * @typedef {import('./BaseViewer').ImportDefinitionsError} ImportDefinitionsError
- * @typedef {import('./BaseViewer').ModdleElement} ModdleElement
- * @typedef {import('./BaseViewer').ModdleElementsById} ModdleElementsById
- * @typedef {import('./BaseViewer').OpenResult} OpenResult
- * @typedef {import('./BaseViewer').OpenError} OpenError
- * @typedef {import('./BaseViewer').SaveXMLOptions} SaveXMLOptions
- * @typedef {import('./BaseViewer').SaveXMLResult} SaveXMLResult
+ * @typedef {import('./model/Types').Moddle} Moddle
+ * @typedef {import('./model/Types').ModdleElement} ModdleElement
+ * @typedef {import('./model/Types').ModdleExtension} ModdleExtension
+ *
+ * @typedef { {
+ *   width?: number|string;
+ *   height?: number|string;
+ *   position?: string;
+ *   container?: string|HTMLElement;
+ *   moddleExtensions?: ModdleExtensions;
+ *   additionalModules?: ModuleDeclaration[];
+ * } & Record<string, any> } BaseViewerOptions
+ *
+ * @typedef {Record<string, ModdleElement>} ModdleElementsById
+ *
+ * @typedef { {
+ *   [key: string]: ModdleExtension;
+ * } } ModdleExtensions
+ *
+ * @typedef { {
+ *   warnings: string[];
+ * } } ImportXMLResult
+ *
+ * @typedef {ImportXMLResult & Error} ImportXMLError
+ *
+ * @typedef {ImportXMLResult} ImportDefinitionsResult
+ *
+ * @typedef {ImportXMLError} ImportDefinitionsError
+ *
+ * @typedef {ImportXMLResult} OpenResult
+ *
+ * @typedef {ImportXMLError} OpenError
+ *
+ * @typedef { {
+ *   format?: boolean;
+ *   preamble?: boolean;
+ * } } SaveXMLOptions
+ *
+ * @typedef { {
+ *   xml?: string;
+ *   error?: Error;
+ * } } SaveXMLResult
+ *
+ * @typedef { {
+ *   svg: string;
+ * } } SaveSVGResult
+ *
+ * @typedef { {
+ *   xml: string;
+ * } } ImportParseStartEvent
+ *
+ * @typedef { {
+ *   error?: ImportXMLError;
+ *   definitions?: ModdleElement;
+ *   elementsById?: ModdleElementsById;
+ *   references?: ModdleElement[];
+ *   warnings: string[];
+ * } } ImportParseCompleteEvent
+ *
+ * @typedef { {
+ *   error?: ImportXMLError;
+ *   warnings: string[];
+ * } } ImportDoneEvent
+ *
+ * @typedef { {
+ *   definitions: ModdleElement;
+ * } } SaveXMLStartEvent
+ *
+ * @typedef {SaveXMLResult} SaveXMLDoneEvent
+ *
+ * @typedef { {
+ *   error?: Error;
+ *   svg: string;
+ * } } SaveSVGDoneEvent
  */
 
 /**
@@ -59,15 +126,18 @@ import {
  * Have a look at {@link Viewer}, {@link NavigatedViewer} or {@link Modeler} for
  * bundles that include actual features.
  *
- * @param {BaseModelerOptions} [options] The options to configure the viewer.
+ * @param {BaseViewerOptions} [options] The options to configure the viewer.
  */
 export default function BaseViewer(options) {
 
   /**
-   * @type {BaseModelerOptions}
+   * @type {BaseViewerOptions}
    */
   options = assign({}, DEFAULT_OPTIONS, options);
 
+  /**
+   * @type {Moddle}
+   */
   this._moddle = this._createModdle(options);
 
   /**
@@ -106,18 +176,18 @@ inherits(BaseViewer, Diagram);
  *
  * @throws {ImportXMLError} An error thrown during the import of the XML.
  *
- * @fires BaseViewer#ImportParseStart
- * @fires BaseViewer#ImportParseComplete
- * @fires Importer#ImportRenderStart
- * @fires Importer#ImportRenderComplete
- * @fires BaseViewer#ImportDone
+ * @fires BaseViewer#ImportParseStartEvent
+ * @fires BaseViewer#ImportParseCompleteEvent
+ * @fires Importer#ImportRenderStartEvent
+ * @fires Importer#ImportRenderCompleteEvent
+ * @fires BaseViewer#ImportDoneEvent
  *
  * @param {string} xml The BPMN 2.0 XML to be imported.
  * @param {ModdleElement|string} [bpmnDiagram] The optional diagram or Id of the BPMN diagram to open.
  *
  * @return {Promise<ImportXMLResult>} A promise resolving with warnings that were produced during the import.
  */
-BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(xml, bpmnDiagram) {
+BaseViewer.prototype.importXML = async function importXML(xml, bpmnDiagram) {
 
   const self = this;
 
@@ -155,9 +225,8 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
     /**
      * A `import.parse.start` event.
      *
-     * @event BaseViewer#ImportParseStart
-     * @type {Object}
-     * @property {string} xml The XML that is to be parsed.
+     * @event BaseViewer#ImportParseStartEvent
+     * @type {ImportParseStartEvent}
      */
     xml = this._emit('import.parse.start', { xml: xml }) || xml;
 
@@ -185,13 +254,8 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
     /**
      * A `import.parse.complete` event.
      *
-     * @event BaseViewer#ImportParseComplete
-     * @type {Object}
-     * @property {Error|null} error An error thrown when parsing the XML.
-     * @property {ModdleElement} definitions The definitions model element.
-     * @property {ModdleElementsById} elementsById The model elements by ID.
-     * @property {ModdleElement[]} references The referenced model elements.
-     * @property {string[]} warnings The warnings produced when parsing the XML.
+     * @event BaseViewer#ImportParseCompleteEvent
+     * @type {ImportParseCompleteEvent}
      */
     definitions = this._emit('import.parse.complete', ParseCompleteEvent({
       error: null,
@@ -208,10 +272,8 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
     /**
      * A `import.parse.complete` event.
      *
-     * @event BaseViewer#ImportDone
-     * @type {Object}
-     * @property {ImportXMLError|null} error An error thrown during import.
-     * @property {string[]} warnings The warnings.
+     * @event BaseViewer#ImportDoneEvent
+     * @type {ImportDoneEvent}
      */
     this._emit('import.done', { error: null, warnings: aggregatedWarnings });
 
@@ -227,7 +289,9 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
 
     throw error;
   }
-});
+};
+
+BaseViewer.prototype.importXML = wrapForCompatibility(BaseViewer.prototype.importXML);
 
 
 /**
@@ -252,12 +316,14 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
  *
  * @return {Promise<ImportDefinitionsResult>} A promise resolving with warnings that were produced during the import.
  */
-BaseViewer.prototype.importDefinitions = wrapForCompatibility(async function importDefinitions(definitions, bpmnDiagram) {
+BaseViewer.prototype.importDefinitions = async function importDefinitions(definitions, bpmnDiagram) {
   this._setDefinitions(definitions);
   const result = await this.open(bpmnDiagram);
 
   return { warnings: result.warnings };
-});
+};
+
+BaseViewer.prototype.importDefinitions = wrapForCompatibility(BaseViewer.prototype.importDefinitions);
 
 
 /**
@@ -281,7 +347,7 @@ BaseViewer.prototype.importDefinitions = wrapForCompatibility(async function imp
  *
  * @return {Promise<OpenResult>} A promise resolving with warnings that were produced during opening.
  */
-BaseViewer.prototype.open = wrapForCompatibility(async function open(bpmnDiagramOrId) {
+BaseViewer.prototype.open = async function open(bpmnDiagramOrId) {
 
   const definitions = this._definitions;
   let bpmnDiagram = bpmnDiagramOrId;
@@ -318,7 +384,9 @@ BaseViewer.prototype.open = wrapForCompatibility(async function open(bpmnDiagram
   const { warnings } = await importBpmnDiagram(this, definitions, bpmnDiagram);
 
   return { warnings };
-});
+};
+
+BaseViewer.prototype.open = wrapForCompatibility(BaseViewer.prototype.open);
 
 /**
  * Export the currently displayed BPMN 2.0 diagram as
@@ -343,7 +411,7 @@ BaseViewer.prototype.open = wrapForCompatibility(async function open(bpmnDiagram
  *
  * @return {Promise<SaveXMLResult>} A promise resolving with the XML.
  */
-BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(options) {
+BaseViewer.prototype.saveXML = async function saveXML(options) {
 
   options = options || {};
 
@@ -360,9 +428,8 @@ BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(optio
     /**
      * A `saveXML.start` event.
      *
-     * @event BaseViewer#SaveXMLStart
-     * @type {Object}
-     * @property {ModdleElement} definitions The definitions model element.
+     * @event BaseViewer#SaveXMLStartEvent
+     * @type {SaveXMLStartEvent}
      */
     definitions = this._emit('saveXML.start', {
       definitions
@@ -383,10 +450,8 @@ BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(optio
   /**
    * A `saveXML.done` event.
    *
-   * @event BaseViewer#SaveXMLDone
-   * @type {Object}
-   * @property {Error} [error] An error thrown when saving the XML.
-   * @property {string} [xml] The saved XML.
+   * @event BaseViewer#SaveXMLDoneEvent
+   * @type {SaveXMLDoneEvent}
    */
   this._emit('saveXML.done', result);
 
@@ -395,7 +460,9 @@ BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(optio
   }
 
   return result;
-});
+};
+
+BaseViewer.prototype.saveXML = wrapForCompatibility(BaseViewer.prototype.saveXML);
 
 
 /**
@@ -417,7 +484,7 @@ BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(optio
  *
  * @return {Promise<SaveSVGResult>} A promise resolving with the SVG.
  */
-BaseViewer.prototype.saveSVG = wrapForCompatibility(async function saveSVG() {
+BaseViewer.prototype.saveSVG = async function saveSVG() {
   this._emit('saveSVG.start');
 
   let svg, err;
@@ -449,10 +516,8 @@ BaseViewer.prototype.saveSVG = wrapForCompatibility(async function saveSVG() {
   /**
    * A `saveSVG.done` event.
    *
-   * @event BaseViewer#SaveSVGDone
-   * @type {Object}
-   * @property {Error} [error] An error thrown when saving the SVG.
-   * @property {string} [svg] The saved SVG.
+   * @event BaseViewer#SaveSVGDoneEvent
+   * @type {SaveSVGDoneEvent}
    */
   this._emit('saveSVG.done', {
     error: err,
@@ -464,7 +529,9 @@ BaseViewer.prototype.saveSVG = wrapForCompatibility(async function saveSVG() {
   }
 
   return { svg };
-});
+};
+
+BaseViewer.prototype.saveSVG = wrapForCompatibility(BaseViewer.prototype.saveSVG);
 
 /**
  * Get a named diagram service.
@@ -546,10 +613,12 @@ BaseViewer.prototype.destroy = function() {
  *
  * Remove an event listener via {@link BaseViewer#off}.
  *
+ * @template T
+ *
  * @param {string|string[]} events The event(s) to listen to.
  * @param {number} [priority] The priority with which to listen.
- * @param {EventCallback} callback The callback.
- * @param {*} [that] Value of `this` the callback will be called with.
+ * @param {EventBusEventCallback<T>} callback The callback.
+ * @param {any} [that] Value of `this` the callback will be called with.
  */
 BaseViewer.prototype.on = function(events, priority, callback, that) {
   return this.get('eventBus').on(events, priority, callback, that);
@@ -599,7 +668,7 @@ BaseViewer.prototype.attachTo = function(parentNode) {
 /**
  * Get the definitions model element.
  *
- * @returns {ModdleElement} The definitions model element.
+ * @return {ModdleElement} The definitions model element.
  */
 BaseViewer.prototype.getDefinitions = function() {
   return this._definitions;
@@ -668,6 +737,11 @@ BaseViewer.prototype._emit = function(type, event) {
   return this.get('eventBus').fire(type, event);
 };
 
+/**
+ * @param {BaseViewerOptions} options
+ *
+ * @return {HTMLElement}
+ */
 BaseViewer.prototype._createContainer = function(options) {
 
   const container = domify('<div class="bjs-container"></div>');
@@ -681,6 +755,11 @@ BaseViewer.prototype._createContainer = function(options) {
   return container;
 };
 
+/**
+ * @param {BaseViewerOptions} options
+ *
+ * @return {Moddle}
+ */
 BaseViewer.prototype._createModdle = function(options) {
   const moddleOptions = assign({}, this._moddleExtensions, options.moddleExtensions);
 

package/lib/Modeler.d.ts

@@ -1,15 +1,76 @@
-import BaseModeler from "./BaseModeler";
-
-import { ImportXMLResult } from "./BaseViewer";
-
-export default class Modeler extends BaseModeler {
-
-  /**
-   * Create a new diagram to start modeling.
-   *
-   * @throws An error thrown during the import of the XML.
-   *
-   * @return A promise resolving with warnings that were produced during the import.
-   */
-  createDiagram(): Promise<ImportXMLResult>;
-}
+/**
+ * A modeler for BPMN 2.0 diagrams.
+ *
+ *
+ * ## Extending the Modeler
+ *
+ * In order to extend the viewer pass extension modules to bootstrap via the
+ * `additionalModules` option. An extension module is an object that exposes
+ * named services.
+ *
+ * The following example depicts the integration of a simple
+ * logging component that integrates with interaction events:
+ *
+ *
+ * ```javascript
+ *
+ * // logging component
+ * function InteractionLogger(eventBus) {
+ *   eventBus.on('element.hover', function(event) {
+ *     console.log()
+ *   })
+ * }
+ *
+ * InteractionLogger.$inject = [ 'eventBus' ]; // minification save
+ *
+ * // extension module
+ * var extensionModule = {
+ *   __init__: [ 'interactionLogger' ],
+ *   interactionLogger: [ 'type', InteractionLogger ]
+ * };
+ *
+ * // extend the viewer
+ * var bpmnModeler = new Modeler({ additionalModules: [ extensionModule ] });
+ * bpmnModeler.importXML(...);
+ * ```
+ *
+ *
+ * ## Customizing / Replacing Components
+ *
+ * You can replace individual diagram components by redefining them in override modules.
+ * This works for all components, including those defined in the core.
+ *
+ * Pass in override modules via the `options.additionalModules` flag like this:
+ *
+ * ```javascript
+ * function CustomContextPadProvider(contextPad) {
+ *
+ *   contextPad.registerProvider(this);
+ *
+ *   this.getContextPadEntries = function(element) {
+ *     // no entries, effectively disable the context pad
+ *     return {};
+ *   };
+ * }
+ *
+ * CustomContextPadProvider.$inject = [ 'contextPad' ];
+ *
+ * var overrideModule = {
+ *   contextPadProvider: [ 'type', CustomContextPadProvider ]
+ * };
+ *
+ * var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});
+ * ```
+ *
+ */
+export default class Modeler extends BaseModeler {
+  static Viewer: typeof Viewer;
+  static NavigatedViewer: typeof NavigatedViewer;
+  createDiagram: () => Promise<ImportXMLResult>;
+}
+
+type BaseViewerOptions = import('./BaseViewer').BaseViewerOptions;
+type ImportXMLResult = import('./BaseViewer').ImportXMLResult;
+import BaseModeler from './BaseModeler';
+import Viewer from './Viewer';
+import NavigatedViewer from './NavigatedViewer';

package/lib/Modeler.js

@@ -61,7 +61,7 @@ var initialDiagram =
 
 
 /**
- * @typedef {import('./BaseViewer').BaseModelerOptions} BaseModelerOptions
+ * @typedef {import('./BaseViewer').BaseViewerOptions} BaseViewerOptions
  * @typedef {import('./BaseViewer').ImportXMLResult} ImportXMLResult
  */
 
@@ -129,7 +129,7 @@ var initialDiagram =
  * var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});
  * ```
  *
- * @param {BaseModelerOptions} [options] The options to configure the modeler.
+ * @param {BaseViewerOptions} [options] The options to configure the modeler.
  */
 export default function Modeler(options) {
   BaseModeler.call(this, options);
@@ -148,9 +148,11 @@ Modeler.NavigatedViewer = NavigatedViewer;
  *
  * @return {Promise<ImportXMLResult>} A promise resolving with warnings that were produced during the import.
  */
-Modeler.prototype.createDiagram = wrapForCompatibility(function createDiagram() {
+Modeler.prototype.createDiagram = function createDiagram() {
   return this.importXML(initialDiagram);
-});
+};
+
+Modeler.prototype.createDiagram = wrapForCompatibility(Modeler.prototype.createDiagram);
 
 
 Modeler.prototype._interactionModules = [

package/lib/NavigatedViewer.d.ts

@@ -1,3 +1,8 @@
-import Viewer from "./Viewer";
-
-export default class NavigatedViewer extends Viewer {}
+/**
+ * A viewer with mouse and keyboard navigation features.
+ *
+ */
+export default class NavigatedViewer extends Viewer {}
+
+type BaseViewerOptions = import('./BaseViewer').BaseViewerOptions;
+import Viewer from './Viewer';

package/lib/Viewer.d.ts

@@ -1,3 +1,44 @@
-import BaseViewer from "./BaseViewer";
-
-export default class Viewer extends BaseViewer {}
+/**
+ * A viewer for BPMN 2.0 diagrams.
+ *
+ * Have a look at {@link NavigatedViewer} or {@link Modeler} for bundles that include
+ * additional features.
+ *
+ *
+ * ## Extending the Viewer
+ *
+ * In order to extend the viewer pass extension modules to bootstrap via the
+ * `additionalModules` option. An extension module is an object that exposes
+ * named services.
+ *
+ * The following example depicts the integration of a simple
+ * logging component that integrates with interaction events:
+ *
+ *
+ * ```javascript
+ *
+ * // logging component
+ * function InteractionLogger(eventBus) {
+ *   eventBus.on('element.hover', function(event) {
+ *     console.log()
+ *   })
+ * }
+ *
+ * InteractionLogger.$inject = [ 'eventBus' ]; // minification save
+ *
+ * // extension module
+ * var extensionModule = {
+ *   __init__: [ 'interactionLogger' ],
+ *   interactionLogger: [ 'type', InteractionLogger ]
+ * };
+ *
+ * // extend the viewer
+ * var bpmnViewer = new Viewer({ additionalModules: [ extensionModule ] });
+ * bpmnViewer.importXML(...);
+ * ```
+ *
+ */
+export default class Viewer extends BaseViewer {}
+
+type BaseViewerOptions = import('./BaseViewer').BaseViewerOptions;
+import BaseViewer from './BaseViewer';

package/lib/core/index.d.ts

@@ -0,0 +1,10 @@
+declare namespace _default {
+    const __depends__: ({
+      bpmnRenderer: (string | typeof import("../draw/BpmnRenderer").default)[];
+      textRenderer: (string | typeof import("../draw/TextRenderer").default)[];
+      pathMap: (string | typeof import("../draw/PathMap").default)[];
+    } | {
+      bpmnImporter: (string | typeof import("../import/BpmnImporter").default)[];
+    })[];
+}
+export default _default;

package/lib/draw/BpmnRenderUtil.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Checks if eventDefinition of the given element matches with semantic type.
+ *
+ * @param event
+ * @param eventDefinitionType
+ *
+ * @return
+ */
+export function isTypedEvent(event: any, eventDefinitionType: string): boolean;
+/**
+ * Check if element is a throw event.
+ *
+ * @param event
+ *
+ * @return
+ */
+export function isThrowEvent(event: any): boolean;
+/**
+ * Check if element is a throw event.
+ *
+ * @param element
+ *
+ * @return
+ */
+export function isCollection(element: any): boolean;
+/**
+ * @param element
+ * @param defaultColor
+ *
+ * @return
+ */
+export function getFillColor(element: any, defaultColor: string): string;
+/**
+ * @param element
+ * @param defaultColor
+ *
+ * @return
+ */
+export function getStrokeColor(element: any, defaultColor: string): string;
+/**
+ * @param element
+ * @param defaultColor
+ * @param defaultStrokeColor
+ *
+ * @return
+ */
+export function getLabelColor(element: any, defaultColor: string, defaultStrokeColor: string): string;
+/**
+ * @param shape
+ *
+ * @return path
+ */
+export function getCirclePath(shape: any): string;
+/**
+ * @param shape
+ *
+ * @return path
+ */
+export function getRoundRectPath(shape: any): string;
+/**
+ * @param shape
+ *
+ * @return path
+ */
+export function getDiamondPath(shape: any): string;
+/**
+ * @param shape
+ *
+ * @return path
+ */
+export function getRectPath(shape: any): string;
+export const black: string;
+export type ModdleElement = any;
+export type DiagramElement = any;
+export type ShapeLike = any;
+export { getDi, getBusinessObject as getSemantic } from "../util/ModelUtil";