1707283646

Build Type

github

Committed by GitHub

Commit Message

Merge eb75bd1cc into 3c870a315

Pull Request Pull Request #610: feat: add circularFallback

Run Details

3578 of 6231 branches covered (57.42%)

Branch coverage included in aggregate %.

423 of 468 new or added lines in 13 files covered. (90.38%)

27 existing lines in 4 files now uncovered.

5292 of 5752 relevant lines covered (92.0%)

122.21 hits per line

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

74.24

/src/camera/mode/CircularCameraMode.ts

/*
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Panel from "../../core/panel/Panel";
import AnchorPoint from "../../core/AnchorPoint";
import { DIRECTION } from "../../const/external";
import { circulatePosition } from "../../utils";

import CameraMode from "./CameraMode";

/**
 * A {@link Camera} mode that connects the last panel and the first panel, enabling continuous loop
 * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera} 모드
 */
class CircularCameraMode extends CameraMode {
  public checkAvailability(): boolean {
    const flicking = this._flicking;
    const renderer = flicking.renderer;
    const panels = renderer.panels;

    if (panels.length <= 0) {
      return false;
    }

    const firstPanel = panels[0];
    const lastPanel = panels[panels.length - 1];
    const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
    const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;

    const visibleSize = flicking.camera.size;
    const panelSizeSum = lastPanelNext - firstPanelPrev;

    const canSetCircularMode = panels
      .every(panel => panelSizeSum - panel.size >= visibleSize);

    return canSetCircularMode;
  }

  public getRange(): { min: number; max: number } {
    const flicking = this._flicking;
    const panels = flicking.renderer.panels;

    if (panels.length <= 0) {
      return { min: 0, max: 0 };
    }

    const firstPanel = panels[0];
    const lastPanel = panels[panels.length - 1];
    const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
    const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;

    return { min: firstPanelPrev, max: lastPanelNext };
  }

  public getAnchors(): AnchorPoint[] {
    const flicking = this._flicking;
    const panels = flicking.renderer.panels;

    return panels.map((panel, index) => new AnchorPoint({
      index,
      position: panel.position,
      panel
    }));
  }

  public findAnchorIncludePosition(position: number): AnchorPoint | null {
    const camera = this._flicking.camera;
    const range = camera.range;
    const anchors = camera.anchorPoints;
    const rangeDiff = camera.rangeDiff;
    const anchorCount = anchors.length;
    const positionInRange = circulatePosition(position, range.min, range.max);

    let anchorInRange: AnchorPoint | null = super.findAnchorIncludePosition(positionInRange);

    if (anchorCount > 0 && (position === range.min || position === range.max)) {
      const possibleAnchors = [
        anchorInRange,
        new AnchorPoint({
          index: 0,
          position: anchors[0].position + rangeDiff,
          panel: anchors[0].panel
        }),
        new AnchorPoint({
          index: anchorCount - 1,
          position: anchors[anchorCount - 1].position - rangeDiff,
          panel: anchors[anchorCount - 1].panel
        })
      ].filter(anchor => !!anchor) as AnchorPoint[];

      anchorInRange = possibleAnchors.reduce((nearest: AnchorPoint | null, anchor) => {
        if (!nearest) return anchor;

        return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)
          ? nearest
          : anchor;
      }, null);
    }

    if (!anchorInRange) return null;

    if (position < range.min) {
      const loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;

      return new AnchorPoint({
        index: anchorInRange.index,
        position: anchorInRange.position + rangeDiff * loopCount,
        panel: anchorInRange.panel
      });
    } else if (position > range.max) {
      const loopCount = Math.floor((position - range.max) / rangeDiff) + 1;

      return new AnchorPoint({
        index: anchorInRange.index,
        position: anchorInRange.position + rangeDiff * loopCount,
        panel: anchorInRange.panel
      });
    }

