feat: add inputKey option to PanInput and WheelInput

packages/axes/src/const.ts

@@ -15,6 +15,8 @@ export const MOUSE_LEFT = "left";
 export const MOUSE_RIGHT = "right";
 export const MOUSE_MIDDLE = "middle";
 
+export const ANY = "any";
+export const NONE = "none";
 export const SHIFT = "shift";
 export const CTRL = "ctrl";
 export const ALT = "alt";

packages/axes/src/eventInput/EventInput.ts

@@ -7,11 +7,13 @@ import { getAngle } from "../utils";
 import { window } from "../browser";
 import {
   ALT,
+  ANY,
   CTRL,
   META,
   MOUSE_LEFT,
   MOUSE_MIDDLE,
   MOUSE_RIGHT,
+  NONE,
   SHIFT,
   VELOCITY_INTERVAL,
 } from "../const";
@@ -27,11 +29,16 @@ export const isValidKey = (
 ): boolean => {
   if (
     !inputKey ||
-    !inputKey.length ||
-    (inputKey.indexOf(SHIFT) > -1 && event.shiftKey === true) ||
-    (inputKey.indexOf(CTRL) > -1 && event.ctrlKey === true) ||
-    (inputKey.indexOf(ALT) > -1 && event.altKey === true) ||
-    (inputKey.indexOf(META) > -1 && event.metaKey === true)
+    inputKey.indexOf(ANY) > -1 ||
+    (inputKey.indexOf(NONE) > -1 &&
+      !event.shiftKey &&
+      !event.ctrlKey &&
+      !event.altKey &&
+      !event.metaKey) ||
+    (inputKey.indexOf(SHIFT) > -1 && event.shiftKey) ||
+    (inputKey.indexOf(CTRL) > -1 && event.ctrlKey) ||
+    (inputKey.indexOf(ALT) > -1 && event.altKey) ||
+    (inputKey.indexOf(META) > -1 && event.metaKey)
   ) {
     return true;
   }

packages/axes/src/inputType/PanInput.ts

@@ -19,6 +19,7 @@ import {
   DIRECTION_VERTICAL,
   DIRECTION_HORIZONTAL,
   MOUSE_LEFT,
+  ANY,
 } from "../const";
 import { ActiveEvent, ElementType, InputEventType } from "../types";
 
@@ -67,15 +68,19 @@ export const getDirectionByAngle = (
  * - touch: 터치 입력 장치
  * - mouse: 마우스
  * - pointer: 마우스 및 터치</ko>
- * @param {String[]} [inputKey=[]] Allow input only when one of these keys is pressed. If the array is empty, it accepts all keys with case of no key is pressed.
+ * @param {String[]} [inputKey=["any"]] List of key combinations to allow input
+ * - any: any key
  * - shift: shift key
- * - ctrl: ctrl key
+ * - ctrl: ctrl key and pinch gesture on the trackpad
  * - alt: alt key
- * - meta: meta key <ko>이 중 하나의 키가 눌린 상태에서만 입력이 허용된다. 배열이 비었다면 아무 키도 눌리지 않은 상태와 모든 키가 눌린 상태 모두 허용한다.
+ * - meta: meta key
+ * - none: none of these keys are pressed <ko>입력을 허용할 키 조합 목록
+ * - any: 아무 키
  * - shift: shift 키
- * - ctrl: ctrl 키
+ * - ctrl: ctrl 키 및 트랙패드의 pinch 제스쳐
  * - alt: alt 키
- * - meta: meta 키 </ko>
+ * - meta: meta 키
+ * - none: 아무 키도 눌리지 않은 상태 </ko>
  * @param {String[]} [inputButton=["left"]] List of buttons to allow input
  * - left: Left mouse button and normal touch
  * - middle: Mouse wheel press
@@ -137,7 +142,7 @@ export class PanInput implements InputType {
     this.element = $(el);
     this.options = {
       inputType: ["touch", "mouse", "pointer"],
-      inputKey: [],
+      inputKey: [ANY],
       inputButton: [MOUSE_LEFT],
       scale: [1, 1],
       thresholdAngle: 45,

packages/axes/src/inputType/WheelInput.ts

@@ -203,9 +203,7 @@ export class WheelInput implements InputType {
       throw new Error("Element to connect input does not exist.");
     }
     this._observer = observer;
-    element.addEventListener("wheel", this._onWheel, {
-      passive: true,
-    });
+    element.addEventListener("wheel", this._onWheel);
     this._enabled = true;
   }
 

packages/axes/test/unit/inputType/PanInput.spec.js

@@ -457,7 +457,7 @@ describe("PanInput", () => {
 
     describe("inputButton", () => {
       ["left", "middle", "right"].forEach((button) => {
-        it("should check only the button set in inputButton is available", (done) => {
+        it("should trigger event when the button set in inputButton matches", (done) => {
           // Given
           const hold = sinon.spy();
           const change = sinon.spy();
@@ -491,6 +491,40 @@ describe("PanInput", () => {
           );
         });
       });
+
+			it("should not trigger event when the inputButton is empty", (done) => {
+				// Given
+				const hold = sinon.spy();
+				const change = sinon.spy();
+				const release = sinon.spy();
+				input = new PanInput(el, {
+					inputType: ["touch", "mouse"],
+					inputButton: [],
+				});
+				inst.connect(["x", "y"], input);
+				inst.on("hold", hold);
+				inst.on("change", change);
+				inst.on("release", release);
+
+				// When
+				Simulator.gestures.pan(
+					el,
+					{
+						pos: [0, 0],
+						deltaX: 50,
+						deltaY: 50,
+						duration: 200,
+						easing: "linear",
+					},
+					() => {
+						// Then
+						expect(hold.called).to.be.equals(false);
+						expect(change.called).to.be.equals(false);
+						expect(release.called).to.be.equals(false);
+						done();
+					}
+				);
+			});
     });
 
     describe("touchAction", () => {

packages/demo/src/pages/Options.mdx

@@ -313,7 +313,7 @@ Whether the event propagates to other instances when the coordinates reach the e
   nested: true
   ```
   </div>
-    <AxesBoard options={{ nested: true }} setNested={true}/>
+    <AxesBoard options={{ nested: true }} demoType={"nested"}/>
   </div>
 </div>
 
@@ -369,6 +369,34 @@ Types of input devices.
   </div>
 </div>
 
+### inputKey
+Allow input only when one of these keys is pressed. If the array is empty, it accepts all keys with case of no key is pressed.
+ - shift: shift key
+ - ctrl: ctrl key
+ - alt: alt key
+ - meta: meta key
+
+<div className="columns">
+  <div className="column is-6">
+  <div>
+
+  ```js
+  inputKey: []
+  ```
+  </div>
+    <AxesBoard panInputOptions={{ inputKey: [] }}/>
+  </div>
+  <div className="column is-6">
+  <div>
+
+  ```js
+  inputKey: ["ctrl"]
+  ```
+  </div>
+    <AxesBoard panInputOptions={{ inputKey: ["ctrl"] }}/>
+  </div>
+</div>
+
 ### inputButton
 List of buttons to allow input.
 - left: Left mouse button and normal touch
@@ -440,10 +468,34 @@ Minimal pan distance required before recognizing.
   <div>
 
   ```js
-  threshold: 5
+  threshold: 30
+  ```
+  </div>
+    <AxesBoard panInputOptions={{ threshold: 30 }}/>
+  </div>
+</div>
+
+### preventClickOnDrag
+Whether to cancel the click event when the user finishes dragging more than 1 pixel.
+
+<div className="columns">
+  <div className="column is-6">
+  <div>
+
+  ```js
+  preventClickOnDrag: false
+  ```
+  </div>
+    <AxesBoard panInputOptions={{ preventClickOnDrag: false }} demoType={"preventClickOnDrag"}/>
+  </div>
+  <div className="column is-6">
+  <div>
+
+  ```js
+  preventClickOnDrag: true
   ```
   </div>
-    <AxesBoard panInputOptions={{ threshold: 5 }}/>
+    <AxesBoard panInputOptions={{ preventClickOnDrag: true }} demoType={"preventClickOnDrag"}/>
   </div>
 </div>
 

packages/demo/src/pages/demos/axesboard.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { useAxes, PanInput, MoveKeyInput, PinchInput, WheelInput } from "@egjs/react-axes";
 import "../../css/demos/axesboard.css";
 
-export default function AxesBoard({ axis, setNested, options, panInputOptions, pinchInputOptions, moveKeyInputOptions, wheelInputOptions }) {
+export default function AxesBoard({ axis, demoType, options, panInputOptions, pinchInputOptions, moveKeyInputOptions, wheelInputOptions }) {
   const board = useRef<HTMLDivElement>(null);
   const innerBoard = useRef<HTMLDivElement>(null);
   const target = useRef<HTMLDivElement>(null);
@@ -27,7 +27,7 @@ export default function AxesBoard({ axis, setNested, options, panInputOptions, p
     {
       round: 0.1,
       ...options,
-      nested: !!setNested,
+      nested: !!(demoType === "nested"),
     },
   );
 
@@ -47,6 +47,12 @@ export default function AxesBoard({ axis, setNested, options, panInputOptions, p
     },
   );
 
+  const onClick = () => {
+    if (demoType === "preventClickOnDrag") {
+      window.open("https://www.naver.com/");
+    }
+  };
+
   useEffect(() => {
     const isNested = options?.nested;
     const boardWidth = board.current.getBoundingClientRect().width;
@@ -121,6 +127,7 @@ export default function AxesBoard({ axis, setNested, options, panInputOptions, p
       <div className="nestedboard" ref={innerBoard} style={{ transform: `translate3d(${nested.innerX}px, ${nested.innerY}px, 0)`}}>
         <div className="target" ref={target} style={{ transform: `translate3d(${x}px, ${y}px, 0) scale(${zoom / 100})`}}>
           <img
+            draggable="false"
             className="egjsicon"
             src={
               require(`@site/static/img/favicon.ico`)
@@ -133,8 +140,9 @@ export default function AxesBoard({ axis, setNested, options, panInputOptions, p
     </div>) : (
     <div className="board" ref={board}>
       <div className="info">x: {x} y: {y}</div>
-      <div className="target" ref={target} style={{ transform: `translate3d(${x}px, ${y}px, 0) scale(${zoom / 100})` }}>
+      <div className="target" ref={target} style={{ transform: `translate3d(${x}px, ${y}px, 0) scale(${zoom / 100})` }} onClick={() => { onClick(); }}>
         <img
+          draggable="false"
           className="egjsicon"
           src={
             require(`@site/static/img/favicon.ico`)