fix: fix wrong getTouches at TouchMouseEventInput (#213)

* fix: fix getTouches at TouchMouseEventInput * chore: add manual test * test: add eventInput unit test
naver · Jun 22, 2023 · 99e847d · 99e847d
1 parent 96ec136
commit 99e847d
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>egjs-axes</title>
+<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
+<style>
+#area {
+  display: flex;
+  justify-content: center;
+  position:relative;
+  width:100%; height:200px;
+  -webkit-perspective: 300px;
+  -moz-perspective: 300px;
+  -ms-perspective: 300px;
+  -o-perspective: 300px;
+  perspective: 300px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+#box {
+  position:absolute;
+  left:50%; top:50%;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.face {
+  position:absolute;
+  width:100px; height:100px;
+  color: hsla(0,0%,20%,1);
+  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
+  text-align: center;
+  font-size:2.5em; font-weight:bold;
+  text-align:center; line-height:2.5;
+  -webkit-backface-visibility:hidden;
+  -moz-backface-visibility:hidden;
+  -ms-backface-visibility:hidden;
+  -o-backface-visibility:hidden;
+  backface-visibility:hidden;
+  -webkit-border-radius:4px;
+  -moz-border-radius:4px;
+  -ms-border-radius:4px;
+  -o-border-radius:4px;
+  border-radius:4px;
+  background:
+    repeating-radial-gradient(
+      line at 0 0,
+      #eee,
+      #ccc 50px
+    );
+}
+
+.metal-linear {
+  width: 100px;
+  height: 100px;
+  -webkit-border-radius:4px;
+  -moz-border-radius:4px;
+  -ms-border-radius:4px;
+  -o-border-radius:4px;
+  border-radius:4px;
+  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
+    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
+    linear-gradient(180deg, hsl(0,0%,78%)  0%,
+    hsl(0,0%,90%) 47%,
+    hsl(0,0%,78%) 53%,
+    hsl(0,0%,70%)100%);
+}
+
+</style>
+</head>
+<body>
+  <div>
+    <p>You can rotate the cube using two axes.</p>
+    <div id="area">
+      <div id="test">
+      <div id="box">
+        <div class="face metal-linear" style="-webkit-transform:rotateX(0deg) rotateY(0deg) translate3d(-50px,-50px,50px);">1</div>
+        <div class="face metal-linear" style="-webkit-transform:rotateY(-90deg) translate3d(0px,-50px,100px);">2</div>
+        <div class="face metal-linear" style="-webkit-transform:rotateY(90deg) translate3d(0px,-50px,0px);">3</div>
+        <div class="face metal-linear" style="-webkit-transform:rotateX(90deg) translate3d(-50px,0px,100px);">4</div>
+        <div class="face metal-linear" style="-webkit-transform:rotateY(180deg) translate3d(50px,-50px,50px);">5</div>
+        <div class="face metal-linear" style="-webkit-transform:rotateX(-90deg) translate3d(-50px,0px,0px);">6</div>
+      </div>
+    </div>
+    </div>
+  </div>
+  <script src="../../dist/axes.pkgd.js"></script>
+  <script src="js/cube.js"></script>
+</body>
+</html>
diff --git a/packages/axes/test/manual/js/cube.js 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
@@ -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();
+        });
+      });
+    });
+  });
 });