feat(movecanvas): allow navigation on auxiliary button mousedown

bpmn-io · Dec 16, 2020 · 138161d · 138161d
1 parent 08fa2c5
commit 138161d
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 5 deletions.
diff --git a/lib/navigation/movecanvas/MoveCanvas.js b/lib/navigation/movecanvas/MoveCanvas.js
@@ -92,9 +92,8 @@ export default function MoveCanvas(eventBus, canvas) {
       return;
     }
 
-
-    // reject non-left left mouse button or modifier key
-    if (event.button || event.ctrlKey || event.shiftKey || event.altKey) {
+    // reject right mouse button or modifier key
+    if (event.button >= 2 || event.ctrlKey || event.shiftKey || event.altKey) {
       return;
     }
 

diff --git a/test/spec/navigation/movecanvas/MoveCanvasSpec.js b/test/spec/navigation/movecanvas/MoveCanvasSpec.js
@@ -1,8 +1,13 @@
 import {
   bootstrapDiagram,
+  getDiagramJS,
   inject
 } from 'test/TestHelper';
 
+import {
+  assign
+} from 'min-dash';
+
 import moveCanvasModule from 'lib/navigation/movecanvas';
 import interactionEventsModule from 'lib/features/interaction-events';
 
@@ -11,7 +16,11 @@ describe('navigation/movecanvas', function() {
 
   describe('bootstrap', function() {
 
-    beforeEach(bootstrapDiagram({ modules: [ moveCanvasModule ] }));
+    beforeEach(bootstrapDiagram({
+      modules: [
+        moveCanvasModule
+      ]
+    }));
 
 
     it('should bootstrap', inject(function(moveCanvas, canvas) {
@@ -30,9 +39,61 @@ describe('navigation/movecanvas', function() {
   });
 
 
+  describe('activate on mouse', function() {
+
+    var rootElement;
+
+    beforeEach(bootstrapDiagram({
+      modules: [
+        moveCanvasModule
+      ]
+    }));
+
+    beforeEach(inject(function(canvas) {
+      rootElement = canvas.getRootElement();
+    }));
+
+
+    it('should start on PRIMARY mousedown', inject(function(eventBus) {
+
+      // when
+      var started = eventBus.fire(mouseDownEvent(rootElement));
+
+      // then
+      expect(started).to.be.true;
+    }));
+
+
+    it('should start on AUXILIARY mousedown', inject(function(eventBus) {
+
+      // when
+      var started = eventBus.fire(mouseDownEvent(rootElement, { button: 1 }));
+
+      // then
+      expect(started).to.be.true;
+    }));
+
+
+    it('should NOT start on mousedown with modifier key', inject(function(eventBus) {
+
+      // when
+      var started = eventBus.fire(mouseDownEvent(rootElement, { ctrlKey: true }));
+
+      // then
+      expect(started).to.be.undefined;
+    }));
+
+  });
+
+
   describe('integration', function() {
 
-    beforeEach(bootstrapDiagram({ modules: [ moveCanvasModule, interactionEventsModule ] }));
+    beforeEach(bootstrapDiagram({
+      modules: [
+        moveCanvasModule,
+        interactionEventsModule
+      ]
+    }));
 
 
     it('should silence click', inject(function(eventBus, moveCanvas, canvas) {
@@ -55,3 +116,20 @@ describe('navigation/movecanvas', function() {
   });
 
 });
+
+
+// helpers ////////////////
+
+function mouseDownEvent(element, data) {
+
+  return getDiagramJS().invoke(function(eventBus, elementRegistry) {
+    return eventBus.createEvent({
+      type: 'element.mousedown',
+      element: element,
+      originalEvent: assign({
+        button: 0,
+        target: elementRegistry.getGraphics(element)
+      }, data || {})
+    });
+  });
+}