feat(preview-support): addDragger accepts optional CSS class

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
  */

lib/features/preview-support/PreviewSupport.js

@@ -94,18 +94,19 @@ PreviewSupport.prototype.getGfx = function(element) {
  * @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 = svgClone(gfx);
   var bbox = gfx.getBoundingClientRect();
 
-  this._cloneMarkers(getVisual(dragger));
+  this._cloneMarkers(getVisual(dragger), className);
 
-  svgAttr(dragger, this._styles.cls('djs-dragger', [], {
+  svgAttr(dragger, this._styles.cls(className, [], {
     x: bbox.top,
     y: bbox.left
   }));
@@ -142,8 +143,9 @@ PreviewSupport.prototype.addFrame = function(shape, group) {
  * 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) {
@@ -152,7 +154,7 @@ PreviewSupport.prototype._cloneMarkers = function(gfx) {
     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);
     }
   }
 
@@ -164,7 +166,7 @@ PreviewSupport.prototype._cloneMarkers = function(gfx) {
     if (svgAttr(gfx, markerType)) {
       var marker = getMarker(gfx, markerType, self._canvas.getContainer());
 
-      self._cloneMarker(gfx, marker, markerType);
+      self._cloneMarker(gfx, marker, markerType, className);
     }
   });
 };
@@ -175,9 +177,10 @@ PreviewSupport.prototype._cloneMarkers = function(gfx) {
  * @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 ];
 
@@ -188,9 +191,7 @@ PreviewSupport.prototype._cloneMarker = function(gfx, marker, markerType) {
 
     clonedMarker.id = clonedMarkerId;
 
-    svgClasses(clonedMarker)
-      .add('djs-dragger')
-      .add('djs-dragger-marker');
+    svgClasses(clonedMarker).add(className);
 
     this._clonedMarkers[ markerId ] = clonedMarker;