bpmn-js 14.2.0 → 15.0.0

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

@@ -0,0 +1,36 @@
+/**
+ * A preview for appending.
+ *
+ */
+export default class AppendPreview {
+  static $inject: string[];
+
+  /**
+   * @param complexPreview
+   * @param connectionDocking
+   * @param elementFactory
+   * @param eventBus
+   * @param layouter
+   * @param rules
+   */
+  constructor(complexPreview: ComplexPreview, connectionDocking: ConnectionDocking, elementFactory: ElementFactory, eventBus: EventBus, layouter: any, rules: Rules);
+
+  /**
+   * Create a preview of appending a shape of the given type to the given source.
+   *
+   * @param source
+   * @param type
+   * @param options
+   */
+  create(source: Shape, type: string, options: Partial<Shape>): void;
+
+  cleanUp(): void;
+}
+
+type ComplexPreview = import('diagram-js/lib/features/complex-preview/ComplexPreview').default;
+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 Rules = import('diagram-js/lib/features/rules/Rules').default;
+type Shape = import('../../model/Types').Shape;

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

@@ -0,0 +1,109 @@
+import {
+  assign,
+  isNil
+} from 'min-dash';
+
+const round = Math.round;
+
+/**
+ * @typedef {import('diagram-js/lib/features/complex-preview/ComplexPreview').default} ComplexPreview
+ * @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('diagram-js/lib/features/rules/Rules').default} Rules
+ *
+ * @typedef {import('../../model/Types').Shape} Shape
+ */
+
+/**
+ * A preview for appending.
+ *
+ * @param {ComplexPreview} complexPreview
+ * @param {ConnectionDocking} connectionDocking
+ * @param {ElementFactory} elementFactory
+ * @param {EventBus} eventBus
+ * @param {ManhattanLayout} layouter
+ * @param {Rules} rules
+ */
+export default function AppendPreview(complexPreview, connectionDocking, elementFactory, eventBus, layouter, rules) {
+  this._complexPreview = complexPreview;
+  this._connectionDocking = connectionDocking;
+  this._elementFactory = elementFactory;
+  this._eventBus = eventBus;
+  this._layouter = layouter;
+  this._rules = rules;
+}
+
+/**
+ * Create a preview of appending a shape of the given type to the given source.
+ *
+ * @param {Shape} source
+ * @param {string} type
+ * @param {Partial<Shape>} options
+ */
+AppendPreview.prototype.create = function(source, type, options) {
+  const complexPreview = this._complexPreview,
+        connectionDocking = this._connectionDocking,
+        elementFactory = this._elementFactory,
+        eventBus = this._eventBus,
+        layouter = this._layouter,
+        rules = this._rules;
+
+  const shape = elementFactory.createShape(assign({ type }, options));
+
+  const position = eventBus.fire('autoPlace', {
+    source,
+    shape
+  });
+
+  if (!position) {
+    return;
+  }
+
+  assign(shape, {
+    x: position.x - round(shape.width / 2),
+    y: position.y - round(shape.height / 2)
+  });
+
+  const connectionCreateAllowed = rules.allowed('connection.create', {
+    source,
+    target: shape,
+    hints: {
+      targetParent: source.parent
+    }
+  });
+
+  let connection = null;
+
+  if (connectionCreateAllowed) {
+    connection = elementFactory.createConnection(connectionCreateAllowed);
+
+    connection.waypoints = layouter.layoutConnection(connection, {
+      source,
+      target: shape
+    });
+
+    connection.waypoints = connectionDocking.getCroppedWaypoints(connection, source, shape);
+  }
+
+  complexPreview.create({
+    created: [
+      shape,
+      connection
+    ].filter((element) => !isNil(element))
+  });
+};
+
+AppendPreview.prototype.cleanUp = function() {
+  this._complexPreview.cleanUp();
+};
+
+AppendPreview.$inject = [
+  'complexPreview',
+  'connectionDocking',
+  'elementFactory',
+  'eventBus',
+  'layouter',
+  'rules'
+];

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

