feat: add inputKey option to PanInput and WheelInput

packages/axes/src/const.ts

@@ -15,6 +15,11 @@ export const MOUSE_LEFT = "left";
 export const MOUSE_RIGHT = "right";
 export const MOUSE_MIDDLE = "middle";
 
+export const SHIFT = "shift";
+export const CTRL = "ctrl";
+export const ALT = "alt";
+export const META = "meta";
+
 export const VELOCITY_INTERVAL = 16;
 
 export const AXES_METHODS = [

packages/axes/src/eventInput/EventInput.ts

@@ -6,9 +6,13 @@ import { ExtendedEvent, InputEventType, LatestInterval } from "../types";
 import { getAngle } from "../utils";
 import { window } from "../browser";
 import {
+  ALT,
+  CTRL,
+  META,
   MOUSE_LEFT,
   MOUSE_MIDDLE,
   MOUSE_RIGHT,
+  SHIFT,
   VELOCITY_INTERVAL,
 } from "../const";
 
@@ -17,6 +21,23 @@ export const SUPPORT_POINTER = "PointerEvent" in window;
 export const SUPPORT_MSPOINTER = "MSPointerEvent" in window;
 export const SUPPORT_POINTER_EVENTS = SUPPORT_POINTER || SUPPORT_MSPOINTER;
 
+export const isValidKey = (
+  event: InputEventType | WheelEvent,
+  inputKey?: string[]
+): 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)
+  ) {
+    return true;
+  }
+  return false;
+};
+
 export abstract class EventInput {
   public prevEvent: ExtendedEvent;
   private _latestInterval: LatestInterval;
@@ -35,7 +56,11 @@ export abstract class EventInput {
 
   public abstract onRelease(event: InputEventType): void;
 
-  public abstract getTouches(event: InputEventType, inputButton?: string[]): number;
+  public abstract getTouches(
+    event: InputEventType,
+    inputKey?: string[],
+    inputButton?: string[]
+  ): number;
 
   protected abstract _getScale(event: InputEventType): number;
 
@@ -112,13 +137,24 @@ export abstract class EventInput {
   }
 
   protected _isTouchEvent(event: InputEventType): event is TouchEvent {
-    return event.type.indexOf("touch") > -1;
+    return event.type && event.type.indexOf("touch") > -1;
   }
 
   protected _isValidButton(button: string, inputButton: string[]): boolean {
     return inputButton.indexOf(button) > -1;
   }
 
+  protected _isValidEvent(
+    event: InputEventType,
+    inputKey?: string[],
+    inputButton?: string[]
+  ): boolean {
+    return (
+      (!inputKey || isValidKey(event, inputKey)) &&
+      (!inputButton || this._isValidButton(this._getButton(event), inputButton))
+    );
+  }
+
   protected _preventMouseButton(event: InputEventType, button: string): void {
     if (button === MOUSE_RIGHT) {
       window.addEventListener("contextmenu", this._stopContextMenu);

packages/axes/src/eventInput/MouseEventInput.ts

@@ -14,10 +14,11 @@ export class MouseEventInput extends EventInput {
 
   public onEventStart(
     event: InputEventType,
+    inputKey?: string[],
     inputButton?: string[]
   ): ExtendedEvent {
     const button = this._getButton(event);
-    if (inputButton && !this._isValidButton(button, inputButton)) {
+    if (!this._isValidEvent(event, inputKey, inputButton)) {
       return null;
     }
     this._preventMouseButton(event, button);
@@ -26,12 +27,10 @@ export class MouseEventInput extends EventInput {
 
   public onEventMove(
     event: InputEventType,
+    inputKey?: string[],
     inputButton?: string[]
   ): ExtendedEvent {
-    if (
-      inputButton &&
-      !this._isValidButton(this._getButton(event), inputButton)
-    ) {
+    if (!this._isValidEvent(event, inputKey, inputButton)) {
       return null;
     }
     return this.extendEvent(event);

packages/axes/src/eventInput/PointerEventInput.ts

@@ -19,10 +19,11 @@ export class PointerEventInput extends EventInput {
 
   public onEventStart(
     event: InputEventType,
+    inputKey?: string[],
     inputButton?: string[]
   ): ExtendedEvent {
     const button = this._getButton(event);
-    if (inputButton && !this._isValidButton(button, inputButton)) {
+    if (!this._isValidEvent(event, inputKey, inputButton)) {
       return null;
     }
     this._preventMouseButton(event, button);
@@ -32,12 +33,10 @@ export class PointerEventInput extends EventInput {
 
   public onEventMove(
     event: InputEventType,
+    inputKey?: string[],
     inputButton?: string[]
   ): ExtendedEvent {
-    if (
-      inputButton &&
-      !this._isValidButton(this._getButton(event), inputButton)
-    ) {
+    if (!this._isValidEvent(event, inputKey, inputButton)) {
       return null;
     }
     this._updatePointerEvent(event as PointerEvent);

packages/axes/src/eventInput/TouchEventInput.ts

@@ -13,12 +13,24 @@ export class TouchEventInput extends EventInput {
 
   private _baseTouches: TouchList;
 
-  public onEventStart(event: InputEventType): ExtendedEvent {
+  public onEventStart(
+    event: InputEventType,
+    inputKey?: string[]
+  ): ExtendedEvent {
     this._baseTouches = (event as TouchEvent).touches;
+    if (!this._isValidEvent(event, inputKey)) {
+      return null;
+    }
     return this.extendEvent(event);
   }
 
-  public onEventMove(event: InputEventType): ExtendedEvent {
+  public onEventMove(
+    event: InputEventType,
+    inputKey?: string[]
+  ): ExtendedEvent {
+    if (!this._isValidEvent(event, inputKey)) {
+      return null;
+    }
     return this.extendEvent(event);
   }
 

packages/axes/src/eventInput/TouchMouseEventInput.ts

@@ -15,13 +15,14 @@ export class TouchMouseEventInput extends EventInput {
 
   public onEventStart(
     event: InputEventType,
+    inputKey?: string[],
     inputButton?: string[]
   ): ExtendedEvent {
     const button = this._getButton(event);
     if (this._isTouchEvent(event)) {
       this._baseTouches = event.touches;
     }
-    if (inputButton && !this._isValidButton(button, inputButton)) {
+    if (!this._isValidEvent(event, inputKey, inputButton)) {
       return null;
     }
     this._preventMouseButton(event, button);
@@ -30,12 +31,10 @@ export class TouchMouseEventInput extends EventInput {
 
   public onEventMove(
     event: InputEventType,
+    inputKey?: string[],
     inputButton?: string[]
   ): ExtendedEvent {
-    if (
-      inputButton &&
-      !this._isValidButton(this._getButton(event), inputButton)
-    ) {
+    if (!this._isValidEvent(event, inputKey, inputButton)) {
       return null;
     }
     return this.extendEvent(event);

packages/axes/src/inputType/PanInput.ts

@@ -31,6 +31,7 @@ import {
 
 export interface PanInputOption {
   inputType?: string[];
+  inputKey?: string[];
   inputButton?: string[];
   scale?: number[];
   thresholdAngle?: number;
@@ -66,6 +67,15 @@ 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.
+ * - shift: shift key
+ * - ctrl: ctrl key
+ * - alt: alt key
+ * - meta: meta key <ko>이 중 하나의 키가 눌린 상태에서만 입력이 허용된다. 배열이 비었다면 아무 키도 눌리지 않은 상태와 모든 키가 눌린 상태 모두 허용한다.
+ * - shift: shift 키
+ * - ctrl: ctrl 키
+ * - alt: alt 키
+ * - meta: meta 키 </ko>
  * @param {String[]} [inputButton=["left"]] List of buttons to allow input
  * - left: Left mouse button and normal touch
  * - middle: Mouse wheel press
@@ -127,6 +137,7 @@ export class PanInput implements InputType {
     this.element = $(el);
     this.options = {
       inputType: ["touch", "mouse", "pointer"],
+      inputKey: [],
       inputButton: [MOUSE_LEFT],
       scale: [1, 1],
       thresholdAngle: 45,
@@ -224,10 +235,14 @@ export class PanInput implements InputType {
   }
 
   protected _onPanstart(event: InputEventType) {
-    const inputButton = this.options.inputButton;
+    const { inputKey, inputButton } = this.options;
     const activeEvent = this._activeEvent;
-    const panEvent = activeEvent.onEventStart(event, inputButton);
-    if (!panEvent || !this._enabled || activeEvent.getTouches(event, inputButton) > 1) {
+    const panEvent = activeEvent.onEventStart(event, inputKey, inputButton);
+    if (
+      !panEvent ||
+      !this._enabled ||
+      activeEvent.getTouches(event, inputButton) > 1
+    ) {
       return;
     }
     if (panEvent.srcEvent.cancelable !== false) {
@@ -247,12 +262,13 @@ export class PanInput implements InputType {
     const {
       iOSEdgeSwipeThreshold,
       releaseOnScroll,
+      inputKey,
       inputButton,
       threshold,
       thresholdAngle,
     } = this.options;
     const activeEvent = this._activeEvent;
-    const panEvent = activeEvent.onEventMove(event, inputButton);
+    const panEvent = activeEvent.onEventMove(event, inputKey, inputButton);
     const touches = activeEvent.getTouches(event, inputButton);
 
     if (

packages/axes/src/inputType/RotatePanInput.ts

@@ -52,8 +52,9 @@ export class RotatePanInput extends PanInput {
   }
 
   protected _onPanstart(event: MouseEvent) {
+    const { inputKey, inputButton } = this.options;
     const activeEvent = this._activeEvent;
-    const panEvent = activeEvent.onEventStart(event, this.options.inputButton);
+    const panEvent = activeEvent.onEventStart(event, inputKey, inputButton);
     if (!panEvent || !this.isEnabled()) {
       return;
     }
@@ -78,8 +79,9 @@ export class RotatePanInput extends PanInput {
   }
 
   protected _onPanmove(event: MouseEvent) {
+    const { inputKey, inputButton } = this.options;
     const activeEvent = this._activeEvent;
-    const panEvent = activeEvent.onEventMove(event, this.options.inputButton);
+    const panEvent = activeEvent.onEventMove(event, inputKey, inputButton);
     if (!panEvent || !this.isEnabled()) {
       return;
     }

packages/axes/src/inputType/WheelInput.ts

@@ -7,8 +7,10 @@ import { DIRECTION_HORIZONTAL, DIRECTION_VERTICAL } from "../const";
 import { ElementType } from "../types";
 
 import { toAxis, InputType, InputTypeObserver } from "./InputType";
+import { isValidKey } from "../eventInput/EventInput";
 
 export interface WheelInputOption {
+  inputKey?: string[];
   scale?: number;
   releaseDelay?: number;
   useNormalized?: boolean;
@@ -18,6 +20,15 @@ export interface WheelInputOption {
 /**
  * @typedef {Object} WheelInputOption The option object of the eg.Axes.WheelInput module
  * @ko eg.Axes.WheelInput 모듈의 옵션 객체
+ * @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.
+ * - shift: shift key
+ * - ctrl: ctrl key
+ * - alt: alt key
+ * - meta: meta key <ko>이 중 하나의 키가 눌린 상태에서만 입력이 허용된다. 배열이 비었다면 아무 키도 눌리지 않은 상태와 모든 키가 눌린 상태 모두 허용한다.
+ * - shift: shift 키
+ * - ctrl: ctrl 키
+ * - alt: alt 키
+ * - meta: meta 키 </ko>
  * @param {Number} [scale=1] Coordinate scale that a user can move<ko>사용자의 동작으로 이동하는 좌표의 배율</ko>
  * @param {Number} [releaseDelay=300] Millisecond that trigger release event after last input<ko>마지막 입력 이후 release 이벤트가 트리거되기까지의 밀리초</ko>
  * @param {Boolean} [useNormalized=true] Whether to calculate scroll speed the same in all browsers<ko>모든 브라우저에서 스크롤 속도를 동일하게 처리할지 여부</ko>
@@ -64,6 +75,7 @@ export class WheelInput implements InputType {
     this.element = $(el);
     this.options = {
       ...{
+        inputKey: [],
         scale: 1,
         releaseDelay: 300,
         useNormalized: true,
@@ -130,7 +142,7 @@ export class WheelInput implements InputType {
   }
 
   private _onWheel(event: WheelEvent) {
-    if (!this._enabled) {
+    if (!this._enabled || !isValidKey(event, this.options.inputKey)) {
       return;
     }
 

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

@@ -419,6 +419,42 @@ describe("PanInput", () => {
       });
     });
 
+    describe("inputKey", () => {
+      it("should not trigger events when the key set in inputKey is not pressed", (done) => {
+        // Given
+        const hold = sinon.spy();
+        const change = sinon.spy();
+        const release = sinon.spy();
+        input = new PanInput(el, {
+          inputType: ["touch", "mouse"],
+          inputKey: ["shift"],
+        });
+        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("inputButton", () => {
       ["left", "middle", "right"].forEach((button) => {
         it("should check only the button set in inputButton is available", (done) => {

packages/axes/test/unit/inputType/TestHelper.js

@@ -1,11 +1,9 @@
 export default class TestHelper {
-  static dispatchWheel(target, direction, value, callback) {
+  static dispatchWheel(target, params, callback) {
     if (target instanceof Element === false) {
       return;
     }
 
-    const params =
-      direction === "horizontal" ? { deltaX: value } : { deltaY: value };
     let wheelEvent;
 
     try {