bpmn-js 14.1.2 → 14.2.0

package/dist/assets/diagram-js.css

@@ -40,6 +40,7 @@
   --context-pad-entry-hover-background-color: var(--color-grey-225-10-95);
 
   --element-dragger-color: var(--color-blue-205-100-50);
+  --element-dragging-color: var(--color-grey-225-10-75);
   --element-hover-outline-fill-color: var(--color-blue-205-100-45);
   --element-selected-outline-stroke-color: var(--color-blue-205-100-50);
   --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70);
@@ -280,10 +281,6 @@ marker.djs-dragger tspan {
   stroke: var(--element-dragger-color) !important;
 }
 
-.djs-dragging {
-  opacity: 0.3;
-}
-
 .djs-dragging,
 .djs-dragging > * {
   pointer-events: none !important;
@@ -294,6 +291,32 @@ marker.djs-dragger tspan {
   display: none !important;
 }
 
+.djs-dragging * {
+  fill: none !important;
+  stroke: var(--element-dragging-color) !important;
+}
+
+.djs-dragging tspan,
+.djs-dragging text {
+  fill: var(--element-dragging-color) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragging circle,
+marker.djs-dragging path,
+marker.djs-dragging polygon,
+marker.djs-dragging polyline,
+marker.djs-dragging rect {
+  fill: var(--element-dragging-color) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragging text,
+marker.djs-dragging tspan {
+  fill: none !important;
+  stroke: var(--element-dragging-color) !important;
+}
+
 /**
  * no pointer events for visual
  */

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v14.1.2
+ * bpmn-js - bpmn-modeler v14.2.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -18,9 +18,8 @@
 
   function e$3(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}));}
 
-  function createCommonjsModule(fn) {
-    var module = { exports: {} };
-  	return fn(module, module.exports), module.exports;
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
   }
 
   var hat_1 = createCommonjsModule(function (module) {
@@ -88,16 +87,12 @@
   };
   });
 
