bpmn-js 18.26.0 → 18.27.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.26.0
+ * bpmn-js - bpmn-modeler v18.27.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-08-28
+ * Date: 2026-08-31
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -40442,6 +40442,162 @@
 	  return oldTRBL.top !== newTRBL.top && oldTRBL.bottom !== newTRBL.bottom;
 	}
 
+	/**
+	 * @typedef {import('diagram-js/lib/util/Types').Point} Point
+	 * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
+	 *
+	 * @typedef {Point[]} Line
+	 */
+
+	/**
+	 * Generates the nearest point (reference point) for a given point
+	 * onto a given set of lines.
+	 *
+	 * The reference point is clamped to the actual line segments, i.e. it
+	 * always lies on one of the given lines (docking to a segment end /
+	 * bendpoint if necessary) instead of on the infinite line extending a
+	 * segment.
+	 *
+	 * @param {Point} point
+	 * @param {Line[]} lines
+	 *
+	 * @return {Point|undefined}
+	 */
+	function getReferencePoint$1(point, lines) {
+
+	  if (!lines.length) {
+	    return;
+	  }
+
+	  var nearestLine = getNearestLine(point, lines);
+
+	  return getClosestPointOnLine(point, nearestLine);
+	}
+
+	/**
+	 * Convert the given bounds to a lines array containing all edges.
+	 *
+	 * @param {Rect|Point} bounds
+	 *
+	 * @return {Line[]}
+	 */
+	function asEdges(bounds) {
+	  return [
+	    [ // top
+	      {
+	        x: bounds.x,
+	        y: bounds.y
+	      },
+	      {
+	        x: bounds.x + (bounds.width || 0),
+	        y: bounds.y
+	      }
+	    ],
+	    [ // right
+	      {
+	        x: bounds.x + (bounds.width || 0),
+	        y: bounds.y
+	      },
+	      {
+	        x: bounds.x + (bounds.width || 0),
+	        y: bounds.y + (bounds.height || 0)
+	      }
+	    ],
+	    [ // bottom
+	      {
+	        x: bounds.x,
+	        y: bounds.y + (bounds.height || 0)
+	      },
+	      {
+	        x: bounds.x + (bounds.width || 0),
+	        y: bounds.y + (bounds.height || 0)
+	      }
+	    ],
+	    [ // left
+	      {
+	        x: bounds.x,
+	        y: bounds.y
+	      },
+	      {
+	        x: bounds.x,
+	        y: bounds.y + (bounds.height || 0)
+	      }
+	    ]
+	  ];
+	}
+
+	/**
+	 * Convert the given waypoints to a lines array containing all segments.
+	 *
+	 * @param {Point[]} waypoints
+	 *
+	 * @return {Line[]}
+	 */
+	function asLines(waypoints) {
+	  var lines = [];
+
+	  for (var i = 0; i < waypoints.length - 1; i++) {
+	    lines.push([ waypoints[i], waypoints[i + 1] ]);
+	  }
+
+	  return lines;
+	}
+
+	/**
+	 * Returns the nearest line for a given point by the distance to the
+	 * closest point on each (clamped) line segment.
+	 *
+	 * @param {Point} point
+	 * @param {Line[]} lines
+	 *
+	 * @return {Line}
+	 */
+	function getNearestLine(point, lines) {
+
+	  var distances = lines.map(function(line) {
+	    return {
+	      line: line,
+	      distance: getDistancePointPoint(point, getClosestPointOnLine(point, line))
+	    };
+	  });
+
+	  var sorted = sortBy(distances, 'distance');
+
+	  return sorted[0].line;
+	}
+
+	/**
+	 * Returns the point on a line segment that is closest to the given point,
+	 * clamped to the segment's start and end.
+	 *
+	 * @param {Point} point
+	 * @param {Line} line
+	 *
+	 * @return {Point}
+	 */
+	function getClosestPointOnLine(point, line) {
+	  var start = line[0],
+	      end = line[1];
+
+	  var dx = end.x - start.x,
+	      dy = end.y - start.y;
+
+	  var lengthSquared = dx * dx + dy * dy;
+
+	  if (lengthSquared === 0) {
+	    return { x: start.x, y: start.y };
+	  }
+
+	  var t = ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSquared;
+
+	  t = Math.max(0, Math.min(1, t));
+
+	  return {
+	    x: start.x + t * dx,
+	    y: start.y + t * dy
+	  };
+	}
+
 	var NAME_PROPERTY = 'name';
 	var TEXT_PROPERTY = 'text';
 
@@ -40696,99 +40852,6 @@
 	  return roundPoint(delta(newReferencePoint, referencePoint));
 	}
 