    return anchorInRange;
  }

  public getCircularOffset(): number {
    const flicking = this._flicking;
    const camera = flicking.camera;

    if (!camera.circularEnabled) return 0;

    const toggled = flicking.panels.filter(panel => panel.toggled);
    const toggledPrev = toggled.filter(panel => panel.toggleDirection === DIRECTION.PREV);
    const toggledNext = toggled.filter(panel => panel.toggleDirection === DIRECTION.NEXT);

    return this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
  }

  public clampToReachablePosition(position: number): number {
    // Basically all position is reachable for circular camera
    return position;
  }

  public canReach(panel: Panel): boolean {
    if (panel.removed) return false;

    // Always reachable on circular mode
    return true;
  }

  public canSee(panel: Panel): boolean {
    const camera = this._flicking.camera;
    const range = camera.range;
    const rangeDiff = camera.rangeDiff;
    const visibleRange = camera.visibleRange;
    const visibleInCurrentRange = super.canSee(panel);

    // Check looped visible area for circular case
    if (visibleRange.min < range.min) {
      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
    } else if (visibleRange.max > range.max) {
      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
    }

    return visibleInCurrentRange;
  }

  private _calcPanelAreaSum(panels: Panel[]) {
    return panels.reduce((sum: number, panel: Panel) => sum + panel.sizeIncludingMargin, 0);
  }
}

export default CircularCameraMode;

