@egjs/flicking 4.3.1 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.3.1",
+	"version": "4.4.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",

package/src/Flicking.ts

@@ -6,10 +6,13 @@ import Component, { ComponentEvent } from "@egjs/component";
 
 import FlickingError from "./core/FlickingError";
 import Viewport from "./core/Viewport";
+import AutoResizer from "./core/AutoResizer";
 import { Panel } from "./core/panel";
+import { VanillaElementProvider } from "./core/panel/provider";
+import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
 import { Control, SnapControl, SnapControlOptions, FreeControl, StrictControl, FreeControlOptions, StrictControlOptions } from "./control";
 import { BoundCamera, Camera, CircularCamera, LinearCamera } from "./camera";
-import { Renderer, VanillaRenderer, ExternalRenderer } from "./renderer";
+import { Renderer, VanillaRenderer, ExternalRenderer, RendererOptions, NormalRenderingStrategy, VirtualRenderingStrategy } from "./renderer";
 import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } from "./const/external";
 import * as ERROR from "./const/error";
 import { findIndex, getElement, includes, parseElement } from "./utils";
@@ -72,12 +75,14 @@ export interface FlickingOptions {
   disableOnInit: boolean;
   // PERFORMANCE
   renderOnlyVisible: boolean;
+  virtual: VirtualOptions | null;
   // OTHERS
   autoInit: boolean;
   autoResize: boolean;
+  useResizeObserver: boolean;
   renderExternal: {
-    renderer: typeof ExternalRenderer;
-    rendererOptions: {[key: string]: any};
+    renderer: new (options: RendererOptions) => ExternalRenderer;
+    rendererOptions: RendererOptions;
   } | null;
 }
 
