bpmn-js 17.9.2 → 17.11.0

package/lib/draw/BpmnRenderer.d.ts

@@ -69,32 +69,32 @@ export default class BpmnRenderer extends BaseRenderer {
    * Draw shape into parentGfx.
    *
    * @param parentGfx
-   * @param element
+   * @param shape
    * @param attrs
    *
    * @return mainGfx
    */
-  drawShape(parentGfx: SVGElement, element: Element, attrs?: Attrs): SVGElement;
+  drawShape(parentGfx: SVGElement, shape: Shape, attrs?: Attrs): SVGElement;
 
   /**
    * Draw connection into parentGfx.
    *
    * @param parentGfx
-   * @param element
+   * @param connection
    * @param attrs
    *
    * @return mainGfx
    */
-  drawConnection(parentGfx: SVGElement, element: Element, attrs?: Attrs): SVGElement;
+  drawConnection(parentGfx: SVGElement, connection: Connection, attrs?: Attrs): SVGElement;
 
   /**
    * Get shape path.
    *
-   * @param element
+   * @param shape
    *
    * @return path
    */
-  getShapePath(element: Element): string;
+  getShapePath(shape: Shape): string;
 }
 
 export type BpmnRendererConfig = Partial<{
@@ -111,4 +111,6 @@ export type Attrs = Partial<{
 }>;
 
 type Element = import('../model/Types').Element;
+type Shape = import('../model/Types').Shape;
+type Connection = import('../model/Types').Connection;
 import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

package/lib/draw/BpmnRenderer.js

@@ -93,6 +93,8 @@ var DEFAULT_OPACITY = 0.95,
 
 /**
  * @typedef { import('../model/Types').Element } Element
+ * @typedef { import('../model/Types').Shape } Shape
+ * @typedef { import('../model/Types').Connection } Connection
  */
 
 /**
@@ -2266,57 +2268,57 @@ BpmnRenderer.prototype.canRender = function(element) {
  * Draw shape into parentGfx.
  *
  * @param {SVGElement} parentGfx
- * @param {Element} element
+ * @param {Shape} shape
  * @param {Attrs} [attrs]
  *
  * @return {SVGElement} mainGfx
  */
-BpmnRenderer.prototype.drawShape = function(parentGfx, element, attrs = {}) {
-  var { type } = element;
+BpmnRenderer.prototype.drawShape = function(parentGfx, shape, attrs = {}) {
+  var { type } = shape;
 
   var handler = this._renderer(type);
 
-  return handler(parentGfx, element, attrs);
+  return handler(parentGfx, shape, attrs);
 };
 
 /**
  * Draw connection into parentGfx.
  *
  * @param {SVGElement} parentGfx
- * @param {Element} element
+ * @param {Connection} connection
  * @param {Attrs} [attrs]
  *
  * @return {SVGElement} mainGfx
  */
-BpmnRenderer.prototype.drawConnection = function(parentGfx, element, attrs = {}) {
-  var { type } = element;
+BpmnRenderer.prototype.drawConnection = function(parentGfx, connection, attrs = {}) {
+  var { type } = connection;
 
   var handler = this._renderer(type);
 
-  return handler(parentGfx, element, attrs);
+  return handler(parentGfx, connection, attrs);
 };
 
 /**
  * Get shape path.
  *
- * @param {Element} element
+ * @param {Shape} shape
  *
  * @return {string} path
  */
-BpmnRenderer.prototype.getShapePath = function(element) {
-  if (is(element, 'bpmn:Event')) {
-    return getCirclePath(element);
+BpmnRenderer.prototype.getShapePath = function(shape) {
+  if (is(shape, 'bpmn:Event')) {
+    return getCirclePath(shape);
   }
 
-  if (is(element, 'bpmn:Activity')) {
-    return getRoundRectPath(element, TASK_BORDER_RADIUS);
+  if (is(shape, 'bpmn:Activity')) {
+    return getRoundRectPath(shape, TASK_BORDER_RADIUS);
   }
 
-  if (is(element, 'bpmn:Gateway')) {
-    return getDiamondPath(element);
+  if (is(shape, 'bpmn:Gateway')) {
+    return getDiamondPath(shape);
   }
 
-  return getRectPath(element);
+  return getRectPath(shape);
 };
 
 /**

package/lib/features/align-elements/AlignElementsContextPadProvider.d.ts

@@ -29,4 +29,4 @@ type PopupMenu = import('diagram-js/lib/features/popup-menu/PopupMenu').default;
 export type Translate = typeof import("diagram-js/lib/i18n/translate/translate").default;
 type Element = import('../../model/Types').Element;
 type ContextPadEntries = import('diagram-js/lib/features/context-pad/ContextPad').ContextPadEntries;
-type ContextPadProvider = import('diagram-js/lib/features/context-pad/ContextPadProvider').default;
+type ContextPadProvider = import('diagram-js/lib/features/context-pad/ContextPadProvider').default<Element>;

package/lib/features/align-elements/AlignElementsContextPadProvider.js

@@ -12,7 +12,7 @@ import ICONS from './AlignElementsIcons';
  *
  * @typedef {import('../../model/Types').Element} Element
  * @typedef {import('diagram-js/lib/features/context-pad/ContextPad').ContextPadEntries} ContextPadEntries
- * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').default} ContextPadProvider
+ * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').default<Element>} ContextPadProvider
  */
 
 var LOW_PRIORITY = 900;

package/lib/features/append-preview/AppendPreview.d.ts

@@ -13,7 +13,7 @@ export default class AppendPreview {
    * @param layouter
    * @param rules
    */
-  constructor(complexPreview: ComplexPreview, connectionDocking: ConnectionDocking, elementFactory: ElementFactory, eventBus: EventBus, layouter: any, rules: Rules);
+  constructor(complexPreview: ComplexPreview, connectionDocking: ConnectionDocking, elementFactory: ElementFactory, eventBus: EventBus, layouter: BpmnLayouter, rules: Rules);
 
   /**
    * Create a preview of appending a shape of the given type to the given source.
@@ -31,6 +31,6 @@ type ComplexPreview = import('diagram-js/lib/features/complex-preview/ComplexPre
 type ConnectionDocking = import('diagram-js/lib/layout/ConnectionDocking').default;
 type ElementFactory = import('../modeling/ElementFactory').default;
 type EventBus = import('diagram-js/lib/core/EventBus').default;
-type ManhattanLayout = import('diagram-js/lib/layout/ManhattanLayout').default;
+type BpmnLayouter = import('../modeling/BpmnLayouter').default;
 type Rules = import('diagram-js/lib/features/rules/Rules').default;
 type Shape = import('../../model/Types').Shape;

package/lib/features/append-preview/AppendPreview.js

@@ -10,7 +10,7 @@ const round = Math.round;
  * @typedef {import('diagram-js/lib/layout/ConnectionDocking').default} ConnectionDocking
  * @typedef {import('../modeling/ElementFactory').default} ElementFactory
  * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
- * @typedef {import('diagram-js/lib/layout/ManhattanLayout').default} ManhattanLayout
+ * @typedef {import('../modeling/BpmnLayouter').default} BpmnLayouter
  * @typedef {import('diagram-js/lib/features/rules/Rules').default} Rules
  *
  * @typedef {import('../../model/Types').Shape} Shape
@@ -23,7 +23,7 @@ const round = Math.round;
  * @param {ConnectionDocking} connectionDocking
  * @param {ElementFactory} elementFactory
  * @param {EventBus} eventBus
- * @param {ManhattanLayout} layouter
+ * @param {BpmnLayouter} layouter
  * @param {Rules} rules
  */
 export default function AppendPreview(complexPreview, connectionDocking, elementFactory, eventBus, layouter, rules) {

package/lib/features/auto-place/BpmnAutoPlace.d.ts

@@ -6,8 +6,10 @@ export default class AutoPlace {
     static $inject: string[];
     /**
      * @param eventBus
+     * @param elementRegistry
      */
-    constructor(eventBus: EventBus);
+    constructor(eventBus: EventBus, elementRegistry: ElementRegistry);
 }
 
 type EventBus = import('diagram-js/lib/core/EventBus').default;
+type ElementRegistry = import('diagram-js/lib/core/ElementRegistry').default;

package/lib/features/auto-place/BpmnAutoPlace.js

@@ -2,20 +2,22 @@ import { getNewShapePosition } from './BpmnAutoPlaceUtil';
 
 /**
  * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+ * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
  */
 
 /**
  * BPMN auto-place behavior.
  *
  * @param {EventBus} eventBus
+ * @param {ElementRegistry} elementRegistry
  */
-export default function AutoPlace(eventBus) {
+export default function AutoPlace(eventBus, elementRegistry) {
   eventBus.on('autoPlace', function(context) {
     var shape = context.shape,
         source = context.source;
 
-    return getNewShapePosition(source, shape);
+    return getNewShapePosition(source, shape, elementRegistry);
   });
 }
 
-AutoPlace.$inject = [ 'eventBus' ];
+AutoPlace.$inject = [ 'eventBus', 'elementRegistry' ];

package/lib/features/auto-place/BpmnAutoPlaceUtil.d.ts

@@ -4,10 +4,11 @@
  *
  * @param  source
  * @param  element
+ * @param  elementRegistry
  *
  * @return
  */
-export function getNewShapePosition(source: Shape, element: Shape): Point;
+export function getNewShapePosition(source: Shape, element: Shape, elementRegistry: ElementRegistry): Point;
 
 /**
  * Get the position for given new flow node. Try placing the flow node right/bottom of
@@ -15,10 +16,11 @@ export function getNewShapePosition(source: Shape, element: Shape): Point;
  *
  * @param source
  * @param element
+ * @param placeHorizontally Whether to place the new element horizontally
  *
  * @return
  */
-export function getFlowNodePosition(source: Shape, element: Shape): Point;
+export function getFlowNodePosition(source: Shape, element: Shape, placeHorizontally: boolean): Point;
 
 /**
  * Get the position for given text annotation. Try placing the text annotation
@@ -26,10 +28,11 @@ export function getFlowNodePosition(source: Shape, element: Shape): Point;
  *
  * @param source
  * @param element
+ * @param placeHorizontally Whether to place the new element horizontally
  *
  * @return
  */
-export function getTextAnnotationPosition(source: Shape, element: Shape): Point;
+export function getTextAnnotationPosition(source: Shape, element: Shape, placeHorizontally: boolean): Point;
 
 /**
  * Get the position for given new data element. Try placing the data element
@@ -37,11 +40,13 @@ export function getTextAnnotationPosition(source: Shape, element: Shape): Point;
  *
  * @param source
  * @param element
+ * @param placeHorizontally Whether to place the new element horizontally
  *
  * @return
  */
-export function getDataElementPosition(source: Shape, element: Shape): Point;
+export function getDataElementPosition(source: Shape, element: Shape, placeHorizontally: boolean): Point;
 
 type Shape = import('../../model/Types').Shape;
+type ElementRegistry = import('diagram-js/lib/core/ElementRegistry').default;
 type Point = import('diagram-js/lib/util/Types').Point;
 type DirectionTRBL = import('diagram-js/lib/util/Types').DirectionTRBL;

package/lib/features/auto-place/BpmnAutoPlaceUtil.js

@@ -22,6 +22,7 @@ import { isConnection } from 'diagram-js/lib/util/ModelUtil';
 /**
  * @typedef {import('../../model/Types').Shape} Shape
  *
+ * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
  * @typedef {import('diagram-js/lib/util/Types').Point} Point
  * @typedef {import('diagram-js/lib/util/Types').DirectionTRBL} DirectionTRBL
  */
@@ -32,21 +33,24 @@ import { isConnection } from 'diagram-js/lib/util/ModelUtil';
  *
  * @param  {Shape} source
  * @param  {Shape} element
+ * @param  {ElementRegistry} elementRegistry
  *
  * @return {Point}
  */
-export function getNewShapePosition(source, element) {
+export function getNewShapePosition(source, element, elementRegistry) {
+
+  var placeHorizontally = isDirectionHorizontal(source, elementRegistry);
 
   if (is(element, 'bpmn:TextAnnotation')) {
-    return getTextAnnotationPosition(source, element);
+    return getTextAnnotationPosition(source, element, placeHorizontally);
   }
 
   if (isAny(element, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
-    return getDataElementPosition(source, element);
+    return getDataElementPosition(source, element, placeHorizontally);
   }
 
   if (is(element, 'bpmn:FlowNode')) {
-    return getFlowNodePosition(source, element);
+    return getFlowNodePosition(source, element, placeHorizontally);
   }
 }
 
@@ -56,16 +60,15 @@ export function getNewShapePosition(source, element) {
  *
  * @param {Shape} source
  * @param {Shape} element
+ * @param {boolean} placeHorizontally Whether to place the new element horizontally
  *
  * @return {Point}
  */
-export function getFlowNodePosition(source, element) {
+export function getFlowNodePosition(source, element, placeHorizontally) {
 
   var sourceTrbl = asTRBL(source);
   var sourceMid = getMid(source);
 
-  var placeHorizontally = isDirectionHorizontal(source);
-
   var placement = placeHorizontally ? {
     directionHint: 'e',
     minDistance: 80,
@@ -147,15 +150,14 @@ function getDistance(orientation, minDistance, placement) {
  *
  * @param {Shape} source
  * @param {Shape} element
+ * @param {boolean} placeHorizontally Whether to place the new element horizontally
  *
  * @return {Point}
  */
-export function getTextAnnotationPosition(source, element) {
+export function getTextAnnotationPosition(source, element, placeHorizontally) {
 
   var sourceTrbl = asTRBL(source);
 
-  var placeHorizontally = isDirectionHorizontal(source);
-
   var position = placeHorizontally ? {
     x: sourceTrbl.right + element.width / 2,
     y: sourceTrbl.top - 50 - element.height / 2
@@ -195,15 +197,14 @@ export function getTextAnnotationPosition(source, element) {
  *
  * @param {Shape} source
  * @param {Shape} element
+ * @param {boolean} placeHorizontally Whether to place the new element horizontally
  *
  * @return {Point}
  */
-export function getDataElementPosition(source, element) {
+export function getDataElementPosition(source, element, placeHorizontally) {
 
   var sourceTrbl = asTRBL(source);
 
-  var placeHorizontally = isDirectionHorizontal(source);
-
   var position = placeHorizontally ? {
     x: sourceTrbl.right - 10 + element.width / 2,
     y: sourceTrbl.bottom + 40 + element.width / 2

package/lib/features/context-pad/ContextPadProvider.d.ts

@@ -20,21 +20,9 @@ export default class ContextPadProvider implements BaseContextPadProvider {
    * @param canvas
    * @param rules
    * @param translate
+   * @param appendPreview
    */
-  constructor(
-    config: ContextPadConfig,
-    injector: Injector,
-    eventBus: EventBus,
-    contextPad: ContextPad,
-    modeling: Modeling,
-    elementFactory: ElementFactory,
-    connect: Connect,
-    create: Create,
-    popupMenu: PopupMenu,
-    canvas: any,
-    rules: Rules,
-    translate: Translate
-  );
+  constructor(config: ContextPadConfig, injector: Injector, eventBus: EventBus, contextPad: ContextPad, modeling: Modeling, elementFactory: ElementFactory, connect: Connect, create: Create, popupMenu: PopupMenu, canvas: any, rules: Rules, translate: Translate, appendPreview: AppendPreview);
 
   /**
    * @param elements
@@ -56,6 +44,7 @@ type EventBus = import('diagram-js/lib/core/EventBus').default;
 type ContextPad = import('diagram-js/lib/features/context-pad/ContextPad').default;
 type Modeling = import('../modeling/Modeling').default;
 type ElementFactory = import('../modeling/ElementFactory').default;
+type AppendPreview = import('../append-preview/AppendPreview').default;
 type Connect = import('diagram-js/lib/features/connect/Connect').default;
 type Create = import('diagram-js/lib/features/create/Create').default;
 type PopupMenu = import('diagram-js/lib/features/popup-menu/PopupMenu').default;

package/lib/features/context-pad/ContextPadProvider.js

@@ -33,6 +33,7 @@ import {
  * @typedef {import('diagram-js/lib/features/context-pad/ContextPad').default} ContextPad
  * @typedef {import('../modeling/Modeling').default} Modeling
  * @typedef {import('../modeling/ElementFactory').default} ElementFactory
+ * @typedef {import('../append-preview/AppendPreview').default} AppendPreview
  * @typedef {import('diagram-js/lib/features/connect/Connect').default} Connect
  * @typedef {import('diagram-js/lib/features/create/Create').default} Create
  * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').default} PopupMenu
@@ -67,6 +68,7 @@ import {
  * @param {Canvas} canvas
  * @param {Rules} rules
  * @param {Translate} translate
+ * @param {AppendPreview} appendPreview
  */
 export default function ContextPadProvider(
     config, injector, eventBus,
@@ -581,4 +583,4 @@ function isEventType(businessObject, type, eventDefinitionType) {
   });
 
   return isType && isDefinition;
-}
+}

package/lib/features/grid-snapping/behavior/GridSnappingAutoPlaceBehavior.d.ts

@@ -3,10 +3,12 @@ export default class GridSnappingAutoPlaceBehavior {
     /**
      * @param eventBus
      * @param gridSnapping
+     * @param elementRegistry
      */
-    constructor(eventBus: EventBus, gridSnapping: GridSnapping);
+    constructor(eventBus: EventBus, gridSnapping: GridSnapping, elementRegistry: ElementRegistry);
 }
 
 type EventBus = import('diagram-js/lib/core/EventBus').default;
+type ElementRegistry = import('diagram-js/lib/core/ElementRegistry').default;
 type GridSnapping = import('diagram-js/lib/features/grid-snapping/GridSnapping').default;
 type Axis = import('diagram-js/lib/util/Types').Axis;

package/lib/features/grid-snapping/behavior/GridSnappingAutoPlaceBehavior.js

@@ -5,6 +5,7 @@ import { is } from '../../../util/ModelUtil';
 
 /**
  * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+ * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
  * @typedef {import('diagram-js/lib/features/grid-snapping/GridSnapping').default} GridSnapping
  *
  * @typedef {import('diagram-js/lib/util/Types').Axis} Axis
@@ -15,14 +16,15 @@ var HIGH_PRIORITY = 2000;
 /**
  * @param {EventBus} eventBus
  * @param {GridSnapping} gridSnapping
+ * @param {ElementRegistry} elementRegistry
  */
-export default function GridSnappingAutoPlaceBehavior(eventBus, gridSnapping) {
+export default function GridSnappingAutoPlaceBehavior(eventBus, gridSnapping, elementRegistry) {
   eventBus.on('autoPlace', HIGH_PRIORITY, function(context) {
     var source = context.source,
         sourceMid = getMid(source),
         shape = context.shape;
 
-    var position = getNewShapePosition(source, shape);
+    var position = getNewShapePosition(source, shape, elementRegistry);
 
     [ 'x', 'y' ].forEach(function(axis) {
       var options = {};
@@ -59,7 +61,8 @@ export default function GridSnappingAutoPlaceBehavior(eventBus, gridSnapping) {
 
 GridSnappingAutoPlaceBehavior.$inject = [
   'eventBus',
-  'gridSnapping'
+  'gridSnapping',
+  'elementRegistry'
 ];
 
 // helpers //////////

package/lib/features/label-editing/LabelEditingPreview.js

@@ -79,7 +79,8 @@ export default function LabelEditingPreview(eventBus, canvas, pathMap) {
     } else if (is(element, 'bpmn:Task') ||
                is(element, 'bpmn:CallActivity') ||
                is(element, 'bpmn:SubProcess') ||
-               is(element, 'bpmn:Participant')) {
+               is(element, 'bpmn:Participant') ||
+               is(element, 'bpmn:Lane')) {
       canvas.addMarker(element, MARKER_LABEL_HIDDEN);
     }
   });

package/lib/features/modeling/BpmnLayouter.d.ts

@@ -1,15 +1,19 @@
 export default class BpmnLayouter extends BaseLayouter {
-    /**
-     * Returns waypoints of laid out connection.
-     *
-     * @param connection
-     * @param hints
-     *
-     * @return
-     */
-    layoutConnection(connection: Connection, hints?: BpmnLayoutConnectionHints): Point[];
+  static $inject: string[];
+  constructor(elementRegistry: any);
+
+  /**
+   * Returns waypoints of laid out connection.
+   *
+   * @param connection
+   * @param hints
+   *
+   * @return
+   */
+  layoutConnection(connection: Connection, hints?: BpmnLayoutConnectionHints): Point[];
 }
 
+type ElementRegistry = import('diagram-js/lib/core/ElementRegistry').default;
 type Point = import('diagram-js/lib/util/Types').Point;
 type Connection = import('../../model/Types').Connection;
 type Element = import('../../model/Types').Element;

package/lib/features/modeling/BpmnLayouter.js

@@ -25,6 +25,8 @@ import { is } from '../../util/ModelUtil';
 import { isDirectionHorizontal } from './util/ModelingUtil';
 
 /**
+ * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
+ *
  * @typedef {import('diagram-js/lib/util/Types').Point} Point
  *
  * @typedef {import('../../model/Types').Connection} Connection
@@ -107,7 +109,9 @@ var orientationDirectionMapping = {
   left: 'l'
 };
 
-export default function BpmnLayouter() {}
+export default function BpmnLayouter(elementRegistry) {
+  this._elementRegistry = elementRegistry;
+}
 
 inherits(BpmnLayouter, BaseLayouter);
 
@@ -128,7 +132,8 @@ BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
       target = hints.target || connection.target,
       waypoints = hints.waypoints || connection.waypoints,
       connectionStart = hints.connectionStart,
-      connectionEnd = hints.connectionEnd;
+      connectionEnd = hints.connectionEnd,
+      elementRegistry = this._elementRegistry;
 
   var manhattanOptions,
       updatedWaypoints;
@@ -149,7 +154,7 @@ BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
     }
   }
 
-  var layout = isDirectionHorizontal(source) ? PREFERRED_LAYOUTS_HORIZONTAL : PREFERRED_LAYOUTS_VERTICAL;
+  var layout = isDirectionHorizontal(source, elementRegistry) ? PREFERRED_LAYOUTS_HORIZONTAL : PREFERRED_LAYOUTS_VERTICAL;
 
   if (is(connection, 'bpmn:MessageFlow')) {
     manhattanOptions = getMessageFlowManhattanOptions(source, target, layout);
@@ -479,3 +484,5 @@ function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, atta
     }
   }
 }
+
+BpmnLayouter.$inject = [ 'elementRegistry' ];

package/lib/features/modeling/Modeling.d.ts

@@ -34,7 +34,7 @@ export default class Modeling<T extends import("../../model/Types").Connection =
    *
    * @return
    */
-  connect(source: Element, target: Element, attrs: Partial<Connection>, hints?: ModelingHints): T;
+  connect(source: Element, target: Element, attrs?: Partial<Connection>, hints?: ModelingHints): T;
 
   /**
    * Update a model element's properties.

package/lib/features/modeling/Modeling.js

@@ -114,7 +114,7 @@ Modeling.prototype.updateLabel = function(element, newLabel, newBounds, hints) {
 /**
  * @param {Element} source
  * @param {Element} target
- * @param {Partial<Connection>} attrs
+ * @param {Partial<Connection>} [attrs]
  * @param {ModelingHints} [hints]
  *
  * @return {T}