-  /**
-   * @typedef { [ number, number ] | [ number, number, number ] } Seed
-   */
-
   /**
    * Create a new id generator / cache instance.
    *
    * You may optionally provide a seed that is used internally.
    *
-   * @param {Seed} [seed]
+   * @param {Seed} seed
    */
   function Ids(seed) {
     if (!(this instanceof Ids)) {
@@ -8212,13 +8207,14 @@
    *
    * @param {SVGElement} visual The graphical element.
    * @param {ShapeLike} element The shape.
+   * @param {Object} attrs Optional attributes.
    *
    * @return {SVGElement}
    */
-  GraphicsFactory.prototype.drawShape = function(visual, element) {
+  GraphicsFactory.prototype.drawShape = function(visual, element, attrs = {}) {
     var eventBus = this._eventBus;
 
-    return eventBus.fire('render.shape', { gfx: visual, element: element });
+    return eventBus.fire('render.shape', { gfx: visual, element, attrs });
   };
 
   /**
@@ -8239,13 +8235,14 @@
    *
    * @param {SVGElement} visual The graphical element.
    * @param {ConnectionLike} element The connection.
+   * @param {Object} attrs Optional attributes.
    *
    * @return {SVGElement}
    */
-  GraphicsFactory.prototype.drawConnection = function(visual, element) {
+  GraphicsFactory.prototype.drawConnection = function(visual, element, attrs = {}) {
     var eventBus = this._eventBus;
 
-    return eventBus.fire('render.connection', { gfx: visual, element: element });
+    return eventBus.fire('render.connection', { gfx: visual, element, attrs });
   };
 
   /**
@@ -29173,6 +29170,7 @@
 
   var DEFAULT_PRIORITY$2 = 1000;
   var CONTEXT_PAD_PADDING = 12;
+  var HOVER_DELAY = 300;
 
   /**
    * A context pad that displays element specific, contextual actions next
@@ -29347,11 +29345,25 @@
     entry = attr$1(button, 'data-action');
     originalEvent = event.originalEvent || event;
 
+    if (action === 'mouseover') {
+      this._timeout = setTimeout(() => {
+        this._mouseout = this.triggerEntry(entry, 'hover', originalEvent, autoActivate);
+      }, HOVER_DELAY);
+    } else if (action === 'mouseout') {
+      clearTimeout(this._timeout);
+
+      if (this._mouseout) {
+        this._mouseout();
+
+        this._mouseout = null;
+      }
+    }
+
     return this.triggerEntry(entry, action, originalEvent, autoActivate);
   };
 
   /**
-   * Trigger context pad entry entry.
+   * Trigger action on context pad entry entry, e.g. click, mouseover or mouseout.
    *
    * @param {string} entryId
    * @param {string} action
@@ -29509,6 +29521,14 @@
       self.trigger('dragstart', event);
     });
 
+    delegate.bind(html, entrySelector, 'mouseover', function(event) {
+      self.trigger('mouseover', event);
+    });
+
+    delegate.bind(html, entrySelector, 'mouseout', function(event) {
+      self.trigger('mouseout', event);
+    });
+
     // stop propagation of mouse events
     event.bind(html, 'mousedown', function(event) {
       event.stopPropagation();
@@ -34227,7 +34247,7 @@
       MARKER_NOT_OK$4 = 'connect-not-ok',
       MARKER_CONNECT_HOVER$1 = 'connect-hover',
       MARKER_CONNECT_UPDATING$1 = 'djs-updating',
-      MARKER_ELEMENT_HIDDEN = 'djs-element-hidden';
+      MARKER_DRAGGER = 'djs-dragging';
 
   var HIGH_PRIORITY$i = 1100;
 
@@ -34267,7 +34287,7 @@
 
       classes(draggerGfx).add('djs-dragging');
 
-      canvas.addMarker(connection, MARKER_ELEMENT_HIDDEN);
+      canvas.addMarker(connection, MARKER_DRAGGER);
       canvas.addMarker(connection, MARKER_CONNECT_UPDATING$1);
     });
 
@@ -34397,7 +34417,7 @@
       remove$1(draggerGfx);
 
       canvas.removeMarker(connection, MARKER_CONNECT_UPDATING$1);
-      canvas.removeMarker(connection, MARKER_ELEMENT_HIDDEN);
+      canvas.removeMarker(connection, MARKER_DRAGGER);
 
       if (hover) {
         canvas.removeMarker(hover, MARKER_OK$4);
@@ -35510,7 +35530,7 @@
    * @typedef {import('../../core/GraphicsFactory').default} GraphicsFactory
    */
 
-  var MARKER_CONNECTION_PREVIEW = 'djs-connection-preview';
+  var MARKER_CONNECTION_PREVIEW = 'djs-dragger';
 
   /**
    * Draws connection preview. Optionally, this can use layouter and connection docking to draw
@@ -35626,7 +35646,9 @@
       connection.waypoints = this._connectionDocking.getCroppedWaypoints(connection, source, target);
     }
 
-    this._graphicsFactory.drawConnection(connectionPreviewGfx, connection);
+    this._graphicsFactory.drawConnection(connectionPreviewGfx, connection, {
+      stroke: 'var(--element-dragger-color)'
+    });
   };
 
   /**
@@ -36476,11 +36498,7 @@
     var self = this;
 
     eventBus.on('drag.cleanup', function() {
-      forEach$1(self._clonedMarkers, function(clonedMarker) {
-        remove$1(clonedMarker);
-      });
-
-      self._clonedMarkers = {};
+      self.cleanUp();
     });
   }
 
@@ -36491,6 +36509,15 @@
     'styles'
   ];
 
+  PreviewSupport.prototype.cleanUp = function() {
+    var self = this;
+
+    forEach$1(self._clonedMarkers, function(clonedMarker) {
+      remove$1(clonedMarker);
+    });
+
+    self._clonedMarkers = {};
+  };
 
   /**
    * Returns graphics of an element.
@@ -36509,24 +36536,27 @@
    * @param {Element} element The element to be moved.
    * @param {SVGElement} group The SVG group to add the preview to.
    * @param {SVGElement} [gfx] The optional graphical element of the element.
+   * @param {string} [className="djs-dragger"] The optional class name to add to the preview.
    *
    * @return {SVGElement} The preview.
    */
-  PreviewSupport.prototype.addDragger = function(element, group, gfx) {
+  PreviewSupport.prototype.addDragger = function(element, group, gfx, className = 'djs-dragger') {
     gfx = gfx || this.getGfx(element);
 
     var dragger = clone$1(gfx);
     var bbox = gfx.getBoundingClientRect();
 
-    this._cloneMarkers(getVisual(dragger));
+    this._cloneMarkers(getVisual(dragger), className);
 
-    attr(dragger, this._styles.cls('djs-dragger', [], {
+    attr(dragger, this._styles.cls(className, [], {
       x: bbox.top,
       y: bbox.left
     }));
 
     append(group, dragger);
 
+    attr(dragger, 'data-preview-support-element-id', element.id);
+
     return dragger;
   };
 
@@ -36550,6 +36580,8 @@
 
     append(group, frame);
 
+    attr(frame, 'data-preview-support-element-id', shape.id);
+
     return frame;
   };
 
@@ -36557,8 +36589,9 @@
    * Clone all markers referenced by a node and its child nodes.
    *
    * @param {SVGElement} gfx
+   * @param {string} [className="djs-dragger"]
    */
-  PreviewSupport.prototype._cloneMarkers = function(gfx) {
+  PreviewSupport.prototype._cloneMarkers = function(gfx, className = 'djs-dragger') {
     var self = this;
 
     if (gfx.childNodes) {
@@ -36567,7 +36600,7 @@
       for (var i = 0; i < gfx.childNodes.length; i++) {
 
         // recursively clone markers of child nodes
-        self._cloneMarkers(gfx.childNodes[ i ]);
+        self._cloneMarkers(gfx.childNodes[ i ], className);
       }
     }
 
@@ -36579,7 +36612,7 @@
       if (attr(gfx, markerType)) {
         var marker = getMarker(gfx, markerType, self._canvas.getContainer());
 
-        self._cloneMarker(gfx, marker, markerType);
+        self._cloneMarker(gfx, marker, markerType, className);
       }
     });
   };
@@ -36590,9 +36623,10 @@
    * @param {SVGElement} gfx
    * @param {SVGElement} marker
    * @param {string} markerType
+   * @param {string} [className="djs-dragger"]
    */
-  PreviewSupport.prototype._cloneMarker = function(gfx, marker, markerType) {
-    var markerId = marker.id;
+  PreviewSupport.prototype._cloneMarker = function(gfx, marker, markerType, className = 'djs-dragger') {
+    var markerId = marker.id + '-' + className;
 
     var clonedMarker = this._clonedMarkers[ markerId ];
 
@@ -36603,9 +36637,7 @@
 
       clonedMarker.id = clonedMarkerId;
 
-      classes(clonedMarker)
-        .add('djs-dragger')
-        .add('djs-dragger-marker');
+      classes(clonedMarker).add(className);
 
       this._clonedMarkers[ markerId ] = clonedMarker;
 
@@ -37465,7 +37497,7 @@
    *
    * @param {Object} [context]
    * @param {Shape} [context.element] The optional parent.
-   * @param {Point} [context.point] The optional osition.
+   * @param {Point} [context.point] The optional position.
    * @param {Object} [context.hints] The optional hints.
    */
   CopyPaste.prototype.paste = function(context) {
@@ -52651,7 +52683,7 @@
 
     var root = this._canvas.getRootElement();
 
-    if (hasSecondaryModifier(event) && event.hover) {
+    if (!hasSecondaryModifier(event) && event.hover) {
       root = event.hover;
     }