2738763160

Build Type

github

Committed by GitHub

Commit Message

Merge b9f0cc3a2 into 586d8248a

Pull Request Pull Request #711: fix: fix error when onChange occur during holding state

Run Details

4229 of 6876 branches covered (61.5%)

Branch coverage included in aggregate %.

25 of 25 new or added lines in 4 files covered. (100.0%)

2 existing lines in 1 file now uncovered.

7745 of 8264 relevant lines covered (93.72%)

142.41 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

71.64

/src/control/Control.ts

/*
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import { OnRelease } from "@egjs/axes";
import { ComponentEvent } from "@egjs/component";

import Flicking from "../Flicking";
import FlickingError from "../core/FlickingError";
import Panel from "../core/panel/Panel";
import AxesController from "../control/AxesController";
import { DIRECTION, EVENTS } from "../const/external";
import * as ERROR from "../const/error";
import { getDirection, getFlickingAttached } from "../utils";
import { ValueOf } from "../type/internal";

/**
 * A component that manages inputs and animation of Flicking
 * @ko Flicking의 입력 장치 & 애니메이션을 담당하는 컴포넌트
 */
abstract class Control {
  // Internal States
  protected _flicking: Flicking | null;
  protected _controller: AxesController;
  protected _activePanel: Panel | null;

  /**
   * A controller that handles the {@link https://naver.github.io/egjs-axes/ @egjs/axes} events
   * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 이벤트를 처리하는 컨트롤러 컴포넌트
   * @type {AxesController}
   * @readonly
   */
  public get controller() { return this._controller; }
  /**
   * Index number of the {@link Flicking#currentPanel currentPanel}
   * @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호
   * @type {number}
   * @default 0
   * @readonly
   */
  public get activeIndex() { return this._activePanel?.index ?? -1; }
  /**
   * An active panel
   * @ko 현재 선택된 패널
   * @type {Panel | null}
   * @readonly
   */
  public get activePanel() { return this._activePanel; }
  /**
   * Whether Flicking's animating
   * @ko 현재 애니메이션 동작 여부
   * @type {boolean}
   * @readonly
   */
  public get animating() { return this._controller.state.animating; }
  /**
   * Whether user is clicking or touching
   * @ko 현재 사용자가 클릭/터치중인지 여부
   * @type {boolean}
   * @readonly
   */
  public get holding() { return this._controller.state.holding; }

  /** */
  public constructor() {
    this._flicking = null;
    this._controller = new AxesController();
    this._activePanel = null;
  }

  /**
   * Move {@link Camera} to the given position
   * @ko {@link Camera}를 주어진 좌표로 이동합니다
   * @method
   * @abstract
   * @memberof Control
   * @instance
   * @name moveToPosition
   * @param {number} position The target position to move<ko>이동할 좌표</ko>
   * @param {number} duration Duration of the panel movement animation (unit: ms).<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
   * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}
   * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
   * @fires Flicking#moveStart
   * @fires Flicking#move
   * @fires Flicking#moveEnd
   * @fires Flicking#willChange
   * @fires Flicking#changed
   * @fires Flicking#willRestore
   * @fires Flicking#restored
   * @fires Flicking#needPanel
   * @fires Flicking#visibleChange
   * @fires Flicking#reachEdge
   * @throws {FlickingError}
   * |code|condition|
   * |---|---|
   * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|
   * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|
   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|
   * <ko>
   *
   * |code|condition|
   * |---|---|
   * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|
   * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|
   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
   *
   * </ko>
   * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
   */
  public abstract moveToPosition(position: number, duration: number, axesEvent?: OnRelease): Promise<void>;

  /**
   * Initialize Control
   * @ko Control을 초기화합니다
   * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
   * @chainable
   * @return {this}
   */
  public init(flicking: Flicking): this {
    this._flicking = flicking;
    this._controller.init(flicking);

    return this;
  }

  /**
   * Destroy Control and return to initial state
   * @ko Control을 초기 상태로 되돌립니다
   * @return {void}
   */
  public destroy(): void {
    this._controller.destroy();

    this._flicking = null;
    this._activePanel = null;
  }

  /**
   * Enable input from the user (mouse/touch)
   * @ko 사용자의 입력(마우스/터치)를 활성화합니다
   * @chainable
   * @return {this}
   */
  public enable(): this {
    this._controller.enable();

    return this;
  }