@@ -0,0 +1,16 @@
+declare namespace _default {
+    const __depends__: (import("didi").ModuleDeclaration | {
+      bpmnAutoPlace: (string | typeof import("../auto-place/BpmnAutoPlace").default)[];
+    } | {
+      bpmnFactory: (string | typeof import("../modeling/BpmnFactory").default)[];
+      bpmnUpdater: (string | typeof import("../modeling/BpmnUpdater").default)[];
+      elementFactory: (string | typeof import("../modeling/ElementFactory").default)[];
+      modeling: (string | typeof import("../modeling/Modeling").default)[];
+      layouter: (string | typeof import("../modeling/BpmnLayouter").default)[];
+      connectionDocking: (string | typeof import("diagram-js/lib/layout/CroppingConnectionDocking").default)[];
+    })[];
+    const __init__: string[];
+    const appendPreview: (string | typeof AppendPreview)[];
+}
+export default _default;
+import AppendPreview from './AppendPreview';

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

@@ -0,0 +1,15 @@
+import AutoPlaceModule from '../auto-place';
+import ComplexPreviewModule from 'diagram-js/lib/features/complex-preview';
+import ModelingModule from '../modeling';
+
+import AppendPreview from './AppendPreview';
+
+export default {
+  __depends__: [
+    AutoPlaceModule,
+    ComplexPreviewModule,
+    ModelingModule
+  ],
+  __init__: [ 'appendPreview' ],
+  appendPreview: [ 'type', AppendPreview ]
+};

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

@@ -21,7 +21,20 @@ export default class ContextPadProvider implements BaseContextPadProvider {
    * @param rules
    * @param 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);
+  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
+  );
 
   /**
    * @param elements

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

@@ -71,7 +71,7 @@ export default function ContextPadProvider(
     config, injector, eventBus,
     contextPad, modeling, elementFactory,
     connect, create, popupMenu,
-    canvas, rules, translate) {
+    canvas, rules, translate, appendPreview) {
 
   config = config || {};
 
@@ -88,6 +88,8 @@ export default function ContextPadProvider(
   this._canvas = canvas;
   this._rules = rules;
   this._translate = translate;
+  this._eventBus = eventBus;
+  this._appendPreview = appendPreview;
 
   if (config.autoPlace !== false) {
     this._autoPlace = injector.get('autoPlace', false);
@@ -121,7 +123,8 @@ ContextPadProvider.$inject = [
   'popupMenu',
   'canvas',
   'rules',
-  'translate'
+  'translate',
+  'appendPreview'
 ];
 
 /**
@@ -180,14 +183,14 @@ ContextPadProvider.prototype._isDeleteAllowed = function(elements) {
 ContextPadProvider.prototype.getContextPadEntries = function(element) {
   var contextPad = this._contextPad,
       modeling = this._modeling,
-
       elementFactory = this._elementFactory,
       connect = this._connect,
       create = this._create,
       popupMenu = this._popupMenu,
       rules = this._rules,
       autoPlace = this._autoPlace,
-      translate = this._translate;
+      translate = this._translate,
+      appendPreview = this._appendPreview;
 
   var actions = {};
 
@@ -241,18 +244,33 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
     function appendStart(event, element) {
 
       var shape = elementFactory.createShape(assign({ type: type }, options));
+
       create.start(event, shape, {
         source: element
       });
-    }
 
+      appendPreview.cleanUp();
+    }
 
-    var append = autoPlace ? function(event, element) {
+    var append = autoPlace ? function(_, element) {
       var shape = elementFactory.createShape(assign({ type: type }, options));
 
       autoPlace.append(element, shape);
+
+      appendPreview.cleanUp();
     } : appendStart;
 
+    var previewAppend = autoPlace ? function(_, element) {
+
+      // mouseover
+      appendPreview.create(element, type, options);
+
+      return () => {
+
+        // mouseout
+        appendPreview.cleanUp();
+      };
+    } : null;
 
     return {
       group: 'model',
@@ -260,7 +278,8 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       title: title,
       action: {
         dragstart: appendStart,
-        click: append
+        click: append,
+        hover: previewAppend
       }
     };
   }

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

@@ -1,3 +1,4 @@
+import AppendPreviewModule from '../append-preview';
 import DirectEditingModule from 'diagram-js-direct-editing';
 import ContextPadModule from 'diagram-js/lib/features/context-pad';
 import SelectionModule from 'diagram-js/lib/features/selection';
@@ -9,6 +10,7 @@ import ContextPadProvider from './ContextPadProvider';
 
 export default {
   __depends__: [
+    AppendPreviewModule,
     DirectEditingModule,
     ContextPadModule,
     SelectionModule,

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

@@ -1,13 +1,13 @@
 declare namespace _default {
     const __init__: string[];
     const __depends__: (import("didi").ModuleDeclaration | {
-      bpmnReplace: (string | typeof import("../replace/BpmnReplace").default)[];
-    } | {
       bpmnRules: (string | typeof import("../rules/BpmnRules").default)[];
     } | {
       bpmnDiOrdering: (string | typeof import("../di-ordering/BpmnDiOrdering").default)[];
     } | {
       bpmnOrderingProvider: (string | typeof import("../ordering/BpmnOrderingProvider").default)[];
+    } | {
+      bpmnReplace: (string | typeof import("../replace/BpmnReplace").default)[];
     } | {
       spaceTool: (string | typeof import("../space-tool/BpmnSpaceTool").default)[];
     })[];

package/lib/features/outline/OutlineProvider.d.ts

@@ -0,0 +1,34 @@
+/**
+ * BPMN-specific outline provider.
+ *
+ * @implements {BaseOutlineProvider}
+ *
+ */
+export default class OutlineProvider implements BaseOutlineProvider {
+  static $inject: string[];
+
+  /**
+   * @param outline
+   * @param styles
+   */
+  constructor(outline: Outline, styles: Styles);
+
+  /**
+   * Returns outline for a given element.
+   *
+   * @param element
+   *
+   * @return
+   */
+  getOutline(element: Element): Outline;
+
+  /**
+   * Updates the outline for a given element.
+   * Returns true if the update for the given element was handled by this provider.
+   *
+   * @param element
+   * @param outline
+   * @returns
+   */
+  updateOutline(element: Element, outline: Outline): boolean;
+}

