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

Related to https://github.com/bpmn-io/diagram-js/pull/662
---
 lib/navigation/zoomscroll/ZoomScroll.js       | 10 +--
 .../navigation/zoomscoll/ZoomScrollSpec.js    | 84 +++++++++++++------
 2 files changed, 61 insertions(+), 33 deletions(-)

diff --git a/lib/navigation/zoomscroll/ZoomScroll.js b/lib/navigation/zoomscroll/ZoomScroll.js
index caef76766..407ed057d 100644
--- a/lib/navigation/zoomscroll/ZoomScroll.js
+++ b/lib/navigation/zoomscroll/ZoomScroll.js
@@ -1,6 +1,5 @@
 import {
-  event as domEvent,
-  closest as domClosest
+  event as domEvent
 } from 'min-dom';
 
 import {
@@ -68,8 +67,8 @@ export default function ZoomScroll(config, eventBus, canvas) {
 
   var self = this;
 
-  eventBus.on('canvas.init', function(e) {
-    self._init(config.enabled !== false);
+  eventBus.on('canvas.focus.changed', function(event) {
+    self._init(event.focused && config.enabled !== false);
   });
 }
 
@@ -116,8 +115,7 @@ ZoomScroll.prototype.zoom = function zoom(delta, position) {
 
 ZoomScroll.prototype._handleWheel = function handleWheel(event) {
 
-  // event is already handled by '.djs-scrollable'
-  if (domClosest(event.target, '.djs-scrollable', true)) {
+  if (!this._canvas.isFocused()) {
     return;
   }
 
diff --git a/test/spec/navigation/zoomscoll/ZoomScrollSpec.js b/test/spec/navigation/zoomscoll/ZoomScrollSpec.js
index 5dfcbd74a..e54291938 100644
--- a/test/spec/navigation/zoomscoll/ZoomScrollSpec.js
+++ b/test/spec/navigation/zoomscoll/ZoomScrollSpec.js
@@ -8,10 +8,6 @@ import {
   assign
 } from 'min-dash';
 
-import {
-  domify
-} from 'min-dom';
-
 import zoomScrollModule from 'lib/navigation/zoomscroll';
 
 
@@ -21,7 +17,9 @@ describe('navigation/zoomscroll', function() {
 
     beforeEach(bootstrapDiagram({
       modules: [ zoomScrollModule ],
-      canvas: { deferUpdate: false }
+      canvas: {
+        deferUpdate: false
+      }
     }));
 
 
@@ -36,7 +34,7 @@ describe('navigation/zoomscroll', function() {
       });
 
       expect(zoomScroll).to.exist;
-      expect(zoomScroll._enabled).to.be.true;
+      expect(zoomScroll._enabled).to.be.false;
     }));
 
   });
@@ -46,7 +44,9 @@ describe('navigation/zoomscroll', function() {
 
     beforeEach(bootstrapDiagram({
       modules: [ zoomScrollModule ],
-      canvas: { deferUpdate: false }
+      canvas: {
+        deferUpdate: false
+      }
     }));
 
 
@@ -88,7 +88,9 @@ describe('navigation/zoomscroll', function() {
 
     beforeEach(bootstrapDiagram({
       modules: [ zoomScrollModule ],
-      canvas: { deferUpdate: false }
+      canvas: {
+        deferUpdate: false
+      }
     }));
 
 
@@ -170,7 +172,9 @@ describe('navigation/zoomscroll', function() {
 
     beforeEach(bootstrapDiagram({
       modules: [ zoomScrollModule ],
-      canvas: { deferUpdate: false },
+      canvas: {
+        deferUpdate: false
+      },
       zoomScroll: {
         enabled: false
       }
@@ -243,34 +247,48 @@ describe('navigation/zoomscroll', function() {
 
     beforeEach(bootstrapDiagram({
       modules: [ zoomScrollModule ],
-      canvas: { deferUpdate: false }
+      canvas: {
+        deferUpdate: false
+      }
     }));
 
+    beforeEach(inject(function(canvas) {
 
-    describe('should mute', function() {
+      canvas.addShape({
+        id: 'test',
+        width: 100,
+        height: 100,
+        x: 100,
+        y: 100
+      });
+    }));
 
-      it('on .djs-scrollable target', inject(function(zoomScroll) {
 
-        // given
-        var zoomSpy = sinon.spy(zoomScroll, 'zoom');
-        var scrollSpy = sinon.spy(zoomScroll, 'scroll');
+    it('should not scroll, if canvas is not focused', inject(function(zoomScroll, canvas) {
 
-        var event = wheelEvent({
-          target: domify('<div class="djs-scrollable" />')
-        });
+      // given
+      var zoomSpy = sinon.spy(zoomScroll, 'zoom');
+      var scrollSpy = sinon.spy(zoomScroll, 'scroll');
 
-        // when
-        zoomScroll._handleWheel(event);
+      var event = wheelEvent({
+        target: canvas._svg
+      });
 
-        // then
-        expect(zoomSpy).not.to.have.been.called;
-        expect(scrollSpy).not.to.have.been.called;
-      }));
+      // when
+      zoomScroll._handleWheel(event);
 
-    });
+      // then
+      expect(zoomSpy).not.to.have.been.called;
+      expect(scrollSpy).not.to.have.been.called;
+    }));
 
 
-    describe('should scroll', function() {
+    describe('should scroll, if canvas is focused', function() {
+
+      beforeEach(inject(function(canvas) {
+        canvas.focus();
+      }));
+
 
       it('two-dimensional', expectScroll({
         expectedDelta: {
@@ -316,6 +334,11 @@ describe('navigation/zoomscroll', function() {
 
     describe('should zoom', function() {
 
+      beforeEach(inject(function(canvas) {
+        canvas.focus();
+      }));
+
+
       it('with scroll + ctrlKey', expectZoom({
         expectedDelta: 0.7949999999999999,
         expectedPosition: { x: 100, y: 70 },
@@ -353,13 +376,20 @@ describe('navigation/zoomscroll', function() {
 
     beforeEach(bootstrapDiagram({
       modules: [ zoomScrollModule ],
-      canvas: { deferUpdate: false },
+      canvas: {
+        deferUpdate: false
+      },
       zoomScroll: {
         scale: 0.5
       }
     }));
 
 
+    beforeEach(inject(function(canvas) {
+      canvas.focus();
+    }));
+
+
     it('should adapt scroll', expectScroll({
       expectedDelta: {
         dx: -17,