-	/**
-	 * Generates the nearest point (reference point) for a given point
-	 * onto given set of lines
-	 *
-	 * @param {Point} point
-	 * @param {Line[]} lines
-	 *
-	 * @return {Point}
-	 */
-	function getReferencePoint$1(point, lines) {
-
-	  if (!lines.length) {
-	    return;
-	  }
-
-	  var nearestLine = getNearestLine(point, lines);
-
-	  return perpendicularFoot(point, nearestLine);
-	}
-
-	/**
-	 * Convert the given bounds to a lines array containing all edges
-	 *
-	 * @param {Rect|Point} bounds
-	 *
-	 * @return {Line[]}
-	 */
-	function asEdges(bounds) {
-	  return [
-	    [ // top
-	      {
-	        x: bounds.x,
-	        y: bounds.y
-	      },
-	      {
-	        x: bounds.x + (bounds.width || 0),
-	        y: bounds.y
-	      }
-	    ],
-	    [ // right
-	      {
-	        x: bounds.x + (bounds.width || 0),
-	        y: bounds.y
-	      },
-	      {
-	        x: bounds.x + (bounds.width || 0),
-	        y: bounds.y + (bounds.height || 0)
-	      }
-	    ],
-	    [ // bottom
-	      {
-	        x: bounds.x,
-	        y: bounds.y + (bounds.height || 0)
-	      },
-	      {
-	        x: bounds.x + (bounds.width || 0),
-	        y: bounds.y + (bounds.height || 0)
-	      }
-	    ],
-	    [ // left
-	      {
-	        x: bounds.x,
-	        y: bounds.y
-	      },
-	      {
-	        x: bounds.x,
-	        y: bounds.y + (bounds.height || 0)
-	      }
-	    ]
-	  ];
-	}
-
-	/**
-	 * Returns the nearest line for a given point by distance
-	 * @param {Point} point
-	 * @param {Line[]} lines
-	 *
-	 * @return {Line}
-	 */
-	function getNearestLine(point, lines) {
-
-	  var distances = lines.map(function(l) {
-	    return {
-	      line: l,
-	      distance: getDistancePointLine(point, l)
-	    };
-	  });
-
-	  var sorted = sortBy(distances, 'distance');
-
-	  return sorted[0].line;
-	}
-
 	/**
 	 * @typedef {import('diagram-js/lib/util/Types').Point} Point
 	 *
@@ -62812,6 +62875,24 @@
 	];
 
 
+	/**
+	 * The keyboard binding for each editor action: the `key` that triggers it,
+	 * optionally requiring the `cmd` modifier (CTRL/CMD).
+	 *
+	 * @type {Record<string, { key: string, modifier?: 'cmd' }>}
+	 */
+	var SHORTCUTS_KEY_BINDINGS = {
+	  selectElements: { key: 'A', modifier: 'cmd' },
+	  find: { key: 'F', modifier: 'cmd' },
+	  spaceTool: { key: 'S' },
+	  lassoTool: { key: 'L' },
+	  handTool: { key: 'H' },
+	  globalConnectTool: { key: 'C' },
+	  directEditing: { key: 'E' },
+	  replaceElement: { key: 'R' }
+	};
+
+
 	/**
 	 * Register available keyboard bindings.
 	 *
@@ -62823,146 +62904,35 @@
 	  // inherit default bindings
 	  KeyboardBindings.prototype.registerBindings.call(this, keyboard, editorActions);
 
-	  /**
-	   * Add keyboard binding if respective editor action
-	   * is registered.
-	   *
-	   * @param {string} action name
-	   * @param {Function} fn that implements the key binding
-	   */
-	  function addListener(action, fn) {
-
-	    if (editorActions.isRegistered(action)) {
-	      keyboard.addListener(fn);
-	    }
-	  }
-
-	  // select all elements
-	  // CTRL + A
-	  addListener('selectElements', function(context) {
-
-	    var event = context.keyEvent;
-
-	    if (keyboard.isKey([ 'a', 'A' ], event) && keyboard.isCmd(event)) {
-	      editorActions.trigger('selectElements');
-
-	      return true;
-	    }
-	  });
-
-	  // search labels
-	  // CTRL + F
-	  addListener('find', function(context) {
-
-	    var event = context.keyEvent;
-
-	    if (keyboard.isKey([ 'f', 'F' ], event) && keyboard.isCmd(event)) {
-	      editorActions.trigger('find');
-
-	      return true;
-	    }
-	  });
-
-	  // activate space tool
-	  // S
-	  addListener('spaceTool', function(context) {
-
-	    var event = context.keyEvent;
-
-	    if (keyboard.hasModifier(event)) {
-	      return;
-	    }
-
-	    if (keyboard.isKey([ 's', 'S' ], event)) {
-	      editorActions.trigger('spaceTool');
-
-	      return true;
-	    }
-	  });
-
-	  // activate lasso tool
-	  // L
-	  addListener('lassoTool', function(context) {
-
-	    var event = context.keyEvent;
-
-	    if (keyboard.hasModifier(event)) {
-	      return;
-	    }
-
-	    if (keyboard.isKey([ 'l', 'L' ], event)) {
-	      editorActions.trigger('lassoTool');
-
-	      return true;
-	    }
-	  });
-
-	  // activate hand tool
-	  // H
-	  addListener('handTool', function(context) {
-
-	    var event = context.keyEvent;
-
-	    if (keyboard.hasModifier(event)) {
-	      return;
-	    }
-
-	    if (keyboard.isKey([ 'h', 'H' ], event)) {
-	      editorActions.trigger('handTool');
-
-	      return true;
-	    }
-	  });
-
-	  // activate global connect tool
-	  // C
-	  addListener('globalConnectTool', function(context) {
+	  forEach(SHORTCUTS_KEY_BINDINGS, function(binding, action) {
 
-	    var event = context.keyEvent;
-
-	    if (keyboard.hasModifier(event)) {
+	    if (!editorActions.isRegistered(action)) {
 	      return;
 	    }
 
-	    if (keyboard.isKey([ 'c', 'C' ], event)) {
-	      editorActions.trigger('globalConnectTool');
+	    var keys = [ binding.key.toLowerCase(), binding.key.toUpperCase() ],
+	        requiresCmd = binding.modifier === 'cmd';
 
-	      return true;
-	    }
-	  });
-
-	  // activate direct editing
-	  // E
-	  addListener('directEditing', function(context) {
+	    keyboard.addListener(function(context) {
 
-	    var event = context.keyEvent;
+	      var event = context.keyEvent;
 
-	    if (keyboard.hasModifier(event)) {
-	      return;
-	    }
-
-	    if (keyboard.isKey([ 'e', 'E' ], event)) {
-	      editorActions.trigger('directEditing');
-
-	      return true;
-	    }
-	  });
-
-	  // activate replace element
-	  // R
-	  addListener('replaceElement', function(context) {
-
-	    var event = context.keyEvent;
+	      if (!keyboard.isKey(keys, event)) {
+	        return;
+	      }
 
-	    if (keyboard.hasModifier(event)) {
-	      return;
-	    }
+	      if (requiresCmd) {
+	        if (!keyboard.isCmd(event)) {
+	          return;
+	        }
+	      } else if (keyboard.hasModifier(event)) {
+	        return;
+	      }
 
-	    if (keyboard.isKey([ 'r', 'R' ], event)) {
-	      editorActions.trigger('replaceElement', event);
+	      editorActions.trigger(action, event);
 
 	      return true;
-	    }
+	    });
 	  });
 
 	};
@@ -64782,9 +64752,17 @@
 	   */
 	  function createLink(label, target) {
 
-	    // Create an auxiliary line between label and target mid points
+	    const labelMid = getMid(label);
+
+	    // For connections, aim at the closest point on the visible connection
+	    // instead of the geometric mid point of the whole connection.
+	    const targetReference = isConnection(target)
+	      ? getReferencePoint$1(labelMid, asLines(target.waypoints))
+	      : getMid(target);
+
+	    // Create an auxiliary line between label and target reference points
 	    const line = createLine(
-	      [ getMid(target), getMid(label) ],
+	      [ targetReference, labelMid ],
 	      LINE_STYLE
 	    );
 	    const linePath = line.getAttribute('d');
@@ -64799,12 +64777,18 @@
 	      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.isSelected(target);
-	    const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);
-	    const targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);
+	    // Calculate the intersection point between line and target.
+	    // For connections there is no shape to intersect, so we link to the
+	    // closest point on the connection computed above.
+	    let targetInter;
+
+	    if (isConnection(target)) {
+	      targetInter = targetReference;
+	    } else {
+	      const targetSelected = selection.isSelected(target);
+	      const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);
+	      targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);
+	    }
 
 	    // Do not draw a link if the points are too close
 	    const distance = getDistancePointPoint(targetInter, labelInter);
