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

If canvas for whatever reason is not focused, then movement does not
happen.

Related to #662

lib/navigation/movecanvas/MoveCanvas.js

@@ -38,12 +38,19 @@ export default function MoveCanvas(eventBus, canvas) {
 
   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);
+    }
   });
 
 

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