10625870166

Committed 30 Aug 2024 02:36AM UTC coverage: 82.835% (+0.04%) from 82.791%

Build # 10625870166

Build Type

Pull #884

github

Committed by

web-flow

Commit Message

Merge 16b1c05bc into c83fc5ed5

Pull Request Pull Request #884: fix: apply ResizeObserver to camera and panels

Run Details

4619 of 7417 branches covered (62.28%)

Branch coverage included in aggregate %.

66 of 67 new or added lines in 5 files covered. (98.51%)

18 existing lines in 4 files now uncovered.

11576 of 12134 relevant lines covered (95.4%)

275.26 hits per line

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

73.8

/src/renderer/Renderer.ts

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

import Flicking, { FlickingOptions } from "../Flicking";
import Panel, { PanelOptions } from "../core/panel/Panel";
import FlickingError from "../core/FlickingError";
import { ALIGN, EVENTS } from "../const/external";
import * as ERROR from "../const/error";
import { getFlickingAttached, getMinusCompensatedIndex, includes, parsePanelAlign } from "../utils";

import RenderingStrategy from "./strategy/RenderingStrategy";

export interface RendererOptions {
  align?: FlickingOptions["align"];
  strategy: RenderingStrategy;
}

/**
 * A component that manages {@link Panel} and its elements
 * @ko {@link Panel}과 그 엘리먼트들을 관리하는 컴포넌트
 */
abstract class Renderer {
  // Internal States
  protected _flicking: Flicking | null;
  protected _panels: Panel[];
  protected _rendering: boolean;

  // Options
  protected _align: NonNullable<RendererOptions["align"]>;
  protected _strategy: RendererOptions["strategy"];

  // Internal states Getter
  /**
   * Array of panels
   * @ko 전체 패널들의 배열
   * @type {Panel[]}
   * @readonly
   * @see Panel
   */
  public get panels() { return this._panels; }
  /**
   * A boolean value indicating whether rendering is in progress
   * @ko 현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부
   * @type {boolean}
   * @readonly
   * @internal
   */
  public get rendering() { return this._rendering; }
  /**
   * Count of panels
   * @ko 전체 패널의 개수
   * @type {number}
   * @readonly
   */
  public get panelCount() { return this._panels.length; }
  /**
   * @internal
   */
  public get strategy() { return this._strategy; }

  // Options Getter
  /**
   * A {@link Panel}'s {@link Panel#align align} value that applied to all panels
   * @ko {@link Panel}에 공통적으로 적용할 {@link Panel#align align} 값
   * @type {Constants.ALIGN | string | number}
   */
  public get align() { return this._align; }

  // Options Setter
  public set align(val: NonNullable<RendererOptions["align"]>) {
    this._align = val;

    const panelAlign = parsePanelAlign(val);
    this._panels.forEach(panel => { panel.align = panelAlign; });
  }

  /**
   * @param {object} options An options object<ko>옵션 오브젝트</ko>
   * @param {Constants.ALIGN | string | number} [options.align="center"] An {@link Flicking#align align} value that will be applied to all panels<ko>전체 패널에 적용될 {@link Flicking#align align} 값</ko>
   * @param {object} [options.strategy] An instance of RenderingStrategy(internal module)<ko>RenderingStrategy의 인스턴스(내부 모듈)</ko>
   */
  public constructor({
    align = ALIGN.CENTER,
    strategy
  }: RendererOptions) {
    this._flicking = null;
    this._panels = [];
    this._rendering = false;

    // Bind options
    this._align = align;
    this._strategy = strategy;
  }

  /**
   * Render panel elements inside the camera element
   * @ko 패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다
   * @method
   * @abstract
   * @memberof Renderer
   * @instance
   * @name render
   * @chainable
   * @return {this}
   */
  public abstract render(): Promise<void>;

  protected abstract _collectPanels(): void;
  protected abstract _createPanel(el: any, options: Omit<PanelOptions, "elementProvider">): Panel;

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

