fix: don't add djs-dragging class to non-diagram elements

Related to bpmn-io/bpmn-js#2002
bpmn-io · Nov 3, 2023 · fa64a79 · fa64a79
1 parent cae4980
commit fa64a79
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 33 deletions.
diff --git a/lib/features/bendpoints/BendpointMovePreview.js b/lib/features/bendpoints/BendpointMovePreview.js
@@ -1,7 +1,4 @@
-import {
-  classes as svgClasses,
-  remove as svgRemove
-} from 'tiny-svg';
+import { remove as svgRemove } from 'tiny-svg';
 
 import { addBendpoint } from './BendpointUtil';
 
@@ -21,11 +18,11 @@ var RECONNECT_START = 'reconnectStart',
     RECONNECT_END = 'reconnectEnd',
     UPDATE_WAYPOINTS = 'updateWaypoints';
 
-var MARKER_OK = 'connect-ok',
-    MARKER_NOT_OK = 'connect-not-ok',
+var MARKER_CONNECT_OK = 'connect-ok',
+    MARKER_CONNECT_NOT_OK = 'connect-not-ok',
     MARKER_CONNECT_HOVER = 'connect-hover',
-    MARKER_CONNECT_UPDATING = 'djs-updating',
-    MARKER_DRAGGER = 'djs-dragging';
+    MARKER_UPDATING = 'djs-updating',
+    MARKER_DRAGGING = 'djs-dragging';
 
 var HIGH_PRIORITY = 1100;
 
@@ -61,12 +58,10 @@ export default function BendpointMovePreview(bendpointMove, injector, eventBus,
     connection.waypoints = newWaypoints;
 
     // add dragger gfx
-    var draggerGfx = context.draggerGfx = addBendpoint(canvas.getLayer('overlays'));
+    context.draggerGfx = addBendpoint(canvas.getLayer('overlays'));
 
-    svgClasses(draggerGfx).add('djs-dragging');
-
-    canvas.addMarker(connection, MARKER_DRAGGER);
-    canvas.addMarker(connection, MARKER_CONNECT_UPDATING);
+    canvas.addMarker(connection, MARKER_DRAGGING);
+    canvas.addMarker(connection, MARKER_UPDATING);
   });
 
   eventBus.on('bendpoint.move.hover', function(event) {
@@ -83,11 +78,11 @@ export default function BendpointMovePreview(bendpointMove, injector, eventBus,
       }
 
       if (allowed) {
-        canvas.removeMarker(hover, MARKER_NOT_OK);
-        canvas.addMarker(hover, MARKER_OK);
+        canvas.removeMarker(hover, MARKER_CONNECT_NOT_OK);
+        canvas.addMarker(hover, MARKER_CONNECT_OK);
       } else if (allowed === false) {
-        canvas.removeMarker(hover, MARKER_OK);
-        canvas.addMarker(hover, MARKER_NOT_OK);
+        canvas.removeMarker(hover, MARKER_CONNECT_OK);
+        canvas.addMarker(hover, MARKER_CONNECT_NOT_OK);
       }
     }
   });
@@ -102,7 +97,7 @@ export default function BendpointMovePreview(bendpointMove, injector, eventBus,
 
     if (hover) {
       canvas.removeMarker(hover, MARKER_CONNECT_HOVER);
-      canvas.removeMarker(hover, target ? MARKER_OK : MARKER_NOT_OK);
+      canvas.removeMarker(hover, target ? MARKER_CONNECT_OK : MARKER_CONNECT_NOT_OK);
     }
   });
 
@@ -194,12 +189,12 @@ export default function BendpointMovePreview(bendpointMove, injector, eventBus,
     // remove dragger gfx
     svgRemove(draggerGfx);
 
-    canvas.removeMarker(connection, MARKER_CONNECT_UPDATING);
-    canvas.removeMarker(connection, MARKER_DRAGGER);
+    canvas.removeMarker(connection, MARKER_UPDATING);
+    canvas.removeMarker(connection, MARKER_DRAGGING);
 
     if (hover) {
-      canvas.removeMarker(hover, MARKER_OK);
-      canvas.removeMarker(hover, target ? MARKER_OK : MARKER_NOT_OK);
+      canvas.removeMarker(hover, MARKER_CONNECT_OK);
+      canvas.removeMarker(hover, target ? MARKER_CONNECT_OK : MARKER_CONNECT_NOT_OK);
     }
 
     if (connectionPreview) {

diff --git a/lib/features/bendpoints/ConnectionSegmentMove.js b/lib/features/bendpoints/ConnectionSegmentMove.js
@@ -14,12 +14,9 @@ import {
 } from '../../layout/LayoutUtil';
 
 var MARKER_CONNECT_HOVER = 'connect-hover',
-    MARKER_CONNECT_UPDATING = 'djs-updating';
+    MARKER_UPDATING = 'djs-updating';
 
-import {
-  classes as svgClasses,
-  remove as svgRemove
-} from 'tiny-svg';
+import { remove as svgRemove } from 'tiny-svg';
 
 import {
   translate
@@ -267,9 +264,8 @@ export default function ConnectionSegmentMove(
 
     // add dragger gfx
     context.draggerGfx = addSegmentDragger(layer, context.segmentStart, context.segmentEnd);
-    svgClasses(context.draggerGfx).add('djs-dragging');
 
-    canvas.addMarker(connection, MARKER_CONNECT_UPDATING);
+    canvas.addMarker(connection, MARKER_UPDATING);
   });
 
   eventBus.on('connectionSegment.move.move', function(event) {
@@ -386,7 +382,7 @@ export default function ConnectionSegmentMove(
       svgRemove(context.draggerGfx);
     }
 
-    canvas.removeMarker(connection, MARKER_CONNECT_UPDATING);
+    canvas.removeMarker(connection, MARKER_UPDATING);
   });
 
   eventBus.on([

diff --git a/test/spec/features/bendpoints/BendpointsMoveSpec.js b/test/spec/features/bendpoints/BendpointsMoveSpec.js
@@ -154,7 +154,7 @@ describe('features/bendpoints - move', function() {
       dragging.move(canvasEvent({ x: 400, y: 200 }));
 
       // then
-      var bendpoint = domQuery('.djs-bendpoint.djs-dragging', layer);
+      var bendpoint = domQuery('.djs-bendpoint', layer);
       expect(bendpoint).to.exist;
     }));
 
@@ -169,7 +169,7 @@ describe('features/bendpoints - move', function() {
       dragging.move(canvasEvent({ x: 100, y: 100 }));
 
       // then
-      var bendpoint = domQuery('.djs-bendpoint.djs-dragging', layer);
+      var bendpoint = domQuery('.djs-bendpoint', layer);
       expect(bendpoint).to.exist;
     }));
 
@@ -187,7 +187,7 @@ describe('features/bendpoints - move', function() {
       dragging.cancel();
 
       // then
-      var bendpoint = domQuery('.djs-bendpoint.djs-dragging', layer);
+      var bendpoint = domQuery('.djs-bendpoint', layer);
       expect(bendpoint).to.be.null;
     }));