From 67484bcb9cbc39a4b359e3cafccc2776e4165356 Mon Sep 17 00:00:00 2001
From: Nico Rehwaldt <nico.rehwaldt@camunda.com>
Date: Thu, 19 Dec 2024 16:14:05 +0100
Subject: [PATCH] fix(navigation/movecanvas): hook up with canvas focused state

Related to https://github.com/bpmn-io/diagram-js/pull/662
---
 lib/navigation/movecanvas/MoveCanvas.js       |  2 +-
 .../navigation/movecanvas/MoveCanvasSpec.js   | 70 ++++++++++++++++++-
 2 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/lib/navigation/movecanvas/MoveCanvas.js b/lib/navigation/movecanvas/MoveCanvas.js
index 255ddffbe..95189fb1d 100644
--- 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
index 2829fb9e1..d84a42b21 100755
--- 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;
+      }
+    ));
+
+  });
+
 });