1	/*	1✔
2	* Copyright (c) 2015 NAVER Corp.	1✔
3	* egjs projects are licensed under the MIT license	1✔
4	*/	1!
5	import Panel from "../../core/panel/Panel";
6	import AnchorPoint from "../../core/AnchorPoint";	5!
7	import { DIRECTION } from "../../const/external";	6✔
8	import { circulatePosition } from "../../utils";	5✔
9		1✔
10	import CameraMode from "./CameraMode";	6!
11
12	/**	1✔
13	* A {@link Camera} mode that connects the last panel and the first panel, enabling continuous loop	1✔
14	* @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera} 모드	1!
15	*/
16	class CircularCameraMode extends CameraMode {	5✔
17	public checkAvailability(): boolean {	6✔
18	const flicking = this._flicking;	4!
19	const renderer = flicking.renderer;	2✔
20	const panels = renderer.panels;	3✔
21		1✔
22	if (panels.length <= 0) {	3✔
23	return false;	2✔
24	}	1✔
25
26	const firstPanel = panels[0];	1✔
27	const lastPanel = panels[panels.length - 1];	1✔
28	const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;	1✔
29	const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;	2✔
30		1✔
31	const visibleSize = flicking.camera.size;	1✔
32	const panelSizeSum = lastPanelNext - firstPanelPrev;	67✔
33
34	const canSetCircularMode = panels	2✔
35	.every(panel => panelSizeSum - panel.size >= visibleSize);	71✔
36		68✔
37	return canSetCircularMode;	69✔
38	}	68✔
39		43✔
40	public getRange(): { min: number; max: number } {	5✔
41	const flicking = this._flicking;	26✔
42	const panels = flicking.renderer.panels;	26✔
43		25✔
44	if (panels.length <= 0) {	26!
45	return { min: 0, max: 0 };	25✔
46	}	25✔
47		25✔
48	const firstPanel = panels[0];	78✔
49	const lastPanel = panels[panels.length - 1];	26✔
50	const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;	1✔
51	const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;	2✔
52		22✔
53	return { min: firstPanelPrev, max: lastPanelNext };	23✔
54	}	22!
55
56	public getAnchors(): AnchorPoint[] {	5✔
57	const flicking = this._flicking;	23✔
58	const panels = flicking.renderer.panels;	23✔
59		22✔
60	return panels.map((panel, index) => new AnchorPoint({	25✔
61	index,	22✔
62	position: panel.position,
63	panel	1✔
64	}));	21✔
65	}	21✔
66		65✔
67	public findAnchorIncludePosition(position: number): AnchorPoint \| null {	5✔
68	const camera = this._flicking.camera;
69	const range = camera.range;
70	const anchors = camera.anchorPoints;
71	const rangeDiff = camera.rangeDiff;
72	const anchorCount = anchors.length;	1✔
73	const positionInRange = circulatePosition(position, range.min, range.max);	7✔
74		7✔
75	let anchorInRange: AnchorPoint \| null = super.findAnchorIncludePosition(positionInRange);	7✔
76		7✔
77	if (anchorCount > 0 && (position === range.min \|\| position === range.max)) {	7!
78	const possibleAnchors = [	7✔
79	anchorInRange,	7✔
80	new AnchorPoint({	7✔
81	index: 0,	2✔
82	position: anchors[0].position + rangeDiff,
83	panel: anchors[0].panel
84	}),
85	new AnchorPoint({
86	index: anchorCount - 1,
87	position: anchors[anchorCount - 1].position - rangeDiff,
88	panel: anchors[anchorCount - 1].panel
89	})
90	].filter(anchor => !!anchor) as AnchorPoint[];
91
92	anchorInRange = possibleAnchors.reduce((nearest: AnchorPoint \| null, anchor) => {
93	if (!nearest) return anchor;	6!
94		2✔
95	return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)	6!
96	? nearest	2✔
97	: anchor;	4✔
98	}, null);
99	}
100
101	if (!anchorInRange) return null;	×
102		7!
NEW 103	if (position < range.min) {	×
104	const loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;	7✔
105		4✔
106	return new AnchorPoint({	4✔
107	index: anchorInRange.index,
108	position: anchorInRange.position + rangeDiff * loopCount,
109	panel: anchorInRange.panel
110	});
111	} else if (position > range.max) {	×
112	const loopCount = Math.floor((position - range.max) / rangeDiff) + 1;	3✔
113		1✔
114	return new AnchorPoint({	1✔
115	index: anchorInRange.index,
116	position: anchorInRange.position + rangeDiff * loopCount,
117	panel: anchorInRange.panel
118	});
119	}
120		2✔
121	return anchorInRange;
122	}	1✔
123		55✔
124	public getCircularOffset(): number {	60✔
125	const flicking = this._flicking;	57!
126	const camera = flicking.camera;	2✔
127		175✔
128	if (!camera.circularEnabled) return 0;	57!
129		55✔
130	const toggled = flicking.panels.filter(panel => panel.toggled);	61✔
131	const toggledPrev = toggled.filter(panel => panel.toggleDirection === DIRECTION.PREV);	2✔
132	const toggledNext = toggled.filter(panel => panel.toggleDirection === DIRECTION.NEXT);	3✔
133
134	return this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);	11✔
135	}
136		1✔
137	public clampToReachablePosition(position: number): number {	30!
138	// Basically all position is reachable for circular camera
139	return position;
140	}	25✔
141
142	public canReach(panel: Panel): boolean {	6✔
143	if (panel.removed) return false;	1,095!
144		1,094✔
145	// Always reachable on circular mode	1,094✔
146	return true;	1,095✔
147	}	1,094✔
148
149	public canSee(panel: Panel): boolean {	1,099✔
150	const camera = this._flicking.camera;	281✔
151	const range = camera.range;	3✔
152	const rangeDiff = camera.rangeDiff;	819✔
153	const visibleRange = camera.visibleRange;	511✔
154	const visibleInCurrentRange = super.canSee(panel);	3✔
155		308✔
156	// Check looped visible area for circular case
157	if (visibleRange.min < range.min) {	4!
158	return visibleInCurrentRange \|\| panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);	110!
159	} else if (visibleRange.max > range.max) {	3!
160	return visibleInCurrentRange \|\| panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);	1!
161	}
162		1✔
163	return visibleInCurrentRange;	3✔
164	}
165
166	private _calcPanelAreaSum(panels: Panel[]) {	5✔
167	return panels.reduce((sum: number, panel: Panel) => sum + panel.sizeIncludingMargin, 0);	4✔
168	}
169	}	5✔
170
171	export default CircularCameraMode;	5✔

naver / egjs-flicking / 1707283646

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