feat: add holding as reactive property (#211)

* feat: add holding state to frameworks * test: add test for holding property * chore: remove unnecessary console.log * docs: add holding docs * chore: fix broken indent * chore: update cfcs version * docs: add algolia docsearch
naver · Mar 9, 2023 · 96ec136 · 96ec136
1 parent 8ead42b
commit 96ec136
Show file tree

Hide file tree

Showing 15 changed files with 3,475 additions and 3,279 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "description": "A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.",
   "private": true,
   "scripts": {
-		"lint": "eslint ./packages/axes/src/**/*.ts",
+    "lint": "eslint ./packages/axes/src/**/*.ts",
     "packages": "npm run packages:update && npm run packages:build && npm run packages:publish",
     "packages:update": "lerna-helper version",
     "packages:build": "lerna run build --ignore demo",
@@ -27,22 +27,23 @@
   "license": "MIT",
   "homepage": "https://github.com/naver/egjs-axes",
   "devDependencies": {
+    "@cfcs/cli": "^0.0.3",
     "@daybrush/jsdoc": "^0.3.12",
     "@egjs/release-helper": "^0.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
     "egjs-jsdoc-template": "^1.4.4",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsdoc": "^37.8.0",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.22.0",
     "jsdoc-to-mdx": "^1.1.2",
     "lerna": "^5.1.4",
-    "typescript": "^4.6.2",
-		"eslint": "^7.32.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-import": "^2.25.4",
-		"eslint-plugin-jsdoc": "^37.8.0",
-		"eslint-plugin-prefer-arrow": "^1.2.3",
-		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-react": "^7.22.0",
-		"@typescript-eslint/eslint-plugin": "^5.11.0",
-		"@typescript-eslint/eslint-plugin-tslint": "^5.11.0",
-		"@typescript-eslint/parser": "^5.11.0"
+    "typescript": "^4.6.2"
   },
   "workspaces": {
     "packages": [

diff --git a/packages/axes/package.json b/packages/axes/package.json
@@ -34,7 +34,7 @@
 		"dist/*"
 	],
 	"dependencies": {
-    "@cfcs/core": "^0.0.4",
+		"@cfcs/core": "^0.1.0",
 		"@egjs/agent": "^2.2.1",
 		"@egjs/component": "^3.0.1"
 	},
@@ -85,7 +85,7 @@
 		"string-replace-webpack-plugin": "0.1.3",
 		"sync-exec": "^0.6.2",
 		"ts-loader": "8.0.6",
-    "typescript": "^4.6.2",
+		"typescript": "^4.6.2",
 		"uglifyjs-webpack-plugin": "^1.1.6",
 		"webpack": "^3.10.0",
 		"webpack-dev-server": "^2.10.1",

diff --git a/packages/axes/src/Axes.ts b/packages/axes/src/Axes.ts
@@ -3,7 +3,7 @@
  * egjs projects are licensed under the MIT license
  */
 import Component from "@egjs/component";
-import { ReactiveSubscribe } from "@cfcs/core";
+import { ReactiveSubscribe, Observe, Computed } from "@cfcs/core";
 
 import { EventManager } from "./EventManager";
 import { InterruptManager } from "./InterruptManager";
@@ -228,6 +228,28 @@ class Axes extends Component<AxesEvents> {
    * @type {Number}
    */
   public static DIRECTION_ALL = DIRECTION_ALL;
+  /**
+   * @name Axes#holding
+   * @desc Returns true if at least one input is in progress.
+   * @ko 입력이 하나 이상 진행 중인지 여부를 반환한다.
+   *
+   * @readonly
+   * @type {boolean}
+   * @example
+   * ```js
+   * const axes = new eg.Axes({
+   *  x: {
+   *    range: [0, 100],
+   *  },
+   * });
+   *
+   * axes.holding
+   * ```
+   */
+  @Computed
+  public get holding() {
+    return this.eventManager.holdingCount > 0;
+  }
 
   public options: AxesOption;
   public eventManager: EventManager;

diff --git a/packages/axes/src/EventManager.ts b/packages/axes/src/EventManager.ts
@@ -3,7 +3,7 @@
  * egjs projects are licensed under the MIT license
  */
 import { ComponentEvent } from "@egjs/component";
-import { getObserver } from "@cfcs/core";
+import { getObserver, Observe } from "@cfcs/core";
 
 import { InputType } from "./inputType/InputType";
 import { Axis } from "./AxisManager";
@@ -18,6 +18,7 @@ export interface ChangeEventOption {
 }
 
 export class EventManager {
+  @Observe holdingCount = 0;
   public animationManager: AnimationManager;
   public constructor(private _axes: Axes) {}
   /**
@@ -141,6 +142,7 @@ export class EventManager {
     param.destPos = roundPos;
     param.depaPos = roundDepa;
     param.setTo = this._createUserControll(param.destPos, param.duration);
+
     this._axes.trigger(
       new ComponentEvent("release", {
         ...param,

diff --git a/packages/axes/src/InputObserver.ts b/packages/axes/src/InputObserver.ts
@@ -61,6 +61,7 @@ export class InputObserver implements InputTypeObserver {
     this._isStopped = false;
     this._interruptManager.setInterrupt(true);
     this._animationManager.stopAnimation(changeOption);
+    ++this._eventManager.holdingCount;
     if (!this._moveDistance) {
       this._eventManager.hold(this._axisManager.get(), changeOption);
     }
@@ -185,8 +186,11 @@ export class InputObserver implements InputTypeObserver {
       input,
       isTrusted: true,
     };
+    --this._eventManager.holdingCount;
     this._eventManager.triggerRelease(param);
-    this._moveDistance = null;
+    if (this._eventManager.holdingCount === 0) {
+      this._moveDistance = null;
+    }
 
     // to contol
     const userWish = this._animationManager.getUserControl(param);

diff --git a/packages/axes/src/inputType/InputType.ts b/packages/axes/src/inputType/InputType.ts
@@ -79,7 +79,7 @@ export const convertInputType = (inputType: string[] = []): ActiveEvent => {
 };
 
 export function getAddEventOptions(eventName: string) {
-	// The passive default value of the touch event is true.
-	// If not a touch event, return false to support ie11
-	return eventName.indexOf("touch") > -1 ? { passive: false } : false;
+  // The passive default value of the touch event is true.
+  // If not a touch event, return false to support ie11
+  return eventName.indexOf("touch") > -1 ? { passive: false } : false;
 }
diff --git a/packages/axes/src/types.ts b/packages/axes/src/types.ts
@@ -35,6 +35,7 @@ export interface AxesEvents {
 }
 
 export interface AxesReactiveState {
+  holding: boolean;
   [key: string]: any;
 }
 

diff --git a/packages/axes/test/unit/AnimationManager.spec.js b/packages/axes/test/unit/AnimationManager.spec.js
@@ -412,7 +412,6 @@ describe("AnimationManager", () => {
       const self = inst;
       const startHandler = sinon.spy();
       const changeHandler = sinon.spy((event) => {
-        // console.log("change handler", self.axisManager.get());
         expect(event.input).to.be.null;
         expect(event.inputEvent).to.be.null;
         expect(self.getEventInfo()).to.be.null;

diff --git a/packages/axes/test/unit/Axes.spec.js b/packages/axes/test/unit/Axes.spec.js
@@ -2,8 +2,10 @@ import PanInputInjector from "inject-loader!../../src/inputType/PanInput.ts";
 
 import Axes from "../../src/Axes.ts";
 import { PanInput } from "../../src/inputType/PanInput.ts";
+import { MoveKeyInput, KEY_RIGHT_ARROW } from "../../src/inputType/MoveKeyInput";
 import { PinchInput } from "../../src/inputType/PinchInput.ts";
 import { getDecimalPlace, roundNumber } from "../../src/utils";
+import TestHelper from "./inputType/TestHelper";
 
 describe("Axes", () => {
   let el;
@@ -130,6 +132,82 @@ describe("Axes", () => {
       expect(inst.get().otherX).to.equal(-100);
       expect(changeHandler.called).to.be.false;
     });
+
+    it("should check `holding` property changes whether the input is being held", (done) => {
+      // Given
+      el = sandbox();
+      input = new PanInput(el, {
+        inputType: ["touch"],
+      });
+      inst = new Axes(
+        {
+          x: {
+            range: [0, 100],
+          },
+        }
+      );
+      inst.connect("x", input);
+
+      // When
+      Simulator.gestures.pan(el, {
+        pos: [0, 0],
+        deltaX: 100,
+        duration: 1500,
+        easing: "linear",
+      });
+
+      // Then
+      setTimeout(() => {
+        expect(inst.holding).to.be.true;
+      }, 1000);
+      setTimeout(() => {
+        expect(inst.holding).to.be.false;
+        done();
+      }, 2000);
+    });
+
+    it("should check `holding` property changes whether the input is being held (with mixed input types) ", (done) => {
+      // Given
+      el = sandbox();
+      const moveKeyInput = new MoveKeyInput(el);
+      input = new PanInput(el, {
+        inputType: ["touch"],
+      });
+      inst = new Axes(
+        {
+          x: {
+            range: [0, 100],
+          },
+        }
+      );
+      inst.connect("x", input);
+      inst.connect("x", moveKeyInput);
+
+      // When
+      Simulator.gestures.pan(el, {
+        pos: [0, 0],
+        deltaX: 100,
+        duration: 1500,
+        easing: "linear",
+      });
+      TestHelper.key(el, "keydown", { keyCode: KEY_RIGHT_ARROW });
+      setTimeout(() => {
+        TestHelper.key(el, "keyup", { keyCode: KEY_RIGHT_ARROW });
+      }, 2500);
+
+      // Then
+      setTimeout(() => {
+        expect(inst.holding).to.be.true;
+      }, 1000);
+      setTimeout(() => {
+        expect(inst.holding).to.be.true;
+      }, 2000);
+      setTimeout(() => {
+        expect(inst.holding).to.be.false;
+        done();
+      }, 3000);
+    });
+
     it("should check `setTo/setBy` method", () => {
       // Given
       inst = new Axes(
@@ -600,6 +678,7 @@ describe("Axes", () => {
         });
         input = new MockPanInputInjector.PanInput(el, {
           iOSEdgeSwipeThreshold,
+          inputKey: ["any"],
           inputType: ["touch"],
         });
         inst

diff --git a/packages/demo/docusaurus.config.js b/packages/demo/docusaurus.config.js
@@ -132,6 +132,11 @@ const config = {
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme
+      },
+      algolia: {
+        appId: 'XFF4246J3M',
+        apiKey: '637cea2eb4f4992a666d77239ba5cfc2',
+        indexName: 'egjs-axes',
       }
     })
 };

diff --git a/packages/react-axes/package.json b/packages/react-axes/package.json
@@ -18,7 +18,7 @@
     "dist/*"
   ],
   "dependencies": {
-    "@cfcs/react": "^0.0.4",
+    "@cfcs/react": "^0.1.0",
     "@egjs/axes": "~3.8.4"
   },
   "devDependencies": {

diff --git a/packages/svelte-axes/package.json b/packages/svelte-axes/package.json
@@ -30,7 +30,7 @@
     "dist/*"
   ],
   "dependencies": {
-    "@cfcs/svelte": "~0.0.4",
+    "@cfcs/svelte": "^0.1.0",
     "@egjs/axes": "~3.8.4"
   },
   "devDependencies": {

diff --git a/packages/vue-axes/package.json b/packages/vue-axes/package.json
@@ -19,7 +19,7 @@
     "dist/*"
   ],
   "dependencies": {
-    "@cfcs/vue3": "^0.0.4",
+    "@cfcs/vue3": "^0.1.0",
     "@egjs/axes": "~3.8.4"
   },
   "devDependencies": {

diff --git a/packages/vue2-axes/package.json b/packages/vue2-axes/package.json
@@ -19,7 +19,7 @@
     "dist/*"
   ],
   "dependencies": {
-    "@cfcs/vue2": "~0.0.4",
+    "@cfcs/vue2": "^0.1.0",
     "@egjs/axes": "~3.8.4"
   },
   "devDependencies": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,7 @@ export interface AxesEvents { @@
     }
     export interface AxesReactiveState {
+      holding: boolean;
       [key: string]: any;
     }
@@ Expand Down @@