2829450113

Build Type

github

Committed by GitHub

Commit Message

Merge e6a393d3f into bcb7e0d68

Pull Request Pull Request #717: fix: fix updated state not applied in event handler functions

Run Details

504 of 1388 branches covered (36.31%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

31 existing lines in 7 files now uncovered.

2197 of 3430 relevant lines covered (64.05%)

38.2 hits per line

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

56.03

/src/control/StrictControl.ts

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

import Panel from "../core/panel/Panel";
import FlickingError from "../core/FlickingError";
import { clamp, getFlickingAttached, getMinusCompensatedIndex, isBetween } from "../utils";
import * as ERROR from "../const/error";

import Control from "./Control";
/**
 * An options for the {@link StrictControl}
 * @ko {@link StrictControl} 생성시 사용되는 옵션
 * @interface
 * @property {number} count Maximum number of panels that can be moved at a time<ko>최대로 움직일 수 있는 패널의 개수</ko>
 */
export interface StrictControlOptions {
  count: number;
}

/**
 * A {@link Control} that allow you to select the maximum number of panels to move at a time
 * @ko 한번에 최대로 이동할 패널의 개수를 선택 가능한 {@link Control}
 */
class StrictControl extends Control {
  private _count: number;
  private _indexRange: { min: number; max: number };

  /**
   * Maximum number of panels that can be moved at a time
   * @ko 최대로 움직일 수 있는 패널의 개수
   * @type {number}
   * @default 1
   */
  public get count() { return this._count; }

  public set count(val: StrictControlOptions["count"]) { this._count = val; }

  /** */
  public constructor({
    count = 1
  }: Partial<StrictControlOptions> = {}) {
    super();

    this._count = count;
    this._resetIndexRange();
  }

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

    this._resetIndexRange();
  }

  /**
   * 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;
    const renderer = flicking.renderer;
    const controller = this._controller;
    const controlParams = camera.controlParams;
    const count = this._count;

    const activePanel = controller.state.animating
      ? camera.findNearestAnchor(camera.position)?.panel
      : this._activePanel;

    if (!activePanel) {
      controller.update(controlParams);
      this._resetIndexRange();
      return this;
    }

    const cameraRange = controlParams.range;
    const currentPos = activePanel.position;
    const currentIndex = activePanel.index;
    const panelCount = renderer.panelCount;

    let prevPanelIndex = currentIndex - count;
    let nextPanelIndex = currentIndex + count;

    if (prevPanelIndex < 0) {
      prevPanelIndex = flicking.circularEnabled
        ? getMinusCompensatedIndex((prevPanelIndex + 1) % panelCount - 1, panelCount)
        : clamp(prevPanelIndex, 0, panelCount - 1);
    }
    if (nextPanelIndex >= panelCount) {
      nextPanelIndex = flicking.circularEnabled
        ? nextPanelIndex % panelCount
        : clamp(nextPanelIndex, 0, panelCount - 1);
    }

    const prevPanel = renderer.panels[prevPanelIndex];
    const nextPanel = renderer.panels[nextPanelIndex];

    let prevPos = Math.max(prevPanel.position, cameraRange.min);
    let nextPos = Math.min(nextPanel.position, cameraRange.max);

    if (prevPos > currentPos) {
      prevPos -= camera.rangeDiff;
    }
    if (nextPos < currentPos) {
      nextPos += camera.rangeDiff;
    }

    controlParams.range = {
      min: prevPos,
      max: nextPos
    };

    if (controlParams.circular) {
      if (controlParams.position < prevPos) {
        controlParams.position += camera.rangeDiff;
      }

      if (controlParams.position > nextPos) {
        controlParams.position -= camera.rangeDiff;
      }
    }

    controlParams.circular = false;
    controller.update(controlParams);

    this._indexRange = {
      min: prevPanel.index,
      max: nextPanel.index
    };

    return this;
  }

  public async moveToPanel(panel: Panel, options: Parameters<Control["moveToPanel"]>[1]): Promise<void> {
    const flicking = getFlickingAttached(this._flicking);
    const camera = flicking.camera;
    const controller = this._controller;

    controller.update(camera.controlParams);

    return super.moveToPanel(panel, options);
  }

  /**
   * Move {@link Camera} to the given position
   * @ko {@link Camera}를 주어진 좌표로 이동합니다
   * @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 moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
    const flicking = getFlickingAttached(this._flicking);
    const camera = flicking.camera;
    const activePanel = this._activePanel;
    const axesRange = this._controller.range;
    const indexRange = this._indexRange;
    const cameraRange = camera.range;
    const state = this._controller.state;

    const clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
    const anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);

    if (!anchorAtPosition || !activePanel) {
      return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));
    }

    const prevPos = activePanel.position;
    const posDelta = flicking.animating
      ? state.delta
      : position - camera.position;

    const isOverThreshold = Math.abs(posDelta) >= flicking.threshold;
    const adjacentAnchor = (position > prevPos)
      ? camera.getNextAnchor(anchorAtPosition)
      : camera.getPrevAnchor(anchorAtPosition);

    let targetPos: number;
    let targetPanel: Panel;

    const anchors = camera.anchorPoints;
    const firstAnchor = anchors[0];
    const lastAnchor = anchors[anchors.length - 1];

    const shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
    const shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);

    const isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max
      ? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)
      : adjacentAnchor.index >= indexRange.min || adjacentAnchor.index <= indexRange.max);

    if (shouldBounceToFirst || shouldBounceToLast) {
      // In bounce area
      const targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;

      targetPanel = targetAnchor.panel;
      targetPos = targetAnchor.position;
    } else if (isOverThreshold && anchorAtPosition.position !== activePanel.position) {
      // Move to anchor at position
      targetPanel = anchorAtPosition.panel;
      targetPos = anchorAtPosition.position;
    } else if (isOverThreshold && isAdjacent) {
      // Move to adjacent anchor
      targetPanel = adjacentAnchor!.panel;
      targetPos = adjacentAnchor!.position;
    } else {
      // Restore to active panel
      targetPos = camera.clampToReachablePosition(activePanel.position);
      targetPanel = activePanel;
    }

    this._triggerIndexChangeEvent(targetPanel, position, axesEvent);

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

  public setActive = (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => {
    super.setActive(newActivePanel, prevActivePanel, isTrusted);
    this.updateInput();
  };

  private _resetIndexRange() {
    this._indexRange = { min: 0, max: 0 };
  }
}

export default StrictControl;

1	/*	1✔
2	* Copyright (c) 2015 NAVER Corp.	1✔
3	* egjs projects are licensed under the MIT license	1✔
4	*/	1!
5	import { OnRelease } from "@egjs/axes";
6		×
7	import Panel from "../core/panel/Panel";	1✔
8	import FlickingError from "../core/FlickingError";	5✔
9	import { clamp, getFlickingAttached, getMinusCompensatedIndex, isBetween } from "../utils";	6✔
10	import * as ERROR from "../const/error";	6!
11
12	import Control from "./Control";	6✔
13	/**	1✔
14	* An options for the {@link StrictControl}	1!
15	* @ko {@link StrictControl} 생성시 사용되는 옵션
16	* @interface
17	* @property {number} count Maximum number of panels that can be moved at a time<ko>최대로 움직일 수 있는 패널의 개수</ko>	1!
18	*/	×
19	export interface StrictControlOptions {
20	count: number;
21	}	×
22
23	/**
24	* A {@link Control} that allow you to select the maximum number of panels to move at a time	1!
25	* @ko 한번에 최대로 이동할 패널의 개수를 선택 가능한 {@link Control}
26	*/
27	class StrictControl extends Control {	5✔
28	private _count: number;
29	private _indexRange: { min: number; max: number };	1✔
30		1!
31	/**
32	* Maximum number of panels that can be moved at a time	×
33	* @ko 최대로 움직일 수 있는 패널의 개수
34	* @type {number}
35	* @default 1
36	*/	1✔
37	public get count() { return this._count; }	5!
38		12✔
39	public set count(val: StrictControlOptions["count"]) { this._count = val; }	×
40
41	/** */	12!
42	public constructor({	12!
43	count = 1	×
44	}: Partial<StrictControlOptions> = {}) {
45	super();	1!
46		12!
47	this._count = count;	12✔
48	this._resetIndexRange();	36✔
49	}
50		12!
51	/**	24✔
52	* Destroy Control and return to initial state	24!
53	* @ko Control을 초기 상태로 되돌립니다	24!
54	* @return {void}	24!
55	*/	12✔
56	public destroy() {	5✔
57	super.destroy();	×
58
59	this._resetIndexRange();
60	}	12!
61		×
62	/**	×
63	* Update {@link Control#controller controller}'s state	×
64	* @ko {@link Control#controller controller}의 내부 상태를 갱신합니다	×
65	* @chainable
66	* @return {this}
67	*/	12✔
68	public updateInput(): this {	29✔
69	const flicking = getFlickingAttached(this._flicking);	12!
70	const camera = flicking.camera;
71	const renderer = flicking.renderer;
72	const controller = this._controller;	1✔
73	const controlParams = camera.controlParams;	2!
74	const count = this._count;
75		1✔
76	const activePanel = controller.state.animating	1!
77	? camera.findNearestAnchor(camera.position)?.panel	1!
78	: this._activePanel;	1✔
79		1✔
80	if (!activePanel) {	×
81	controller.update(controlParams);
82	this._resetIndexRange();
83	return this;
84	}	1✔
85		1✔
86	const cameraRange = controlParams.range;
87	const currentPos = activePanel.position;
88	const currentIndex = activePanel.index;	21✔
89	const panelCount = renderer.panelCount;	21✔
90		21✔
91	let prevPanelIndex = currentIndex - count;	38✔
92	let nextPanelIndex = currentIndex + count;	38✔
93
94	if (prevPanelIndex < 0) {	21!
95	prevPanelIndex = flicking.circularEnabled	21!
96	? getMinusCompensatedIndex((prevPanelIndex + 1) % panelCount - 1, panelCount)	21✔
97	: clamp(prevPanelIndex, 0, panelCount - 1);
98	}	1✔
99	if (nextPanelIndex >= panelCount) {	×
100	nextPanelIndex = flicking.circularEnabled	×
101	? nextPanelIndex % panelCount
102	: clamp(nextPanelIndex, 0, panelCount - 1);
103	}
104
105	const prevPanel = renderer.panels[prevPanelIndex];	×
106	const nextPanel = renderer.panels[nextPanelIndex];	×
107
108	let prevPos = Math.max(prevPanel.position, cameraRange.min);
109	let nextPos = Math.min(nextPanel.position, cameraRange.max);
110
111	if (prevPos > currentPos) {	×
112	prevPos -= camera.rangeDiff;
113	}
114	if (nextPos < currentPos) {	×
115	nextPos += camera.rangeDiff;	1✔
116	}	20✔
117		20✔
118	controlParams.range = {
119	min: prevPos,
120	max: nextPos
121	};
122
123	if (controlParams.circular) {	×
124	if (controlParams.position < prevPos) {	×
125	controlParams.position += camera.rangeDiff;	1✔
126	}
127		83✔
128	if (controlParams.position > nextPos) {	83!
129	controlParams.position -= camera.rangeDiff;	83✔
130	}	83✔
131	}	83✔
132		83✔
133	controlParams.circular = false;	83✔
134	controller.update(controlParams);	9!
135
136	this._indexRange = {	83✔
137	min: prevPanel.index,	20✔
138	max: nextPanel.index	20✔
139	};	20✔
140
141	return this;	63✔
142	}	63✔
143		63✔
144	public async moveToPanel(panel: Panel, options: Parameters<Control["moveToPanel"]>[1]): Promise<void> {	68✔
145	const flicking = getFlickingAttached(this._flicking);	63✔
146	const camera = flicking.camera;	63✔
147	const controller = this._controller;	63✔
148		36✔
149	controller.update(camera.controlParams);
150
151	return super.moveToPanel(panel, options);
152	}	63✔
153		14✔
154	/**
155	* Move {@link Camera} to the given position
156	* @ko {@link Camera}를 주어진 좌표로 이동합니다
157	* @param {number} position The target position to move<ko>이동할 좌표</ko>	63✔
158	* @param {number} duration Duration of the panel movement animation (unit: ms).<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>	63✔
159	* @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}	63✔
160	* <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>	63✔
161	* @fires Flicking#moveStart	63✔
162	* @fires Flicking#move	10✔
163	* @fires Flicking#moveEnd
164	* @fires Flicking#willChange	63✔
165	* @fires Flicking#changed	3✔
166	* @fires Flicking#willRestore
167	* @fires Flicking#restored	63✔
168	* @fires Flicking#needPanel
169	* @fires Flicking#visibleChange
170	* @fires Flicking#reachEdge
171	* @throws {FlickingError}	63✔
172	* \|code\|condition\|	12!
173	* \|---\|---\|
174	* \|{@link ERROR_CODE POSITION_NOT_REACHABLE}\|When the given panel is already removed or not in the Camera's {@link Camera#range range}\|
175	* \|{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}\|When {@link Control#init init} is not called before\|	12!
176	* \|{@link ERROR_CODE ANIMATION_INTERRUPTED}\|When the animation is interrupted by user input\|
177	* \|{@link ERROR_CODE STOP_CALLED_BY_USER}\|When the animation is interrupted by user input\|
178	* <ko>
179	*	63✔
180	* \|code\|condition\|	63✔
181	* \|---\|---\|	63✔
182	* \|{@link ERROR_CODE POSITION_NOT_REACHABLE}\|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우\|
183	* \|{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}\|{@link Control#init init}이 이전에 호출되지 않은 경우\|
184	* \|{@link ERROR_CODE ANIMATION_INTERRUPTED}\|사용자 입력에 의해 애니메이션이 중단된 경우\|
185	* \|{@link ERROR_CODE STOP_CALLED_BY_USER}\|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우\|	63✔
186	*
187	* </ko>	1✔
188	* @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>	12✔
189	*/
190	public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {	17✔
191	const flicking = getFlickingAttached(this._flicking);	12✔
192	const camera = flicking.camera;	12✔
193	const activePanel = this._activePanel;	12✔
194	const axesRange = this._controller.range;	12✔
195	const indexRange = this._indexRange;	12✔
196	const cameraRange = camera.range;
197	const state = this._controller.state;
198
199	const clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
200	const anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
201
202	if (!anchorAtPosition \|\| !activePanel) {	×
203	return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));
204	}
205
206	const prevPos = activePanel.position;
207	const posDelta = flicking.animating	×
208	? state.delta
209	: position - camera.position;
210
211	const isOverThreshold = Math.abs(posDelta) >= flicking.threshold;
212	const adjacentAnchor = (position > prevPos)	×
213	? camera.getNextAnchor(anchorAtPosition)
214	: camera.getPrevAnchor(anchorAtPosition);
215
216	let targetPos: number;
217	let targetPanel: Panel;
218
219	const anchors = camera.anchorPoints;
220	const firstAnchor = anchors[0];
221	const lastAnchor = anchors[anchors.length - 1];
222
223	const shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);	×
224	const shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);	×
225
226	const isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max	×
227	? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)
228	: adjacentAnchor.index >= indexRange.min \|\| adjacentAnchor.index <= indexRange.max);	×
229
230	if (shouldBounceToFirst \|\| shouldBounceToLast) {	×
231	// In bounce area
232	const targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;	×
233
234	targetPanel = targetAnchor.panel;
235	targetPos = targetAnchor.position;	1✔
236	} else if (isOverThreshold && anchorAtPosition.position !== activePanel.position) {	9!
237	// Move to anchor at position	8✔
238	targetPanel = anchorAtPosition.panel;	8✔
239	targetPos = anchorAtPosition.position;	8✔
240	} else if (isOverThreshold && isAdjacent) {	8!
241	// Move to adjacent anchor	8✔
242	targetPanel = adjacentAnchor!.panel;	8✔
243	targetPos = adjacentAnchor!.position;	8✔
244	} else {	8✔
245	// Restore to active panel	8✔
246	targetPos = camera.clampToReachablePosition(activePanel.position);	1✔
247	targetPanel = activePanel;
248	}	7✔
249		7✔
250	this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
251
252	return this._animateToPosition({	7✔
253	position: targetPos,	7✔
254	duration,
255	newActivePanel: targetPanel,
256	axesEvent
257	});
258	}	7✔
259		7✔
260	public setActive = (newActivePanel: Panel, prevActivePanel: Panel \| null, isTrusted: boolean) => {	7✔
261	super.setActive(newActivePanel, prevActivePanel, isTrusted);	7✔
262	this.updateInput();	7✔
263	};	7✔
264
265	private _resetIndexRange() {	5✔
266	this._indexRange = { min: 0, max: 0 };	7✔
267	}
268	}	9✔
269		4✔
270	export default StrictControl;	9✔

naver / egjs-flicking / 2829450113

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