@egjs/flicking 4.3.0 → 4.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.3.0",
+	"version": "4.4.2",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -13,9 +13,9 @@
 		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
 		"css": "postcss css/*.css --use autoprefixer postcss-clean -d dist/ -m",
 		"printsizes": "print-sizes ./dist --exclude=\\.map",
-		"test": "karma start",
-		"test:chrome": "karma start --chrome",
-		"coverage": "karma start --coverage && print-coveralls --sort=desc",
+		"test": "npm run test --prefix test/unit",
+		"test:chrome": "npm run test:chrome --prefix test/unit",
+		"test:cfc": "npm run test --prefix test/cfc",
 		"lint": "eslint 'src/**/*.ts'",
 		"lint:test": "eslint 'test/unit/**/*.ts'",
 		"jsdoc": "jsdoc -c jsdoc.json",
@@ -69,26 +69,22 @@
 		"egjs"
 	],
 	"devDependencies": {
+		"@babel/preset-env": "^7.16.0",
 		"@daybrush/jsdoc": "^0.3.10",
-		"@egjs/flicking-plugins": "^4.0.0-beta.1",
+		"@egjs/flicking-plugins": "^4.2.2",
 		"@egjs/release-helper": "0.0.3",
 		"@rollup/plugin-babel": "^5.3.0",
 		"@rollup/plugin-commonjs": "^11.1.0",
 		"@rollup/plugin-node-resolve": "^7.1.3",
 		"@rollup/plugin-replace": "^2.4.1",
-		"@types/chai": "^4.2.15",
 		"@types/fs-extra": "^9.0.11",
-		"@types/karma-chai": "^0.1.1",
-		"@types/mocha": "^5.2.5",
 		"@types/node": "^14.14.35",
-		"@types/sinon": "^7.0.3",
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/eslint-plugin-tslint": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",
 		"autoprefixer": "^9.8.5",
 		"babel-loader": "^8.2.2",
-		"chai": "^4.3.4",
-		"chalk": "^2.4.2",
+		"babel-preset-env": "^1.7.0",
 		"concurrently": "^6.0.0",
 		"core-js": "^3.9.1",
 		"coveralls": "^3.0.2",
@@ -105,15 +101,7 @@
 		"http-serve": "^1.0.1",
 		"husky": "^1.3.1",
 		"jsdoc-to-mdx": "^1.0.5",
-		"karma": "^3.1.4",
-		"karma-chai": "^0.1.0",
-		"karma-chrome-launcher": "^2.2.0",
-		"karma-mocha": "^1.3.0",
-		"karma-mocha-reporter": "^2.2.5",
-		"karma-sinon": "^1.0.5",
-		"karma-typescript-egjs": "^4.0.0",
-		"karma-viewport": "^1.0.8",
-		"mocha": "^5.2.0",
+		"karma-typescript-es6-transform": "^5.5.2",
 		"postcss-clean": "^1.2.2",
 		"postcss-cli": "^7.1.1",
 		"print-coveralls": "^1.2.2",
@@ -124,10 +112,9 @@
 		"rollup-plugin-postcss": "^3.1.3",
 		"rollup-plugin-prototype-minify": "^1.1.0",
 		"rollup-plugin-serve": "^1.1.0",
+		"rollup-plugin-terser": "^7.0.2",
 		"rollup-plugin-typescript2": "^0.30.0",
-		"rollup-plugin-uglify": "^6.0.4",
 		"rollup-plugin-visualizer": "^4.2.1",
-		"sinon": "^7.2.3",
 		"sync-exec": "^0.6.2",
 		"ts-mock-imports": "^1.3.3",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",

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,16 @@ export interface FlickingOptions {
   disableOnInit: boolean;
   // PERFORMANCE
   renderOnlyVisible: boolean;
+  virtual: VirtualOptions | null;
   // OTHERS
   autoInit: boolean;
   autoResize: boolean;
+  useResizeObserver: boolean;
+  externalRenderer: ExternalRenderer | null;
+  // @deprecated
   renderExternal: {
-    renderer: typeof ExternalRenderer;
-    rendererOptions: {[key: string]: any};
+    renderer: new (options: RendererOptions) => ExternalRenderer;
+    rendererOptions: RendererOptions;
   } | null;
 }
 
@@ -102,9 +109,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 +125,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 +145,10 @@ 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 _externalRenderer: FlickingOptions["externalRenderer"];
   private _renderExternal: FlickingOptions["renderExternal"];
 
   // Internal State
@@ -207,6 +219,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 +537,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,22 +586,35 @@ 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, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
-   * @type {boolean}
-   * @default false
+   * @default null
    * @internal
    * @readonly
    */
+  public get externalRenderer() { return this._externalRenderer; }
+  /**
+   * 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, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
+   * @default null
+   * @internal
+   * @readonly
+   * @deprecated
+   */
   public get renderExternal() { return this._renderExternal; }
 
   // Options Setter
@@ -599,7 +667,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 +737,11 @@ class Flicking extends Component<FlickingEvents> {
     preventClickOnDrag = true,
     disableOnInit = false,
     renderOnlyVisible = false,
+    virtual = null,
     autoInit = true,
     autoResize = true,
+    useResizeObserver = true,
+    externalRenderer = null,
     renderExternal = null
   }: Partial<FlickingOptions> = {}) {
     super();
@@ -673,6 +760,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 +775,19 @@ 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._externalRenderer = externalRenderer;
     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 +808,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 +827,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 +856,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 +1043,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 +1118,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 +1311,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 +1328,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 +1374,39 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   private _createRenderer(): Renderer {
-    const rendererOptions = {
-      align: this._align
-    };
+    const externalRenderer = this._externalRenderer;
+    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 externalRenderer
+      ? externalRenderer
+      : this._renderExternal
+        ? this._createExternalRenderer()
+        : this._createVanillaRenderer();
+  }
+
+  private _createExternalRenderer(): ExternalRenderer {
+    const {
+      renderer,
+      rendererOptions
+    } = this._renderExternal!;
 
-    const renderExternal = this._renderExternal;
+    return new (renderer)({ align: this._align, ...rendererOptions });
+  }
+
+  private _createVanillaRenderer(): VanillaRenderer {
+    const virtual = this.virtualEnabled;
 
-    return renderExternal
-      ? new (renderExternal.renderer as any)({ ...rendererOptions, ...renderExternal.rendererOptions })
-      : new VanillaRenderer(rendererOptions);
+    return new VanillaRenderer({
+      align: this._align,
+      strategy: virtual
+        ? new VirtualRenderingStrategy()
+        : new NormalRenderingStrategy({
+          providerCtor: VanillaElementProvider
+        })
+    });
   }
 
   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의 현재 좌표
@@ -71,7 +78,7 @@ abstract class Camera {
    * @ko Camera의 {@link Camera#position position}이 도달 가능한 범위
    * @type {object}
    * @property {number} min A minimum position<ko>최소 위치</ko>
-   * @property {number} min A maximum position<ko>최대 위치</ko>
+   * @property {number} max A maximum position<ko>최대 위치</ko>
    * @readonly
    */
   public get range() { return this._range; }
@@ -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"];