10557177632

Committed 26 Aug 2024 09:22AM UTC coverage: 38.327% (-44.5%) from 82.855%

Build # 10557177632

Build Type

Pull #886

github

Committed by

daybrush

Commit Message

fix: recalculate camera offset

Pull Request Pull Request #886: fix: recalculate camera offset

Run Details

2039 of 7372 branches covered (27.66%)

Branch coverage included in aggregate %.

11 of 29 new or added lines in 2 files covered. (37.93%)

5575 existing lines in 46 files now uncovered.

5099 of 11252 relevant lines covered (45.32%)

10.91 hits per line

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

60.18

/src/control/FreeControl.ts

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

import FlickingError from "../core/FlickingError";
import * as ERROR from "../const/error";
import { getFlickingAttached } from "../utils";

import Control from "./Control";

/**
 * An options for the {@link FreeControl}
 * @ko {@link FreeControl} 생성시 사용되는 옵션
 * @interface
 * @property {boolean} stopAtEdge Make scroll animation to stop at the start/end of the scroll area, not going out the bounce area
 * <ko>스크롤 애니메이션을 스크롤 영역의 시작과 끝부분에서 멈추도록 하여, 바운스 영역을 넘어가지 않도록 합니다</ko>
 */
export interface FreeControlOptions {
  stopAtEdge: boolean;
}

/**
 * A {@link Control} that can be scrolled freely without alignment
 * @ko 패널이 정해진 지점에 정렬되지 않고, 자유롭게 스크롤할 수 있는 이동 방식을 사용하는 {@link Control}
 */
class FreeControl extends Control {
  private _stopAtEdge: FreeControlOptions["stopAtEdge"];

  /**
   * Make scroll animation to stop at the start/end of the scroll area, not going out the bounce area
   * @ko 스크롤 애니메이션을 스크롤 영역의 시작과 끝부분에서 멈추도록 하여, 바운스 영역을 넘어가지 않도록 합니다
   * @type {boolean}
   * @default true
   */
  public get stopAtEdge() { return this._stopAtEdge; }

  public set stopAtEdge(val: FreeControlOptions["stopAtEdge"]) { this._stopAtEdge = val; }

  /** */
  public constructor({
    stopAtEdge = true
  }: Partial<FreeControlOptions> = {}) {
    super();

    this._stopAtEdge = stopAtEdge;
  }

