configure what mouse buttons can be used for drag&drop

CHANGELOG.md

@@ -13,6 +13,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * Show a warning for incorrect value for `zIndex` property.
 * Show a warning when user is trying to reuse destroyed shape.
 * new publish method `measureSize(string)` for `Konva.Text`
+* You can configure what mouse buttons can be used for drag&drop. To enable right button you can use `Konva.dragButtons = [0, 1]`.
 
 ### Changed
 * Fixes inconsistent `layer.setSize()` method. Now it has same arguments as any container.

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v3.0.0-0
    * http://konvajs.github.io/
    * Licensed under the MIT
-   * Date: Wed Feb 13 2019
+   * Date: Thu Feb 14 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -4253,16 +4253,14 @@
           return !!(DD.node && DD.node === this && DD.isDragging);
       };
       Node.prototype._listenDrag = function () {
-          var that = this;
           this._dragCleanup();
           this.on('mousedown.konva touchstart.konva', function (evt) {
-              // ignore right and middle buttons
-              // TODO: should we add a global config for buttons?
-              if (evt.evt.button === 1 || evt.evt.button === 2) {
+              var canDrag = getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
+              if (!canDrag) {
                   return;
               }
               if (!DD.node) {
-                  that.startDrag();
+                  this.startDrag();
               }
           });
       };
@@ -6804,10 +6802,6 @@
       dummyContext = Util.createCanvasElement().getContext('2d');
       return dummyContext;
   }
-  // TODO: write a test for adding destroyed shape into the layer
-  // will it draw?
-  // will it pass hit test?
-  // show warning on adding destroyed shape?
   // TODO: idea - use only "remove" (or destroy method)
   // how? on add, check that every inner shape has reference in konva store with color
   // on remove - clear that reference
@@ -16953,6 +16947,17 @@
    * Konva.showWarnings = false;
    */
   var showWarnings = true;
+  /**
+   * Configure what mouse buttons can be used for drag and drop.
+   * Default value is [0] - only left mouse button.
+   * @property dragButtons
+   * @default true
+   * @memberof Konva
+   * @example
+   * // enable left and right mouse buttons
+   * Konva.dragButtons = [0, 2];
+   */
+  var dragButtons = [0, 1];
   /**
    * @namespace Filters
    * @memberof Konva
@@ -16988,6 +16993,7 @@
     dragDistance: dragDistance,
     angleDeg: angleDeg,
     showWarnings: showWarnings,
+    dragButtons: dragButtons,
     Filters: Filters,
     Collection: Collection,
     Util: Util,

src/Node.ts

@@ -2161,18 +2161,15 @@ export abstract class Node {
   }
 
   _listenDrag() {
-    var that = this;
-
     this._dragCleanup();
 
     this.on('mousedown.konva touchstart.konva', function(evt) {
-      // ignore right and middle buttons
-      // TODO: should we add a global config for buttons?
-      if (evt.evt.button === 1 || evt.evt.button === 2) {
+      var canDrag = getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
+      if (!canDrag) {
         return;
       }
       if (!DD.node) {
-        that.startDrag();
+        this.startDrag();
       }
     });
   }

src/Shape.ts

@@ -21,11 +21,6 @@ function getDummyContext() {
   return dummyContext;
 }
 
-// TODO: write a test for adding destroyed shape into the layer
-// will it draw?
-// will it pass hit test?
-// show warning on adding destroyed shape?
-
 // TODO: idea - use only "remove" (or destroy method)
 // how? on add, check that every inner shape has reference in konva store with color
 // on remove - clear that reference

src/internals.ts

@@ -65,6 +65,18 @@ export const angleDeg = true;
  */
 export const showWarnings = true;
 
+/**
+ * Configure what mouse buttons can be used for drag and drop.
+ * Default value is [0] - only left mouse button.
+ * @property dragButtons
+ * @default true
+ * @memberof Konva
+ * @example
+ * // enable left and right mouse buttons
+ * Konva.dragButtons = [0, 2];
+ */
+export const dragButtons = [0, 1];
+
 // export default KonvaInternals;
 
 // shapes

test/runner.js

@@ -247,7 +247,7 @@ Konva.Stage.prototype.simulateMouseDown = function(pos) {
   this._mousedown({
     clientX: pos.x,
     clientY: pos.y + top,
-    button: pos.button
+    button: pos.button || 0
   });
 };
 
@@ -257,7 +257,7 @@ Konva.Stage.prototype.simulateMouseMove = function(pos) {
   var evt = {
     clientX: pos.x,
     clientY: pos.y + top,
-    button: pos.button
+    button: pos.button || 0
   };
 
   this._mousemove(evt);
@@ -270,7 +270,7 @@ Konva.Stage.prototype.simulateMouseUp = function(pos) {
   var evt = {
     clientX: pos.x,
     clientY: pos.y + top,
-    button: pos.button
+    button: pos.button || 0
   };
 
   Konva.DD._endDragBefore(evt);

test/unit/DragAndDrop-test.js

@@ -112,11 +112,34 @@ suite('DragAndDrop', function() {
 
     assert(circle.isDragging() === false, 'no dragging with right click');
 
+    Konva.dragButtons = [0, 2];
     stage.simulateMouseUp({
       x: 291,
       y: 112,
       button: 2
     });
+
+    // simulate buttons change
+    stage.simulateMouseDown({
+      x: 291,
+      y: 112,
+      button: 2
+    });
+
+    stage.simulateMouseMove({
+      x: 311,
+      y: 112,
+      button: 2
+    });
+
+    assert(circle.isDragging() === true, 'no dragging with right click');
+
+    stage.simulateMouseUp({
+      x: 291,
+      y: 112,
+      button: 2
+    });
+    Konva.dragButtons = [0];
   });
 
   // ======================================================