bpmn-js 18.7.0 → 18.9.0

package/lib/Modeler.js

@@ -26,6 +26,7 @@ import InteractionEventsModule from './features/interaction-events';
 import KeyboardModule from './features/keyboard';
 import KeyboardMoveSelectionModule from 'diagram-js/lib/features/keyboard-move-selection';
 import LabelEditingModule from './features/label-editing';
+import LabelLink from './features/label-link';
 import ModelingModule from './features/modeling';
 import ModelingFeedbackModule from './features/modeling-feedback';
 import MoveModule from 'diagram-js/lib/features/move';
@@ -181,6 +182,7 @@ Modeler.prototype._modelingModules = [
   KeyboardModule,
   KeyboardMoveSelectionModule,
   LabelEditingModule,
+  LabelLink,
   ModelingModule,
   ModelingFeedbackModule,
   MoveModule,

package/lib/draw/BpmnRenderer.js

@@ -15,7 +15,8 @@ import {
 } from '../util/DiUtil';
 
 import {
-  getLabel
+  getLabel,
+  isLabel
 } from '../util/LabelUtil';
 
 import {
@@ -70,7 +71,8 @@ var markerIds = new Ids();
 var ELEMENT_LABEL_DISTANCE = 10,
     INNER_OUTER_DIST = 3,
     PARTICIPANT_STROKE_WIDTH = 1.5,
-    TASK_BORDER_RADIUS = 10;
+    TASK_BORDER_RADIUS = 10,
+    EXTERNAL_LABEL_BORDER_RADIUS = 4;
 
 var DEFAULT_OPACITY = 0.95,
     FULL_OPACITY = 1,
@@ -2379,6 +2381,11 @@ BpmnRenderer.prototype.drawConnection = function(parentGfx, connection, attrs =
  * @return {string} path
  */
 BpmnRenderer.prototype.getShapePath = function(shape) {
+
+  if (isLabel(shape)) {
+    return getRoundRectPath(shape, EXTERNAL_LABEL_BORDER_RADIUS);
+  }
+
   if (is(shape, 'bpmn:Event')) {
     return getCirclePath(shape);
   }

package/lib/features/copy-paste/ModdleCopy.js

@@ -28,7 +28,8 @@ const ALLOWED_REFERENCES = [
   'errorRef',
   'escalationRef',
   'messageRef',
-  'signalRef'
+  'signalRef',
+  'dataObjectRef'
 ];
 
 /**

package/lib/features/label-link/LabelLink.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Render a line between an external label and its target element,
+ * when either is selected.
+ *
+ */
+export default class LabelLink {
+    static $inject: string[];
+    /**
+     * @param eventBus
+     * @param canvas
+     * @param graphicsFactory
+     * @param outline
+     */
+    constructor(
+      eventBus: EventBus,
+      canvas: Canvas,
+      graphicsFactory: GraphicsFactory,
+      outline: Outline
+    );
+}
+
+type EventBus = import("diagram-js/lib/core/EventBus").default;
+type Canvas = import("diagram-js/lib/core/Canvas").default;
+type GraphicsFactory = import("diagram-js/lib/core/GraphicsFactory").default;
+type Outline = import("../outline/OutlineProvider").default;
+export type Selection = any;
+type Element = import("diagram-js/lib/model/Types").Element;

package/lib/features/label-link/LabelLink.js

@@ -0,0 +1,202 @@
+import { queryAll as domQueryAll } from 'min-dom';
+
+import {
+  append as svgAppend,
+  attr as svgAttr,
+  remove as svgRemove,
+} from 'tiny-svg';
+
+import { createLine, updateLine } from 'diagram-js/lib/util/RenderUtil';
+import { getMid, getElementLineIntersection } from 'diagram-js/lib/layout/LayoutUtil';
+import { getDistancePointPoint } from 'diagram-js/lib/features/bendpoints/GeometricUtil';
+import { isLabel } from 'diagram-js/lib/util/ModelUtil';
+
+import { isAny } from '../modeling/util/ModelingUtil';
+import { getRoundRectPath, getCirclePath } from '../../draw/BpmnRenderUtil';
+
+/**
+ * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+ * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
+ * @typedef {import('diagram-js/lib/core/GraphicsFactory').default} GraphicsFactory
+ * @typedef {import('../outline/OutlineProvider').default} Outline
+ * @typedef {import('diagram-js/lib/features/selection').default} Selection
+ *
+ * @typedef {import('diagram-js/lib/model/Types').Element} Element
+ */
+
+const ALLOWED_ELEMENTS = [ 'bpmn:Event', 'bpmn:SequenceFlow', 'bpmn:Gateway' ];
+
+const LINE_STYLE = {
+  class: 'bjs-label-link',
+  stroke: 'var(--element-selected-outline-secondary-stroke-color)',
+  strokeDasharray: '5, 5',
+};
+
+const DISTANCE_THRESHOLD = 15;
+const PATH_OFFSET = 2;
+
+/**
+ * Render a line between an external label and its target element,
+ * when either is selected.
+ *
+ * @param {EventBus} eventBus
+ * @param {Canvas} canvas
+ * @param {GraphicsFactory} graphicsFactory
+ * @param {Outline} outline
+ */
+export default function LabelLink(eventBus, canvas, graphicsFactory, outline, selection) {
+
+  const layer = canvas.getLayer('overlays');
+
+  eventBus.on([ 'selection.changed', 'shape.changed' ], function() {
+    cleanUp();
+  });
+
+  eventBus.on('selection.changed', function({ newSelection }) {
+
+    const allowedElements = newSelection.filter(element => isAny(element, ALLOWED_ELEMENTS));
+
+    if (allowedElements.length === 1) {
+      const element = allowedElements[0];
+      if (isLabel(element)) {
+        createLink(element, element.labelTarget, newSelection);
+      } else if (element.labels?.length) {
+        createLink(element.labels[0], element, newSelection);
+      }
+    }
+
+    // Only allowed when both label and its target are selected
+    if (allowedElements.length === 2) {
+      const label = allowedElements.find(isLabel);
+      const target = allowedElements.find(el => el.labels?.includes(label));
+      if (label && target) {
+        createLink(label, target, newSelection);
+      }
+    }
+  });
+
+  eventBus.on('shape.changed', function({ element }) {
+
+    if (!isAny(element, ALLOWED_ELEMENTS)) {
+      return;
+    }
+
+    if (isLabel(element)) {
+      createLink(element, element.labelTarget, selection.get());
+    } else if (element.labels?.length) {
+      createLink(element.labels[0], element, selection.get());
+    }
+  });
+
+  /**
+   * Render a line between an external label and its target.
+   *
+   * @param {Element} label
+   * @param {Element} target
+   * @param {Element[]} selection
+   */
+  function createLink(label, target, selection = []) {
+
+    // Create an auxiliary line between label and target mid points
+    const line = createLine(
+      [ getMid(target), getMid(label) ],
+      LINE_STYLE
+    );
+    const linePath = line.getAttribute('d');
+
+    // Calculate the intersection point between line and label
+    const labelSelected = selection.includes(label);
+    const labelPath = labelSelected ? getElementOutlinePath(label) : getElementPath(label);
+    const labelInter = getElementLineIntersection(labelPath, linePath);
+
+    // Label on top of the target
+    if (!labelInter) {
+      return;
+    }
+
+    // Calculate the intersection point between line and label
+    // If the target is a sequence flow, there is no intersection,
+    // so we link to the middle of it.
+    const targetSelected = selection.includes(target);
+    const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);
+    const targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);
+
+    // Do not draw a link if the points are too close
+    const distance = getDistancePointPoint(targetInter, labelInter);
+    if (distance < DISTANCE_THRESHOLD) {
+      return;
+    }
+
+    // Connect the actual closest points
+    updateLine(line, [ targetInter, labelInter ]);
+    svgAppend(layer, line);
+  }
+
+  /**
+   * Remove all existing label links.
+   */
+  function cleanUp() {
+    domQueryAll(`.${LINE_STYLE.class}`, layer).forEach(svgRemove);
+  }
+
+  /**
+   * Get element's slightly expanded outline path.
+   *
+   * @param {Element} element
+   * @returns {string} svg path
+   */
+  function getElementOutlinePath(element) {
+    const outlineShape = outline.getOutline(element);
+    const outlineOffset = outline.offset;
+
+    if (!outlineShape) {
+      return getElementPath(element);
+    }
+
+    if (outlineShape.x) {
+      const shape = {
+        x: element.x + parseSvgNumAttr(outlineShape, 'x') - PATH_OFFSET,
+        y: element.y + parseSvgNumAttr(outlineShape, 'y') - PATH_OFFSET,
+        width: parseSvgNumAttr(outlineShape, 'width') + PATH_OFFSET * 2,
+        height: parseSvgNumAttr(outlineShape, 'height') + PATH_OFFSET * 2
+      };
+
+      return getRoundRectPath(shape, parseSvgNumAttr(outlineShape, 'rx'));
+    }
+
+    if (outlineShape.cx) {
+      const shape = {
+        x: element.x - outlineOffset,
+        y: element.y - outlineOffset,
+        width: parseSvgNumAttr(outlineShape, 'r') * 2,
+        height: parseSvgNumAttr(outlineShape, 'r') * 2,
+      };
+
+      return getCirclePath(shape);
+    }
+  }
+
+  function getElementPath(element) {
+    return graphicsFactory.getShapePath(element);
+  }
+}
+
+LabelLink.$inject = [
+  'eventBus',
+  'canvas',
+  'graphicsFactory',
+  'outline',
+  'selection'
+];
+
+/**
+ * Get numeric attribute from SVG element
+ * or 0 if not present.
+ *
+ * @param {SVGElement} node
+ * @param {string} attr
+ * @returns {number}
+ */
+function parseSvgNumAttr(node, attr) {
+  return parseFloat(svgAttr(node, attr) || 0);
+}

package/lib/features/label-link/index.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    let __depends__: ({
+        selection: (string | typeof import("diagram-js/lib/features/selection/Selection").default)[];
+        selectionVisuals: (string | typeof import("diagram-js/lib/features/selection/SelectionVisuals").default)[];
+        selectionBehavior: (string | typeof import("diagram-js/lib/features/selection/SelectionBehavior").default)[];
+    } | {
+        outline: (string | typeof import("diagram-js/lib/features/outline/Outline").default)[];
+        multiSelectionOutline: (string | typeof import("diagram-js/lib/features/outline/MultiSelectionOutline").default)[];
+    })[];
+    let __init__: string[];
+    let labelLink: (string | typeof LabelLink)[];
+}
+export default _default;
+import LabelLink from './LabelLink';

package/lib/features/label-link/index.js

@@ -0,0 +1,15 @@
+import SelectionModule from 'diagram-js/lib/features/selection';
+import OutlineModule from 'diagram-js/lib/features/outline';
+
+import LabelLink from './LabelLink';
+
+export default {
+  __depends__: [
+    SelectionModule,
+    OutlineModule
+  ],
+  __init__: [
+    'labelLink'
+  ],
+  labelLink: [ 'type', LabelLink ]
+};

package/lib/features/modeling/behavior/CreateDataObjectBehavior.js

@@ -29,6 +29,9 @@ export default function CreateDataObjectBehavior(eventBus, bpmnFactory) {
       // create a DataObject every time a DataObjectReference is created
       var dataObject = bpmnFactory.create('bpmn:DataObject');
 
+      // Copy the isCollection property if needed.
+      dataObject.isCollection = shape.businessObject.dataObjectRef?.isCollection || false;
+
       // set the reference to the DataObject
       shape.businessObject.dataObjectRef = dataObject;
     }

package/lib/features/outline/OutlineProvider.js

@@ -10,7 +10,7 @@ import {
   isAny
 } from '../../util/ModelUtil';
 
-import { isLabel } from '../../util/LabelUtil';
+import { isLabel, isExternalLabel } from '../../util/LabelUtil';
 
 import {
   DATA_OBJECT_REFERENCE_OUTLINE_PATH,
@@ -64,6 +64,20 @@ OutlineProvider.prototype.getOutline = function(element) {
 
   var outline;
 
+  if (isExternalLabel(element)) {
+    outline = svgCreate('rect');
+
+    svgAttr(outline, assign({
+      x: -DEFAULT_OFFSET,
+      y: -DEFAULT_OFFSET,
+      rx: 4,
+      width: element.width + DEFAULT_OFFSET * 2,
+      height: element.height + DEFAULT_OFFSET * 2
+    }, OUTLINE_STYLE));
+
+    return outline;
+  }
+
   if (isLabel(element)) {
     return;
   }

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

@@ -4,7 +4,7 @@ declare namespace _default {
         multiSelectionOutline: (string | typeof import("diagram-js/lib/features/outline/MultiSelectionOutline").default)[];
     }[];
     let __init__: string[];
-    let outlineProvider: (string | typeof OulineProvider)[];
+    let outlineProvider: (string | typeof OutlineProvider)[];
 }
 export default _default;
-import OulineProvider from './OutlineProvider';
+import OutlineProvider from './OutlineProvider';

package/lib/features/outline/index.js

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

package/lib/util/LabelUtil.d.ts

@@ -69,6 +69,15 @@ export function getLabel(element: Element): string;
  */
 export function setLabel(element: Element, text: string): Element;
 
+/**
+ * Returns true if the given element is an external label.
+ *
+ * @param element
+ *
+ * @return
+ */
+export function isExternalLabel(element: Element): boolean;
+
 export { isLabel } from "diagram-js/lib/util/ModelUtil";
 
 export namespace DEFAULT_LABEL_SIZE {

package/lib/util/LabelUtil.js

@@ -264,3 +264,14 @@ export function setLabel(element, text) {
 
   return element;
 }
+
+/**
+ * Returns true if the given element is an external label.
+ *
+ * @param {Element} element
+ *
+ * @return {boolean}
+ */
+export function isExternalLabel(element) {
+  return isLabel(element) && isLabelExternal(element.labelTarget);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "18.7.0",
+  "version": "18.9.0",
   "description": "A bpmn 2.0 toolkit and web modeler",
   "main": "lib/index.js",
   "files": [
@@ -65,7 +65,7 @@
   "devDependencies": {
     "@babel/core": "^7.25.8",
     "@bpmn-io/a11y": "^0.1.0",
-    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",

package/test/util/svgHelpers.js

@@ -0,0 +1,52 @@
+/**
+ * Assert if two SVG paths are approximately equal within a given tolerance.
+ *
+ * @param {string} actual
+ * @param {string} expected
+ * @param {number} [tolerance=2]
+ */
+export function expectSvgPath(actual, expected, tolerance = 2) {
+  const result = compareSvgPaths(actual, expected, tolerance);
+  expect(result).to.be.true;
+}
+
+/**
+ * Returns true if two SVG paths are approximately equal within a given tolerance.
+ *
+ * @param {string} pathA
+ * @param {string} pathB
+ * @param {number} [tolerance=2]
+ * @returns {boolean}
+ */
+export function compareSvgPaths(pathA, pathB, tolerance = 2) {
+  const actualNumbers = pathToNumbers(pathA);
+  const expectedNumbers = pathToNumbers(pathB);
+
+  if (actualNumbers.length !== expectedNumbers.length) {
+    return false;
+  }
+
+  for (let i = 0; i < actualNumbers.length; i++) {
+    if (Math.abs(actualNumbers[i] - expectedNumbers[i]) > tolerance) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Get an array of numeric values from an SVG path string.
+ *
+ * @example
+ * `pathToNumber('M10,20L30,40')` => `[10, 20, 30, 40]`
+ *
+ * @param {string} path
+ * @returns {number[]}
+ */
+export function pathToNumbers(path) {
+  const normalized = path.toLowerCase();
+  const parts = normalized.split(/[a-z,]/g).filter(s => s !== '');
+
+  return parts.map(parseFloat);
+}