@@ -102,9 +107,11 @@ class Flicking extends Component<FlickingEvents> {
 
   // Core components
   private _viewport: Viewport;
+  private _autoResizer: AutoResizer;
   private _camera: Camera;
   private _control: Control;
   private _renderer: Renderer;
+  private _virtualManager: VirtualManager;
 
   // Options
   private _align: FlickingOptions["align"];
@@ -116,6 +123,7 @@ class Flicking extends Component<FlickingEvents> {
   private _panelsPerView: FlickingOptions["panelsPerView"];
   private _noPanelStyleOverride: FlickingOptions["noPanelStyleOverride"];
   private _resizeOnContentsReady: FlickingOptions["resizeOnContentsReady"];
+  private _virtual: FlickingOptions["virtual"];
 
   private _needPanelThreshold: FlickingOptions["needPanelThreshold"];
   private _preventEventsBeforeInit: FlickingOptions["preventEventsBeforeInit"];
@@ -135,8 +143,9 @@ class Flicking extends Component<FlickingEvents> {
 
   private _renderOnlyVisible: FlickingOptions["renderOnlyVisible"];
 
-  private _autoResize: FlickingOptions["autoResize"];
   private _autoInit: FlickingOptions["autoInit"];
+  private _autoResize: FlickingOptions["autoResize"];
+  private _useResizeObserver: FlickingOptions["useResizeObserver"];
   private _renderExternal: FlickingOptions["renderExternal"];
 
   // Internal State
@@ -207,6 +216,16 @@ class Flicking extends Component<FlickingEvents> {
    * @readonly
    */
   public get circularEnabled() { return this._camera.controlParams.circular; }
+  /**
+   * Whether the `virtual` option is enabled.
+   * The {@link Flicking#virtual virtual} option can't be enabled when  {@link Flicking#panelsPerView panelsPerView} is less or equal than zero.
+   * @ko {@link Flicking#virtual virtual} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
+   * {@link Flicking#virtual virtual} 옵션은 {@link Flicking#panelsPerView panelsPerView} 옵션의 값이 0보다 같거나 작으면 비활성화됩니다.
+   * @type {boolean}
+   * @default false
+   * @readonly
+   */
+  public get virtualEnabled() { return this._panelsPerView > 0 && this._virtual != null; }
   /**
    * Index number of the {@link Flicking#currentPanel currentPanel}
    * @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호
@@ -515,12 +534,45 @@ class Flicking extends Component<FlickingEvents> {
   public get disableOnInit() { return this._disableOnInit; }
   // PERFORMANCE
   /**
-   * Whether to render visible panels only. This can dramatically increase performance when there're many panels.
-   * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다.
+   * Whether to render visible panels only. This can dramatically increase performance when there're many panels
+   * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다
    * @type {boolean}
    * @default false
    */
   public get renderOnlyVisible() { return this._renderOnlyVisible; }
+  /**
+   * By enabling this option, it will reduce memory consumption by restricting the number of DOM elements to `panelsPerView + 1`
+   * Must be used with `panelsPerview`.
+   * After Flicking's initialized, this property can be used to add/remove the panel count.
+   * @ko 이 옵션을 활성화할 경우 패널 엘리먼트의 개수를 `panelsPerView + 1` 개로 고정함으로써, 메모리 사용량을 줄일 수 있습니다.
+   * `panelsPerView` 옵션과 함께 사용되어야만 합니다.
+   * Flicking 초기화 이후에, 이 프로퍼티는 렌더링하는 패널의 개수를 추가/제거하기 위해 사용될 수 있습니다.
+   * @type {VirtualManager}
+   * @property {function} renderPanel A rendering function for the panel element's innerHTML<ko>패널 엘리먼트의 innerHTML을 렌더링하는 함수</ko>
+   * @property {number} initialPanelCount Initial panel count to render<ko>최초로 렌더링할 패널의 개수</ko>
+   * @property {boolean} [cache=false] Whether to cache rendered panel's innerHTML<ko>렌더링된 패널의 innerHTML 정보를 캐시할지 여부</ko>
+   * @property {string} [panelClass="flicking-panel"] The class name that will be applied to rendered panel elements<ko>렌더링되는 패널 엘리먼트에 적용될 클래스 이름</ko>
+   * @example
+   * ```ts
+   * import Flicking, { VirtualPanel } from "@egjs/flicking";
+   *
+   * const flicking = new Flicking("#some_el", {
+   *   panelsPerView: 3,
+   *   virtual: {
+   *     renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`,
+   *     initialPanelCount: 100
+   *   }
+   * });
+   *
+   * // Add 100 virtual panels (at the end)
+   * flicking.virtual.append(100);
+   *
+   * // Remove 100 virtual panels from 0 to 100
+   * flicking.virtual.remove(0, 100);
+   * ```
+   */
+  public get virtual() { return this._virtualManager; }
+
   // OTHERS
   /**
    * Call {@link Flicking#init init()} automatically when creating Flicking's instance
@@ -531,14 +583,19 @@ class Flicking extends Component<FlickingEvents> {
    */
   public get autoInit() { return this._autoInit; }
   /**
-   * Attach Flicking's {@link Flicking#resize resize} method to window's resize event.
-   * Flicking will automatically call {@link Flicking#resize resize} window size and orientation change.
-   * @ko Flicking의 {@link Flicking#resize resize} 메소드를 window의 resize 이벤트 핸들러로 등록합니다.
-   * 설정시 window 창 크기 및 orientation 변경에 의해 자동으로 {@link Flicking#resize resize}를 호출합니다.
+   * Whether to automatically call {@link Flicking#resize resize()} when the viewport element(.flicking-viewport)'s size is changed
+   * @ko 뷰포트 엘리먼트(.flicking-viewport)의 크기 변경시 {@link Flicking#resize resize()} 메소드를 자동으로 호출할지 여부를 설정합니다
    * @type {boolean}
    * @default true
    */
   public get autoResize() { return this._autoResize; }
+  /**
+   * Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} event when using the `autoResize` option
+   * @ko autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다
+   * @type {boolean}
+   * @default true
+   */
+  public get useResizeObserver() { return this._useResizeObserver; }
   /**
    * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
    * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
@@ -599,7 +656,23 @@ class Flicking extends Component<FlickingEvents> {
   // PERFORMANCE
   public set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]) { this._renderOnlyVisible = val; }
   // OTHERS
-  public set autoResize(val: FlickingOptions["autoResize"]) { this._autoResize = val; }
+  public set autoResize(val: FlickingOptions["autoResize"]) {
+    this._autoResize = val;
+
+    if (val) {
+      this._autoResizer.enable();
+    } else {
+      this._autoResizer.disable();
+    }
+  }
+
+  public set useResizeObserver(val: FlickingOptions["useResizeObserver"]) {
+    this._useResizeObserver = val;
+
+    if (this._autoResize) {
+      this._autoResizer.enable();
+    }
+  }
 
   /**
    * @param root A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
@@ -653,8 +726,10 @@ class Flicking extends Component<FlickingEvents> {
     preventClickOnDrag = true,
     disableOnInit = false,
     renderOnlyVisible = false,
+    virtual = null,
     autoInit = true,
     autoResize = true,
+    useResizeObserver = true,
     renderExternal = null
   }: Partial<FlickingOptions> = {}) {
     super();
@@ -673,6 +748,7 @@ class Flicking extends Component<FlickingEvents> {
     this._panelsPerView = panelsPerView;
     this._noPanelStyleOverride = noPanelStyleOverride;
     this._resizeOnContentsReady = resizeOnContentsReady;
+    this._virtual = virtual;
     this._needPanelThreshold = needPanelThreshold;
     this._preventEventsBeforeInit = preventEventsBeforeInit;
     this._deceleration = deceleration;
@@ -687,17 +763,18 @@ class Flicking extends Component<FlickingEvents> {
     this._preventClickOnDrag = preventClickOnDrag;
     this._disableOnInit = disableOnInit;
     this._renderOnlyVisible = renderOnlyVisible;
-    this._autoResize = autoResize;
     this._autoInit = autoInit;
+    this._autoResize = autoResize;
+    this._useResizeObserver = useResizeObserver;
     this._renderExternal = renderExternal;
 
     // Create core components
     this._viewport = new Viewport(getElement(root));
+    this._autoResizer = new AutoResizer(this);
     this._renderer = this._createRenderer();
     this._camera = this._createCamera();
     this._control = this._createControl();
-
-    this.resize = this.resize.bind(this);
+    this._virtualManager = new VirtualManager(this, virtual);
 
     if (this._autoInit) {
       void this.init();
@@ -718,10 +795,12 @@ class Flicking extends Component<FlickingEvents> {
     const camera = this._camera;
     const renderer = this._renderer;
     const control = this._control;
+    const virtualManager = this._virtualManager;
     const originalTrigger = this.trigger;
     const preventEventsBeforeInit = this._preventEventsBeforeInit;
 
     camera.init(this);
+    virtualManager.init();
     renderer.init(this);
     control.init(this);
 
@@ -735,7 +814,7 @@ class Flicking extends Component<FlickingEvents> {
     await this._moveToInitialPanel();
 
     if (this._autoResize) {
-      window.addEventListener("resize", this.resize);
+      this._autoResizer.enable();
     }
     if (this._preventClickOnDrag) {
       control.controller.addPreventClickHandler();
@@ -764,8 +843,8 @@ class Flicking extends Component<FlickingEvents> {
    */
   public destroy(): void {
     this.off();
-    window.removeEventListener("resize", this.resize);
 
+    this._autoResizer.disable();
     this._control.destroy();
     this._camera.destroy();
     this._renderer.destroy();
@@ -951,7 +1030,7 @@ class Flicking extends Component<FlickingEvents> {
    * @param {boolean} [options.includePanelHTML=false] Include panel's `outerHTML` to the returning status<ko>패널의 `outerHTML`을 반환값에 포함시킵니다</ko>
    * @param {boolean} [options.visiblePanelsOnly=false] Include only {@link Flicking#visiblePanel visiblePanel}'s HTML. This option is available only when the `includePanelHTML` is true
    * <ko>현재 보이는 패널({@link Flicking#visiblePanel visiblePanel})의 HTML만 반환합니다. `includePanelHTML`이 `true`일 경우에만 동작합니다.</ko>
-   * @return {Partial<Status>} An object with current status value information<ko>현재 상태값 정보를 가진 객체.</ko>
+   * @return {Status} An object with current status value information<ko>현재 상태값 정보를 가진 객체.</ko>
    */
   public getStatus({
     index = true,
@@ -1026,8 +1105,8 @@ class Flicking extends Component<FlickingEvents> {
 
     // Can't add/remove panels on external rendering
     if (panels[0]?.html && !this._renderExternal) {
-      renderer.batchRemove({ index: 0, deleteCount: this.panels.length });
-      renderer.batchInsert({ index: 0, elements: parseElement(panels.map(panel => panel.html!)) });
+      renderer.batchRemove({ index: 0, deleteCount: this.panels.length, hasDOMInElements: true });
+      renderer.batchInsert({ index: 0, elements: parseElement(panels.map(panel => panel.html!)), hasDOMInElements: true });
     }
 
     if (index) {
@@ -1219,7 +1298,7 @@ class Flicking extends Component<FlickingEvents> {
       throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
     }
 
-    return this._renderer.batchInsert({ index, elements: parseElement(element) });
+    return this._renderer.batchInsert({ index, elements: parseElement(element), hasDOMInElements: true });
   }
 
   /**
@@ -1236,7 +1315,7 @@ class Flicking extends Component<FlickingEvents> {
       throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
     }
 
-    return this._renderer.batchRemove({ index, deleteCount });
+    return this._renderer.batchRemove({ index, deleteCount, hasDOMInElements: true });
   }
 
   private _createControl(): Control {
@@ -1282,15 +1361,39 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   private _createRenderer(): Renderer {
-    const rendererOptions = {
-      align: this._align
-    };
-
     const renderExternal = this._renderExternal;
 
+    if (this._virtual && this._panelsPerView <= 0) {
+      // eslint-disable-next-line no-console
+      console.warn("\"virtual\" and \"panelsPerView\" option should be used together, ignoring virtual.");
+    }
+
     return renderExternal
-      ? new (renderExternal.renderer as any)({ ...rendererOptions, ...renderExternal.rendererOptions })
-      : new VanillaRenderer(rendererOptions);
+      ? this._createExternalRenderer()
+      : this._createVanillaRenderer();
+  }
+
+  private _createVanillaRenderer(): VanillaRenderer {
+    const virtual = this.virtualEnabled;
+
+    return new VanillaRenderer({
+      align: this._align,
+      strategy: virtual
+        ? new VirtualRenderingStrategy()
+        : new NormalRenderingStrategy({
+          providerCtor: VanillaElementProvider,
+          panelCtor: Panel
+        })
+    });
+  }
+
+  private _createExternalRenderer(): ExternalRenderer {
+    const {
+      renderer,
+      rendererOptions
+    } = this._renderExternal!;
+
+    return new (renderer)({ align: this._align, ...rendererOptions });
   }
 
   private async _moveToInitialPanel(): Promise<void> {

package/src/camera/BoundCamera.ts

@@ -23,7 +23,7 @@ class BoundCamera extends Camera {
    * @return {this}
    */
   public updateRange() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const renderer = flicking.renderer;
     const alignPos = this._alignPos;
 
@@ -61,7 +61,7 @@ class BoundCamera extends Camera {
   }
 
   public updateAnchors(): this {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     if (panels.length <= 0) {

package/src/camera/Camera.ts

@@ -10,7 +10,7 @@ import Panel from "../core/panel/Panel";
 import AnchorPoint from "../core/AnchorPoint";
 import * as ERROR from "../const/error";
 import { ALIGN, DIRECTION, EVENTS } from "../const/external";
-import { checkExistence, clamp, find, getFlickingAttached, getProgress, includes, parseAlign } from "../utils";
+import { checkExistence, clamp, find, getFlickingAttached, getProgress, includes, parseAlign, toArray } from "../utils";
 
 export interface CameraOptions {
   align: FlickingOptions["align"];
@@ -38,12 +38,19 @@ abstract class Camera {
 
   // Internal states getter
   /**
-   * The camera(`.flicking-camera`) element
-   * @ko 카메라(`.flicking-camera`) 엘리먼트
+   * The camera element(`.flicking-camera`)
+   * @ko 카메라 엘리먼트(`.flicking-camera`)
    * @type {HTMLElement}
    * @readonly
    */
   public get element() { return this._el; }
+  /**
+   * An array of the child elements of the camera element(`.flicking-camera`)
+   * @ko 카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열
+   * @type {HTMLElement[]}
+   * @readonly
+   */
+  public get children() { return toArray(this._el.children) as HTMLElement[]; }
   /**
    * Current position of the camera
    * @ko Camera의 현재 좌표
@@ -278,7 +285,7 @@ abstract class Camera {
     this._refreshVisiblePanels();
     this._checkNeedPanel();
     this._checkReachEnd(prevPos, pos);
-    this._applyTransform();
+    this.applyTransform();
   }
 
   /**
@@ -376,7 +383,7 @@ abstract class Camera {
    * @return {AnchorPoint | null}
    */
   public findActiveAnchor(): AnchorPoint | null {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const activeIndex = flicking.control.activeIndex;
 
     return find(this._anchors, anchor => anchor.panel.index === activeIndex);
@@ -418,7 +425,7 @@ abstract class Camera {
   public canSee(panel: Panel): boolean {
     const visibleRange = this.visibleRange;
     // Should not include margin, as we don't declare what the margin is visible as what the panel is visible.
-    return panel.includeRange(visibleRange.min, visibleRange.max, false);
+    return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);
   }
 
   /**
@@ -449,7 +456,7 @@ abstract class Camera {
    * @return {this}
    */
   public updateAnchors(): this {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     this._anchors = panels.map((panel, index) => new AnchorPoint({
@@ -471,7 +478,7 @@ abstract class Camera {
    * @return {this}
    */
   public updateAdaptiveHeight() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const activePanel = flicking.control.activePanel;
 
     if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
@@ -481,16 +488,24 @@ abstract class Camera {
     });
   }
 
-  public updateOffset() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    const unRenderedPanels = flicking.panels.filter(panel => !panel.rendered);
+  /**
+   * Update current offset of the camera
+   * @ko 현재 카메라의 오프셋을 업데이트합니다
+   * @chainable
+   * @return {this}
+   */
+  public updateOffset(): this {
+    const flicking = getFlickingAttached(this._flicking);
     const position = this._position;
+    const unRenderedPanels = flicking.panels.filter(panel => !panel.rendered);
 
     this._offset = unRenderedPanels
       .filter(panel => panel.position + panel.offset < position)
       .reduce((offset, panel) => offset + panel.sizeIncludingMargin, 0);
 
-    this._applyTransform();
+    this.applyTransform();
+
+    return this;
   }
 
   /**
@@ -504,6 +519,25 @@ abstract class Camera {
     return this;
   }
 
+  /**
+   * Apply "transform" style with the current position to camera element
+   * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
+   * @chainable
+   * @return {this}
+   */
+  public applyTransform(): this {
+    const el = this._el;
+    const flicking = getFlickingAttached(this._flicking);
+
+    const actualPosition = this._position - this._alignPos - this._offset;
+
+    el.style[this._transform] = flicking.horizontal
+      ? `translate(${-actualPosition}px)`
+      : `translate(0, ${-actualPosition}px)`;
+
+    return this;
+  }
+
   protected _resetInternalValues() {
     this._position = 0;
     this._alignPos = 0;
@@ -515,7 +549,7 @@ abstract class Camera {
   }
 
   protected _refreshVisiblePanels() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     const newVisiblePanels = panels.filter(panel => this.canSee(panel));
@@ -541,7 +575,7 @@ abstract class Camera {
 
     if (needPanelTriggered.prev && needPanelTriggered.next) return;
 
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     if (panels.length <= 0) {
@@ -588,7 +622,7 @@ abstract class Camera {
   }
 
   protected _checkReachEnd(prevPos: number, newPos: number): void {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const range = this._range;
 
     const wasBetweenRange = prevPos > range.min && prevPos < range.max;
@@ -603,17 +637,6 @@ abstract class Camera {
     }));
   }
 
-  protected _applyTransform(): void {
-    const el = this._el;
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-
-    const actualPosition = this._position - this._alignPos - this._offset;
-
-    el.style[this._transform] = flicking.horizontal
-      ? `translate(${-actualPosition}px)`
-      : `translate(0, ${-actualPosition}px)`;
-  }
-
   protected _checkTranslateSupport = () => {
     const transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
 

package/src/camera/CircularCamera.ts

@@ -150,9 +150,9 @@ class CircularCamera extends Camera {
 
     // Check looped visible area for circular case
     if (visibleRange.min < range.min) {
-      return visibleInCurrentRange || panel.includeRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff, false);
+      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
     } else if (visibleRange.max > range.max) {
-      return visibleInCurrentRange || panel.includeRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff, false);
+      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
     }
 
     return visibleInCurrentRange;
@@ -168,7 +168,7 @@ class CircularCamera extends Camera {
    * @return {this}
    */
   public updateRange() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const renderer = flicking.renderer;
 
     const panels = renderer.panels;
@@ -197,13 +197,19 @@ class CircularCamera extends Camera {
       this._range = { min: firstPanel.position, max: lastPanel.position };
     }
 
-    this._updateCircularOffset();
+    this.updateOffset();
 
     return this;
   }
 
+  public updateOffset() {
+    this._updateCircularOffset();
+
+    return super.updateOffset();
+  }
+
   public lookAt(pos: number) {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const prevPos = this._position;
 
     if (pos === prevPos) return super.lookAt(pos);
@@ -212,24 +218,26 @@ class CircularCamera extends Camera {
     const toggled = panels.map(panel => panel.toggle(prevPos, pos));
 
     this._position = pos;
+    super.lookAt(pos);
 
     if (toggled.some(isToggled => isToggled)) {
-      this._updateCircularOffset();
-      void flicking.renderer.render();
+      void flicking.renderer.render().then(() => {
+        this.updateOffset();
+      });
     }
-
-    return super.lookAt(pos);
   }
 
-  protected _applyTransform(): void {
+  public applyTransform(): this {
     const el = this._el;
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    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() {
@@ -248,19 +256,10 @@ class CircularCamera extends Camera {
       return;
     }
 
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    const toggledPrev: Panel[] = [];
-    const toggledNext: Panel[] = [];
-
-    flicking.panels
-      .filter(panel => panel.toggled)
-      .forEach(panel => {
-        if (panel.toggleDirection === DIRECTION.PREV) {
-          toggledPrev.push(panel);
-        } else {
-          toggledNext.push(panel);
-        }
-      });
+    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);
   }

package/src/camera/LinearCamera.ts

@@ -21,7 +21,7 @@ class LinearCamera extends Camera {
    * @return {this}
    */
   public updateRange() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const renderer = flicking.renderer;
 
     const firstPanel = renderer.getPanel(0);

package/src/cfc/sync.ts

@@ -79,13 +79,13 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
 
 const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, rendered: any[], startIdx: number, endIdx?: number) => {
   renderer.batchInsert(
-    ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [rendered[elIdx + diffResult.prevList.length]] }))
+    ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [rendered[elIdx + diffResult.prevList.length]], hasDOMInElements: false }))
   );
 };
 
 const batchRemove = (renderer: Renderer, startIdx: number, endIdx?: number) => {
   const removed = renderer.panels.slice(startIdx, endIdx);
 
-  renderer.batchRemove({ index: startIdx, deleteCount: removed.length });
+  renderer.batchRemove({ index: startIdx, deleteCount: removed.length, hasDOMInElements: false });
 };