add supportedButtons option

package.json

@@ -1,6 +1,6 @@
 {
   "name": "contactjs",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Pointer gestures for your webapp",
   "main": "dist/index.js",
   "module": "dist/contact.js",

src/gestures/Gesture.ts

@@ -33,6 +33,7 @@ export interface GestureOptions {
   blocks: Gesture[];
   bubbles: boolean;
   supportedDirections: string[];
+  supportedButtons: number[];
 }
 
 export interface GlobalGestureEventData {
@@ -107,6 +108,7 @@ export abstract class Gesture {
       bubbles: true,
       blocks: [],
       supportedDirections: [],
+      supportedButtons: [],
       DEBUG: false,
       ...options
     };

src/gestures/SinglePointerGesture.ts

@@ -13,6 +13,8 @@ import { Vector } from "../geometry/Vector";
 import { SinglePointerInput } from "../SinglePointerInput";
 import { PointerManager } from "../PointerManager";
 
+
+
 export abstract class SinglePointerGesture extends Gesture {
 
   initialPointerEvent: PointerEvent | null;
@@ -22,6 +24,7 @@ export abstract class SinglePointerGesture extends Gesture {
 
   constructor(domElement: HTMLElement, options?: Partial<GestureOptions>) {
     super(domElement, options);
+
     this.initialPointerEvent = null;
     this.validPointerManagerState = PointerManagerState.SinglePointer;
 
@@ -111,4 +114,45 @@ export abstract class SinglePointerGesture extends Gesture {
     return eventData;
   }
 
+  validateButton(pointerManager: PointerManager): boolean {
+
+    if (this.options.supportedButtons.length > 0){
+
+      const activePointerInput = pointerManager.activePointerInput;
+      const lastRemovedPointer = pointerManager.lastRemovedPointer;
+
+      let pointerEvent = null;
+
+      if (activePointerInput != null) {
+        pointerEvent = activePointerInput.getCurrentPointerEvent();
+      }
+      else if (lastRemovedPointer != null) {
+        pointerEvent = lastRemovedPointer.currentPointerEvent;
+      }
+
+      if (pointerEvent != null && pointerEvent.pointerType == "mouse" && this.options.supportedButtons.indexOf(pointerEvent.buttons) == -1) {
+
+        if (this.DEBUG == true) {
+          console.log(
+            `dismissing ${this.eventBaseName}: supportedButtons: ${this.options.supportedButtons.toString()}, poinerEvent.buttons: ${pointerEvent.buttons}`
+          );
+        }
+
+        return false;
+      }
+
+    }
+
+    return true;
+  }
+
+  validate(pointerManager: PointerManager): boolean {
+    let isValid = this.validateButton(pointerManager);
+
+    if (isValid == true) {
+      isValid = super.validate(pointerManager);
+    }
+    return isValid;
+  }
+
 }

src/gestures/Tap.ts

@@ -48,6 +48,32 @@ export class Tap extends SinglePointerGesture {
 
   }
 
+  validateButton(pointerManager: PointerManager): boolean {
+
+    if (this.options.supportedButtons.length > 0){
+
+      const lastRemovedPointer = pointerManager.lastRemovedPointer;
+
+      if (lastRemovedPointer != null) {
+        const pointerEvent = lastRemovedPointer.currentPointerEvent;
+
+        // pointerEvent.button instead of pointerEvent.buttons
+        if (pointerEvent.pointerType == "mouse" && this.options.supportedButtons.indexOf(pointerEvent.button) == -1) {
+
+          if (this.DEBUG == true) {
+            console.log(
+              `dismissing ${this.eventBaseName}: supportedButtons: ${this.options.supportedButtons.toString()}, poinerEvent.button: ${pointerEvent.button}`
+            );
+          }
+
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+
   validate(pointerManager: PointerManager): boolean {
 
     let isValid = this.validateGestureState();
@@ -56,6 +82,10 @@ export class Tap extends SinglePointerGesture {
       isValid = this.validatePointerManagerState(pointerManager);
     }
 
+    if (isValid == true){
+      isValid = this.validateButton(pointerManager);
+    }
+
     if (isValid === true) {
 
       if (pointerManager.lastInputSessionPointerCount != 1) {

tests/buttons/test.css

@@ -0,0 +1,62 @@
+html, body {
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.container {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.h-80 {
+	height: 80%;
+}
+
+
+.screen {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	perspective: 500px;
+	/*border: 10px solid black;
+	border-radius: .5em;
+	background: #FFFFFF;*/
+}
+
+#rectangle {
+	width: 200px;
+	height:  200px;
+	background: #FFDEFA;
+	cursor: pointer;
+	touch-action: none;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+	transform-origin:center;
+}
+
+.recognition-output {
+	font-size: 1rem;
+}
+
+.recognition-output article {
+	font-weight: bold;
+	width: 120px;
+}
+
+.recognition-output > div {
+	flex-grow: 1;
+	max-width: 250px;
+}
+
+.animate {
+	transition: all 0.3s;
+}

tests/buttons/test.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Contact Test</title>
+
+		<link rel="stylesheet" href="test.css">
+
+	</head>
+	<body>
+		<div class="container recognition-output" style="background:ivory">
+			<article></article>
+			<div>
+				Tap: <span id="tap-output"></span>
+			</div>
+			<div>
+				Press: <span id="press-output"></span>
+			</div>
+			<div>
+				Pan: <span id="pan-output"></span>
+			</div>
+			<div>
+				Swipe: <span id="swipe-output"></span>
+			</div>
+		</div>
+		<div class="container recognition-output" style="background:lemonchiffon">
+			<article></article>
+			<div>
+				Twofingerpan: <span id="twofingerpan-output"></span>
+			</div>
+			<div>
+				Rotate: <span id="rotate-output"></span>
+			</div>
+			<div>
+				Pinch: <span id="pinch-output"></span>
+			</div>
+		</div>
+		<div class="container recognition-output" style="background:blanchedalmond">
+			<article style="padding-right:4rem;">Global values</article>
+			<div>
+				∆X: <span id="deltaX-global"></span>
+			</div>
+			<div>
+				∆Y: <span id="deltaY-global"></span>
+			</div>
+			<div>
+				direction: <span id="direction-global"></span>
+			</div>
+		</div>
+		<div class="container recognition-output" style="background:bisque">
+			<article style="padding-right:4rem;">Live values</article>
+			<div>
+				∆X: <span id="deltaX-live"></span>
+			</div>
+			<div>
+				∆Y: <span id="deltaY-live"></span>
+			</div>
+			<div>
+				direction: <span id="direction-live"></span>
+			</div>
+		</div>
+		<div class="container h-80">
+			<div class="screen">
+
+				<div id="rectangle"></div>
+			</div>
+		</div>
+
+		<script type="module" src="test.js"></script>
+	</body>
+</html>
+