From 99e847ddcee43e94b75cdebc91a3381547022b12 Mon Sep 17 00:00:00 2001 From: Seonghyun Ahn Date: Thu, 22 Jun 2023 10:09:28 +0900 Subject: [PATCH] fix: fix wrong getTouches at TouchMouseEventInput (#213) * fix: fix getTouches at TouchMouseEventInput * chore: add manual test * test: add eventInput unit test --- packages/axes/src/const.ts | 1 + .../axes/src/eventInput/MouseEventInput.ts | 5 +- .../src/eventInput/TouchMouseEventInput.ts | 12 ++- packages/axes/test/manual/cube.html | 97 +++++++++++++++++++ packages/axes/test/manual/js/cube.js | 30 ++++++ .../test/unit/inputType/InputType.spec.js | 71 ++++++++++++++ 6 files changed, 211 insertions(+), 5 deletions(-) create mode 100644 packages/axes/test/manual/cube.html create mode 100644 packages/axes/test/manual/js/cube.js diff --git a/packages/axes/src/const.ts b/packages/axes/src/const.ts index 016d3bbd..f884ff1f 100644 --- a/packages/axes/src/const.ts +++ b/packages/axes/src/const.ts @@ -14,6 +14,7 @@ export const DIRECTION_ALL = 2 | 4 | 8 | 16; export const MOUSE_LEFT = "left"; export const MOUSE_RIGHT = "right"; export const MOUSE_MIDDLE = "middle"; +export const MOUSE_BUTTON_CODE_MAP = { 1: MOUSE_LEFT, 2: MOUSE_MIDDLE, 3: MOUSE_RIGHT }; export const ANY = "any"; export const NONE = "none"; diff --git a/packages/axes/src/eventInput/MouseEventInput.ts b/packages/axes/src/eventInput/MouseEventInput.ts index 2a2f1f85..0ff961f2 100644 --- a/packages/axes/src/eventInput/MouseEventInput.ts +++ b/packages/axes/src/eventInput/MouseEventInput.ts @@ -3,7 +3,7 @@ * egjs projects are licensed under the MIT license */ import { InputEventType, ExtendedEvent } from "../types"; -import { MOUSE_LEFT, MOUSE_MIDDLE, MOUSE_RIGHT } from "../const"; +import { MOUSE_BUTTON_CODE_MAP } from "../const"; import { EventInput } from "./EventInput"; @@ -47,8 +47,7 @@ export class MouseEventInput extends EventInput { public getTouches(event: InputEventType, inputButton?: string[]): number { if (inputButton) { - const buttonCodeMap = { 1: MOUSE_LEFT, 2: MOUSE_MIDDLE, 3: MOUSE_RIGHT }; - return this._isValidButton(buttonCodeMap[event.which], inputButton) && + return this._isValidButton(MOUSE_BUTTON_CODE_MAP[event.which], inputButton) && this.end.indexOf(event.type) === -1 ? 1 : 0; diff --git a/packages/axes/src/eventInput/TouchMouseEventInput.ts b/packages/axes/src/eventInput/TouchMouseEventInput.ts index 8d888207..c2aa6ce6 100644 --- a/packages/axes/src/eventInput/TouchMouseEventInput.ts +++ b/packages/axes/src/eventInput/TouchMouseEventInput.ts @@ -3,6 +3,7 @@ * egjs projects are licensed under the MIT license */ import { InputEventType, ExtendedEvent } from "../types"; +import { MOUSE_BUTTON_CODE_MAP } from "../const"; import { EventInput } from "./EventInput"; @@ -53,8 +54,15 @@ export class TouchMouseEventInput extends EventInput { return; } - public getTouches(event: InputEventType): number { - return this._isTouchEvent(event) ? event.touches.length : 0; + public getTouches(event: InputEventType, inputButton?: string[]): number { + if (this._isTouchEvent(event)) { + return event.touches.length; + } else { + return this._isValidButton(MOUSE_BUTTON_CODE_MAP[event.which], inputButton) && + this.end.indexOf(event.type) === -1 + ? 1 + : 0; + } } protected _getScale(event: MouseEvent | TouchEvent): number { diff --git a/packages/axes/test/manual/cube.html b/packages/axes/test/manual/cube.html new file mode 100644 index 00000000..bf676e45 --- /dev/null +++ b/packages/axes/test/manual/cube.html @@ -0,0 +1,97 @@ + + + + +egjs-axes + + + + +
+

You can rotate the cube using two axes.

+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+
+ + + + diff --git a/packages/axes/test/manual/js/cube.js b/packages/axes/test/manual/js/cube.js new file mode 100644 index 00000000..809adc55 --- /dev/null +++ b/packages/axes/test/manual/js/cube.js @@ -0,0 +1,30 @@ +const box = document.getElementById("box"); + +// 1. Initialize eg.Axes +const axes = new eg.Axes({ + rotateX: { + range: [0, 360], + circular: true + }, + rotateY: { + range: [0, 360], + circular: true + } +}, { + deceleration: 0.0024 +}); + +// 2. attach event handler +axes.on("change", ({pos}) => { + box.style[eg.Axes.TRANSFORM] = + `rotateY(${pos.rotateX}deg) rotateX(${pos.rotateY}deg)`; +}); + +// 3. Initialize a inputType and connect it +axes.connect("rotateX rotateY", new eg.Axes.PanInput("#area")).connect("rotateX rotateY", new eg.Axes.MoveKeyInput("#area", {scale: [10, -10]})); + +// 4. move to position +axes.setTo({ + "rotateX": 40, + "rotateY": 315 +}, 100); diff --git a/packages/axes/test/unit/inputType/InputType.spec.js b/packages/axes/test/unit/inputType/InputType.spec.js index 57501962..77213ef0 100644 --- a/packages/axes/test/unit/inputType/InputType.spec.js +++ b/packages/axes/test/unit/inputType/InputType.spec.js @@ -1,11 +1,15 @@ +import Axes from "../../../src/Axes.ts"; import { MouseEventInput } from "../../../src/eventInput/MouseEventInput"; import { PointerEventInput } from "../../../src/eventInput/PointerEventInput"; import { TouchEventInput } from "../../../src/eventInput/TouchEventInput"; import { TouchMouseEventInput } from "../../../src/eventInput/TouchMouseEventInput"; +import { PanInput } from "../../../src/inputType/PanInput.ts"; import InputInjector from "inject-loader!../../../src/inputType/InputType"; import EventInjector from "inject-loader!../../../src/eventInput/EventInput"; +import TestHelper from "./TestHelper"; + describe("InputType", () => { describe("SUPPORT_TOUCH mocking", () => { it("should check convertInputType when supporting touch", () => { @@ -83,4 +87,71 @@ describe("InputType", () => { expect(MockInputInjector.convertInputType(inputType)).to.be.null; }); }); + + describe("eventInput", () => { + [["mouse"], ["touch"], ["touch", "mouse"]].forEach((inputType) => { + it(`should recognize the correct event contained in the inputType (inputType: ${inputType}, event: mouse)`, async () => { + // Given + const MockEventInjector = EventInjector(); + MockEventInjector.SUPPORT_TOUCH = true; + const change = sinon.spy(); + const el = sandbox(); + const input = new PanInput(el, { + inputType, + }); + const inst = new Axes( + { + x: { + range: [0, 100], + }, + } + ); + inst.connect("x", input); + inst.on("change", change); + + // When + await TestHelper.dispatchDrag( + el, + { left: 0, top: 0 }, + { left: 100, top: 0 }, + { duration: 100, interval: 50 } + ); + + // Then + expect(change.called).to.be.equal(inputType.indexOf("mouse") > -1); + }); + + it(`should recognize the correct event contained in the inputType (inputType: ${inputType}, event: touch)`, (done) => { + // Given + const MockEventInjector = EventInjector(); + MockEventInjector.SUPPORT_TOUCH = true; + const change = sinon.spy(); + const el = sandbox(); + const input = new PanInput(el, { + inputType, + }); + const inst = new Axes( + { + x: { + range: [0, 100], + }, + } + ); + inst.connect("x", input); + inst.on("change", change); + + // When + Simulator.gestures.pan(el, { + pos: [0, 0], + deltaX: 100, + duration: 1500, + easing: "linear", + }, () => { + // Then + expect(change.called).to.be.equal(inputType.indexOf("touch") > -1); + done(); + }); + }); + }); + }); });