fix(core/Canvas): explicitly enable autoFocus

CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes to [diagram-js](https://github.com/bpmn-io/diagram-js) are d
 
 _**Note:** Yet to be released changes appear here._
 
+## 15.2.4
+
+* `FIX`: canvas `autoFocus` must explicitly be enabled ([#956](https://github.com/bpmn-io/diagram-js/pull/956))
+
 ## 15.2.3
 
 * `FIX`: adjust search to prioritize start of word and exact matches ([#953](https://github.com/bpmn-io/diagram-js/pull/953))

lib/core/Canvas.js

@@ -49,6 +49,7 @@ import { createMatrix as createMatrix } from 'tiny-svg';
  *   deferUpdate?: boolean;
  *   width?: number;
  *   height?: number;
+ *   autoFocus?: boolean;
  * } } CanvasConfig
  * @typedef { {
  *   group: SVGElement;
@@ -235,18 +236,20 @@ Canvas.prototype._init = function(config) {
 
   domAttr(svg, 'tabindex', 0);
 
-  eventBus.on('element.hover', () => {
+  config.autoFocus && eventBus.on('element.hover', () => {
     this.restoreFocus();
   });
 
+  eventBus.on('element.mousedown', 500, (event) => {
+    this.focus();
+  });
+
   svg.addEventListener('focusin', () => {
-    this._focused = true;
-    eventBus.fire('canvas.focus.changed', { focused: true });
+    this._setFocused(true);
   });
 
   svg.addEventListener('focusout', () => {
-    this._focused = false;
-    eventBus.fire('canvas.focus.changed', { focused: false });
+    this._setFocused(false);
   });
 
   svgAppend(container, svg);
@@ -316,6 +319,17 @@ Canvas.prototype._destroy = function() {
   delete this._viewport;
 };
 
+Canvas.prototype._setFocused = function(focused) {
+
+  if (focused == this._focused) {
+    return;
+  }
+
+  this._focused = focused;
+
+  this._eventBus.fire('canvas.focus.changed', { focused });
+};
+
 Canvas.prototype._clear = function() {
 
   const allElements = this._elementRegistry.getAll();
@@ -340,10 +354,12 @@ Canvas.prototype._clear = function() {
 };
 
 /**
-* Sets focus on the canvas SVG element.
-*/
+ * Sets focus on the canvas SVG element.
+ */
 Canvas.prototype.focus = function() {
   this._svg.focus({ preventScroll: true });
+
+  this._setFocused(true);
 };
 
 /**

lib/navigation/movecanvas/MoveCanvas.js

@@ -38,12 +38,19 @@
 
   var context;
 
+  function handleMousedown(event) {
+    return handleStart(event.originalEvent);
+  }
 
   // listen for move on element mouse down;
   // 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);
+  eventBus.on('canvas.focus.changed', function(event) {
+    if (event.focused) {
+      eventBus.on('element.mousedown', 500, handleMousedown);
+    } else {
+      eventBus.off('element.mousedown', handleMousedown);
+    }
   });
 
 

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;
   }
 

test/spec/core/CanvasSpec.js

@@ -20,7 +20,7 @@ import {
 import { getChildren as getChildrenGfx } from 'lib/util/GraphicsUtil';
 
 
-describe('Canvas', function() {
+describe('core/Canvas', function() {
 
   var container;
 
@@ -96,6 +96,22 @@ describe('Canvas', function() {
     });
 
 
+    it('should focus on <element.mousedown>', inject(function(canvas, eventBus) {
+
+      // given
+      var svg = container.querySelector('svg');
+
+      // when
+      eventBus.fire('element.mousedown',{
+        element: canvas.getRootElement(),
+        gfx: svg
+      });
+
+      // then
+      expect(document.activeElement).to.equal(svg);
+    }));
+
+
     describe('<hover>', function() {
 
       /**
@@ -112,7 +128,7 @@ describe('Canvas', function() {
       });
 
 
-      it('should focus if body is focused', inject(function(canvas, eventBus) {
+      it('should NOT focus if body is focused', inject(function(canvas, eventBus) {
 
         // given
         var svg = container.querySelector('svg');
@@ -124,7 +140,7 @@ describe('Canvas', function() {
         });
 
         // then
-        expect(document.activeElement).to.equal(svg);
+        expect(document.activeElement).to.not.equal(svg);
       }));
 
 
@@ -174,12 +190,45 @@ describe('Canvas', function() {
   });
 
 
+  describe('focus handling <config.autoFocus>', function() {
+
+    beforeEach(function() {
+      container = TestContainer.get(this);
+    });
+
+    beforeEach(createDiagram({
+      canvas: {
+        autoFocus: true
+      }
+    }));
+
+
+    it('should focus if body is focused', inject(function(canvas, eventBus) {
+
+      // given
+      var svg = container.querySelector('svg');
+
+      // when
+      eventBus.fire('element.hover', {
+        element: canvas.getRootElement(),
+        gfx: svg
+      });
+
+      // then
+      expect(document.activeElement).to.equal(svg);
+    }));
+
+  });
+
+
   describe('events', function() {
 
     beforeEach(function() {
       container = TestContainer.get(this);
     });
 
+    beforeEach(createDiagram());
+
 
     it('should fire "canvas.resized" event', inject(function(eventBus, canvas) {
 
@@ -200,7 +249,7 @@ describe('Canvas', function() {
   });
 
 
-  describe('destroy', function() {
+  describe('#destroy', function() {
 
     beforeEach(function() {
       container = TestContainer.get(this);
@@ -221,7 +270,7 @@ describe('Canvas', function() {
   });
 
 
-  describe('clear', function() {
+  describe('#clear', function() {
 
     beforeEach(createDiagram());
 
@@ -269,6 +318,47 @@ describe('Canvas', function() {
   });
 
 
+  describe('#focus', function() {
+
+    beforeEach(function() {
+      container = TestContainer.get(this);
+    });
+
+    beforeEach(createDiagram());
+
+
+    it('should emit <canvas.focus.changed> event', inject(function(canvas, eventBus) {
+
+      // assume
+      expect(canvas.isFocused()).to.be.false;
+
+      // when
+      const focusSpy = sinon.spy(function(event) {
+        expect(event.focused).to.be.true;
+      });
+
+      eventBus.once('canvas.focus.changed', focusSpy);
+
+      canvas.focus();
+
+      // then
+      expect(focusSpy).to.have.been.calledOnce;
+
+      // and when
+      const refocusSpy = sinon.spy();
+
+      eventBus.once('canvas.focus.changed', refocusSpy);
+
+      canvas.focus();
+
+      // then
+      // focus is not triggered again
+      expect(refocusSpy).not.to.have.been.called;
+    }));
+
+  });
+
+
   describe('#addShape', function() {
 
     beforeEach(function() {

test/spec/navigation/movecanvas/MoveCanvasSpec.js

@@ -153,6 +153,69 @@ describe('navigation/movecanvas', function() {
 
   });
 
+
+  describe('integration - canvas focus', function() {
+
+    beforeEach(bootstrapDiagram({
+      modules: [
+        moveCanvasModule,
+        interactionEventsModule
+      ]
+    }));
+
+    beforeEach(inject(function(canvas) {
+
+      canvas.addShape({
+        id: 'test',
+        width: 100,
+        height: 100,
+        x: 100,
+        y: 100
+      });
+    }));
+
+
+    it('should not activate if canvas focus is prevented', inject(
+      function(eventBus, canvas, moveCanvas) {
+
+        // given
+        var rootElement = canvas.getRootElement();
+
+        // forcefully disable <mousedown> action
+        eventBus.on('element.mousedown', 1500, event => {
+          return false;
+        });
+
+        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, implicitly focussing canvas', inject(
+      function(eventBus, canvas, moveCanvas) {
+
+        // given
+        var rootElement = canvas.getRootElement();
+
+        // when
+        eventBus.fire(mouseDownEvent(rootElement, { clientX: 0, clientY: 0 }));
+
+        // and
+        document.dispatchEvent(createMouseEvent(200, 100, 'mousemove'));
+
+        // then
+        expect(moveCanvas.isActive()).to.be.true;
+      }
+    ));
+
+  });
+
 });