10487789072

Committed 21 Aug 2024 10:04AM UTC coverage: 82.821% (+0.03%) from 82.791%

Build # 10487789072

Build Type

Pull #884

github

Committed by

web-flow

Commit Message

Merge a4761b8b8 into 8e57219ce

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

Run Details

4602 of 7391 branches covered (62.26%)

Branch coverage included in aggregate %.

57 of 58 new or added lines in 5 files covered. (98.28%)

15 existing lines in 4 files now uncovered.

11529 of 12086 relevant lines covered (95.39%)

273.81 hits per line

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

74.12

/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) => {
        flicking.autoResizer.observe(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,248✔
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; }	395✔
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	/**	503✔
67	* A {@link Panel}'s {@link Panel#align align} value that applied to all panels	503✔
68	* @ko {@link Panel}에 공통적으로 적용할 {@link Panel#align align} 값	503✔
69	* @type {Constants.ALIGN \| string \| number}	503✔
70	*/
71	public get align() { return this._align; }	517✔
72		503✔
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,564✔
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,438✔
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	11,526✔
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		470✔
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	488✔
144	*/	488✔
145	public getPanel(index: number): Panel \| null {	493✔
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	}	479✔
154		479✔
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,720✔
164
165	if (panels.length <= 0) return this;	15!
166		190✔
167	if (flicking.panelsPerView > 0) {	49!
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;	518✔
177	}	504✔
178		504✔
179	/**	100✔
180	* Insert new panels at given index	404✔
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,203✔
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>	404✔
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[]) {	5✔
330	const flicking = getFlickingAttached(this._flicking);
331	const { camera, control } = flicking;	32✔
332	const panels = this._panels;	32✔
333	const activePanel = control.activePanel;	31✔
334		9✔
335	// Update camera & control
336	this._updateCameraAndControl();	2✔
337
338	if (flicking.autoResize && flicking.useResizeObserver) {	×
339	panelsAdded.forEach((panel) => {	7!
340	flicking.autoResizer.observe(panel.element);	7!
341	});
342	}
343		7✔
344	void this.render();
345
346	if (!flicking.animating) {	×
347	if (!activePanel \|\| activePanel.removed) {	×
348	if (panels.length <= 0) {	×
349	// All panels removed	22✔
350	camera.lookAt(0);
351	} else {
352	let targetIndex = activePanel?.index ?? 0;	×
353	if (targetIndex > panels.length - 1) {	×
354	targetIndex = panels.length - 1;	32✔
355	}	32!
356		32✔
357	void control.moveToPanel(panels[targetIndex], {
358	duration: 0
359	}).catch(() => void 0);
360	}	32✔
361	} else {
362	void control.moveToPanel(activePanel, {
363	duration: 0
364	}).catch(() => void 0);
365	}
366	}	1✔
367		497✔
368	flicking.camera.updateOffset();	497✔
369		497✔
370	if (panelsAdded.length > 0 \|\| panelsRemoved.length > 0) {	497!
371	flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {	497✔
372	added: panelsAdded,	491✔
373	removed: panelsRemoved	14✔
374	}));	14✔
375		6!
UNCOV 376	this.checkPanelContentsReady([	×
377	...panelsAdded,	6✔
378	...panelsRemoved	6✔
379	]);	14✔
380	}
381	}	6✔
382		6✔
383	/**
384	* @internal	4✔
385	*/	4✔
386	public checkPanelContentsReady(checkingPanels: Panel[]) {	14✔
387	const flicking = getFlickingAttached(this._flicking);	16✔
388	const resizeOnContentsReady = flicking.resizeOnContentsReady;	16✔
389	const panels = this._panels;	16✔
390		2!
391	if (!resizeOnContentsReady \|\| flicking.virtualEnabled) return;	14!
392
393	const hasContents = (panel: Panel) => panel.element && !!panel.element.querySelector("img, video");	2!
394	checkingPanels = checkingPanels.filter(panel => hasContents(panel));	2✔
395		2✔
396	if (checkingPanels.length <= 0) return;	2!
397
398	const contentsReadyChecker = new ImReady();	2✔
399		2✔
400	checkingPanels.forEach(panel => {	2✔
401	panel.loading = true;	2!
402	});
403
404	contentsReadyChecker.on("readyElement", e => {
405	if (!this._flicking) {	2!
406	// Renderer's destroy() is called before	2✔
407	contentsReadyChecker.destroy();
408	return;
409	}	6✔
410		2!
411	const panel = checkingPanels[e.index];	2✔
412	const camera = flicking.camera;
413	const control = flicking.control;	2!
414	const prevProgressInPanel = control.activePanel	2!
415	? camera.getProgressInPanel(control.activePanel)
416	: 0;
417		6✔
UNCOV 418	panel.loading = false;	×
419	panel.resize();	×
420	panels.slice(panel.index + 1).forEach(panelBehind => panelBehind.updatePosition());
421
422	if (!flicking.initialized) return;	×
423		14✔
424	camera.updateRange();
425	camera.updateOffset();	1✔
426	camera.updateAnchors();	32✔
427		32✔
428	if (control.animating) {	32!
429	// TODO: Need Axes update	32✔
430	} else {	32✔
431	control.updatePosition(prevProgressInPanel);	32✔
432	control.updateInput();	32✔
433	}
434	});	1✔
435
436	contentsReadyChecker.on("preReady", e => {	×
437	if (this._flicking) {	×
438	void this.render();	×
439	}
440
UNCOV 441	if (e.readyCount === e.totalCount) {	×
442	contentsReadyChecker.destroy();	×
443	}
444	});
445		×
446	contentsReadyChecker.on("ready", () => {
447	if (this._flicking) {	×
UNCOV 448	void this.render();	×
449	}
450	contentsReadyChecker.destroy();
451	});
452		1✔
453	contentsReadyChecker.check(checkingPanels.map(panel => panel.element));	36✔
454	}	36✔
455		36!
456	protected _updateCameraAndControl() {	5✔
457	const flicking = getFlickingAttached(this._flicking);
458	const { camera, control } = flicking;	36!
459
460	camera.updateRange();	36✔
461	camera.updateOffset();	36✔
462	camera.updateAnchors();	36✔
463	camera.resetNeedPanelHistory();	36!
464	control.updateInput();
465	}
466		36!
467	protected _showOnlyVisiblePanels(flicking: Flicking) {	41✔
468	const panels = flicking.renderer.panels;	33✔
469	const camera = flicking.camera;
470		3,786✔
471	const visibleIndexes = camera.visiblePanels.reduce((visibles, panel) => {
472	visibles[panel.index] = true;	1✔
UNCOV 473	return visibles;	×
474	}, {});
475
UNCOV 476	panels.forEach(panel => {	×
477	if (panel.index in visibleIndexes \|\| panel.loading) {	×
478	panel.markForShow();
479	} else if (!flicking.holding) {	×
480	// During the input sequence,	1✔
481	// Do not remove panel elements as it won't trigger touchend event.	12!
482	panel.markForHide();	12✔
483	}	12✔
484	});	12✔
485	}	12✔
486		12✔
487	protected _updatePanelSizeByGrid(referencePanel: Panel, panels: Panel[]) {	35✔
488	const flicking = getFlickingAttached(this._flicking);	12✔
489	const panelsPerView = flicking.panelsPerView;
490		1✔
491	if (panelsPerView <= 0) {	6!
492	throw new FlickingError(ERROR.MESSAGE.WRONG_OPTION("panelsPerView", panelsPerView), ERROR.CODE.WRONG_OPTION);	6✔
493	}	6✔
494	if (panels.length <= 0) return;	19!
495
496	const viewportSize = flicking.camera.size;
497	const gap = referencePanel.margin.prev + referencePanel.margin.next;	1✔
498		1,249✔
499	const panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;	1,249✔
500	const panelSizeObj = flicking.horizontal	×
501	? { width: panelSize }	1✔
502	: { height: panelSize };
503	const firstPanelSizeObj = {	1✔
504	size: panelSize,
505	margin: referencePanel.margin,
506	...(!flicking.horizontal && { height: referencePanel.height})	×
507	};
508
509	if (!flicking.noPanelStyleOverride) {	×
510	this._strategy.updatePanelSizes(flicking, panelSizeObj);
511	}
512
513	flicking.panels.forEach(panel => panel.resize(firstPanelSizeObj));
514	}
515
516	protected _removeAllChildsFromCamera() {	5✔
517	const flicking = getFlickingAttached(this._flicking);
518	const cameraElement = flicking.camera.element;
519
520	// Remove other elements
521	while (cameraElement.firstChild) {
522	cameraElement.removeChild(cameraElement.firstChild);
523	}
524	}
525
526	protected _insertPanelElements(panels: Panel[], nextSibling: Panel \| null = null) {	5!
527	const flicking = getFlickingAttached(this._flicking);
528	const camera = flicking.camera;
529	const cameraElement = camera.element;
530	const nextSiblingElement = nextSibling?.element \|\| null;	×
531	const fragment = document.createDocumentFragment();
532
533	panels.forEach(panel => fragment.appendChild(panel.element));
534	cameraElement.insertBefore(fragment, nextSiblingElement);
535	}
536
537	protected _removePanelElements(panels: Panel[]) {	5✔
538	const flicking = getFlickingAttached(this._flicking);
539	const cameraElement = flicking.camera.element;
540
541	panels.forEach(panel => {
542	cameraElement.removeChild(panel.element);
543	});
544	}
545
546	protected _afterRender() {	5✔
547	const flicking = getFlickingAttached(this._flicking);	35✔
548
549	flicking.camera.applyTransform();	35✔
550	}
551	}	5✔
552
553	export default Renderer;	5✔

naver / egjs-flicking / 10487789072

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