feat: add release to PanInput and RotatePanInput (#195)

* feat: add release to PanInput and RotatePanInput

* docs: change order of option startPos

packages/axes/src/Axes.ts

@@ -47,13 +47,13 @@ export interface AxesOption {
  * @param {Number[]} [range] The coordinate of range <ko>좌표 범위</ko>
  * @param {Number} [range[0]=0] The coordinate of the minimum <ko>최소 좌표</ko>
  * @param {Number} [range[1]=0] The coordinate of the maximum <ko>최대 좌표</ko>
+ * @param {Number} [startPos=range[0]] The coordinates to be moved when creating an instance <ko>인스턴스 생성시 이동할 좌표</ko>
  * @param {Number[]} [bounce] The size of bouncing area. The coordinates can exceed the coordinate area as much as the bouncing area based on user action. If the coordinates does not exceed the bouncing area when an element is dragged, the coordinates where bouncing effects are applied are retuned back into the coordinate area<ko>바운스 영역의 크기. 사용자의 동작에 따라 좌표가 좌표 영역을 넘어 바운스 영역의 크기만큼 더 이동할 수 있다. 사용자가 끌어다 놓는 동작을 했을 때 좌표가 바운스 영역에 있으면, 바운스 효과가 적용된 좌표가 다시 좌표 영역 안으로 들어온다</ko>
  * @param {Number} [bounce[0]=0] The size of coordinate of the minimum area <ko>최소 좌표 바운스 영역의 크기</ko>
  * @param {Number} [bounce[1]=0] The size of coordinate of the maximum area <ko>최대 좌표 바운스 영역의 크기</ko>
  * @param {Boolean[]} [circular] Indicates whether a circular element is available. If it is set to "true" and an element is dragged outside the coordinate area, the element will appear on the other side.<ko>순환 여부. 'true'로 설정한 방향의 좌표 영역 밖으로 엘리먼트가 이동하면 반대 방향에서 엘리먼트가 나타난다</ko>
  * @param {Boolean} [circular[0]=false] Indicates whether to circulate to the coordinate of the minimum <ko>최소 좌표 방향의 순환 여부</ko>
  * @param {Boolean} [circular[1]=false] Indicates whether to circulate to the coordinate of the maximum <ko>최대 좌표 방향의 순환 여부</ko>
- * @param {Number} [startPos=range[0]] The coordinates to be moved when creating an instance <ko>인스턴스 생성시 이동할 좌표</ko>
  **/
 
 /**

packages/axes/src/AxisManager.ts

@@ -118,9 +118,9 @@ export class AxisManager {
       this._axis[axis] = {
         ...{
           range: [0, 100],
+          startPos: this._axis[axis].range[0],
           bounce: [0, 0],
           circular: [false, false],
-          startPos: this._axis[axis].range[0],
         },
         ...this._axis[axis],
       };

packages/axes/src/inputType/PanInput.ts

@@ -87,8 +87,8 @@ export const getDirectionByAngle = (
  * @example
  * ```js
  * const pan = new eg.Axes.PanInput("#area", {
- * 		inputType: ["touch"],
- * 		scale: [1, 1.3],
+ *     inputType: ["touch"],
+ *     scale: [1, 1.3],
  * });
  *
  * // Connect the 'something2' axis to the mouse or touchscreen x position when the mouse or touchscreen is down and moved.
@@ -197,20 +197,33 @@ export class PanInput implements InputType {
 
   /**
    * Returns whether to use an input device
-   * @ko 입력 장치를 사용 여부를 반환한다.
+   * @ko 입력 장치 사용 여부를 반환한다.
    * @return {Boolean} Whether to use an input device <ko>입력장치 사용여부</ko>
    */
   public isEnabled() {
     return this._enabled;
   }
 
+  /**
+   * Releases current user input.
+   * @ko 사용자의 입력을 강제로 중단시킨다.
+   * @return {PanInput} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+   */
+  public release() {
+    const activeEvent = this._activeEvent;
+    const prevEvent = activeEvent.prevEvent;
+    activeEvent.onRelease();
+    this._observer.release(this, prevEvent, [0, 0]);
+    this._detachWindowEvent(activeEvent);
+    return this;
+  }
+
   protected _onPanstart(event: InputEventType) {
     const activeEvent = this._activeEvent;
     const panEvent = activeEvent.onEventStart(event, this.options.inputButton);
     if (!panEvent || !this._enabled || activeEvent.getTouches(event) > 1) {
       return;
     }
-
     if (panEvent.srcEvent.cancelable !== false) {
       const edgeThreshold = this.options.iOSEdgeSwipeThreshold;
 
@@ -245,7 +258,7 @@ export class PanInput implements InputType {
 
       if (swipeLeftToRight) {
         // iOS swipe left => right
-        this._forceRelease();
+        this.release();
         return;
       } else if (this._atRightEdge) {
         clearTimeout(this._rightEdgeTimer);
@@ -257,10 +270,7 @@ export class PanInput implements InputType {
           this._atRightEdge = false;
         } else {
           // iOS swipe right => left
-          this._rightEdgeTimer = window.setTimeout(
-            () => this._forceRelease(),
-            100
-          );
+          this._rightEdgeTimer = window.setTimeout(() => this.release(), 100);
         }
       }
     }
@@ -364,13 +374,5 @@ export class PanInput implements InputType {
     this._observer = null;
   }
 
-  private _forceRelease = () => {
-    const activeEvent = this._activeEvent;
-    const prevEvent = activeEvent.prevEvent;
-    activeEvent.onRelease();
-    this._observer.release(this, prevEvent, [0, 0]);
-    this._detachWindowEvent(activeEvent);
-  };
-
   private _voidFunction = () => {};
 }