@@ -65873,6 +65857,147 @@
 	  movePreview: [ 'type', MovePreview ]
 	};
 
+	/**
+	 * @typedef {import('../../core/Canvas').default} Canvas
+	 */
+
+	const SHOW_DELAY = 300;
+
+	/**
+	 * @typedef { import('@bpmn-io/diagram-js-ui').VNode } VNode
+	 *
+	 * @typedef { {
+	 *   x: number;
+	 *   y: number;
+	 *   placement?: string;
+	 * } } HoverTooltipPosition
+	 *
+	 * @typedef { {
+	 *   container: HTMLElement;
+	 *   selector: string;
+	 *   getContent: (target: HTMLElement) => VNode | null;
+	 *   getPosition: (target: HTMLElement) => HoverTooltipPosition;
+	 *   showDelay?: number;
+	 * } } HoverTooltipConfig
+	 */
+
+	/**
+	 * Shows a styled tooltip when hovering UI controls such as palette or
+	 * context pad entries. Reusable across features; a consumer registers a
+	 * hover source via #add and provides the rendered content.
+	 *
+	 * @param {Canvas} canvas
+	 */
+	function HoverTooltip(canvas) {
+	  this._canvas = canvas;
+
+	  this._mount = null;
+	  this._current = null;
+	  this._showTimer = null;
+	}
+
+	HoverTooltip.$inject = [ 'canvas' ];
+
+	/**
+	 * Register a hover source. Hovering a `selector` match inside `container`
+	 * shows a tooltip with the content and position provided by the callbacks.
+	 *
+	 * @param {HoverTooltipConfig} config
+	 */
+	HoverTooltip.prototype.add = function(config) {
+	  const {
+	    container,
+	    selector,
+	    showDelay = SHOW_DELAY
+	  } = config;
+
+	  delegate.bind(container, selector, 'mouseover',
+	    (event) => this._show(event.delegateTarget, config, showDelay));
+
+	  delegate.bind(container, selector, 'mouseout',
+	    (event) => {
+	      const { delegateTarget, relatedTarget } = event;
+
+	      // ignore transitions to a child element of the same target
+	      if (relatedTarget && delegateTarget.contains(relatedTarget)) {
+	        return;
+	      }
+
+	      this._hide();
+	    });
+	};
+
+	HoverTooltip.prototype._show = function(target, config, showDelay) {
+	  const content = config.getContent(target);
+
+	  if (!content) {
+	    return;
+	  }
+
+	  this._current = {
+	    target,
+	    content,
+	    getPosition: config.getPosition
+	  };
+
+	  clearTimeout(this._showTimer);
+
+	  this._showTimer = setTimeout(() => this._render(), showDelay);
+	};
+
+	HoverTooltip.prototype._hide = function() {
+	  clearTimeout(this._showTimer);
+
+	  this._current = null;
+
+	  this._render();
+	};
+
+	HoverTooltip.prototype._render = function() {
+	  const mount = this._getMount();
+
+	  if (!this._current) {
+	    R(null, mount);
+
+	    return;
+	  }
+
+	  const { target, content, getPosition } = this._current;
+
+	  const { x, y, placement = 'right' } = getPosition(target);
+
+	  const style = {
+	    left: `${ x }px`,
+	    top: `${ y }px`
+	  };
+
+	  R(
+	    m$1`<div
+      class="djs-hover-tooltip djs-hover-tooltip--${ placement }"
+      style=${ style }
+    >${ content }</div>`,
+	    mount
+	  );
+	};
+
+	HoverTooltip.prototype._getMount = function() {
+	  if (!this._mount) {
+	    this._mount = domify('<div class="djs-hover-tooltip-container"></div>');
+
+	    this._canvas.getContainer().appendChild(this._mount);
+	  }
+
+	  return this._mount;
+	};
+
+	/**
+	 * @type { import('didi').ModuleDeclaration }
+	 */
+	var HoverTooltipModule = {
+	  __init__: [ 'hoverTooltip' ],
+	  hoverTooltip: [ 'type', HoverTooltip ]
+	};
+
 	/**
 	 * @typedef {import('../../core/Canvas.js').default} Canvas
 	 * @typedef {import('../../core/EventBus.js').default} EventBus
@@ -66116,7 +66241,8 @@
 	      attr$1(control, 'data-action', id);
 
 	      if (entry.title) {
-	        attr$1(control, 'title', entry.title);
+	        attr$1(control, 'aria-label', entry.title);
+	        attr$1(control, 'role', 'button');
 	      }
 
 	      if (entry.className) {
@@ -66359,12 +66485,108 @@
 	  return entries;
 	}
 
+	/**
+	 * @typedef { {
+	 *   title: string;
+	 *   shortcut?: string;
+	 * } } PaletteTooltipProps
+	 */
+
+	/**
+	 * Renders the content of a palette entry tooltip: the entry title and,
+	 * if provided, its keyboard shortcut.
+	 *
+	 * @param {PaletteTooltipProps} props
+	 */
+	function PaletteTooltipComponent(props) {
+	  const {
+	    title,
+	    shortcut
+	  } = props;
+
+	  const shortcutNode = shortcut
+	    ? m$1`<kbd class="djs-palette-tooltip-shortcut">${ shortcut }</kbd>`
+	    : null;
+
+	  return m$1`
+    <span class="djs-palette-tooltip-label">${ title }</span>
+    ${ shortcutNode }
+  `;
+	}
+
+	/**
+	 * @typedef {import('../../core/EventBus').default} EventBus
+	 * @typedef {import('./Palette').default} Palette
+	 * @typedef {import('../hover-tooltip/HoverTooltip').default} HoverTooltip
+	 */
+
+	const PALETTE_ENTRY_SELECTOR = '.djs-palette-entries .entry';
+
+	const ENTRY_GAP = 8;
+
+	/**
+	 * Shows a hover tooltip for palette entries, displaying the entry `title`
+	 * and, if the entry provides one, its keyboard `shortcut`.
+	 *
+	 * @param {EventBus} eventBus
+	 * @param {Palette} palette
+	 * @param {HoverTooltip} hoverTooltip
+	 */
+	function PaletteTooltip(eventBus, palette, hoverTooltip) {
+	  this._palette = palette;
+	  this._hoverTooltip = hoverTooltip;
+
+	  this._entries = {};
+
+	  eventBus.on('palette.create', (event) => this._init(event.container));
+
+	  eventBus.on('palette.changed', () => this._updateEntries());
+	}
+
+	PaletteTooltip.$inject = [ 'eventBus', 'palette', 'hoverTooltip' ];
+
+	PaletteTooltip.prototype._init = function(container) {
+	  this._updateEntries();
+
+	  this._hoverTooltip.add({
+	    container,
+	    selector: PALETTE_ENTRY_SELECTOR,
+	    getContent: (target) => {
+	      const entry = this._entries[ attr$1(target, 'data-action') ];
+
+	      if (!entry || !entry.title) {
+	        return null;
+	      }
+
+	      return m$1`<${PaletteTooltipComponent}
+        title=${ entry.title }
+        shortcut=${ entry.shortcut }
+      />`;
+	    },
+	    getPosition: (target) => {
+	      const bounds = target.getBoundingClientRect();
+
+	      return {
+	        x: bounds.right + ENTRY_GAP,
+	        y: bounds.top + bounds.height / 2,
+	        placement: 'right'
+	      };
+	    }
+	  });
+	};
+
+	PaletteTooltip.prototype._updateEntries = function() {
+	  this._entries = this._palette.getEntries();
+	};
+
 	/**
 	 * @type { import('didi').ModuleDeclaration }
 	 */
 	var PaletteModule$1 = {
-	  __init__: [ 'palette' ],
-	  palette: [ 'type', Palette ]
+	  __depends__: [ HoverTooltipModule ],
+	  __init__: [ 'palette', 'paletteTooltip' ],
+	  palette: [ 'type', Palette ],
+	  paletteTooltip: [ 'type', PaletteTooltip ]
 	};
 
 	/**
@@ -67258,6 +67480,7 @@
 	      group: 'tools',
 	      className: 'bpmn-icon-hand-tool',
 	      title: translate('Activate hand tool'),
+	      shortcut: SHORTCUTS_KEY_BINDINGS.handTool.key,
 	      action: {
 	        click: function(event) {
 	          handTool.activateHand(event);
@@ -67268,6 +67491,7 @@
 	      group: 'tools',
 	      className: 'bpmn-icon-lasso-tool',
 	      title: translate('Activate lasso tool'),
+	      shortcut: SHORTCUTS_KEY_BINDINGS.lassoTool.key,
 	      action: {
 	        click: function(event) {
 	          lassoTool.activateSelection(event);
@@ -67278,6 +67502,7 @@
 	      group: 'tools',
 	      className: 'bpmn-icon-space-tool',
 	      title: translate('Activate create/remove space tool'),
+	      shortcut: SHORTCUTS_KEY_BINDINGS.spaceTool.key,
 	      action: {
 	        click: function(event) {
 	          spaceTool.activateSelection(event);
@@ -67288,6 +67513,7 @@
 	      group: 'tools',
 	      className: 'bpmn-icon-connection-multi',
 	      title: translate('Activate global connect tool'),
+	      shortcut: SHORTCUTS_KEY_BINDINGS.globalConnectTool.key,
 	      action: {
 	        click: function(event) {
 	          globalConnect.start(event);