fix(navigation/movecanvas): hook up with canvas focused state

Related to #662
bpmn-io · Dec 19, 2024 · 67484bc · 67484bc
1 parent 8f4c522
commit 67484bc
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 4 deletions.
diff --git a/lib/navigation/movecanvas/MoveCanvas.js b/lib/navigation/movecanvas/MoveCanvas.js
@@ -43,7 +43,7 @@ export default function MoveCanvas(eventBus, canvas) {
   // allow others to hook into the event before us though
   // (dragging / element moving will do this)
   eventBus.on('element.mousedown', 500, function(e) {
-    return handleStart(e.originalEvent);
+    return canvas.isFocused() && handleStart(e.originalEvent);
   });
 
 

diff --git a/test/spec/navigation/movecanvas/MoveCanvasSpec.js b/test/spec/navigation/movecanvas/MoveCanvasSpec.js
@@ -46,7 +46,12 @@ describe('navigation/movecanvas', function() {
     beforeEach(bootstrapDiagram({
       modules: [
         moveCanvasModule
-      ]
+      ],
+      config: {
+        canvas: {
+          autoFocus: true
+        }
+      }
     }));
 
     beforeEach(inject(function(canvas) {
@@ -93,7 +98,12 @@ describe('navigation/movecanvas', function() {
     beforeEach(bootstrapDiagram({
       modules: [
         moveCanvasModule
-      ]
+      ],
+      config: {
+        canvas: {
+          autoFocus: true
+        }
+      }
     }));
 
     beforeEach(inject(function(canvas) {
@@ -130,7 +140,12 @@ describe('navigation/movecanvas', function() {
       modules: [
         moveCanvasModule,
         interactionEventsModule
-      ]
+      ],
+      config: {
+        canvas: {
+          autoFocus: true
+        }
+      }
     }));
 
 
@@ -153,6 +168,55 @@ describe('navigation/movecanvas', function() {
 
   });
 
+
+  describe('integration - canvas focus', function() {
+
+    beforeEach(bootstrapDiagram({
+      modules: [
+        moveCanvasModule,
+        interactionEventsModule
+      ]
+    }));
+
+
+    it('should not activate if canvas is not focused', inject(
+      function(eventBus, canvas, moveCanvas) {
+
+        // given
+        var rootElement = canvas.getRootElement();
+
+        eventBus.fire(mouseDownEvent(rootElement, { clientX: 0, clientY: 0 }));
+
+        // when
+        document.dispatchEvent(createMouseEvent(200, 100, 'mousemove'));
+
+        // then
+        expect(moveCanvas.isActive()).to.be.false;
+      }
+    ));
+
+
+    it('should activate if canvas is focused', inject(
+      function(eventBus, canvas, moveCanvas) {
+
+        // given
+        var rootElement = canvas.getRootElement();
+
+        // when
+        canvas.focus();
+
+        eventBus.fire(mouseDownEvent(rootElement, { clientX: 0, clientY: 0 }));
+
+        // and
+        document.dispatchEvent(createMouseEvent(200, 100, 'mousemove'));
+
+        // then
+        expect(moveCanvas.isActive()).to.be.true;
+      }
+    ));
+
+  });
+
 });