naver / egjs-axes

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.
https://naver.github.io/egjs-axes/
MIT License
179 stars 31 forks source link

feat: add setOptions and setAxis method #198

Closed malangfox closed 2 years ago

malangfox commented 2 years ago

Details

Among the cases of using Axes, there is a case of directly changing the options of an Axes instance such like below.

...
    const axes = this._axes!;
    const axis = axes.axis[AXES.POSITION_KEY];
    axis.circular = [controlParams.circular, controlParams.circular];
    axis.range = [controlParams.range.min, controlParams.range.max];
    axis.bounce = parseBounce(flicking.bounce, camera.size);
...

This add setOptions and setAxis methods to change the options related to the Axes instance to simplify use cases like this.

Changing Options

AxesOption

Changing easing, interruptable can be applied to an animation currently in progress. Changing maximumDuration, minimumDuration, deceleration applies when calculating to play the animation on next time. If you want to change the remaining time of an animation that is playing too, you may use updateAnimation method. Changing round, nested can applied after inputs that made after changing these options.

AxisOption

Changing range, bounce, circular can applied after inputs that made after changing these options. If the current position is outside the range set in the new option, it does not move the coordinates within the range directly since it can trigger change event. However, when next user input occur, new range will be applied in the process of calculating the new position. Triggering change event to position within range.