feat: add setOptions and setAxis method (#198)

* feat: add setOptions and setAxis method * chore: apply lint * refactor: avoid using object.assign
naver · Aug 18, 2022 · 1bcb607 · 1bcb607
1 parent bce26f3
commit 1bcb607
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 24 deletions.
diff --git a/packages/axes/src/Axes.ts b/packages/axes/src/Axes.ts
@@ -27,7 +27,6 @@ import {
   ObjectInterface,
   UpdateAnimationOption,
 } from "./types";
-import { getInitialPos } from "./utils";
 import { EasingManager } from "./animation/EasingManager";
 import { AnimationManager } from "./animation/AnimationManager";
 
@@ -82,7 +81,7 @@ export interface AxesOption {
  *
  * @param {Object.<string, AxisOption>} axis Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system.  <ko>eg.Axes가 관리하는 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다.</ko>
  * @param {AxesOption} [options={}] The option object of the eg.Axes module<ko>eg.Axes 모듈의 옵션 객체</ko>
- * @param {Object.<string, number>} [startPos=null] The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.<ko>인스턴스 생성시 이동할 좌표, axisOption의 startPos보다 높은 우선순위로 적용된다.</ko>
+ * @param {Object.<string, number>} [startPos={}] The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.<ko>인스턴스 생성시 이동할 좌표, axisOption의 startPos보다 높은 우선순위로 적용된다.</ko>
  *
  * @support {"ie": "10+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.3+ (except 3.x)"}
  * @example
@@ -244,7 +243,7 @@ class Axes extends Component<AxesEvents> {
   public constructor(
     public axis: ObjectInterface<AxisOption> = {},
     options: AxesOption = {},
-    startPos: Axis = null
+    startPos: Axis = {}
   ) {
     super();
     this.options = {
@@ -261,14 +260,17 @@ class Axes extends Component<AxesEvents> {
       },
       ...options,
     };
+    Object.keys(startPos).forEach((key) => {
+      this.axis[key].startPos = startPos[key];
+    });
 
     this.interruptManager = new InterruptManager(this.options);
     this.axisManager = new AxisManager(this.axis);
     this.eventManager = new EventManager(this);
     this.animationManager = new EasingManager(this);
     this.inputObserver = new InputObserver(this);
     this.eventManager.setAnimationManager(this.animationManager);
-    this.eventManager.triggerChange(getInitialPos(axis, startPos));
+    this.eventManager.triggerChange(this.axisManager.get());
   }
 
   /**
@@ -453,6 +455,71 @@ class Axes extends Component<AxesEvents> {
     return this;
   }
 
+  /**
+   * Change the options of Axes instance.
+   * @ko 인스턴스의 옵션을 변경한다.
+   * @param {AxesOption} options Axes options to change <ko>변경할 옵션 목록</ko>
+   * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+   * @example
+   * ```js
+   * const axes = new eg.Axes({
+   *   "x": {
+   *      range: [0, 100]
+   *   },
+   * }, {
+   *   round: 10,
+   * });
+   *
+   * axes.setTo({"x": 48});
+   * axes.get(); // {"x": 50}
+   *
+   * axes.setOptions({
+   *   round: 1,
+   * });
+   *
+   * axes.setTo({"x": 48});
+   * axes.get(); // {"x": 48}
+   * ```
+   */
+  public setOptions(options: AxesOption) {
+      this.options = {
+      ...this.options,
+      ...options,
+    };
+    return this;
+  }
+
+  /**
+   * Change the information of an existing axis.
+   * @ko 존재하는 축의 정보를 변경한다.
+   * @param {Object.<string, AxisOption>} axis Axis options to change <ko>변경할 축의 정보</ko>
+   * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+   * @example
+   * ```js
+   * const axes = new eg.Axes({
+   *   "x": {
+   *      range: [0, 100]
+   *   },
+   * });
+   *
+   * axes.setTo({"x": 150});
+   * axes.get(); // {"x": 100}
+   *
+   * axes.setAxis({
+   *   "x": {
+   *      range: [0, 200]
+   *   },
+   * });
+   *
+   * axes.setTo({"x": 150});
+   * axes.get(); // {"x": 150}
+   * ```
+   */
+  public setAxis(axis: ObjectInterface<AxisOption>) {
+    this.axisManager.setAxis(axis);
+    return this;
+  }
+
   /**
    * Stop an animation in progress.
    * @ko 재생 중인 애니메이션을 정지한다.

diff --git a/packages/axes/src/AxisManager.ts b/packages/axes/src/AxisManager.ts
@@ -21,9 +21,9 @@ export class AxisManager {
   private _pos: Axis;
   public constructor(private _axis: ObjectInterface<AxisOption>) {
     this._complementOptions();
-    this._pos = Object.keys(this._axis).reduce((acc, v) => {
-      acc[v] = this._axis[v].range[0];
-      return acc;
+    this._pos = Object.keys(this._axis).reduce((pos, v) => {
+      pos[v] = this._axis[v].startPos;
+      return pos;
     }, {});
   }
 
@@ -109,6 +109,19 @@ export class AxisManager {
     return this._axis[key];
   }
 
+  public setAxis(axis: ObjectInterface<AxisOption>) {
+    Object.keys(axis).forEach((key) => {
+      if (!this._axis[key]) {
+        throw new Error(`Axis ${key} does not exist in Axes instance`);
+      }
+      this._axis[key] = {
+        ...this._axis[key],
+        ...axis[key],
+      };
+    });
+    this._complementOptions();
+  }
+
   /**
    * set up 'css' expression
    * @private

diff --git a/packages/axes/src/const.ts b/packages/axes/src/const.ts
@@ -23,6 +23,8 @@ export const AXES_METHODS = [
   "get",
   "setTo",
   "setBy",
+  "setOptions",
+  "setAxis",
   "stopAnimation",
   "updateAnimation",
   "isBounceArea",

diff --git a/packages/axes/src/index.ts b/packages/axes/src/index.ts
@@ -12,6 +12,5 @@ export { MoveKeyInput } from "./inputType/MoveKeyInput";
 export default Axes;
 
 export { AXES_METHODS, AXES_EVENTS } from "./const";
-export { getInitialPos } from "./utils";
 export * from "./types";
 export * from "./reactive";
diff --git a/packages/axes/src/utils.ts b/packages/axes/src/utils.ts
@@ -269,22 +269,6 @@ export const getDirection = (
   }
 };
 
-export const getInitialPos = (
-  axis: ObjectInterface<AxisOption>,
-  startPos: Axis
-): Axis => {
-  return {
-    ...Object.keys(axis).reduce(
-      (result, key) =>
-        Object.assign(result, {
-          [key]: axis[key].startPos ?? axis[key].range[0] ?? 0,
-        }),
-      {}
-    ),
-    ...startPos,
-  };
-};
-
 export const useDirection = (
   checkType: number,
   direction: number,

diff --git a/packages/axes/test/unit/Axes.spec.js b/packages/axes/test/unit/Axes.spec.js
@@ -241,6 +241,69 @@ describe("Axes", () => {
       // When
       inst.setBy({ x: -10 }, 200);
     });
+
+    it("should change Axes options via `setOptions` method", () => {
+      // Given
+      inst = new Axes(
+        {
+          x: {
+            range: [0, 100],
+          },
+        },
+        {
+          round: 10,
+        }
+      );
+
+      // When
+      inst.setTo({ x: 48 });
+
+      // Then
+      expect(inst.get()).to.be.eql({ x: 50 });
+
+      // When
+      inst.setOptions({
+        round: 1,
+      });
+      inst.setTo({ x: 48 });
+
+      // Then
+      expect(inst.get()).to.be.eql({ x: 48 });
+    });
+
+    it("should change options of each Axis via `setAxis` method", () => {
+      // Given
+      inst = new Axes(
+        {
+          x: {
+            range: [0, 100],
+          },
+          y: {
+            range: [0, 200],
+          },
+        },
+      );
+
+      // When
+      inst.setTo({ x: 150, y: 150 });
+
+      // Then
+      expect(inst.get()).to.be.eql({ x: 100, y: 150 });
+
+      // When
+      inst.setAxis({
+        x: {
+          range: [0, 200],
+        },
+        y: {
+          range: [0, 100],
+        },
+      });
+      inst.setTo({ x: 150, y: 150 });
+
+      // Then
+      expect(inst.get()).to.be.eql({ x: 150, y: 100 });
+    });
   });
 
   describe("Axes Test with InputType", () => {