  /**
   * Disable input from the user (mouse/touch)
   * @ko 사용자의 입력(마우스/터치)를 막습니다
   * @chainable
   * @return {this}
   */
  public disable(): this {
    this._controller.disable();

    return this;
  }

  /**
   * Update position after resizing
   * @ko resize 이후에 position을 업데이트합니다
   * @param {number} progressInPanel Previous camera's progress in active panel before resize<ko>Resize 이전 현재 선택된 패널 내에서의 카메라 progress 값</ko>
   * @throws {FlickingError}
   * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
   * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
   * @chainable
   * @return {Promise<void>}
   */
  public updatePosition(progressInPanel: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars
    const flicking = getFlickingAttached(this._flicking);
    const camera = flicking.camera;
    const activePanel = this._activePanel;

    if (activePanel) {
      camera.lookAt(camera.clampToReachablePosition(activePanel.position));
    }
  }

  /**
   * Update {@link Control#controller controller}'s state
   * @ko {@link Control#controller controller}의 내부 상태를 갱신합니다
   * @chainable
   * @return {this}
   */
  public updateInput(): this {
    const flicking = getFlickingAttached(this._flicking);
    const camera = flicking.camera;

    this._controller.update(camera.controlParams);

    return this;
  }

  /**
   * Reset {@link Control#activePanel activePanel} to `null`
   * @ko {@link Control#activePanel activePanel}을 `null`로 초기화합니다
   * @chainable
   * @return {this}
   */
  public resetActive(): this {
    this._activePanel = null;

    return this;
  }

  /**
   * Move {@link Camera} to the given panel
   * @ko {@link Camera}를 해당 패널 위로 이동합니다
   * @param {Panel} panel The target panel to move<ko>이동할 패널</ko>
   * @param {object} options An options object<ko>옵션 오브젝트</ko>
   * @param {number} duration Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
   * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}
   * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
   * @param {DIRECTION} [direction=DIRECTION.NONE] Direction to move, only available in the {@link Flicking#circular circular} mode<ko>이동할 방향. {@link Flicking#circular circular} 옵션 활성화시에만 사용 가능합니다</ko>
   * @fires Flicking#moveStart
   * @fires Flicking#move
   * @fires Flicking#moveEnd
   * @fires Flicking#willChange
   * @fires Flicking#changed
   * @fires Flicking#willRestore
   * @fires Flicking#restored
   * @fires Flicking#needPanel
   * @fires Flicking#visibleChange
   * @fires Flicking#reachEdge
   * @throws {FlickingError}
   * |code|condition|
   * |---|---|
   * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|
   * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|
   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|
   * <ko>
   *
   * |code|condition|
   * |---|---|
   * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|
   * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|
   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
   *
   * </ko>
   * @return {Promise<void>} A Promise which will be resolved after reaching the target panel<ko>해당 패널 도달시에 resolve되는 Promise</ko>
   */
  public async moveToPanel(panel: Panel, {
    duration,
    direction = DIRECTION.NONE,
    axesEvent
  }: {
    duration: number;
    direction?: ValueOf<typeof DIRECTION>;
    axesEvent?: OnRelease;
  }) {
    const flicking = getFlickingAttached(this._flicking);
    const camera = flicking.camera;

    let position = panel.position;
    const nearestAnchor = camera.findNearestAnchor(position);

    if (panel.removed || !nearestAnchor) {
      return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(panel.position), ERROR.CODE.POSITION_NOT_REACHABLE));
    }
    if (!camera.canReach(panel)) {
      // Override position & panel if that panel is not reachable
      position = nearestAnchor.position;
      panel = nearestAnchor.panel;
    } else if (flicking.circularEnabled) {
      // Circular mode is enabled, find nearest distance to panel
      const camPos = this._controller.position; // Actual position of the Axes
      const camRangeDiff = camera.rangeDiff;
      const possiblePositions = [position, position + camRangeDiff, position - camRangeDiff]
        .filter(pos => {
          if (direction === DIRECTION.NONE) return true;

          return direction === DIRECTION.PREV
            ? pos <= camPos
            : pos >= camPos;
        });

      position = possiblePositions.reduce((nearestPosition, pos) => {
        if (Math.abs(camPos - pos) < Math.abs(camPos - nearestPosition)) {
          return pos;
        } else {
          return nearestPosition;
        }
      }, Infinity);
    }

    this._triggerIndexChangeEvent(panel, panel.position, axesEvent);

    return this._animateToPosition({ position, duration, newActivePanel: panel, axesEvent });
  }

  /**
   * @internal
   */
  public setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) {
    const flicking = getFlickingAttached(this._flicking);

    this._activePanel = newActivePanel;

    flicking.camera.updateAdaptiveHeight();

    if (newActivePanel !== prevActivePanel) {
      flicking.trigger(new ComponentEvent(EVENTS.CHANGED, {
        index: newActivePanel.index,
        panel: newActivePanel,
        prevIndex: prevActivePanel?.index ?? -1,
        prevPanel: prevActivePanel,
        isTrusted,
        direction: prevActivePanel ? getDirection(prevActivePanel.position, newActivePanel.position) : DIRECTION.NONE
      }));
    } else {
      flicking.trigger(new ComponentEvent(EVENTS.RESTORED, {
        isTrusted
      }));
    }
  }

  protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease) {
    const flicking = getFlickingAttached(this._flicking);
    const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;
    const camera = flicking.camera;
    const activePanel = this._activePanel;

    const event = new ComponentEvent(triggeringEvent, {
      index: panel.index,
      panel,
      isTrusted: axesEvent?.isTrusted || false,
      direction: getDirection(activePanel?.position ?? camera.position, position)
    });
    flicking.trigger(event);

    if (event.isCanceled()) {
      throw new FlickingError(ERROR.MESSAGE.STOP_CALLED_BY_USER, ERROR.CODE.STOP_CALLED_BY_USER);
    }
  }

  protected async _animateToPosition({
    position,
    duration,
    newActivePanel,
    axesEvent
  }: {
    position: number;
    duration: number;
    newActivePanel: Panel;
    axesEvent?: OnRelease;
  }) {
    const flicking = getFlickingAttached(this._flicking);
    const animate = () => this._controller.animateTo(position, duration, axesEvent);
    const state = this._controller.state;

    state.targetPanel = newActivePanel;

    if (duration <= 0) {
      return animate();
    } else {
      return animate().then(async () => {
        await flicking.renderer.render();
      }).catch(err => {
        if (axesEvent && err instanceof FlickingError && err.code === ERROR.CODE.ANIMATION_INTERRUPTED) return;
        throw err;
      });
    }
  }
}

