feat: add hit box to disable move interaction

Use `no-move` type of hit box to disable element movement via hit box. Related to camunda/camunda-modeler#2859
bpmn-io · May 17, 2022 · 3411325 · 3411325
1 parent a05f81b
commit 3411325
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git a/assets/diagram-js.css b/assets/diagram-js.css
@@ -9,7 +9,7 @@
   --color-grey-225-10-80: hsl(225, 10%, 80%);
   --color-grey-225-10-85: hsl(225, 10%, 85%);
   --color-grey-225-10-90: hsl(225, 10%, 90%);
-  --color-grey-225-10-95: hsl(225, 10%, 95%); 
+  --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
 
   --color-blue-205-100-45: hsl(205, 100%, 45%);
@@ -25,8 +25,8 @@
   --color-red-360-100-97: hsl(360, 100%, 97%);
 
   --color-white: hsl(0, 0%, 100%);
-  --color-black: hsl(0, 0%, 0%); 
-  --color-black-opacity-05: hsla(0, 0%, 0%, 5%); 
+  --color-black: hsl(0, 0%, 0%);
+  --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
   --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
 
   --bendpoint-fill-color: var(--color-blue-205-100-45-opacity-30);
@@ -296,7 +296,8 @@ marker.djs-dragger tspan {
 /**
  * all pointer events for hit shape
  */
-.djs-element > .djs-hit-all {
+.djs-element > .djs-hit-all,
+.djs-element > .djs-hit-no-move {
   pointer-events: all;
 }
 
@@ -305,13 +306,6 @@ marker.djs-dragger tspan {
   pointer-events: stroke;
 }
 
-/**
- * all pointer events for hit shape
- */
-.djs-drag-active .djs-element > .djs-hit-click-stroke {
-  pointer-events: all;
-}
-
 /**
  * shape / connection basic styles
  */

diff --git a/lib/features/interaction-events/InteractionEvents.js b/lib/features/interaction-events/InteractionEvents.js
@@ -258,10 +258,13 @@ export default function InteractionEvents(eventBus, elementRegistry, styles) {
 
   var ALL_HIT_STYLE = createHitStyle('djs-hit djs-hit-all');
 
+  var NO_MOVE_HIT_STYLE = createHitStyle('djs-hit djs-hit-no-move');
+
   var HIT_TYPES = {
     'all': ALL_HIT_STYLE,
     'click-stroke': CLICK_STROKE_HIT_STYLE,
-    'stroke': STROKE_HIT_STYLE
+    'stroke': STROKE_HIT_STYLE,
+    'no-move': NO_MOVE_HIT_STYLE
   };
 
   function createHitStyle(classNames, attrs) {

diff --git a/lib/features/move/Move.js b/lib/features/move/Move.js
@@ -5,6 +5,10 @@ import {
   isObject
 } from 'min-dash';
 
+import {
+  classes as svgClasses
+} from 'tiny-svg';
+
 var LOW_PRIORITY = 500,
     MEDIUM_PRIORITY = 1250,
     HIGH_PRIORITY = 1500;
@@ -202,6 +206,11 @@ export default function MoveEvents(
       return;
     }
 
+    // ignore non-draggable hits
+    if (svgClasses(event.target).has('djs-hit-no-move')) {
+      return;
+    }
+
     var referencePoint = mid(element);
 
     dragging.init(event, referencePoint, 'shape.move', {

diff --git a/test/spec/features/move/MoveSpec.js b/test/spec/features/move/MoveSpec.js
@@ -180,6 +180,21 @@ describe('features/move - Move', function() {
       }
     ));
 
+
+    it('should NOT start if triggered on `no-move` hit', inject(function(dragging, move) {
+
+      // given
+      var target = document.createElement('svg'),
+          event = canvasEvent({ x: 0, y: 0 }, { target: target });
+
+      target.classList.add('djs-hit-no-move');
+
+      // when
+      move.start(event, childShape);
+
+      // then
+      expect(dragging.context()).not.to.exist;
+    }));
   });