package/lib/features/outline/OutlineProvider.js

@@ -0,0 +1,163 @@
+import { assign } from 'min-dash';
+
+import {
+  attr as svgAttr,
+  create as svgCreate
+} from 'tiny-svg';
+
+import {
+  is,
+  isAny
+} from '../../util/ModelUtil';
+
+import { isLabel } from '../../util/LabelUtil';
+
+import {
+  DATA_OBJECT_REFERENCE_OUTLINE_PATH,
+  DATA_STORE_REFERENCE_OUTLINE_PATH,
+  DATA_OBJECT_REFERENCE_STANDARD_SIZE,
+  DATA_STORE_REFERENCE_STANDARD_SIZE,
+  createPath
+} from './OutlineUtil';
+
+const DEFAULT_OFFSET = 5;
+
+/**
+ * BPMN-specific outline provider.
+ *
+ * @implements {BaseOutlineProvider}
+ *
+ * @param {Outline} outline
+ * @param {Styles} styles
+ */
+export default function OutlineProvider(outline, styles) {
+
+  this._styles = styles;
+  outline.registerProvider(this);
+}
+
+OutlineProvider.$inject = [
+  'outline',
+  'styles'
+];
+
+/**
+ * Returns outline for a given element.
+ *
+ * @param {Element} element
+ *
+ * @return {Outline}
+ */
+OutlineProvider.prototype.getOutline = function(element) {
+
+  const OUTLINE_STYLE = this._styles.cls('djs-outline', [ 'no-fill' ]);
+
+  var outline;
+
+  if (isLabel(element)) {
+    return;
+  }
+
+  if (is(element, 'bpmn:Gateway')) {
+    outline = svgCreate('rect');
+
+    assign(outline.style, {
+      'transform-box': 'fill-box',
+      'transform': 'rotate(45deg)',
+      'transform-origin': 'center'
+    });
+
+    svgAttr(outline, assign({
+      x: 2,
+      y: 2,
+      rx: 4,
+      width: element.width - 4,
+      height: element.height - 4,
+    }, OUTLINE_STYLE));
+
+  } else if (isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Group' ])) {
+    outline = svgCreate('rect');
+
+    svgAttr(outline, assign({
+      x: -DEFAULT_OFFSET,
+      y: -DEFAULT_OFFSET,
+      rx: 14,
+      width: element.width + DEFAULT_OFFSET * 2,
+      height: element.height + DEFAULT_OFFSET * 2
+    }, OUTLINE_STYLE));
+
+  } else if (is(element, 'bpmn:Event')) {
+    outline = svgCreate('circle');
+
+    svgAttr(outline, assign({
+      cx: element.width / 2,
+      cy: element.height / 2,
+      r: element.width / 2 + DEFAULT_OFFSET
+    }, OUTLINE_STYLE));
+
+  } else if (is(element, 'bpmn:DataObjectReference') && isStandardSize(element, 'bpmn:DataObjectReference')) {
+
+    outline = createPath(
+      DATA_OBJECT_REFERENCE_OUTLINE_PATH,
+      { x: -6, y: -6 },
+      OUTLINE_STYLE
+    );
+
+  } else if (is(element, 'bpmn:DataStoreReference') && isStandardSize(element, 'bpmn:DataStoreReference')) {
+
+    outline = createPath(
+      DATA_STORE_REFERENCE_OUTLINE_PATH,
+      { x: -6, y: -6 },
+      OUTLINE_STYLE
+    );
+  }
+
+  return outline;
+};
+
+/**
+ * Updates the outline for a given element.
+ * Returns true if the update for the given element was handled by this provider.
+ *
+ * @param {Element} element
+ * @param {Outline} outline
+ * @returns {boolean}
+ */
+OutlineProvider.prototype.updateOutline = function(element, outline) {
+
+  if (isAny(element, [ 'bpmn:SubProcess', 'bpmn:Group' ])) {
+
+    svgAttr(outline, {
+      width: element.width + DEFAULT_OFFSET * 2,
+      height: element.height + DEFAULT_OFFSET * 2
+    });
+
+    return true;
+
+  } else if (isAny(element, [
+    'bpmn:Event',
+    'bpmn:Gateway',
+    'bpmn:DataStoreReference',
+    'bpmn:DataObjectReference'
+  ])) {
+    return true;
+  }
+
+  return false;
+};
+
+
+// helpers //////////
+
+function isStandardSize(element, type) {
+  var standardSize;
+
+  if (type === 'bpmn:DataObjectReference') {
+    standardSize = DATA_OBJECT_REFERENCE_STANDARD_SIZE;
+  } else if (type === 'bpmn:DataStoreReference') {
+    standardSize = DATA_STORE_REFERENCE_STANDARD_SIZE;
+  }
+
+  return element.width === standardSize.width
+          && element.height === standardSize.height;
+}

