@egjs/flicking 4.15.0 → 4.16.0-beta.1

package/src/renderer/Renderer.ts

@@ -4,24 +4,55 @@
  */
 import { ComponentEvent } from "@egjs/component";
 import ImReady from "@egjs/imready";
-
-import Flicking, { FlickingOptions } from "../Flicking";
+import { ALIGN } from "../constants/values";
 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 * as ERROR from "../error/codes";
+import FlickingError from "../error/FlickingError";
+import { EVENTS } from "../event/names";
+import Flicking, { FlickingOptions } from "../Flicking";
 import { getFlickingAttached, getMinusCompensatedIndex, includes, parsePanelAlign } from "../utils";
 
 import RenderingStrategy from "./strategy/RenderingStrategy";
 
+/**
+ * Options for creating a {@link Renderer}
+ */
 export interface RendererOptions {
+  /** An {@link Flicking.align | align} value that will be applied to all panels */
   align?: FlickingOptions["align"];
+  /** An instance of RenderingStrategy(internal module) */
   strategy: RenderingStrategy;
 }
 
+/**
+ * Parameters for {@link Renderer.batchInsert}
+ * @public
+ */
+export interface BatchInsertParams {
+  /** Index to insert new panels at */
+  index: number;
+  /** An array of element or framework component with element in it */
+  elements: any[];
+  /** Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element */
+  hasDOMInElements: boolean;
+}
+
+/**
+ * Parameters for {@link Renderer.batchRemove}
+ * @public
+ */
+export interface BatchRemoveParams {
+  /** Index of panel to remove */
+  index: number;
+  /** Number of panels to remove from index */
+  deleteCount: number;
+  /** Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element */
+  hasDOMInElements: boolean;
+}
+
 /**
  * A component that manages {@link Panel} and its elements
- * @ko {@link Panel}과 그 엘리먼트들을 관리하는 컴포넌트
+ * @public
  */
 abstract class Renderer {
   // Internal States
@@ -36,57 +67,59 @@ abstract class Renderer {
   // Internal states Getter
   /**
    * Array of panels
-   * @ko 전체 패널들의 배열
-   * @type {Panel[]}
    * @readonly
    * @see Panel
    */
-  public get panels() { return this._panels; }
+  public get panels(): Panel[] {
+    return this._panels;
+  }
   /**
    * A boolean value indicating whether rendering is in progress
-   * @ko 현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부
-   * @type {boolean}
    * @readonly
    * @internal
    */
-  public get rendering() { return this._rendering; }
+  public get rendering(): boolean {
+    return this._rendering;
+  }
   /**
    * Count of panels
-   * @ko 전체 패널의 개수
-   * @type {number}
    * @readonly
    */
-  public get panelCount() { return this._panels.length; }
+  public get panelCount(): number {
+    return this._panels.length;
+  }
   /**
    * @internal
    */
-  public get strategy() { return this._strategy; }
+  public get strategy(): RendererOptions["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}
+   * A {@link Panel}'s {@link Panel.align | align} value that applied to all panels
    */
-  public get align() { return this._align; }
+  public get align(): NonNullable<RendererOptions["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; });
+    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>
+   * @param options - {@link RendererOptions}
    */
-  public constructor({
-    align = ALIGN.CENTER,
-    strategy
-  }: RendererOptions) {
+  public constructor(options: RendererOptions) {
+    // Destructure options with default values
+    const { align = ALIGN.CENTER, strategy } = options;
+
     this._flicking = null;
     this._panels = [];
     this._rendering = false;
@@ -98,26 +131,31 @@ abstract class Renderer {
 
   /**
    * Render panel elements inside the camera element
-   * @ko 패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다
-   * @method
-   * @abstract
-   * @memberof Renderer
-   * @instance
-   * @name render
-   * @chainable
-   * @return {this}
+   * @remarks
+   * This method updates the DOM to reflect the current panel state.
+   * @returns A Promise that resolves when rendering is complete
    */
   public abstract render(): Promise<void>;
 
+  /**
+   * @internal
+   * @privateRemarks
+   * Collects panel elements from the camera element and creates Panel instances.
+   */
   protected abstract _collectPanels(): void;
+  /**
+   * @internal
+   * @privateRemarks
+   * Creates a Panel instance from an element with the given options.
+   */
   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}
+   * @remarks
+   * This method is called automatically during {@link Flicking.init}. It collects existing panel elements.
+   * @param flicking - An instance of {@link Flicking}
+   * @returns The current instance for method chaining
    */
   public init(flicking: Flicking): this {
     this._flicking = flicking;
@@ -128,8 +166,8 @@ abstract class Renderer {
 
   /**
    * Destroy Renderer and return to initial state
-   * @ko Renderer를 초기 상태로 되돌립니다
-   * @return {void}
+   * @remarks
+   * This method clears all panel references and resets the internal state.
    */
   public destroy(): void {
     this._flicking = null;
@@ -137,9 +175,11 @@ abstract class Renderer {
   }
 
   /**
-   * 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>
+   * Return the {@link Panel} at the given index. `null` if it doesn't exist.
+   * @remarks
+   * This is equivalent to accessing `Flicking.panels[index]`.
+   * @param index - Index of the panel to get
+   * @returns Panel at the given index
    * @see Panel
    */
   public getPanel(index: number): Panel | null {
@@ -154,10 +194,9 @@ abstract class Renderer {
 
   /**
    * Return Rendered Panels
-   * @ko 렌더링이 된 패널을 반환합니다.
-   * @return {Panel[]}
+   * @returns Rendered Panels
    */
-  public getRenderedPanels() {
+  public getRenderedPanels(): Panel[] {
     const flicking = getFlickingAttached(this._flicking);
 
     return flicking.renderer.panels.filter(panel => panel.rendered);
@@ -165,9 +204,7 @@ abstract class Renderer {
 
   /**
    * Update all panel sizes
-   * @ko 모든 패널의 크기를 업데이트합니다
-   * @chainable
-   * @return {this}
+   * @returns The current instance for method chaining
    */
   public updatePanelSize(): this {
     const flicking = getFlickingAttached(this._flicking);
@@ -189,20 +226,13 @@ abstract class Renderer {
 
   /**
    * 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>
+   * @remarks
+   * This will increase index of panels after by the number of panels added.
+   * @param items - An array of {@link BatchInsertParams}
+   * @throws {@link DOMManipulationErrors}
+   * @returns An array of inserted panels
    */
-  public batchInsert(...items: Array<{
-    index: number;
-    elements: any[];
-    hasDOMInElements: boolean;
-  }>): Panel[] {
+  public batchInsert(...items: BatchInsertParams[]): Panel[] {
     const allPanelsInserted = this.batchInsertDefer(...items);
 
     if (allPanelsInserted.length <= 0) return [];
@@ -213,15 +243,11 @@ abstract class Renderer {
   }
 
   /**
-   * Defers update
-   * camera position & others will be updated after calling updateAfterPanelChange
    * @internal
+   * @privateRemarks
+   * Defers update. Camera position & others will be updated after calling updateAfterPanelChange.
    */
-  public batchInsertDefer(...items: Array<{
-    index: number;
-    elements: any[];
-    hasDOMInElements: boolean;
-  }>) {
+  public batchInsertDefer(...items: BatchInsertParams[]) {
     const panels = this._panels;
     const flicking = getFlickingAttached(this._flicking);
 
@@ -231,7 +257,9 @@ abstract class Renderer {
     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 }));
+      const panelsInserted = item.elements.map((el, idx) =>
+        this._createPanel(el, { index: insertingIdx + idx, align, flicking })
+      );
 
       panels.splice(insertingIdx, 0, ...panelsInserted);
 
@@ -263,20 +291,13 @@ abstract class Renderer {
 
   /**
    * 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>
+   * @remarks
+   * This will decrease index of panels after by the number of panels removed.
+   * @param items - An array of {@link BatchRemoveParams}
+   * @throws {@link DOMManipulationErrors}
+   * @returns An array of removed panels
    */
-  public batchRemove(...items: Array<{
-    index: number;
-    deleteCount: number;
-    hasDOMInElements: boolean;
-  }>): Panel[] {
+  public batchRemove(...items: BatchRemoveParams[]): Panel[] {
     const allPanelsRemoved = this.batchRemoveDefer(...items);
 
     if (allPanelsRemoved.length <= 0) return [];
@@ -287,15 +308,11 @@ abstract class Renderer {
   }
 
   /**
-   * Defers update
-   * camera position & others will be updated after calling updateAfterPanelChange
    * @internal
+   * @privateRemarks
+   * Defers update. Camera position & others will be updated after calling updateAfterPanelChange.
    */
-  public batchRemoveDefer(...items: Array<{
-    index: number;
-    deleteCount: number;
-    hasDOMInElements: boolean;
-  }>) {
+  public batchRemoveDefer(...items: BatchRemoveParams[]) {
     const panels = this._panels;
     const flicking = getFlickingAttached(this._flicking);
 
@@ -336,6 +353,8 @@ abstract class Renderer {
 
   /**
    * @internal
+   * @privateRemarks
+   * Updates camera, control, and triggers {@link PanelChangeEvent} after panels are added or removed.
    */
   public updateAfterPanelChange(panelsAdded: Panel[], panelsRemoved: Panel[]) {
     const flicking = getFlickingAttached(this._flicking);
@@ -347,12 +366,12 @@ abstract class Renderer {
     this._updateCameraAndControl();
 
     if (flicking.autoResize && flicking.useResizeObserver) {
-      panelsAdded.forEach((panel) => {
+      panelsAdded.forEach(panel => {
         if (panel.element) {
           flicking.autoResizer.observe(panel.element);
         }
       });
-      panelsRemoved.forEach((panel) => {
+      panelsRemoved.forEach(panel => {
         if (panel.element) {
           flicking.autoResizer.unobserve(panel.element);
         }
@@ -372,34 +391,39 @@ abstract class Renderer {
             targetIndex = panels.length - 1;
           }
 
-          void control.moveToPanel(panels[targetIndex], {
-            duration: 0
-          }).catch(() => void 0);
+          void control
+            .moveToPanel(panels[targetIndex], {
+              duration: 0
+            })
+            .catch(() => void 0);
         }
       } else {
-        void control.moveToPanel(activePanel, {
-          duration: 0
-        }).catch(() => void 0);
+        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
-      ]);
+      flicking.trigger(
+        new ComponentEvent(EVENTS.PANEL_CHANGE, {
+          added: panelsAdded,
+          removed: panelsRemoved
+        })
+      );
+
+      this.checkPanelContentsReady([...panelsAdded, ...panelsRemoved]);
     }
   }
 
   /**
    * @internal
+   * @privateRemarks
+   * Checks if panel contents (images/videos) are ready and triggers resize when loaded.
    */
   public checkPanelContentsReady(checkingPanels: Panel[]) {
     const flicking = getFlickingAttached(this._flicking);
@@ -429,9 +453,7 @@ abstract class Renderer {
       const panel = checkingPanels[e.index];
       const camera = flicking.camera;
       const control = flicking.control;
-      const prevProgressInPanel = control.activePanel
-        ? camera.getProgressInPanel(control.activePanel)
-        : 0;
+      const prevProgressInPanel = control.activePanel ? camera.getProgressInPanel(control.activePanel) : 0;
 
       panel.loading = false;
       panel.resize();
@@ -471,6 +493,11 @@ abstract class Renderer {
     contentsReadyChecker.check(checkingPanels.map(panel => panel.element));
   }
 
+  /**
+   * @internal
+   * @privateRemarks
+   * Updates camera range, anchors, and control input after panel changes.
+   */
   protected _updateCameraAndControl() {
     const flicking = getFlickingAttached(this._flicking);
     const { camera, control } = flicking;
@@ -482,6 +509,11 @@ abstract class Renderer {
     control.updateInput();
   }
 
+  /**
+   * @internal
+   * @privateRemarks
+   * Marks only visible panels for rendering when {@link FlickingOptions.renderOnlyVisible | renderOnlyVisible} is enabled.
+   */
   protected _showOnlyVisiblePanels(flicking: Flicking) {
     const panels = flicking.renderer.panels;
     const camera = flicking.camera;
@@ -502,6 +534,11 @@ abstract class Renderer {
     });
   }
 
+  /**
+   * @internal
+   * @privateRemarks
+   * Calculates and applies panel sizes when {@link FlickingOptions.panelsPerView | panelsPerView} is enabled.
+   */
   protected _updatePanelSizeByGrid(referencePanel: Panel, panels: Panel[]) {
     const flicking = getFlickingAttached(this._flicking);
     const panelsPerView = flicking.panelsPerView;
@@ -515,9 +552,7 @@ abstract class Renderer {
     const gap = referencePanel.margin.prev + referencePanel.margin.next;
 
     const panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;
-    const panelSizeObj = flicking.horizontal
-      ? { width: panelSize }
-      : { height: panelSize };
+    const panelSizeObj = flicking.horizontal ? { width: panelSize } : { height: panelSize };
     const firstPanelSizeObj = {
       size: panelSize,
       margin: referencePanel.margin,
@@ -531,6 +566,11 @@ abstract class Renderer {
     flicking.panels.forEach(panel => panel.resize(firstPanelSizeObj));
   }
 
+  /**
+   * @internal
+   * @privateRemarks
+   * Removes all child elements from the camera element.
+   */
   protected _removeAllChildsFromCamera() {
     const flicking = getFlickingAttached(this._flicking);
     const cameraElement = flicking.camera.element;
@@ -541,6 +581,11 @@ abstract class Renderer {
     }
   }
 
+  /**
+   * @internal
+   * @privateRemarks
+   * Inserts panel elements into the camera element at the specified position.
+   */
   protected _insertPanelElements(panels: Panel[], nextSibling: Panel | null = null) {
     const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
@@ -552,6 +597,11 @@ abstract class Renderer {
     cameraElement.insertBefore(fragment, nextSiblingElement);
   }
 
+  /**
+   * @internal
+   * @privateRemarks
+   * Removes panel elements from the camera element.
+   */
   protected _removePanelElements(panels: Panel[]) {
     const flicking = getFlickingAttached(this._flicking);
     const cameraElement = flicking.camera.element;
@@ -561,6 +611,11 @@ abstract class Renderer {
     });
   }
 
+  /**
+   * @internal
+   * @privateRemarks
+   * Called after rendering to apply the camera transform.
+   */
   protected _afterRender() {
     const flicking = getFlickingAttached(this._flicking);
 

package/src/renderer/VanillaRenderer.ts

@@ -2,14 +2,12 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import { getFlickingAttached, toArray } from "../utils";
+
 import Panel, { PanelOptions } from "../core/panel/Panel";
+import { getFlickingAttached, toArray } from "../utils";
 
 import Renderer from "./Renderer";
 
-/**
- *
- */
 class VanillaRenderer extends Renderer {
   // eslint-disable-next-line @typescript-eslint/require-await
   public async render() {
@@ -35,21 +33,23 @@ class VanillaRenderer extends Renderer {
     return this._strategy.createPanel(el, options);
   }
 
+  /**
+   * @internal
+   */
   private _resetPanelElementOrder() {
     const flicking = getFlickingAttached(this._flicking);
     const cameraEl = flicking.camera.element;
 
     // We're using reversed panels here as last panel should be the last element of camera element
-
     let reversedElements: HTMLElement[] = [];
 
     if (flicking.useCSSOrder) {
       // useCSSOrder를 사용하는 경우 DOM은 변화가 없지만 대신 css `order`값을 주입
-      reversedElements = this.getRenderedPanels().map(panel => panel.element).reverse();
-    } else {
-      reversedElements = this._strategy
-        .getRenderingElementsByOrder(flicking)
+      reversedElements = this.getRenderedPanels()
+        .map(panel => panel.element)
         .reverse();
+    } else {
+      reversedElements = this._strategy.getRenderingElementsByOrder(flicking).reverse();
     }
 
     reversedElements.forEach((el, idx) => {
@@ -61,6 +61,9 @@ class VanillaRenderer extends Renderer {
     });
   }
 
+  /**
+   * @internal
+   */
   private _removeAllTextNodes() {
     const flicking = getFlickingAttached(this._flicking);
     const cameraElement = flicking.camera.element;

package/src/renderer/index.ts

@@ -2,18 +2,13 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
+
+import ExternalRenderer from "./ExternalRenderer";
 import Renderer, { RendererOptions } from "./Renderer";
 import VanillaRenderer from "./VanillaRenderer";
-import ExternalRenderer from "./ExternalRenderer";
 
 export * from "./strategy";
 
-export {
-  Renderer,
-  VanillaRenderer,
-  ExternalRenderer
-};
+export { Renderer, VanillaRenderer, ExternalRenderer };
 
-export type {
-  RendererOptions
-};
+export type { RendererOptions };

package/src/renderer/strategy/NormalRenderingStrategy.ts

@@ -2,10 +2,11 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import Flicking from "../../Flicking";
+
+import { DIRECTION } from "../../constants/values";
 import Panel, { PanelOptions } from "../../core/panel/Panel";
 import ElementProvider from "../../core/panel/provider/ElementProvider";
-import { DIRECTION } from "../../const/external";
+import Flicking from "../../Flicking";
 import { parsePanelAlign } from "../../utils";
 
 import RenderingStrategy from "./RenderingStrategy";
@@ -14,11 +15,11 @@ export interface NormalRenderingStrategyOptions {
   providerCtor: new (...args: any) => ElementProvider;
 }
 
-
 class NormalRenderingStrategy implements RenderingStrategy {
   private _providerCtor: NormalRenderingStrategyOptions["providerCtor"];
 
-  public constructor({ providerCtor }: NormalRenderingStrategyOptions) {
+  public constructor(options: NormalRenderingStrategyOptions) {
+    const { providerCtor } = options;
     this._providerCtor = providerCtor;
   }
 
@@ -49,37 +50,40 @@ class NormalRenderingStrategy implements RenderingStrategy {
     }
   }
 
-  public collectPanels(
-    flicking: Flicking,
-    elements: any[]
-  ) {
+  public collectPanels(flicking: Flicking, elements: any[]) {
     const align = parsePanelAlign(flicking.renderer.align);
 
-    return elements.map((el, index) => new Panel({
-      index,
-      elementProvider: new this._providerCtor(el),
-      align,
-      flicking
-    }));
+    return elements.map(
+      (el, index) =>
+        new Panel({
+          index,
+          elementProvider: new this._providerCtor(el),
+          align,
+          flicking
+        })
+    );
   }
 
-  public createPanel(
-    element: any,
-    options: Omit<PanelOptions, "elementProvider">
-  ) {
+  public createPanel(element: any, options: Omit<PanelOptions, "elementProvider">) {
     return new Panel({
       ...options,
       elementProvider: new this._providerCtor(element)
     });
   }
 
-  public updatePanelSizes(flicking: Flicking, size: Partial<{
-    width: number | string;
-    height: number | string;
-  }>) {
+  public updatePanelSizes(
+    flicking: Flicking,
+    size: Partial<{
+      width: number | string;
+      height: number | string;
+    }>
+  ) {
     flicking.panels.forEach(panel => panel.setSize(size));
   }
 
+  /**
+   * @internal
+   */
   private _showOnlyVisiblePanels(flicking: Flicking) {
     const panels = flicking.renderer.panels;
     const camera = flicking.camera;