bpmn-js 12.1.0 → 13.0.0

package/lib/draw/BpmnRenderUtil.js

@@ -1,5 +1,4 @@
 import {
-  every,
   some
 } from 'min-dash';
 
@@ -11,8 +10,20 @@ import {
   componentsToPath
 } from 'diagram-js/lib/util/RenderUtil';
 
-// re-export getDi for compatibility
-export { getDi };
+
+/**
+ * @typedef {import('../model').ModdleElement} ModdleElement
+ * @typedef {import('../model').DiagramElement} DiagramElement
+ *
+ * @typedef {import('../model').ShapeLike} ShapeLike
+ */
+
+// re-export for compatibility
+export {
+  getDi,
+  getBusinessObject as getSemantic
+} from '../util/ModelUtil';
+
 
 export var black = 'hsl(225, 10%, 15%)';
 
@@ -21,54 +32,75 @@ export var black = 'hsl(225, 10%, 15%)';
 /**
  * Checks if eventDefinition of the given element matches with semantic type.
  *
- * @return {boolean} true if element is of the given semantic type
+ * @param {ModdleElement} event
+ * @param {string} eventDefinitionType
+ *
+ * @return {boolean}
  */
-export function isTypedEvent(event, eventDefinitionType, filter) {
-
-  function matches(definition, filter) {
-    return every(filter, function(val, key) {
-
-      // we want a == conversion here, to be able to catch
-      // undefined == false and friends
-      /* jshint -W116 */
-      return definition[key] == val;
-    });
-  }
-
+export function isTypedEvent(event, eventDefinitionType) {
   return some(event.eventDefinitions, function(definition) {
-    return definition.$type === eventDefinitionType && matches(event, filter);
+    return definition.$type === eventDefinitionType;
   });
 }
 
+/**
+ * Check if element is a throw event.
+ *
+ * @param {ModdleElement} event
+ *
+ * @return {boolean}
+ */
 export function isThrowEvent(event) {
   return (event.$type === 'bpmn:IntermediateThrowEvent') || (event.$type === 'bpmn:EndEvent');
 }
 
+/**
+ * Check if element is a throw event.
+ *
+ * @param {ModdleElement} element
+ *
+ * @return {boolean}
+ */
 export function isCollection(element) {
   var dataObject = element.dataObjectRef;
 
   return element.isCollection || (dataObject && dataObject.isCollection);
 }
 
-export function getSemantic(element) {
-  return element.businessObject;
-}
-
 
 // color access //////////////////////
 
+/**
+ * @param {DiagramElement} element
+ * @param {string} defaultColor
+ *
+ * @return {string}
+ */
 export function getFillColor(element, defaultColor) {
   var di = getDi(element);
 
   return di.get('color:background-color') || di.get('bioc:fill') || defaultColor || 'white';
 }
 
+/**
+ * @param {DiagramElement} element
+ * @param {string} defaultColor
+ *
+ * @return {string}
+ */
 export function getStrokeColor(element, defaultColor) {
   var di = getDi(element);
 
   return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
 }
 
+/**
+ * @param {DiagramElement} element
+ * @param {string} defaultColor
+ * @param {string} defaultStrokeColor
+ *
+ * @return {string}
+ */
 export function getLabelColor(element, defaultColor, defaultStrokeColor) {
   var di = getDi(element),
       label = di.get('label');
@@ -79,6 +111,11 @@ export function getLabelColor(element, defaultColor, defaultStrokeColor) {
 
 // cropping path customizations //////////////////////
 
+/**
+ * @param {ShapeLike} shape
+ *
+ * @return {string} path
+ */
 export function getCirclePath(shape) {
 
   var cx = shape.x + shape.width / 2,
@@ -96,6 +133,11 @@ export function getCirclePath(shape) {
   return componentsToPath(circlePath);
 }
 
+/**
+ * @param {ShapeLike} shape
+ *
+ * @return {string} path
+ */
 export function getRoundRectPath(shape, borderRadius) {
 
   var x = shape.x,
@@ -119,6 +161,11 @@ export function getRoundRectPath(shape, borderRadius) {
   return componentsToPath(roundRectPath);
 }
 
+/**
+ * @param {ShapeLike} shape
+ *
+ * @return {string} path
+ */
 export function getDiamondPath(shape) {
 
   var width = shape.width,
@@ -139,6 +186,11 @@ export function getDiamondPath(shape) {
   return componentsToPath(diamondPath);
 }
 
+/**
+ * @param {ShapeLike} shape
+ *
+ * @return {string} path
+ */
 export function getRectPath(shape) {
   var x = shape.x,
       y = shape.y,

package/lib/draw/BpmnRenderer.d.ts

@@ -0,0 +1,124 @@
+/**
+ * A renderer for BPMN elements
+ *
+ */
+export default class BpmnRenderer extends BaseRenderer {
+  static $inject: string[];
+
+  /**
+   * @param config
+   * @param eventBus
+   * @param styles
+   * @param pathMap
+   * @param canvas
+   * @param textRenderer
+   * @param priority
+   */
+  constructor(config: BpmnRendererConfig, eventBus: import('diagram-js/lib/core/EventBus').default, styles: import('diagram-js/lib/draw/Styles').default, pathMap: import('./PathMap').default, canvas: import('diagram-js/lib/core/Canvas').default, textRenderer: import('./TextRenderer').default, priority?: number);
+
+  handlers: {
+      'bpmn:Event': (parentGfx: any, element: any, attrs: any) => SVGCircleElement;
+      'bpmn:StartEvent': (parentGfx: any, element: any) => any;
+      'bpmn:MessageEventDefinition': (parentGfx: any, element: any, isThrowing: any) => SVGPathElement;
+      'bpmn:TimerEventDefinition': (parentGfx: any, element: any) => SVGCircleElement;
+      'bpmn:EscalationEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
+      'bpmn:ConditionalEventDefinition': (parentGfx: any, event: any) => SVGPathElement;
+      'bpmn:LinkEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
+      'bpmn:ErrorEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
+      'bpmn:CancelEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
+      'bpmn:CompensateEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
+      'bpmn:SignalEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
+      'bpmn:MultipleEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
+      'bpmn:ParallelMultipleEventDefinition': (parentGfx: any, event: any) => SVGPathElement;
+      'bpmn:EndEvent': (parentGfx: any, element: any) => any;
+      'bpmn:TerminateEventDefinition': (parentGfx: any, element: any) => SVGCircleElement;
+      'bpmn:IntermediateEvent': (parentGfx: any, element: any) => any;
+      'bpmn:IntermediateCatchEvent': (parentGfx: any, element: any) => any;
+      'bpmn:IntermediateThrowEvent': (parentGfx: any, element: any) => any;
+      'bpmn:Activity': (parentGfx: any, element: any, attrs: any) => SVGRectElement;
+      'bpmn:Task': (parentGfx: any, element: any) => any;
+      'bpmn:ServiceTask': (parentGfx: any, element: any) => any;
+      'bpmn:UserTask': (parentGfx: any, element: any) => any;
+      'bpmn:ManualTask': (parentGfx: any, element: any) => any;
+      'bpmn:SendTask': (parentGfx: any, element: any) => any;
+      'bpmn:ReceiveTask': (parentGfx: any, element: any) => any;
+      'bpmn:ScriptTask': (parentGfx: any, element: any) => any;
+      'bpmn:BusinessRuleTask': (parentGfx: any, element: any) => any;
+      'bpmn:SubProcess': (parentGfx: any, element: any, attrs: any) => any;
+      'bpmn:AdHocSubProcess': (parentGfx: any, element: any) => any;
+      'bpmn:Transaction': (parentGfx: any, element: any) => any;
+      'bpmn:CallActivity': (parentGfx: any, element: any) => any;
+      'bpmn:Participant': (parentGfx: any, element: any) => any;
+      'bpmn:Lane': (parentGfx: any, element: any, attrs: any) => SVGRectElement;
+      'bpmn:InclusiveGateway': (parentGfx: any, element: any) => any;
+      'bpmn:ExclusiveGateway': (parentGfx: any, element: any) => any;
+      'bpmn:ComplexGateway': (parentGfx: any, element: any) => any;
+      'bpmn:ParallelGateway': (parentGfx: any, element: any) => any;
+      'bpmn:EventBasedGateway': (parentGfx: any, element: any) => any;
+      'bpmn:Gateway': (parentGfx: any, element: any) => SVGPolygonElement;
+      'bpmn:SequenceFlow': (parentGfx: any, element: any) => SVGElement;
+      'bpmn:Association': (parentGfx: any, element: any, attrs: any) => SVGElement;
+      'bpmn:DataInputAssociation': (parentGfx: any, element: any) => any;
+      'bpmn:DataOutputAssociation': (parentGfx: any, element: any) => any;
+      'bpmn:MessageFlow': (parentGfx: any, element: any) => SVGElement;
+      'bpmn:DataObject': (parentGfx: any, element: any) => SVGPathElement;
+      'bpmn:DataObjectReference': (parentGfx: any, element: any) => any;
+      'bpmn:DataInput': (parentGfx: any, element: any) => any;
+      'bpmn:DataOutput': (parentGfx: any, element: any) => any;
+      'bpmn:DataStoreReference': (parentGfx: any, element: any) => SVGPathElement;
+      'bpmn:BoundaryEvent': (parentGfx: any, element: any) => any;
+      'bpmn:Group': (parentGfx: any, element: any) => SVGRectElement;
+      label: (parentGfx: any, element: any) => SVGElement;
+      'bpmn:TextAnnotation': (parentGfx: any, element: any) => SVGRectElement;
+      ParticipantMultiplicityMarker: (parentGfx: any, element: any) => void;
+      SubProcessMarker: (parentGfx: any, element: any) => void;
+      ParallelMarker: (parentGfx: any, element: any, position: any) => void;
+      SequentialMarker: (parentGfx: any, element: any, position: any) => void;
+      CompensationMarker: (parentGfx: any, element: any, position: any) => void;
+      LoopMarker: (parentGfx: any, element: any, position: any) => void;
+      AdhocMarker: (parentGfx: any, element: any, position: any) => void;
+  };
+
+  /**
+   * @param element
+   *
+   * @return
+   */
+  canRender(element: any): boolean;
+
+  /**
+   * Draw shape into parentGfx.
+   *
+   * @param parentGfx
+   * @param element
+   *
+   * @return mainGfx
+   */
+  drawShape(parentGfx: SVGElement, element: any): SVGElement;
+
+  /**
+   * Draw connection into parentGfx.
+   *
+   * @param parentGfx
+   * @param element
+   *
+   * @return mainGfx
+   */
+  drawConnection(parentGfx: SVGElement, element: any): SVGElement;
+
+  /**
+   * Get shape path.
+   *
+   * @param element
+   *
+   * @return path
+   */
+  getShapePath(element: any): string;
+}
+export type BpmnRendererConfig = Partial<{
+    defaultFillColor: string;
+    defaultStrokeColor: string;
+    defaultLabelColor: string;
+}>;
+export type DiagramElement = any;
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

package/lib/draw/BpmnRenderer.js

@@ -69,6 +69,29 @@ var DEFAULT_FILL_OPACITY = .95,
 
 var ELEMENT_LABEL_DISTANCE = 10;
 
+/**
+ * @typedef { Partial<{
+ *   defaultFillColor: string,
+ *   defaultStrokeColor: string,
+ *   defaultLabelColor: string
+ * }> } BpmnRendererConfig
+ */
+
+/**
+ * @typedef { import('../model').DiagramElement } DiagramElement
+ */
+
+/**
+ * A renderer for BPMN elements
+ *
+ * @param {BpmnRendererConfig} config
+ * @param {import('diagram-js/lib/core/EventBus').default} eventBus
+ * @param {import('diagram-js/lib/draw/Styles').default} styles
+ * @param {import('./PathMap').default} pathMap
+ * @param {import('diagram-js/lib/core/Canvas').default} canvas
+ * @param {import('./TextRenderer').default} textRenderer
+ * @param {number} [priority]
+ */
 export default function BpmnRenderer(
     config, eventBus, styles, pathMap,
     canvas, textRenderer, priority) {
@@ -1895,10 +1918,23 @@ BpmnRenderer.$inject = [
 ];
 
 
+/**
+ * @param {DiagramElement} element
+ *
+ * @return {boolean}
+ */
 BpmnRenderer.prototype.canRender = function(element) {
   return is(element, 'bpmn:BaseElement');
 };
 
+/**
+ * Draw shape into parentGfx.
+ *
+ * @param {SVGElement} parentGfx
+ * @param {DiagramElement} element
+ *
+ * @return {SVGElement} mainGfx
+ */
 BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
   var type = element.type;
   var h = this._renderer(type);
@@ -1907,6 +1943,14 @@ BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
   return h(parentGfx, element);
 };
 
+/**
+ * Draw connection into parentGfx.
+ *
+ * @param {SVGElement} parentGfx
+ * @param {DiagramElement} element
+ *
+ * @return {SVGElement} mainGfx
+ */
 BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
   var type = element.type;
   var h = this._renderer(type);
@@ -1915,6 +1959,13 @@ BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
   return h(parentGfx, element);
 };
 
+/**
+ * Get shape path.
+ *
+ * @param {DiagramElement} element
+ *
+ * @return {string} path
+ */
 BpmnRenderer.prototype.getShapePath = function(element) {
 
   if (is(element, 'bpmn:Event')) {

package/lib/draw/PathMap.d.ts

@@ -0,0 +1,330 @@
+/**
+ * Map containing SVG paths needed by BpmnRenderer
+ */
+export default class PathMap {
+    /**
+     * Contains a map of path elements
+     *
+     * <h1>Path definition</h1>
+     * A parameterized path is defined like this:
+     * <pre>
+     * 'GATEWAY_PARALLEL': {
+     *   d: 'm {mx},{my} {e.x0},0 0,{e.x1} {e.x1},0 0,{e.y0} -{e.x1},0 0,{e.y1} ' +
+     '-{e.x0},0 0,-{e.y1} -{e.x1},0 0,-{e.y0} {e.x1},0 z',
+     *   height: 17.5,
+     *   width:  17.5,
+     *   heightElements: [2.5, 7.5],
+     *   widthElements: [2.5, 7.5]
+     * }
+     * </pre>
+     * <p>It's important to specify a correct <b>height and width</b> for the path as the scaling
+     * is based on the ratio between the specified height and width in this object and the
+     * height and width that is set as scale target (Note x,y coordinates will be scaled with
+     * individual ratios).</p>
+     * <p>The '<b>heightElements</b>' and '<b>widthElements</b>' array must contain the values that will be scaled.
+     * The scaling is based on the computed ratios.
+     * Coordinates on the y axis should be in the <b>heightElement</b>'s array, they will be scaled using
+     * the computed ratio coefficient.
+     * In the parameterized path the scaled values can be accessed through the 'e' object in {} brackets.
+     *   <ul>
+     *    <li>The values for the y axis can be accessed in the path string using {e.y0}, {e.y1}, ....</li>
+     *    <li>The values for the x axis can be accessed in the path string using {e.x0}, {e.x1}, ....</li>
+     *   </ul>
+     *   The numbers x0, x1 respectively y0, y1, ... map to the corresponding array index.
+     * </p>
+     */
+    pathMap: {
+        EVENT_MESSAGE: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_SIGNAL: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_ESCALATION: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_CONDITIONAL: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_LINK: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_ERROR: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_CANCEL_45: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_COMPENSATION: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_TIMER_WH: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_TIMER_LINE: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_MULTIPLE: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        EVENT_PARALLEL_MULTIPLE: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        GATEWAY_EXCLUSIVE: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        GATEWAY_PARALLEL: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        GATEWAY_EVENT_BASED: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        GATEWAY_COMPLEX: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        DATA_OBJECT_PATH: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        DATA_OBJECT_COLLECTION_PATH: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: any[];
+            widthElements: any[];
+        };
+        DATA_ARROW: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: any[];
+            widthElements: any[];
+        };
+        DATA_STORE: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        TEXT_ANNOTATION: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        MARKER_SUB_PROCESS: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: any[];
+            widthElements: any[];
+        };
+        MARKER_PARALLEL: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: any[];
+            widthElements: any[];
+        };
+        MARKER_SEQUENTIAL: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: any[];
+            widthElements: any[];
+        };
+        MARKER_COMPENSATION: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: any[];
+            widthElements: any[];
+        };
+        MARKER_LOOP: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: any[];
+            widthElements: any[];
+        };
+        MARKER_ADHOC: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: any[];
+            widthElements: any[];
+        };
+        TASK_TYPE_SEND: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        TASK_TYPE_SCRIPT: {
+            d: string;
+            height: number;
+            width: number;
+            heightElements: number[];
+            widthElements: number[];
+        };
+        TASK_TYPE_USER_1: {
+            d: string;
+        };
+        TASK_TYPE_USER_2: {
+            d: string;
+        };
+        TASK_TYPE_USER_3: {
+            d: string;
+        };
+        TASK_TYPE_MANUAL: {
+            d: string;
+        };
+        TASK_TYPE_INSTANTIATING_SEND: {
+            d: string;
+        };
+        TASK_TYPE_SERVICE: {
+            d: string;
+        };
+        TASK_TYPE_SERVICE_FILL: {
+            d: string;
+        };
+        TASK_TYPE_BUSINESS_RULE_HEADER: {
+            d: string;
+        };
+        TASK_TYPE_BUSINESS_RULE_MAIN: {
+            d: string;
+        };
+        MESSAGE_FLOW_MARKER: {
+            d: string;
+        };
+    };
+    /**
+     * Return raw path for the given ID.
+     *
+     * @param pathId
+     *
+     * @return raw path
+     */
+    getRawPath: (pathId: string) => string;
+    /**
+     * Scales the path to the given height and width.
+     * <h1>Use case</h1>
+     * <p>Use case is to scale the content of elements (event, gateways) based
+     * on the element bounding box's size.
+     * </p>
+     * <h1>Why not transform</h1>
+     * <p>Scaling a path with transform() will also scale the stroke and IE does not support
+     * the option 'non-scaling-stroke' to prevent this.
+     * Also there are use cases where only some parts of a path should be
+     * scaled.</p>
+     *
+     * @param pathId The ID of the path.
+     * @param param <p>
+     *   Example param object scales the path to 60% size of the container (data.width, data.height).
+     *   <pre>
+     *   {
+     *     xScaleFactor: 0.6,
+     *     yScaleFactor:0.6,
+     *     containerWidth: data.width,
+     *     containerHeight: data.height,
+     *     position: {
+     *       mx: 0.46,
+     *       my: 0.2,
+     *     }
+     *   }
+     *   </pre>
+     *   <ul>
+     *    <li>targetpathwidth = xScaleFactor * containerWidth</li>
+     *    <li>targetpathheight = yScaleFactor * containerHeight</li>
+     *    <li>Position is used to set the starting coordinate of the path. M is computed:
+     *    <ul>
+     *      <li>position.x * containerWidth</li>
+     *      <li>position.y * containerHeight</li>
+     *    </ul>
+     *    Center of the container <pre> position: {
+     *       mx: 0.5,
+     *       my: 0.5,
+     *     }</pre>
+     *     Upper left corner of the container
+     *     <pre> position: {
+     *       mx: 0.0,
+     *       my: 0.0,
+     *     }</pre>
+     *    </li>
+     *   </ul>
+     * </p>
+     *
+     * @return scaled path
+     */
+    getScaledPath: (pathId: string, param: any) => string;
+}