package/lib/features/outline/OutlineUtil.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Create a path element with given attributes.
+ * @param path
+ * @param attrs
+ * @param OUTLINE_STYLE
+ * @return
+ */
+export function createPath(path: string, attrs: any, OUTLINE_STYLE: any): SVGElement;
+export const DATA_OBJECT_REFERENCE_OUTLINE_PATH: "M44.7648 11.3263L36.9892 2.64074C36.0451 1.58628 34.5651 0.988708 33.1904 0.988708H5.98667C3.22688 0.988708 0.989624 3.34892 0.989624 6.26039V55.0235C0.989624 57.9349 3.22688 60.2952 5.98667 60.2952H40.966C43.7257 60.2952 45.963 57.9349 45.963 55.0235V14.9459C45.963 13.5998 45.6407 12.3048 44.7648 11.3263Z";
+export const DATA_STORE_REFERENCE_OUTLINE_PATH: "M1.03845 48.1347C1.03845 49.3511 1.07295 50.758 1.38342 52.064C1.69949 53.3938 2.32428 54.7154 3.56383 55.6428C6.02533 57.4841 10.1161 58.7685 14.8212 59.6067C19.5772 60.4538 25.1388 60.8738 30.6831 60.8738C36.2276 60.8738 41.7891 60.4538 46.545 59.6067C51.2504 58.7687 55.3412 57.4842 57.8028 55.6429C59.0424 54.7156 59.6673 53.3938 59.9834 52.064C60.2938 50.7579 60.3285 49.351 60.3285 48.1344V13.8415C60.3285 12.6249 60.2938 11.218 59.9834 9.91171C59.6673 8.58194 59.0423 7.2602 57.8027 6.33294C55.341 4.49168 51.2503 3.20723 46.545 2.36914C41.7891 1.522 36.2276 1.10204 30.6831 1.10205C25.1388 1.10206 19.5772 1.52206 14.8213 2.36923C10.1162 3.20734 6.02543 4.49183 3.5639 6.33314C2.32433 7.26038 1.69951 8.58206 1.38343 9.91181C1.07295 11.2179 1.03845 12.6247 1.03845 13.8411V48.1347Z";
+/**
+ * @type {Dimensions}
+ */
+export const DATA_OBJECT_REFERENCE_STANDARD_SIZE: Dimensions;
+/**
+ * @type {Dimensions}
+ */
+export const DATA_STORE_REFERENCE_STANDARD_SIZE: Dimensions;