    return this;
  }

  /**
   * Destroy Renderer and return to initial state
   * @ko Renderer를 초기 상태로 되돌립니다
   * @return {void}
   */
  public destroy(): void {
    this._flicking = null;
    this._panels = [];
  }

  /**
   * Return the {@link Panel} at the given index. `null` if it doesn't exists.
   * @ko 주어진 인덱스에 해당하는 {@link Panel}을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다.
   * @return {Panel | null} Panel at the given index<ko>주어진 인덱스에 해당하는 패널</ko>
   * @see Panel
   */
  public getPanel(index: number): Panel | null {
    return this._panels[index] || null;
  }

  public forceRenderAllPanels(): Promise<void> {
    this._panels.forEach(panel => panel.markForShow());

    return Promise.resolve();
  }

  /**
   * Update all panel sizes
   * @ko 모든 패널의 크기를 업데이트합니다
   * @chainable
   * @return {this}
   */
  public updatePanelSize(): this {
    const flicking = getFlickingAttached(this._flicking);
    const panels = this._panels;

    if (panels.length <= 0) return this;

    if (flicking.panelsPerView > 0) {
      const firstPanel = panels[0];
      firstPanel.resize();

      this._updatePanelSizeByGrid(firstPanel, panels);
    } else {
      flicking.panels.forEach(panel => panel.resize());
    }

    return this;
  }

  /**
   * Insert new panels at given index
   * This will increase index of panels after by the number of panels added
   * @ko 주어진 인덱스에 새로운 패널들을 추가합니다
   * 해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.
   * @param {Array<object>} items An array of items to insert<ko>추가할 아이템들의 배열</ko>
   * @param {number} [items.index] Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
   * @param {any[]} [items.elements] An array of element or framework component with element in it<ko>엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열</ko>
   * @param {boolean} [items.hasDOMInElements] Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element<ko>내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에 추가합니다</ko>
   * @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>
   */
  public batchInsert(...items: Array<{
    index: number;
    elements: any[];
    hasDOMInElements: boolean;
  }>): Panel[] {
    const allPanelsInserted = this.batchInsertDefer(...items);

    if (allPanelsInserted.length <= 0) return [];

    this.updateAfterPanelChange(allPanelsInserted, []);

    return allPanelsInserted;
  }

  /**
   * Defers update
   * camera position & others will be updated after calling updateAfterPanelChange
   * @internal
   */
  public batchInsertDefer(...items: Array<{
    index: number;
    elements: any[];
    hasDOMInElements: boolean;
  }>) {
    const panels = this._panels;
    const flicking = getFlickingAttached(this._flicking);

    const prevFirstPanel = panels[0];
    const align = parsePanelAlign(this._align);

    const allPanelsInserted = items.reduce((addedPanels, item) => {
      const insertingIdx = getMinusCompensatedIndex(item.index, panels.length);
      const panelsPushed = panels.slice(insertingIdx);
      const panelsInserted = item.elements.map((el, idx) => this._createPanel(el, { index: insertingIdx + idx, align, flicking }));

      panels.splice(insertingIdx, 0, ...panelsInserted);

      if (item.hasDOMInElements) {
        // Insert the actual elements as camera element's children
        this._insertPanelElements(panelsInserted, panelsPushed[0] ?? null);
      }

      // Resize the newly added panels
      if (flicking.panelsPerView > 0) {
        const firstPanel = prevFirstPanel || panelsInserted[0].resize();

        this._updatePanelSizeByGrid(firstPanel, panelsInserted);
      } else {
        panelsInserted.forEach(panel => panel.resize());
      }

      // Update panel indexes & positions
      panelsPushed.forEach(panel => {
        panel.increaseIndex(panelsInserted.length);
        panel.updatePosition();
      });

      return [...addedPanels, ...panelsInserted];
    }, []);

    return allPanelsInserted;
  }

  /**
   * Remove the panel at the given index
   * This will decrease index of panels after by the number of panels removed
   * @ko 주어진 인덱스의 패널을 제거합니다
   * 해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다
   * @param {Array<object>} items An array of items to remove<ko>제거할 아이템들의 배열</ko>
   * @param {number} [items.index] Index of panel to remove<ko>제거할 패널의 인덱스</ko>
   * @param {number} [items.deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>
   * @param {boolean} [items.hasDOMInElements=1] Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element<ko>내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에서 제거합니다</ko>
   * @return An array of removed panels<ko>제거된 패널들의 배열</ko>
   */
  public batchRemove(...items: Array<{
    index: number;
    deleteCount: number;
    hasDOMInElements: boolean;
  }>): Panel[] {
    const allPanelsRemoved = this.batchRemoveDefer(...items);

    if (allPanelsRemoved.length <= 0) return [];

    this.updateAfterPanelChange([], allPanelsRemoved);

    return allPanelsRemoved;
  }

  /**
   * Defers update
   * camera position & others will be updated after calling updateAfterPanelChange
   * @internal
   */
  public batchRemoveDefer(...items: Array<{
    index: number;
    deleteCount: number;
    hasDOMInElements: boolean;
  }>) {
    const panels = this._panels;
    const flicking = getFlickingAttached(this._flicking);

    const { control } = flicking;
    const activePanel = control.activePanel;

    const allPanelsRemoved = items.reduce((removed, item) => {
      const { index, deleteCount } = item;
      const removingIdx = getMinusCompensatedIndex(index, panels.length);

      const panelsPulled = panels.slice(removingIdx + deleteCount);
      const panelsRemoved = panels.splice(removingIdx, deleteCount);

      if (panelsRemoved.length <= 0) return [];

      // Update panel indexes & positions
      panelsPulled.forEach(panel => {
        panel.decreaseIndex(panelsRemoved.length);
        panel.updatePosition();
      });

      if (item.hasDOMInElements) {
        this._removePanelElements(panelsRemoved);
      }

      // Remove panel elements
      panelsRemoved.forEach(panel => panel.destroy());

      if (includes(panelsRemoved, activePanel)) {
        control.resetActive();
      }

      return [...removed, ...panelsRemoved];
    }, []);

    return allPanelsRemoved;
  }

  /**
   * @internal
   */
  public updateAfterPanelChange(panelsAdded: Panel[], panelsRemoved: Panel[]) {
    const flicking = getFlickingAttached(this._flicking);
    const { camera, control } = flicking;
    const panels = this._panels;
    const activePanel = control.activePanel;

    // Update camera & control
    this._updateCameraAndControl();

    if (flicking.autoResize && flicking.useResizeObserver) {
      panelsAdded.forEach((panel) => {
        if (panel.element) {
          flicking.autoResizer.observe(panel.element);
        }
      });
      panelsRemoved.forEach((panel) => {
        if (panel.element) {
          flicking.autoResizer.unobserve(panel.element);
        }
      });
    }

    void this.render();

    if (!flicking.animating) {
      if (!activePanel || activePanel.removed) {
        if (panels.length <= 0) {
          // All panels removed
          camera.lookAt(0);
        } else {
          let targetIndex = activePanel?.index ?? 0;
          if (targetIndex > panels.length - 1) {
            targetIndex = panels.length - 1;
          }

          void control.moveToPanel(panels[targetIndex], {
            duration: 0
          }).catch(() => void 0);
        }
      } else {
        void control.moveToPanel(activePanel, {
          duration: 0
        }).catch(() => void 0);
      }
    }

    flicking.camera.updateOffset();

    if (panelsAdded.length > 0 || panelsRemoved.length > 0) {
      flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {
        added: panelsAdded,
        removed: panelsRemoved
      }));

      this.checkPanelContentsReady([
        ...panelsAdded,
        ...panelsRemoved
      ]);
    }
  }

  /**
   * @internal
   */
  public checkPanelContentsReady(checkingPanels: Panel[]) {
    const flicking = getFlickingAttached(this._flicking);
    const resizeOnContentsReady = flicking.resizeOnContentsReady;
    const panels = this._panels;

    if (!resizeOnContentsReady || flicking.virtualEnabled) return;

    const hasContents = (panel: Panel) => panel.element && !!panel.element.querySelector("img, video");
    checkingPanels = checkingPanels.filter(panel => hasContents(panel));

    if (checkingPanels.length <= 0) return;

    const contentsReadyChecker = new ImReady();

    checkingPanels.forEach(panel => {
      panel.loading = true;
    });

    contentsReadyChecker.on("readyElement", e => {
      if (!this._flicking) {
        // Renderer's destroy() is called before
        contentsReadyChecker.destroy();
        return;
      }

      const panel = checkingPanels[e.index];
      const camera = flicking.camera;
      const control = flicking.control;
      const prevProgressInPanel = control.activePanel
        ? camera.getProgressInPanel(control.activePanel)
        : 0;

      panel.loading = false;
      panel.resize();
      panels.slice(panel.index + 1).forEach(panelBehind => panelBehind.updatePosition());

      if (!flicking.initialized) return;

      camera.updateRange();
      camera.updateOffset();
      camera.updateAnchors();

      if (control.animating) {
        // TODO: Need Axes update
      } else {
        control.updatePosition(prevProgressInPanel);
        control.updateInput();
      }
    });

    contentsReadyChecker.on("preReady", e => {
      if (this._flicking) {
        void this.render();
      }

      if (e.readyCount === e.totalCount) {
        contentsReadyChecker.destroy();
      }
    });

    contentsReadyChecker.on("ready", () => {
      if (this._flicking) {
        void this.render();
      }
      contentsReadyChecker.destroy();
    });

    contentsReadyChecker.check(checkingPanels.map(panel => panel.element));
  }

  protected _updateCameraAndControl() {
    const flicking = getFlickingAttached(this._flicking);
    const { camera, control } = flicking;

    camera.updateRange();
    camera.updateOffset();
    camera.updateAnchors();
    camera.resetNeedPanelHistory();
    control.updateInput();
  }

  protected _showOnlyVisiblePanels(flicking: Flicking) {
    const panels = flicking.renderer.panels;
    const camera = flicking.camera;

    const visibleIndexes = camera.visiblePanels.reduce((visibles, panel) => {
      visibles[panel.index] = true;
      return visibles;
    }, {});

    panels.forEach(panel => {
      if (panel.index in visibleIndexes || panel.loading) {
        panel.markForShow();
      } else if (!flicking.holding) {
        // During the input sequence,
        // Do not remove panel elements as it won't trigger touchend event.
        panel.markForHide();
      }
    });
  }

  protected _updatePanelSizeByGrid(referencePanel: Panel, panels: Panel[]) {
    const flicking = getFlickingAttached(this._flicking);
    const panelsPerView = flicking.panelsPerView;

    if (panelsPerView <= 0) {
      throw new FlickingError(ERROR.MESSAGE.WRONG_OPTION("panelsPerView", panelsPerView), ERROR.CODE.WRONG_OPTION);
    }
    if (panels.length <= 0) return;

    const viewportSize = flicking.camera.size;
    const gap = referencePanel.margin.prev + referencePanel.margin.next;

    const panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;
    const panelSizeObj = flicking.horizontal
      ? { width: panelSize }
      : { height: panelSize };
    const firstPanelSizeObj = {
      size: panelSize,
      margin: referencePanel.margin,
      ...(!flicking.horizontal && { height: referencePanel.height})
    };

    if (!flicking.noPanelStyleOverride) {
      this._strategy.updatePanelSizes(flicking, panelSizeObj);
    }

    flicking.panels.forEach(panel => panel.resize(firstPanelSizeObj));
  }

  protected _removeAllChildsFromCamera() {
    const flicking = getFlickingAttached(this._flicking);
    const cameraElement = flicking.camera.element;

    // Remove other elements
    while (cameraElement.firstChild) {
      cameraElement.removeChild(cameraElement.firstChild);
    }
  }

  protected _insertPanelElements(panels: Panel[], nextSibling: Panel | null = null) {
    const flicking = getFlickingAttached(this._flicking);
    const camera = flicking.camera;
    const cameraElement = camera.element;
    const nextSiblingElement = nextSibling?.element || null;
    const fragment = document.createDocumentFragment();

    panels.forEach(panel => fragment.appendChild(panel.element));
    cameraElement.insertBefore(fragment, nextSiblingElement);
  }

  protected _removePanelElements(panels: Panel[]) {
    const flicking = getFlickingAttached(this._flicking);
    const cameraElement = flicking.camera.element;

    panels.forEach(panel => {
      cameraElement.removeChild(panel.element);
    });
  }

  protected _afterRender() {
    const flicking = getFlickingAttached(this._flicking);

    flicking.camera.applyTransform();
  }
}