  /**
   * 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 {
    const flicking = getFlickingAttached(this._flicking);
    const camera = flicking.camera;
    const activePanel = this._activePanel;

    if (activePanel) {
      const panelRange = activePanel.range;
      const newPosition = panelRange.min + (panelRange.max - panelRange.min) * progressInPanel;

      camera.lookAt(camera.clampToReachablePosition(newPosition));
    }
  }

  /**
   * 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 targetPos = camera.clampToReachablePosition(position);

    const anchorAtPosition = camera.findAnchorIncludePosition(targetPos);

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

    const targetPanel = anchorAtPosition.panel;

    // Trigger only change event
    if (targetPanel !== this._activePanel) {
      this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
    }

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

export default FreeControl;

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 FlickingError from "../core/FlickingError";	6✔
8	import * as ERROR from "../const/error";	5✔
9	import { getFlickingAttached } from "../utils";	6✔
10		1!
11	import Control from "./Control";	5✔
12		1✔
13	/**	1✔
14	* An options for the {@link FreeControl}	1!
15	* @ko {@link FreeControl} 생성시 사용되는 옵션
16	* @interface
17	* @property {boolean} stopAtEdge Make scroll animation to stop at the start/end of the scroll area, not going out the bounce area	1!
18	* <ko>스크롤 애니메이션을 스크롤 영역의 시작과 끝부분에서 멈추도록 하여, 바운스 영역을 넘어가지 않도록 합니다</ko>	×
19	*/
20	export interface FreeControlOptions {
21	stopAtEdge: boolean;	×
22	}
23
24	/**	1!
25	* A {@link Control} that can be scrolled freely without alignment
26	* @ko 패널이 정해진 지점에 정렬되지 않고, 자유롭게 스크롤할 수 있는 이동 방식을 사용하는 {@link Control}
27	*/
28	class FreeControl extends Control {	5✔
29	private _stopAtEdge: FreeControlOptions["stopAtEdge"];	1✔
30		1!
31	/**
32	* Make scroll animation to stop at the start/end of the scroll area, not going out the bounce area	×
33	* @ko 스크롤 애니메이션을 스크롤 영역의 시작과 끝부분에서 멈추도록 하여, 바운스 영역을 넘어가지 않도록 합니다
34	* @type {boolean}
35	* @default true
36	*/	1✔
37	public get stopAtEdge() { return this._stopAtEdge; }	7!
38
39	public set stopAtEdge(val: FreeControlOptions["stopAtEdge"]) { this._stopAtEdge = val; }	1✔
40		1✔
41	/** */	1✔
42	public constructor({	2!
43	stopAtEdge = true	2!
44	}: Partial<FreeControlOptions> = {}) {
45	super();	1✔
46
47	this._stopAtEdge = stopAtEdge;	1✔
48	}	1✔
49		1✔
50	/**
51	* Update position after resizing
52	* @ko resize 이후에 position을 업데이트합니다	×
53	* @param {number} progressInPanel Previous camera's progress in active panel before resize<ko>Resize 이전 현재 선택된 패널 내에서의 카메라 progress 값</ko>	×
54	* @throws {FlickingError}
55	* {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
56	* <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
57	* @chainable	1✔
58	* @return {Promise<void>}
59	*/
60	public updatePosition(progressInPanel: number): void {	5✔
61	const flicking = getFlickingAttached(this._flicking);
62	const camera = flicking.camera;
63	const activePanel = this._activePanel;
64
65	if (activePanel) {	×
66	const panelRange = activePanel.range;
67	const newPosition = panelRange.min + (panelRange.max - panelRange.min) * progressInPanel;
68
69	camera.lookAt(camera.clampToReachablePosition(newPosition));
70	}
71	}
72
73	/**
74	* Move {@link Camera} to the given position
75	* @ko {@link Camera}를 주어진 좌표로 이동합니다
76	* @param {number} position The target position to move<ko>이동할 좌표</ko>
77	* @param {number} duration Duration of the panel movement animation (unit: ms).<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
78	* @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}
79	* <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>	1✔
80	* @fires Flicking#moveStart
81	* @fires Flicking#move
82	* @fires Flicking#moveEnd
83	* @fires Flicking#willChange	×
84	* @fires Flicking#changed
85	* @fires Flicking#willRestore
86	* @fires Flicking#restored
87	* @fires Flicking#needPanel
88	* @fires Flicking#visibleChange
89	* @fires Flicking#reachEdge
90	* @throws {FlickingError}
91	* \|code\|condition\|
92	* \|---\|---\|
93	* \|{@link ERROR_CODE POSITION_NOT_REACHABLE}\|When the given panel is already removed or not in the Camera's {@link Camera#range range}\|
94	* \|{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}\|When {@link Control#init init} is not called before\|
95	* \|{@link ERROR_CODE ANIMATION_INTERRUPTED}\|When the animation is interrupted by user input\|
96	* \|{@link ERROR_CODE STOP_CALLED_BY_USER}\|When the animation is interrupted by user input\|
97	* <ko>
98	*
99	* \|code\|condition\|
100	* \|---\|---\|
101	* \|{@link ERROR_CODE POSITION_NOT_REACHABLE}\|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우\|
102	* \|{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}\|{@link Control#init init}이 이전에 호출되지 않은 경우\|
103	* \|{@link ERROR_CODE ANIMATION_INTERRUPTED}\|사용자 입력에 의해 애니메이션이 중단된 경우\|
104	* \|{@link ERROR_CODE STOP_CALLED_BY_USER}\|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우\|
105	*
106	* </ko>
107	* @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
108	*/
109	public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {	5✔
110	const flicking = getFlickingAttached(this._flicking);
111
112	const camera = flicking.camera;
113	const targetPos = camera.clampToReachablePosition(position);
114
115	const anchorAtPosition = camera.findAnchorIncludePosition(targetPos);
116
117	if (!anchorAtPosition) {	×
118	return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));
119	}
120
121	const targetPanel = anchorAtPosition.panel;
122
123	// Trigger only change event
124	if (targetPanel !== this._activePanel) {	×
125	this._triggerIndexChangeEvent(targetPanel, position, axesEvent);	1✔
126	}
127
UNCOV 128	return this._animateToPosition({ position: this._stopAtEdge ? targetPos : position, duration, newActivePanel: targetPanel, axesEvent });	×
129	}
130	}	5!
131
132	export default FreeControl;	5✔

naver / egjs-flicking / 10557177632

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