package/lib/features/outline/OutlineUtil.js

@@ -0,0 +1,32 @@
+import {
+  create as svgCreate
+} from 'tiny-svg';
+
+export const DATA_OBJECT_REFERENCE_OUTLINE_PATH = 'M44.7648 11.3263L36.9892 2.64074C36.0451 1.58628 34.5651 0.988708 33.1904 0.988708H5.98667C3.22688 0.988708 0.989624 3.34892 0.989624 6.26039V55.0235C0.989624 57.9349 3.22688 60.2952 5.98667 60.2952H40.966C43.7257 60.2952 45.963 57.9349 45.963 55.0235V14.9459C45.963 13.5998 45.6407 12.3048 44.7648 11.3263Z';
+export const DATA_STORE_REFERENCE_OUTLINE_PATH = 'M1.03845 48.1347C1.03845 49.3511 1.07295 50.758 1.38342 52.064C1.69949 53.3938 2.32428 54.7154 3.56383 55.6428C6.02533 57.4841 10.1161 58.7685 14.8212 59.6067C19.5772 60.4538 25.1388 60.8738 30.6831 60.8738C36.2276 60.8738 41.7891 60.4538 46.545 59.6067C51.2504 58.7687 55.3412 57.4842 57.8028 55.6429C59.0424 54.7156 59.6673 53.3938 59.9834 52.064C60.2938 50.7579 60.3285 49.351 60.3285 48.1344V13.8415C60.3285 12.6249 60.2938 11.218 59.9834 9.91171C59.6673 8.58194 59.0423 7.2602 57.8027 6.33294C55.341 4.49168 51.2503 3.20723 46.545 2.36914C41.7891 1.522 36.2276 1.10204 30.6831 1.10205C25.1388 1.10206 19.5772 1.52206 14.8213 2.36923C10.1162 3.20734 6.02543 4.49183 3.5639 6.33314C2.32433 7.26038 1.69951 8.58206 1.38343 9.91181C1.07295 11.2179 1.03845 12.6247 1.03845 13.8411V48.1347Z';
+
+/**
+ * @type {Dimensions}
+ */
+export const DATA_OBJECT_REFERENCE_STANDARD_SIZE = { width: 36, height: 50 };
+
+/**
+ * @type {Dimensions}
+ */
+export const DATA_STORE_REFERENCE_STANDARD_SIZE = { width: 50, height: 50 };
+
+/**
+ * Create a path element with given attributes.
+ * @param {string} path
+ * @param {Object} attrs
+ * @param {Object} OUTLINE_STYLE
+ * @return {SVGElement}
+ */
+export function createPath(path, attrs, OUTLINE_STYLE) {
+  return svgCreate('path', {
+    d: path,
+    strokeWidth: 2,
+    transform: `translate(${attrs.x}, ${attrs.y})`,
+    ...OUTLINE_STYLE
+  });
+}

package/lib/features/outline/index.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const __depends__: import("didi").ModuleDeclaration[];
+    const __init__: string[];
+    const outlineProvider: (string | typeof OulineProvider)[];
+}
+export default _default;
+import OulineProvider from './OutlineProvider';

package/lib/features/outline/index.js

@@ -0,0 +1,10 @@
+import Ouline from 'diagram-js/lib/features/outline';
+import OulineProvider from './OutlineProvider';
+
+export default {
+  __depends__: [
+    Ouline
+  ],
+  __init__: [ 'outlineProvider' ],
+  outlineProvider: [ 'type', OulineProvider ]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "14.2.0",
+  "version": "15.0.0",
   "description": "A bpmn 2.0 toolkit and web modeler",
   "main": "index.js",
   "files": [
@@ -103,7 +103,7 @@
     "remark-preset-bpmn-io": "^0.2.1",
     "rollup": "^3.19.1",
     "rollup-plugin-license": "^3.0.0",
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.0",
     "sinon-chai": "^3.7.0",
     "ts-expect": "^1.3.0",
     "typescript": "^5.0.0",
@@ -111,7 +111,7 @@
   },
   "dependencies": {
     "bpmn-moddle": "^8.0.1",
-    "diagram-js": "^12.5.0",
+    "diagram-js": "^12.6.0",
     "diagram-js-direct-editing": "^2.0.0",
     "ids": "^1.0.5",
     "inherits-browser": "^0.1.0",