feat: add inputKey option to PanInput and WheelInput

packages/axes/package.json

@@ -78,7 +78,7 @@
 		"sinon": "^4.1.4",
 		"string-replace-webpack-plugin": "0.1.3",
 		"sync-exec": "^0.6.2",
-		"ts-loader": "^8.0.6",
+		"ts-loader": "8.0.6",
     "typescript": "^4.6.2",
 		"uglifyjs-webpack-plugin": "^1.1.6",
 		"webpack": "^3.10.0",

packages/axes/src/const.ts

@@ -15,6 +15,13 @@ 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";
+export const META = "meta";
+
 export const VELOCITY_INTERVAL = 16;
 
 export const AXES_METHODS = [

packages/axes/src/eventInput/EventInput.ts

@@ -6,9 +6,15 @@ import { ExtendedEvent, InputEventType, LatestInterval } from "../types";
 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";
 
@@ -17,6 +23,28 @@ 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.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;
+  }
+  return false;
+};
+
 export abstract class EventInput {
   public prevEvent: ExtendedEvent;
   private _latestInterval: LatestInterval;
@@ -35,7 +63,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 +144,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

@@ -19,6 +19,7 @@ import {
   DIRECTION_VERTICAL,
   DIRECTION_HORIZONTAL,
   MOUSE_LEFT,
+  ANY,
 } from "../const";
 import { ActiveEvent, ElementType, InputEventType } from "../types";
 
@@ -31,6 +32,7 @@ import {
 
 export interface PanInputOption {
   inputType?: string[];
+  inputKey?: string[];
   inputButton?: string[];
   scale?: number[];
   thresholdAngle?: number;
@@ -66,6 +68,19 @@ export const getDirectionByAngle = (
  * - touch: 터치 입력 장치
  * - mouse: 마우스
  * - pointer: 마우스 및 터치</ko>
+ * @param {String[]} [inputKey=["any"]] List of key combinations to allow input
+ * - any: any key
+ * - shift: shift key
+ * - ctrl: ctrl key and pinch gesture on the trackpad
+ * - alt: alt key
+ * - meta: meta key
+ * - none: none of these keys are pressed <ko>입력을 허용할 키 조합 목록
+ * - any: 아무 키
+ * - shift: shift 키
+ * - ctrl: ctrl 키 및 트랙패드의 pinch 제스쳐
+ * - alt: alt 키
+ * - 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
@@ -127,6 +142,7 @@ export class PanInput implements InputType {
     this.element = $(el);
     this.options = {
       inputType: ["touch", "mouse", "pointer"],
+      inputKey: [ANY],
       inputButton: [MOUSE_LEFT],
       scale: [1, 1],
       thresholdAngle: 45,
@@ -224,10 +240,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 +267,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

@@ -3,12 +3,14 @@
  * egjs projects are licensed under the MIT license
  */
 import { $, getDirection, useDirection } from "../utils";
-import { DIRECTION_HORIZONTAL, DIRECTION_VERTICAL } from "../const";
+import { ANY, 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,19 @@ export interface WheelInputOption {
 /**
  * @typedef {Object} WheelInputOption The option object of the eg.Axes.WheelInput module
  * @ko eg.Axes.WheelInput 모듈의 옵션 객체
+ * @param {String[]} [inputKey=["any"]] List of key combinations to allow input
+ * - any: any key
+ * - shift: shift key
+ * - ctrl: ctrl key and pinch gesture on the trackpad
+ * - alt: alt key
+ * - meta: meta key
+ * - none: none of these keys are pressed <ko>입력을 허용할 키 조합 목록
+ * - any: 아무 키
+ * - shift: shift 키
+ * - ctrl: ctrl 키 및 트랙패드의 pinch 제스쳐
+ * - alt: alt 키
+ * - meta: meta 키
+ * - none: 아무 키도 눌리지 않은 상태 </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>
@@ -63,12 +78,11 @@ export class WheelInput implements InputType {
   public constructor(el: ElementType, options?: WheelInputOption) {
     this.element = $(el);
     this.options = {
-      ...{
-        scale: 1,
-        releaseDelay: 300,
-        useNormalized: true,
-        useAnimation: false,
-      },
+      inputKey: [ANY],
+      scale: 1,
+      releaseDelay: 300,
+      useNormalized: true,
+      useAnimation: false,
       ...options,
     };
     this._onWheel = this._onWheel.bind(this);
@@ -130,7 +144,7 @@ export class WheelInput implements InputType {
   }
 
   private _onWheel(event: WheelEvent) {
-    if (!this._enabled) {
+    if (!this._enabled || !isValidKey(event, this.options.inputKey)) {
       return;
     }