export default Renderer;

1	/*	1✔
2	* Copyright (c) 2015 NAVER Corp.	1✔
3	* egjs projects are licensed under the MIT license	1!
4	*/
5	import { ComponentEvent } from "@egjs/component";	5✔
6	import ImReady from "@egjs/imready";	5!
7
8	import Flicking, { FlickingOptions } from "../Flicking";
9	import Panel, { PanelOptions } from "../core/panel/Panel";
10	import FlickingError from "../core/FlickingError";	5✔
11	import { ALIGN, EVENTS } from "../const/external";	6✔
12	import * as ERROR from "../const/error";	5✔
13	import { getFlickingAttached, getMinusCompensatedIndex, includes, parsePanelAlign } from "../utils";	6!
14		×
15	import RenderingStrategy from "./strategy/RenderingStrategy";
16
17	export interface RendererOptions {	×
18	align?: FlickingOptions["align"];
19	strategy: RenderingStrategy;
20	}	1!
21
22	/**
23	* A component that manages {@link Panel} and its elements
24	* @ko {@link Panel}과 그 엘리먼트들을 관리하는 컴포넌트
25	*/	1✔
26	abstract class Renderer {	6!
27	// Internal States
28	protected _flicking: Flicking \| null;	×
29	protected _panels: Panel[];
30	protected _rendering: boolean;
31
32	// Options	1✔
33	protected _align: NonNullable<RendererOptions["align"]>;	158✔
34	protected _strategy: RendererOptions["strategy"];	1,435!
35		×
36	// Internal states Getter
37	/**
38	* Array of panels
39	* @ko 전체 패널들의 배열	158✔
40	* @type {Panel[]}
41	* @readonly	1✔
42	* @see Panel	2✔
43	*/
44	public get panels() { return this._panels; }	1,251✔
45	/**
46	* A boolean value indicating whether rendering is in progress
47	* @ko 현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부
48	* @type {boolean}
49	* @readonly	1✔
50	* @internal	1✔
51	*/	1✔
52	public get rendering() { return this._rendering; }	396✔
53	/**	1✔
54	* Count of panels	1✔
55	* @ko 전체 패널의 개수
56	* @type {number}
57	* @readonly
58	*/
59	public get panelCount() { return this._panels.length; }	23✔
60	/**
61	* @internal
62	*/
63	public get strategy() { return this._strategy; }	5✔
64
65	// Options Getter
66	/**	507✔
67	* A {@link Panel}'s {@link Panel#align align} value that applied to all panels	507✔
68	* @ko {@link Panel}에 공통적으로 적용할 {@link Panel#align align} 값	507✔
69	* @type {Constants.ALIGN \| string \| number}	507✔
70	*/
71	public get align() { return this._align; }	521✔
72		507✔
73	// Options Setter
74	public set align(val: NonNullable<RendererOptions["align"]>) {	1✔
75	this._align = val;
76
77	const panelAlign = parsePanelAlign(val);
78	this._panels.forEach(panel => { panel.align = panelAlign; });
79	}
80
81	/**
82	* @param {object} options An options object<ko>옵션 오브젝트</ko>
83	* @param {Constants.ALIGN \| string \| number} [options.align="center"] An {@link Flicking#align align} value that will be applied to all panels<ko>전체 패널에 적용될 {@link Flicking#align align} 값</ko>	36,766✔
84	* @param {object} [options.strategy] An instance of RenderingStrategy(internal module)<ko>RenderingStrategy의 인스턴스(내부 모듈)</ko>
85	*/
86	public constructor({
87	align = ALIGN.CENTER,	15!
88	strategy	14✔
89	}: RendererOptions) {
90	this._flicking = null;	14✔
91	this._panels = [];	14✔
92	this._rendering = false;	14✔
93
94	// Bind options
95	this._align = align;	10,499✔
96	this._strategy = strategy;	14✔
97	}
98
99	/**	1✔
100	* Render panel elements inside the camera element
101	* @ko 패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다
102	* @method
103	* @abstract
104	* @memberof Renderer
105	* @instance
106	* @name render	12,236✔
107	* @chainable
108	* @return {this}
109	*/
110	public abstract render(): Promise<void>;	1✔
111
112	protected abstract _collectPanels(): void;
113	protected abstract _createPanel(el: any, options: Omit<PanelOptions, "elementProvider">): Panel;
114		3✔
115	/**
116	* Initialize Renderer
117	* @ko Renderer를 초기화합니다
118	* @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>	1✔
119	* @chainable
120	* @return {this}
121	*/
122	public init(flicking: Flicking): this {	5✔
123	this._flicking = flicking;	14✔
124	this._collectPanels();	14✔
125		474✔
126	return this;	14✔
127	}
128		3✔
129	/**	3✔
130	* Destroy Renderer and return to initial state	6✔
131	* @ko Renderer를 초기 상태로 되돌립니다
132	* @return {void}
133	*/
134	public destroy(): void {	5✔
135	this._flicking = null;
136	this._panels = [];
137	}
138
139	/**
140	* Return the {@link Panel} at the given index. `null` if it doesn't exists.
141	* @ko 주어진 인덱스에 해당하는 {@link Panel}을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다.
142	* @return {Panel \| null} Panel at the given index<ko>주어진 인덱스에 해당하는 패널</ko>	1✔
143	* @see Panel	492✔
144	*/	492✔
145	public getPanel(index: number): Panel \| null {	497✔
146	return this._panels[index] \|\| null;	44!
147	}
148
149	public forceRenderAllPanels(): Promise<void> {	5✔
150	this._panels.forEach(panel => panel.markForShow());
151
152	return Promise.resolve();	1✔
153	}	483✔
154		483✔
155	/**
156	* Update all panel sizes
157	* @ko 모든 패널의 크기를 업데이트합니다
158	* @chainable
159	* @return {this}
160	*/
161	public updatePanelSize(): this {	5✔
162	const flicking = getFlickingAttached(this._flicking);	15✔
163	const panels = this._panels;	1,734✔
164
165	if (panels.length <= 0) return this;	15!
166		193✔
167	if (flicking.panelsPerView > 0) {	50!
168	const firstPanel = panels[0];
169	firstPanel.resize();
170
171	this._updatePanelSizeByGrid(firstPanel, panels);
172	} else {
173	flicking.panels.forEach(panel => panel.resize());	54✔
174	}
175		1✔
176	return this;	523✔
177	}	509✔
178		509✔
179	/**	100✔
180	* Insert new panels at given index	409✔
181	* This will increase index of panels after by the number of panels added	30✔
182	* @ko 주어진 인덱스에 새로운 패널들을 추가합니다	30✔
183	* 해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.	30✔
184	* @param {Array<object>} items An array of items to insert<ko>추가할 아이템들의 배열</ko>
185	* @param {number} [items.index] Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
186	* @param {any[]} [items.elements] An array of element or framework component with element in it<ko>엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열</ko>	1,218✔
187	* @param {boolean} [items.hasDOMInElements] Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element<ko>내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에 추가합니다</ko>
188	* @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>	409✔
189	*/
190	public batchInsert(...items: Array<{	5✔
191	index: number;
192	elements: any[];
193	hasDOMInElements: boolean;
194	}>): Panel[] {
195	const allPanelsInserted = this.batchInsertDefer(...items);
196
197	if (allPanelsInserted.length <= 0) return [];	×
198
199	this.updateAfterPanelChange(allPanelsInserted, []);
200
201	return allPanelsInserted;	1✔
202	}	18✔
203		18✔
204	/**	18✔
205	* Defers update
206	* camera position & others will be updated after calling updateAfterPanelChange	18✔
207	* @internal	18!
208	*/
209	public batchInsertDefer(...items: Array<{	23✔
210	index: number;	18✔
211	elements: any[];
212	hasDOMInElements: boolean;
213	}>) {
214	const panels = this._panels;
215	const flicking = getFlickingAttached(this._flicking);
216
217	const prevFirstPanel = panels[0];	1✔
218	const align = parsePanelAlign(this._align);	19✔
219		19✔
220	const allPanelsInserted = items.reduce((addedPanels, item) => {	19✔
221	const insertingIdx = getMinusCompensatedIndex(item.index, panels.length);	20✔
222	const panelsPushed = panels.slice(insertingIdx);
223	const panelsInserted = item.elements.map((el, idx) => this._createPanel(el, { index: insertingIdx + idx, align, flicking }));	19✔
224		19✔
225	panels.splice(insertingIdx, 0, ...panelsInserted);	19✔
226		19✔
227	if (item.hasDOMInElements) {	19!
228	// Insert the actual elements as camera element's children
229	this._insertPanelElements(panelsInserted, panelsPushed[0] ?? null);	20!
230	}	20✔
231		632✔
232	// Resize the newly added panels	20✔
233	if (flicking.panelsPerView > 0) {	20!
234	const firstPanel = prevFirstPanel \|\| panelsInserted[0].resize();	×
235		12✔
236	this._updatePanelSizeByGrid(firstPanel, panelsInserted);
237	} else {
238	panelsInserted.forEach(panel => panel.resize());	20✔
239	}	6!
240		6✔
241	// Update panel indexes & positions
242	panelsPushed.forEach(panel => {
243	panel.increaseIndex(panelsInserted.length);	32✔
244	panel.updatePosition();
245	});
246		20✔
247	return [...addedPanels, ...panelsInserted];	363✔
248	}, []);	363✔
249
250	return allPanelsInserted;	20✔
251	}
252		19✔
253	/**
254	* Remove the panel at the given index
255	* This will decrease index of panels after by the number of panels removed
256	* @ko 주어진 인덱스의 패널을 제거합니다
257	* 해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다
258	* @param {Array<object>} items An array of items to remove<ko>제거할 아이템들의 배열</ko>
259	* @param {number} [items.index] Index of panel to remove<ko>제거할 패널의 인덱스</ko>
260	* @param {number} [items.deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>
261	* @param {boolean} [items.hasDOMInElements=1] Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element<ko>내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에서 제거합니다</ko>
262	* @return An array of removed panels<ko>제거된 패널들의 배열</ko>
263	*/
264	public batchRemove(...items: Array<{	5✔
265	index: number;	1✔
266	deleteCount: number;	8✔
267	hasDOMInElements: boolean;	8✔
268	}>): Panel[] {	8✔
269	const allPanelsRemoved = this.batchRemoveDefer(...items);
270		8✔
271	if (allPanelsRemoved.length <= 0) return [];	8!
272
273	this.updateAfterPanelChange([], allPanelsRemoved);	8✔
274		8✔
275	return allPanelsRemoved;
276	}
277
278	/**
279	* Defers update
280	* camera position & others will be updated after calling updateAfterPanelChange
281	* @internal	1✔
282	*/	17✔
283	public batchRemoveDefer(...items: Array<{	22✔
284	index: number;	17✔
285	deleteCount: number;	17✔
286	hasDOMInElements: boolean;
287	}>) {	17✔
288	const panels = this._panels;	17✔
289	const flicking = getFlickingAttached(this._flicking);	17✔
290		17✔
291	const { control } = flicking;	17✔
292	const activePanel = control.activePanel;	17✔
293		17✔
294	const allPanelsRemoved = items.reduce((removed, item) => {	17✔
295	const { index, deleteCount } = item;	17✔
296	const removingIdx = getMinusCompensatedIndex(index, panels.length);	17!
297
298	const panelsPulled = panels.slice(removingIdx + deleteCount);
299	const panelsRemoved = panels.splice(removingIdx, deleteCount);	17✔
300		112✔
301	if (panelsRemoved.length <= 0) return [];	112!
302
303	// Update panel indexes & positions	17✔
304	panelsPulled.forEach(panel => {	6✔
305	panel.decreaseIndex(panelsRemoved.length);
306	panel.updatePosition();
307	});	85✔
308		17✔
309	if (item.hasDOMInElements) {	7!
310	this._removePanelElements(panelsRemoved);
311	}	17✔
312
313	// Remove panel elements	17✔
314	panelsRemoved.forEach(panel => panel.destroy());
315
316	if (includes(panelsRemoved, activePanel)) {	×
317	control.resetActive();
318	}	1✔
319
320	return [...removed, ...panelsRemoved];	32✔
321	}, []);	32✔
322		32✔
323	return allPanelsRemoved;	32✔
324	}
325		32✔
326	/**	32!
327	* @internal	32✔
328	*/	632!
329	public updateAfterPanelChange(panelsAdded: Panel[], panelsRemoved: Panel[]) {	637✔
330	const flicking = getFlickingAttached(this._flicking);
331	const { camera, control } = flicking;
332	const panels = this._panels;	32✔
333	const activePanel = control.activePanel;	85!
334		85✔
335	// Update camera & control
336	this._updateCameraAndControl();
337
338	if (flicking.autoResize && flicking.useResizeObserver) {	32!
339	panelsAdded.forEach((panel) => {	32✔
340	if (panel.element) {	31!
341	flicking.autoResizer.observe(panel.element);	9✔
342	}
343	});	2✔
344	panelsRemoved.forEach((panel) => {
345	if (panel.element) {	×
346	flicking.autoResizer.unobserve(panel.element);	7!
347	}	7!
348	});
349	}
350		7✔
351	void this.render();
352
353	if (!flicking.animating) {	×
354	if (!activePanel \|\| activePanel.removed) {	×
355	if (panels.length <= 0) {	×
356	// All panels removed	22✔
357	camera.lookAt(0);
358	} else {
359	let targetIndex = activePanel?.index ?? 0;	×
360	if (targetIndex > panels.length - 1) {	×
361	targetIndex = panels.length - 1;	32✔
362	}	32!
363		32✔
364	void control.moveToPanel(panels[targetIndex], {
365	duration: 0
366	}).catch(() => void 0);
367	}	32✔
368	} else {
369	void control.moveToPanel(activePanel, {
370	duration: 0
371	}).catch(() => void 0);
372	}
373	}	1✔
374		501✔
375	flicking.camera.updateOffset();	501✔
376		501✔
377	if (panelsAdded.length > 0 \|\| panelsRemoved.length > 0) {	501!
378	flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {	501✔
379	added: panelsAdded,	495✔
380	removed: panelsRemoved	14✔
381	}));	14✔
382		6!
UNCOV 383	this.checkPanelContentsReady([	×
384	...panelsAdded,	6✔
385	...panelsRemoved	6✔
386	]);	14✔
387	}
388	}	6✔
389		6✔
390	/**
391	* @internal	4✔
392	*/	4✔
393	public checkPanelContentsReady(checkingPanels: Panel[]) {	14✔
394	const flicking = getFlickingAttached(this._flicking);	16✔
395	const resizeOnContentsReady = flicking.resizeOnContentsReady;	16✔
396	const panels = this._panels;	16✔
397		2!
398	if (!resizeOnContentsReady \|\| flicking.virtualEnabled) return;	14!
399
400	const hasContents = (panel: Panel) => panel.element && !!panel.element.querySelector("img, video");	2!
401	checkingPanels = checkingPanels.filter(panel => hasContents(panel));	2✔
402		2✔
403	if (checkingPanels.length <= 0) return;	2!
404
405	const contentsReadyChecker = new ImReady();	2✔
406		2✔
407	checkingPanels.forEach(panel => {	2✔
408	panel.loading = true;	2!
409	});
410
411	contentsReadyChecker.on("readyElement", e => {
412	if (!this._flicking) {	2!
413	// Renderer's destroy() is called before	2✔
414	contentsReadyChecker.destroy();
415	return;
416	}	6✔
417		2!
418	const panel = checkingPanels[e.index];	2✔
419	const camera = flicking.camera;
420	const control = flicking.control;	2!
421	const prevProgressInPanel = control.activePanel	2!
422	? camera.getProgressInPanel(control.activePanel)
423	: 0;
424		6✔
UNCOV 425	panel.loading = false;	×
426	panel.resize();	×
427	panels.slice(panel.index + 1).forEach(panelBehind => panelBehind.updatePosition());
428
429	if (!flicking.initialized) return;	×
430		14✔
431	camera.updateRange();
432	camera.updateOffset();	1✔
433	camera.updateAnchors();	32✔
434		32✔
435	if (control.animating) {	32!
436	// TODO: Need Axes update	32✔
437	} else {	32✔
438	control.updatePosition(prevProgressInPanel);	32✔
439	control.updateInput();	32✔
440	}
441	});	1✔
442
443	contentsReadyChecker.on("preReady", e => {	×
444	if (this._flicking) {	×
445	void this.render();	×
446	}
447
UNCOV 448	if (e.readyCount === e.totalCount) {	×
449	contentsReadyChecker.destroy();	×
450	}
451	});
452		×
453	contentsReadyChecker.on("ready", () => {
454	if (this._flicking) {	×
UNCOV 455	void this.render();	×
456	}
457	contentsReadyChecker.destroy();
458	});
459		1✔
460	contentsReadyChecker.check(checkingPanels.map(panel => panel.element));	36✔
461	}	36✔
462		36!
463	protected _updateCameraAndControl() {	5✔
464	const flicking = getFlickingAttached(this._flicking);
465	const { camera, control } = flicking;	36!
466
467	camera.updateRange();	36✔
468	camera.updateOffset();	36✔
469	camera.updateAnchors();	36✔
470	camera.resetNeedPanelHistory();	36!
471	control.updateInput();
472	}
473		36!
474	protected _showOnlyVisiblePanels(flicking: Flicking) {	41✔
475	const panels = flicking.renderer.panels;	33✔
476	const camera = flicking.camera;
477		3,786✔
478	const visibleIndexes = camera.visiblePanels.reduce((visibles, panel) => {
479	visibles[panel.index] = true;	1✔
UNCOV 480	return visibles;	×
481	}, {});
482
UNCOV 483	panels.forEach(panel => {	×
484	if (panel.index in visibleIndexes \|\| panel.loading) {	×
485	panel.markForShow();
486	} else if (!flicking.holding) {	×
487	// During the input sequence,	1✔
488	// Do not remove panel elements as it won't trigger touchend event.	12!
489	panel.markForHide();	12✔
490	}	12✔
491	});	12✔
492	}	12✔
493		12✔
494	protected _updatePanelSizeByGrid(referencePanel: Panel, panels: Panel[]) {	35✔
495	const flicking = getFlickingAttached(this._flicking);	12✔
496	const panelsPerView = flicking.panelsPerView;
497		1✔
498	if (panelsPerView <= 0) {	6!
499	throw new FlickingError(ERROR.MESSAGE.WRONG_OPTION("panelsPerView", panelsPerView), ERROR.CODE.WRONG_OPTION);	6✔
500	}	6✔
501	if (panels.length <= 0) return;	19!
502
503	const viewportSize = flicking.camera.size;
504	const gap = referencePanel.margin.prev + referencePanel.margin.next;	1✔
505		1,261✔
506	const panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;	1,261✔
507	const panelSizeObj = flicking.horizontal	×
508	? { width: panelSize }	1✔
509	: { height: panelSize };
510	const firstPanelSizeObj = {	1✔
511	size: panelSize,
512	margin: referencePanel.margin,
513	...(!flicking.horizontal && { height: referencePanel.height})	×
514	};
515
516	if (!flicking.noPanelStyleOverride) {	×
517	this._strategy.updatePanelSizes(flicking, panelSizeObj);
518	}
519
520	flicking.panels.forEach(panel => panel.resize(firstPanelSizeObj));
521	}
522
523	protected _removeAllChildsFromCamera() {	5✔
524	const flicking = getFlickingAttached(this._flicking);
525	const cameraElement = flicking.camera.element;
526
527	// Remove other elements
528	while (cameraElement.firstChild) {
529	cameraElement.removeChild(cameraElement.firstChild);
530	}
531	}
532
533	protected _insertPanelElements(panels: Panel[], nextSibling: Panel \| null = null) {	5!
534	const flicking = getFlickingAttached(this._flicking);
535	const camera = flicking.camera;
536	const cameraElement = camera.element;
537	const nextSiblingElement = nextSibling?.element \|\| null;	×
538	const fragment = document.createDocumentFragment();
539
540	panels.forEach(panel => fragment.appendChild(panel.element));
541	cameraElement.insertBefore(fragment, nextSiblingElement);
542	}
543
544	protected _removePanelElements(panels: Panel[]) {	5✔
545	const flicking = getFlickingAttached(this._flicking);
546	const cameraElement = flicking.camera.element;
547
548	panels.forEach(panel => {
549	cameraElement.removeChild(panel.element);
550	});
551	}
552
553	protected _afterRender() {	5✔
554	const flicking = getFlickingAttached(this._flicking);	35✔
555
556	flicking.camera.applyTransform();	35✔
557	}
558	}	5✔
559
560	export default Renderer;	5✔

naver / egjs-flicking / 10625870166

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