export default Control;

1	/*	1✔
2	* Copyright (c) 2015 NAVER Corp.	1!
3	* egjs projects are licensed under the MIT license	×
4	*/
5	import { OnRelease } from "@egjs/axes";
6	import { ComponentEvent } from "@egjs/component";	5!
7
8	import Flicking from "../Flicking";
9	import FlickingError from "../core/FlickingError";	6!
10	import Panel from "../core/panel/Panel";
11	import AxesController from "../control/AxesController";	5✔
12	import { DIRECTION, EVENTS } from "../const/external";	5✔
13	import * as ERROR from "../const/error";	5✔
14	import { getDirection, getFlickingAttached } from "../utils";	6✔
15	import { ValueOf } from "../type/internal";	1!
16
17	/**	×
18	* A component that manages inputs and animation of Flicking
19	* @ko Flicking의 입력 장치 & 애니메이션을 담당하는 컴포넌트
20	*/
21	abstract class Control {	6✔
22	// Internal States	63!
23	protected _flicking: Flicking \| null;	271✔
24	protected _controller: AxesController;	63✔
25	protected _activePanel: Panel \| null;
26		330✔
27	/**	271✔
28	* A controller that handles the {@link https://naver.github.io/egjs-axes/ @egjs/axes} events
29	* @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 이벤트를 처리하는 컨트롤러 컴포넌트
30	* @type {AxesController}	1✔
31	* @readonly	271!
32	*/	271✔
33	public get controller() { return this._controller; }	833✔
34	/**
35	* Index number of the {@link Flicking#currentPanel currentPanel}	334!
36	* @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호	668✔
37	* @type {number}	668!
38	* @default 0	668!
39	* @readonly	668!
40	*/	334✔
41	public get activeIndex() { return this._activePanel?.index ?? -1; }	69!
42	/**
43	* An active panel
44	* @ko 현재 선택된 패널
45	* @type {Panel \| null}	271!
46	* @readonly	×
47	*/	×
48	public get activePanel() { return this._activePanel; }	20!
49	/**	×
50	* Whether Flicking's animating
51	* @ko 현재 애니메이션 동작 여부
52	* @type {boolean}	334✔
53	* @readonly	668✔
54	*/	271!
55	public get animating() { return this._controller.state.animating; }	11✔
56	/**
57	* Whether user is clicking or touching	1✔
58	* @ko 현재 사용자가 클릭/터치중인지 여부	2!
59	* @type {boolean}
60	* @readonly	1✔
61	*/	1✔
62	public get holding() { return this._controller.state.holding; }	6✔
63		1✔
64	/** */	1✔
65	public constructor() {	1✔
66	this._flicking = null;	15✔
67	this._controller = new AxesController();	14✔
68	this._activePanel = null;	14✔
69	}
70
71	/**	1✔
72	* Move {@link Camera} to the given position
73	* @ko {@link Camera}를 주어진 좌표로 이동합니다
74	* @method	447✔
75	* @abstract	447✔
76	* @memberof Control	447✔
77	* @instance
78	* @name moveToPosition	1✔
79	* @param {number} position The target position to move<ko>이동할 좌표</ko>
80	* @param {number} duration Duration of the panel movement animation (unit: ms).<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
81	* @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}
82	* <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
83	* @fires Flicking#moveStart
84	* @fires Flicking#move
85	* @fires Flicking#moveEnd	623✔
86	* @fires Flicking#willChange
87	* @fires Flicking#changed
88	* @fires Flicking#willRestore
89	* @fires Flicking#restored	1✔
90	* @fires Flicking#needPanel
91	* @fires Flicking#visibleChange
92	* @fires Flicking#reachEdge
93	* @throws {FlickingError}
94	* \|code\|condition\|
95	* \|---\|---\|
96	* \|{@link ERROR_CODE POSITION_NOT_REACHABLE}\|When the given panel is already removed or not in the Camera's {@link Camera#range range}\|
97	* \|{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}\|When {@link Control#init init} is not called before\|	94✔
98	* \|{@link ERROR_CODE ANIMATION_INTERRUPTED}\|When the animation is interrupted by user input\|
99	* \|{@link ERROR_CODE STOP_CALLED_BY_USER}\|When the animation is interrupted by user input\|
100	* <ko>
101	*	1✔
102	* \|code\|condition\|
103	* \|---\|---\|
104	* \|{@link ERROR_CODE POSITION_NOT_REACHABLE}\|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우\|
105	* \|{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}\|{@link Control#init init}이 이전에 호출되지 않은 경우\|
106	* \|{@link ERROR_CODE ANIMATION_INTERRUPTED}\|사용자 입력에 의해 애니메이션이 중단된 경우\|
107	* \|{@link ERROR_CODE STOP_CALLED_BY_USER}\|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우\|
108	*	699✔
109	* </ko>
110	* @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
111	*/
112	public abstract moveToPosition(position: number, duration: number, axesEvent?: OnRelease): Promise<void>;	1✔
113
114	/**
115	* Initialize Control
116	* @ko Control을 초기화합니다
117	* @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
118	* @chainable
119	* @return {this}	137✔
120	*/
121	public init(flicking: Flicking): this {	5✔
122	this._flicking = flicking;	14✔
123	this._controller.init(flicking);	15✔
124
125	return this;	14✔
126	}
127
128	/**
129	* Destroy Control and return to initial state
130	* @ko Control을 초기 상태로 되돌립니다	19✔
131	* @return {void}
132	*/
133	public destroy(): void {	5✔
134	this._controller.destroy();
135
136	this._flicking = null;
137	this._activePanel = null;
138	}
139
140	/**
141	* Enable input from the user (mouse/touch)	1✔
142	* @ko 사용자의 입력(마우스/터치)를 활성화합니다	425✔
143	* @chainable	425✔
144	* @return {this}	425✔
145	*/
146	public enable(): this {	5✔
147	this._controller.enable();
148
149	return this;
150	}
151		1✔
152	/**	431✔
153	* Disable input from the user (mouse/touch)	431✔
154	* @ko 사용자의 입력(마우스/터치)를 막습니다	431✔
155	* @chainable
156	* @return {this}
157	*/
158	public disable(): this {	5✔
159	this._controller.disable();
160
161	return this;
162	}	1✔
163		3✔
164	/**	3✔
165	* Update position after resizing
166	* @ko resize 이후에 position을 업데이트합니다
167	* @param {number} progressInPanel Previous camera's progress in active panel before resize<ko>Resize 이전 현재 선택된 패널 내에서의 카메라 progress 값</ko>
168	* @throws {FlickingError}
169	* {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
170	* <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
171	* @chainable
172	* @return {Promise<void>}	1✔
173	*/	6✔
174	public updatePosition(progressInPanel: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars	11✔
175	const flicking = getFlickingAttached(this._flicking);
176	const camera = flicking.camera;
177	const activePanel = this._activePanel;
178
179	if (activePanel) {	×
180	camera.lookAt(camera.clampToReachablePosition(activePanel.position));
181	}
182	}
183
184	/**
185	* Update {@link Control#controller controller}'s state
186	* @ko {@link Control#controller controller}의 내부 상태를 갱신합니다	1✔
187	* @chainable	16✔
188	* @return {this}	16✔
189	*/	16✔
190	public updateInput(): this {	21✔
191	const flicking = getFlickingAttached(this._flicking);	39✔
192	const camera = flicking.camera;	28✔
193
194	this._controller.update(camera.controlParams);	28✔
195
196	return this;	28✔
197	}
198
199	/**
200	* Reset {@link Control#activePanel activePanel} to `null`	1✔
201	* @ko {@link Control#activePanel activePanel}을 `null`로 초기화합니다	762✔
202	* @chainable	761✔
203	* @return {this}	761✔
204	*/	761✔
205	public resetActive(): this {	5✔
206	this._activePanel = null;
207
208	return this;
209	}
210
211	/**
212	* Move {@link Camera} to the given panel	1✔
213	* @ko {@link Camera}를 해당 패널 위로 이동합니다	7✔
214	* @param {Panel} panel The target panel to move<ko>이동할 패널</ko>	7✔
215	* @param {object} options An options object<ko>옵션 오브젝트</ko>
216	* @param {number} duration Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
217	* @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}
218	* <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
219	* @param {DIRECTION} [direction=DIRECTION.NONE] Direction to move, only available in the {@link Flicking#circular circular} mode<ko>이동할 방향. {@link Flicking#circular circular} 옵션 활성화시에만 사용 가능합니다</ko>
220	* @fires Flicking#moveStart
221	* @fires Flicking#move
222	* @fires Flicking#moveEnd
223	* @fires Flicking#willChange
224	* @fires Flicking#changed
225	* @fires Flicking#willRestore
226	* @fires Flicking#restored
227	* @fires Flicking#needPanel
228	* @fires Flicking#visibleChange
229	* @fires Flicking#reachEdge
230	* @throws {FlickingError}
231	* \|code\|condition\|
232	* \|---\|---\|
233	* \|{@link ERROR_CODE POSITION_NOT_REACHABLE}\|When the given panel is already removed or not in the Camera's {@link Camera#range range}\|
234	* \|{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}\|When {@link Control#init init} is not called before\|
235	* \|{@link ERROR_CODE ANIMATION_INTERRUPTED}\|When the animation is interrupted by user input\|
236	* \|{@link ERROR_CODE STOP_CALLED_BY_USER}\|When the animation is interrupted by user input\|
237	* <ko>
238	*
239	* \|code\|condition\|
240	* \|---\|---\|
241	* \|{@link ERROR_CODE POSITION_NOT_REACHABLE}\|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우\|
242	* \|{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}\|{@link Control#init init}이 이전에 호출되지 않은 경우\|
243	* \|{@link ERROR_CODE ANIMATION_INTERRUPTED}\|사용자 입력에 의해 애니메이션이 중단된 경우\|
244	* \|{@link ERROR_CODE STOP_CALLED_BY_USER}\|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우\|
245	*
246	* </ko>
247	* @return {Promise<void>} A Promise which will be resolved after reaching the target panel<ko>해당 패널 도달시에 resolve되는 Promise</ko>
248	*/
249	public async moveToPanel(panel: Panel, {	5✔
250	duration,	3✔
251	direction = DIRECTION.NONE,	3✔
252	axesEvent	3✔
253	}: {
254	duration: number;	1✔
255	direction?: ValueOf<typeof DIRECTION>;	84✔
256	axesEvent?: OnRelease;	84✔
257	}) {
258	const flicking = getFlickingAttached(this._flicking);	87✔
259	const camera = flicking.camera;	87✔
260		83✔
261	let position = panel.position;	86✔
262	const nearestAnchor = camera.findNearestAnchor(position);	86✔
263		83!
264	if (panel.removed \|\| !nearestAnchor) {	3!
265	return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(panel.position), ERROR.CODE.POSITION_NOT_REACHABLE));
266	}	83!
267	if (!camera.canReach(panel)) {	3!
268	// Override position & panel if that panel is not reachable
UNCOV 269	position = nearestAnchor.position;	×
270	panel = nearestAnchor.panel;
271	} else if (flicking.circularEnabled) {	86!
272	// Circular mode is enabled, find nearest distance to panel	3✔
273	const camPos = this._controller.position; // Actual position of the Axes	3✔
274	const camRangeDiff = camera.rangeDiff;	3✔
275	const possiblePositions = [position, position + camRangeDiff, position - camRangeDiff]
276	.filter(pos => {	9!
277	if (direction === DIRECTION.NONE) return true;	9!
278		×
279	return direction === DIRECTION.PREV	×
280	? pos <= camPos
281	: pos >= camPos;
282	});	3✔
283		9✔
284	position = possiblePositions.reduce((nearestPosition, pos) => {	5✔
285	if (Math.abs(camPos - pos) < Math.abs(camPos - nearestPosition)) {	×
286	return pos;
287	} else {	4✔
288	return nearestPosition;
289	}
290	}, Infinity);
291	}	83✔
292		80✔
293	this._triggerIndexChangeEvent(panel, panel.position, axesEvent);	3✔
294
295	return this._animateToPosition({ position, duration, newActivePanel: panel, axesEvent });	3✔
296	}
297
298	/**
299	* @internal	1✔
300	*/
301	public setActive(newActivePanel: Panel, prevActivePanel: Panel \| null, isTrusted: boolean) {	450✔
302	const flicking = getFlickingAttached(this._flicking);	461✔
303		445✔
304	this._activePanel = newActivePanel;	461✔
305		409✔
306	flicking.camera.updateAdaptiveHeight();	16✔
307
308	if (newActivePanel !== prevActivePanel) {	16✔
309	flicking.trigger(new ComponentEvent(EVENTS.CHANGED, {	15✔
310	index: newActivePanel.index,
311	panel: newActivePanel,	409✔
312	prevIndex: prevActivePanel?.index ?? -1,	76✔
313	prevPanel: prevActivePanel,
314	isTrusted,
315	direction: prevActivePanel ? getDirection(prevActivePanel.position, newActivePanel.position) : DIRECTION.NONE	36✔
316	}));
317	} else {
318	flicking.trigger(new ComponentEvent(EVENTS.RESTORED, {	1✔
319	isTrusted
320	}));	1✔
321	}
322	}	126✔
323		126✔
324	protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease) {	131✔
325	const flicking = getFlickingAttached(this._flicking);	130✔
326	const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;	130✔
327	const camera = flicking.camera;	4✔
328	const activePanel = this._activePanel;	4✔
329		589✔
330	const event = new ComponentEvent(triggeringEvent, {	4✔
331	index: panel.index,
332	panel,	126✔
333	isTrusted: axesEvent?.isTrusted \|\| false,	126✔
334	direction: getDirection(activePanel?.position ?? camera.position, position)	4!
335	});
336	flicking.trigger(event);	4✔
337		1✔
338	if (event.isCanceled()) {	128!
339	throw new FlickingError(ERROR.MESSAGE.STOP_CALLED_BY_USER, ERROR.CODE.STOP_CALLED_BY_USER);	124✔
340	}
341	}	124✔
342		124✔
343	protected async _animateToPosition({	129✔
344	position,	128✔
345	duration,	128✔
346	newActivePanel,	128✔
347	axesEvent	128✔
348	}: {	55✔
349	position: number;
350	duration: number;
351	newActivePanel: Panel;	69✔
352	axesEvent?: OnRelease;	63✔
353	}) {	126✔
354	const flicking = getFlickingAttached(this._flicking);	67✔
355	const animate = () => this._controller.animateTo(position, duration, axesEvent);	4✔
356	const state = this._controller.state;	67✔
357		63✔
358	state.targetPanel = newActivePanel;	4✔
359
360	if (duration <= 0) {	4!
361	return animate();	4✔
362	} else {	2✔
363	return animate().then(async () => {	6✔
364	await flicking.renderer.render();	4✔
365	}).catch(err => {
UNCOV 366	if (axesEvent && err instanceof FlickingError && err.code === ERROR.CODE.ANIMATION_INTERRUPTED) return;	×
367	throw err;
368	});
369	}
370	}	1✔
371	}	5✔
372		1✔
373	export default Control;	5✔

naver / egjs-flicking / 2738763160

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous