@egjs/flicking 4.4.2 → 4.6.0

package/src/renderer/Renderer.ts

@@ -27,6 +27,7 @@ abstract class Renderer {
   // Internal States
   protected _flicking: Flicking | null;
   protected _panels: Panel[];
+  protected _rendering: boolean;
 
   // Options
   protected _align: NonNullable<RendererOptions["align"]>;
@@ -41,6 +42,14 @@ abstract class Renderer {
    * @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 전체 패널의 개수
@@ -80,6 +89,7 @@ abstract class Renderer {
   }: RendererOptions) {
     this._flicking = null;
     this._panels = [];
+    this._rendering = false;
 
     // Bind options
     this._align = align;
@@ -182,10 +192,28 @@ abstract class Renderer {
     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 { control } = flicking;
     const prevFirstPanel = panels[0];
     const align = parsePanelAlign(this._align);
 
@@ -219,30 +247,6 @@ abstract class Renderer {
       return [...addedPanels, ...panelsInserted];
     }, []);
 
-    if (allPanelsInserted.length <= 0) return [];
-
-    // Update camera & control
-    this._updateCameraAndControl();
-
-    void this.render();
-
-    // Move to the first panel added if no panels existed
-    // FIXME: fix for animating case
-    if (allPanelsInserted.length > 0 && !control.animating) {
-      void control.moveToPanel(control.activePanel || allPanelsInserted[0], {
-        duration: 0
-      }).catch(() => void 0);
-    }
-
-    flicking.camera.updateOffset();
-
-    flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {
-      added: allPanelsInserted,
-      removed: []
-    }));
-
-    this.checkPanelContentsReady(allPanelsInserted);
-
     return allPanelsInserted;
   }
 
@@ -257,13 +261,35 @@ abstract class Renderer {
    * @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[] {
+  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 { camera, control } = flicking;
+    const { control } = flicking;
     const activePanel = control.activePanel;
-    const activeIndex = control.activeIndex;
 
     const allPanelsRemoved = items.reduce((removed, item) => {
       const { index, deleteCount } = item;
@@ -294,35 +320,56 @@ abstract class Renderer {
       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();
 
     void this.render();
 
-    // FIXME: fix for animating case
-    if (allPanelsRemoved.length > 0 && !control.animating) {
-      const targetPanel = includes(allPanelsRemoved, activePanel)
-        ? (panels[activeIndex] || panels[panels.length - 1])
-        : activePanel;
+    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;
+        }
 
-      if (targetPanel) {
-        void control.moveToPanel(targetPanel, {
+        void control.moveToPanel(panels[targetIndex], {
           duration: 0
         }).catch(() => void 0);
-      } else {
-        // All panels removed
-        camera.lookAt(0);
       }
+    } else {
+      void control.moveToPanel(control.activePanel!, {
+        duration: 0
+      }).catch(() => void 0);
     }
 
     flicking.camera.updateOffset();
 
-    flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {
-      added: [],
-      removed: allPanelsRemoved
-    }));
+    if (panelsAdded.length > 0 || panelsRemoved.length > 0) {
+      flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {
+        added: panelsAdded,
+        removed: panelsRemoved
+      }));
 
-    return allPanelsRemoved;
+      this.checkPanelContentsReady([
+        ...panelsAdded,
+        ...panelsRemoved
+      ]);
+    }
   }
 
   /**
@@ -367,6 +414,7 @@ abstract class Renderer {
       if (!flicking.initialized) return;
 
       camera.updateRange();
+      camera.updateOffset();
       camera.updateAnchors();
 
       if (control.animating) {
@@ -402,6 +450,7 @@ abstract class Renderer {
     const { camera, control } = flicking;
 
     camera.updateRange();
+    camera.updateOffset();
     camera.updateAnchors();
     camera.resetNeedPanelHistory();
     control.updateInput();

package/css/flicking.css

@@ -1,28 +0,0 @@
-.flicking-viewport {
-  position: relative;
-  overflow: hidden;
-}
-
-.flicking-camera {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-  flex-direction: row;
-  z-index: 1;
-}
-.flicking-camera>* {
-  flex-shrink: 0;
-}
-
-.flicking-viewport.vertical {
-  display: inline-flex;
-}
-.flicking-viewport.vertical>.flicking-camera {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-.flicking-viewport.flicking-hidden .flicking-camera > * {
-  visibility: hidden;
-}

package/declaration/camera/BoundCamera.d.ts

@@ -1,9 +0,0 @@
-import AnchorPoint from "../core/AnchorPoint";
-import Camera from "./Camera";
-declare class BoundCamera extends Camera {
-    updateRange(): this;
-    updateAnchors(): this;
-    findAnchorIncludePosition(position: number): AnchorPoint | null;
-    private _findNearestPanel;
-}
-export default BoundCamera;

package/declaration/camera/CircularCamera.d.ts

@@ -1,37 +0,0 @@
-import Panel from "../core/panel/Panel";
-import AnchorPoint from "../core/AnchorPoint";
-import { DIRECTION } from "../const/external";
-import { ValueOf } from "../type/internal";
-import Camera from "./Camera";
-export interface TogglePoint {
-    panel: Panel;
-    direction: ValueOf<typeof DIRECTION>;
-    toggled: boolean;
-}
-declare class CircularCamera extends Camera {
-    private _circularOffset;
-    private _circularEnabled;
-    get offset(): number;
-    get controlParams(): {
-        range: {
-            min: number;
-            max: number;
-        };
-        position: number;
-        circular: boolean;
-    };
-    getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null;
-    getNextAnchor(anchor: AnchorPoint): AnchorPoint | null;
-    findAnchorIncludePosition(position: number): AnchorPoint | null;
-    clampToReachablePosition(position: number): number;
-    canReach(panel: Panel): boolean;
-    canSee(panel: Panel): boolean;
-    updateRange(): this;
-    updateOffset(): this;
-    lookAt(pos: number): void;
-    applyTransform(): this;
-    protected _resetInternalValues(): void;
-    private _calcPanelAreaSum;
-    private _updateCircularOffset;
-}
-export default CircularCamera;

package/declaration/camera/LinearCamera.d.ts

@@ -1,5 +0,0 @@
-import Camera from "./Camera";
-declare class LinearCamera extends Camera {
-    updateRange(): this;
-}
-export default LinearCamera;

package/dist/flicking-inline.css

@@ -1,2 +0,0 @@
-.flicking-viewport{position:relative;overflow:hidden}.flicking-viewport:not(.vertical){width:100%;height:100%}.flicking-camera{width:100%;height:100%;position:relative;z-index:1;white-space:nowrap;will-change:transform}.flicking-camera>*{display:inline-block;white-space:normal;vertical-align:top}.flicking-viewport.vertical,.flicking-viewport.vertical>.flicking-camera{display:inline-block}.flicking-viewport.vertical.middle>.flicking-camera>*{vertical-align:middle}.flicking-viewport.vertical.bottom>.flicking-camera>*{vertical-align:bottom}.flicking-viewport.vertical>.flicking-camera>*{display:block}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}
-/*# sourceMappingURL=flicking-inline.css.map */

package/dist/flicking-inline.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["<input css 1>"],"names":[],"mappings":"AAAA,mBAAmB,iBAAiB,CAAC,eAAe,CAAC,kCAAkC,UAAU,CAAC,WAAW,CAAC,iBAAiB,UAAU,CAAC,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,mBAAmB,oBAAoB,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,yEAAyE,oBAAoB,CAAC,sDAAsD,qBAAqB,CAAC,sDAAsD,qBAAqB,CAAC,+CAA+C,aAAa,CAAC,sDAAsD,iBAAiB","file":"flicking-inline.css","sourcesContent":[".flicking-viewport{position:relative;overflow:hidden}.flicking-viewport:not(.vertical){width:100%;height:100%}.flicking-camera{width:100%;height:100%;position:relative;z-index:1;white-space:nowrap;will-change:transform}.flicking-camera>*{display:inline-block;white-space:normal;vertical-align:top}.flicking-viewport.vertical,.flicking-viewport.vertical>.flicking-camera{display:inline-block}.flicking-viewport.vertical.middle>.flicking-camera>*{vertical-align:middle}.flicking-viewport.vertical.bottom>.flicking-camera>*{vertical-align:bottom}.flicking-viewport.vertical>.flicking-camera>*{display:block}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}"]}

package/dist/flicking.css

@@ -1,2 +0,0 @@
-.flicking-viewport{position:relative;overflow:hidden}.flicking-camera{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;z-index:1}.flicking-camera>*{-ms-flex-negative:0;flex-shrink:0}.flicking-viewport.vertical{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flicking-viewport.vertical>.flicking-camera{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flicking-viewport.flicking-hidden .flicking-camera>*{visibility:hidden}
-/*# sourceMappingURL=flicking.css.map */

package/dist/flicking.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["<input css 2>"],"names":[],"mappings":"AAAA,mBAAmB,iBAAiB,CAAC,eAAe,CAAC,iBAAiB,UAAU,CAAC,WAAW,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,YAAY,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,4BAA4B,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,SAAS,CAAC,mBAAmB,mBAAmB,CAAC,aAAa,CAAC,4BAA4B,0BAA0B,CAAC,0BAA0B,CAAC,mBAAmB,CAAC,6CAA6C,0BAA0B,CAAC,0BAA0B,CAAC,mBAAmB,CAAC,2BAA2B,CAAC,4BAA4B,CAAC,yBAAyB,CAAC,qBAAqB,CAAC,sDAAsD,iBAAiB","file":"flicking.css","sourcesContent":[".flicking-viewport{position:relative;overflow:hidden}.flicking-camera{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;z-index:1}.flicking-camera>*{-ms-flex-negative:0;flex-shrink:0}.flicking-viewport.vertical{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flicking-viewport.vertical>.flicking-camera{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flicking-viewport.flicking-hidden .flicking-camera>*{visibility:hidden}"]}

package/src/camera/CircularCamera.ts

@@ -1,268 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-import Panel from "../core/panel/Panel";
-import AnchorPoint from "../core/AnchorPoint";
-import { DIRECTION } from "../const/external";
-import { circulatePosition, getFlickingAttached } from "../utils";
-import { ValueOf } from "../type/internal";
-
-import Camera from "./Camera";
-
-/**
- * A data of the position that changes order of the panel elements
- * @ko 패널 엘리먼트 순서가 변경되는 좌표의 데이터
- * @interface
- * @property {Panel} panel Toggling panel<ko>순서를 변경할 패널</ko>
- * @property {DIRECTION} direction Toggling position<ko>순서를 변경할 방향</ko>
- * @property {boolean} toggled Whether the panel has toggled its position to `direction`<ko>`direction` 방향으로 패널 위치를 변경했는지 여부를 나타내는 값</ko>
- */
-export interface TogglePoint {
-  panel: Panel;
-  direction: ValueOf<typeof DIRECTION>;
-  toggled: boolean;
-}
-
-/**
- * A {@link Camera} that connects the last panel and the first panel, enabling continuous loop
- * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera}
- */
-class CircularCamera extends Camera {
-  private _circularOffset: number = 0;
-  private _circularEnabled: boolean = false;
-
-  public get offset() { return this._offset - this._circularOffset; }
-  public get controlParams() { return { range: this._range, position: this._position, circular: this._circularEnabled }; }
-
-  public getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null {
-    if (!this._circularEnabled || anchor.index !== 0) return super.getPrevAnchor(anchor);
-
-    const anchors = this._anchors;
-    const rangeDiff = this.rangeDiff;
-    const lastAnchor = anchors[anchors.length - 1];
-
-    return new AnchorPoint({
-      index: lastAnchor.index,
-      position: lastAnchor.position - rangeDiff,
-      panel: lastAnchor.panel
-    });
-  }
-
-  public getNextAnchor(anchor: AnchorPoint): AnchorPoint | null {
-    const anchors = this._anchors;
-
-    if (!this._circularEnabled || anchor.index !== anchors.length - 1) return super.getNextAnchor(anchor);
-
-    const rangeDiff = this.rangeDiff;
-    const firstAnchor = anchors[0];
-
-    return new AnchorPoint({
-      index: firstAnchor.index,
-      position: firstAnchor.position + rangeDiff,
-      panel: firstAnchor.panel
-    });
-  }
-
-  public findAnchorIncludePosition(position: number): AnchorPoint | null {
-    if (!this._circularEnabled) return super.findAnchorIncludePosition(position);
-
-    const range = this._range;
-    const anchors = this._anchors;
-    const rangeDiff = this.rangeDiff;
-    const anchorCount = anchors.length;
-    const positionInRange = circulatePosition(position, range.min, range.max);
-
-    let anchorInRange: AnchorPoint | null = super.findAnchorIncludePosition(positionInRange);
-
-    if (anchorCount > 0 && (position === range.min || position === range.max)) {
-      const possibleAnchors = [
-        anchorInRange,
-        new AnchorPoint({
-          index: 0,
-          position: anchors[0].position + rangeDiff,
-          panel: anchors[0].panel
-        }),
-        new AnchorPoint({
-          index: anchorCount - 1,
-          position: anchors[anchorCount - 1].position - rangeDiff,
-          panel: anchors[anchorCount - 1].panel
-        })
-      ].filter(anchor => !!anchor) as AnchorPoint[];
-
-      anchorInRange = possibleAnchors.reduce((nearest: AnchorPoint | null, anchor) => {
-        if (!nearest) return anchor;
-
-        return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)
-          ? nearest
-          : anchor;
-      }, null);
-    }
-
-    if (!anchorInRange) return null;
-
-    if (position < range.min) {
-      const loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
-
-      return new AnchorPoint({
-        index: anchorInRange.index,
-        position: anchorInRange.position + rangeDiff * loopCount,
-        panel: anchorInRange.panel
-      });
-    } else if (position > range.max) {
-      const loopCount = Math.floor((position - range.max) / rangeDiff) + 1;
-
-      return new AnchorPoint({
-        index: anchorInRange.index,
-        position: anchorInRange.position + rangeDiff * loopCount,
-        panel: anchorInRange.panel
-      });
-    }
-
-    return anchorInRange;
-  }
-
-  public clampToReachablePosition(position: number): number {
-    // Basically all position is reachable for circular camera
-    return this._circularEnabled
-      ? position
-      : super.clampToReachablePosition(position);
-  }
-
-  public canReach(panel: Panel): boolean {
-    if (panel.removed) return false;
-
-    return this._circularEnabled
-      // Always reachable on circular mode
-      ? true
-      : super.canReach(panel);
-  }
-
-  public canSee(panel: Panel): boolean {
-    const range = this._range;
-    const rangeDiff = this.rangeDiff;
-    const visibleRange = this.visibleRange;
-    const visibleInCurrentRange = super.canSee(panel);
-
-    if (!this._circularEnabled) {
-      return visibleInCurrentRange;
-    }
-
-    // Check looped visible area for circular case
-    if (visibleRange.min < range.min) {
-      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
-    } else if (visibleRange.max > range.max) {
-      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
-    }
-
-    return visibleInCurrentRange;
-  }
-
-  /**
-   * Update {@link Camera#range range} of Camera
-   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-   * @chainable
-   * @throws {FlickingError}
-   * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-   * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-   * @return {this}
-   */
-  public updateRange() {
-    const flicking = getFlickingAttached(this._flicking);
-    const renderer = flicking.renderer;
-
-    const panels = renderer.panels;
-    if (panels.length <= 0) {
-      this._resetInternalValues();
-      return this;
-    }
-
-    const firstPanel = panels[0]!;
-    const lastPanel = panels[panels.length - 1]!;
-    const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
-    const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
-
-    const visibleSize = this.size;
-    const panelSizeSum = lastPanelNext - firstPanelPrev;
-
-    const canSetCircularMode = panels
-      .every(panel => panelSizeSum - panel.size >= visibleSize);
-    this._circularEnabled = canSetCircularMode;
-
-    if (canSetCircularMode) {
-      this._range = { min: firstPanelPrev, max: lastPanelNext };
-
-      panels.forEach(panel => panel.updateCircularToggleDirection());
-    } else {
-      this._range = { min: firstPanel.position, max: lastPanel.position };
-    }
-
-    this.updateOffset();
-
-    return this;
-  }
-
-  public updateOffset() {
-    this._updateCircularOffset();
-
-    return super.updateOffset();
-  }
-
-  public lookAt(pos: number) {
-    const flicking = getFlickingAttached(this._flicking);
-    const prevPos = this._position;
-
-    if (pos === prevPos) return super.lookAt(pos);
-
-    const panels = flicking.renderer.panels;
-    const toggled = panels.map(panel => panel.toggle(prevPos, pos));
-
-    this._position = pos;
-    super.lookAt(pos);
-
-    if (toggled.some(isToggled => isToggled)) {
-      void flicking.renderer.render().then(() => {
-        this.updateOffset();
-      });
-    }
-  }
-
-  public applyTransform(): this {
-    const el = this._el;
-    const flicking = getFlickingAttached(this._flicking);
-
-    const actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
-
-    el.style[this._transform] = flicking.horizontal
-      ? `translate(${-actualPosition}px)`
-      : `translate(0, ${-actualPosition}px)`;
-
-    return this;
-  }
-
-  protected _resetInternalValues() {
-    super._resetInternalValues();
-    this._circularOffset = 0;
-    this._circularEnabled = false;
-  }
-
-  private _calcPanelAreaSum(panels: Panel[]) {
-    return panels.reduce((sum: number, panel: Panel) => sum + panel.sizeIncludingMargin, 0);
-  }
-
-  private _updateCircularOffset() {
-    if (!this._circularEnabled) {
-      this._circularOffset = 0;
-      return;
-    }
-
-    const flicking = getFlickingAttached(this._flicking);
-    const toggled = flicking.panels.filter(panel => panel.toggled);
-    const toggledPrev = toggled.filter(panel => panel.toggleDirection === DIRECTION.PREV);
-    const toggledNext = toggled.filter(panel => panel.toggleDirection === DIRECTION.NEXT);
-
-    this._circularOffset = this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
-  }
-}
-
-export default CircularCamera;

package/src/camera/LinearCamera.ts

@@ -1,35 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-import { getFlickingAttached } from "../utils";
-
-import Camera from "./Camera";
-
-/**
- * A {@link Camera} that can move from the position of the first panel to the position of the last panel
- * @ko 첫번째 패널의 좌표로부터 마지막 패널의 좌표로까지 이동할 수 있는 종류의 {@link Camera}
- */
-class LinearCamera extends Camera {
-  /**
-   * Update {@link Camera#range range} of Camera
-   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-   * @chainable
-   * @throws {FlickingError}
-   * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-   * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-   * @return {this}
-   */
-  public updateRange() {
-    const flicking = getFlickingAttached(this._flicking);
-    const renderer = flicking.renderer;
-
-    const firstPanel = renderer.getPanel(0);
-    const lastPanel = renderer.getPanel(renderer.panelCount - 1);
-
-    this._range = { min: firstPanel?.position ?? 0, max: lastPanel?.position ?? 0 };
-    return this;
-  }
-}
-
-export default LinearCamera;