From 1bcb60791f4010eb18a5382ee6928d1f95707f42 Mon Sep 17 00:00:00 2001 From: Seonghyun Ahn Date: Thu, 18 Aug 2022 10:58:36 +0900 Subject: [PATCH] feat: add setOptions and setAxis method (#198) * feat: add setOptions and setAxis method * chore: apply lint * refactor: avoid using object.assign --- packages/axes/src/Axes.ts | 75 ++++++++++++++++++++++++++-- packages/axes/src/AxisManager.ts | 19 +++++-- packages/axes/src/const.ts | 2 + packages/axes/src/index.ts | 1 - packages/axes/src/utils.ts | 16 ------ packages/axes/test/unit/Axes.spec.js | 63 +++++++++++++++++++++++ 6 files changed, 152 insertions(+), 24 deletions(-) diff --git a/packages/axes/src/Axes.ts b/packages/axes/src/Axes.ts index 8e2815cc..3609f7a5 100644 --- 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.} axis Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system. eg.Axes가 관리하는 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다. * @param {AxesOption} [options={}] The option object of the eg.Axes moduleeg.Axes 모듈의 옵션 객체 - * @param {Object.} [startPos=null] The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.인스턴스 생성시 이동할 좌표, axisOption의 startPos보다 높은 우선순위로 적용된다. + * @param {Object.} [startPos={}] The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.인스턴스 생성시 이동할 좌표, axisOption의 startPos보다 높은 우선순위로 적용된다. * * @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 { public constructor( public axis: ObjectInterface = {}, options: AxesOption = {}, - startPos: Axis = null + startPos: Axis = {} ) { super(); this.options = { @@ -261,6 +260,9 @@ class Axes extends Component { }, ...options, }; + Object.keys(startPos).forEach((key) => { + this.axis[key].startPos = startPos[key]; + }); this.interruptManager = new InterruptManager(this.options); this.axisManager = new AxisManager(this.axis); @@ -268,7 +270,7 @@ class Axes extends Component { 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 { return this; } + /** + * Change the options of Axes instance. + * @ko 인스턴스의 옵션을 변경한다. + * @param {AxesOption} options Axes options to change 변경할 옵션 목록 + * @return {eg.Axes} An instance of a module itself 모듈 자신의 인스턴스 + * @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.} axis Axis options to change 변경할 축의 정보 + * @return {eg.Axes} An instance of a module itself 모듈 자신의 인스턴스 + * @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) { + 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 index 1b830136..e29c25bc 100644 --- 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) { 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) { + 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 index f59700d2..2394f32a 100644 --- 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 index 7c204c43..4717f0fa 100644 --- 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 index 53a54654..fd56b6d9 100644 --- a/packages/axes/src/utils.ts +++ b/packages/axes/src/utils.ts @@ -269,22 +269,6 @@ export const getDirection = ( } }; -export const getInitialPos = ( - axis: ObjectInterface, - 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 index b95eb356..a02cc7d0 100644 --- 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", () => {