@egjs/flicking 4.2.5 → 4.4.1

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

@@ -68,12 +68,38 @@ class CircularCamera extends Camera {
     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);
-    const anchorInRange = super.findAnchorIncludePosition(positionInRange);
 
-    if (!anchorInRange) return null;
+    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);
+    }
 
-    const rangeDiff = this.rangeDiff;
+    if (!anchorInRange) return null;
 
     if (position < range.min) {
       const loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
@@ -124,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;
@@ -142,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;
@@ -171,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);
@@ -186,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() {
@@ -222,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 });
 };
 

package/src/const/error.ts

@@ -25,6 +25,7 @@
  * <ko>프레임워크(React, Angular, Vue ...)에서 사용 불가능한 메소드를 호출했을 경우</ko>
  * @property {number} NOT_INITIALIZED When the {@link Flicking#init} is not called before but is needed<ko>{@link Flicking#init}의 호출이 필요하나, 아직 호출되지 않았을 경우</ko>
  * @property {number} NO_ACTIVE When there're no active panel that flicking has selected. This may be due to the absence of any panels<ko>현재 Flicking이 선택한 패널이 없을 경우. 일반적으로 패널이 하나도 없는 경우에 발생할 수 있습니다</ko>
+ * @property {number} NOT_ALLOWED_IN_VIRTUAL When the non-allowed method is called while the virtual option is enabled<ko>virtual 옵션이 활성화된 상태에서 사용 불가능한 메소드가 호출되었을 경우</ko>
  */
 export const CODE = {
   WRONG_TYPE: 0,
@@ -40,14 +41,15 @@ export const CODE = {
   ANIMATION_ALREADY_PLAYING: 10,
   NOT_ALLOWED_IN_FRAMEWORK: 11,
   NOT_INITIALIZED: 12,
-  NO_ACTIVE: 13
+  NO_ACTIVE: 13,
+  NOT_ALLOWED_IN_VIRTUAL: 14
 } as const;
 
 export const MESSAGE = {
   WRONG_TYPE: (wrongVal: any, correctTypes: string[]) => `${wrongVal}(${typeof wrongVal}) is not a ${correctTypes.map(type => `"${type}"`).join(" or ")}.`,
   ELEMENT_NOT_FOUND: (selector: string) => `Element with selector "${selector}" not found.`,
   VAL_MUST_NOT_NULL: (val: any, name: string) => `${name} should be provided. Given: ${val}`,
-  NOT_ATTACHED_TO_FLICKING: (name: string) => `${name} is not attached to the Flicking instance. "init()" should be called first.`,
+  NOT_ATTACHED_TO_FLICKING: "This module is not attached to the Flicking instance. \"init()\" should be called first.",
   WRONG_OPTION: (optionName: string, val: any) => `Option "${optionName}" is not in correct format, given: ${val}`,
   INDEX_OUT_OF_RANGE: (val: number, min: number, max: number) => `Index "${val}" is out of range: should be between ${min} and ${max}.`,
   POSITION_NOT_REACHABLE: (position: number) => `Position "${position}" is not reachable.`,
@@ -57,5 +59,6 @@ export const MESSAGE = {
   ANIMATION_ALREADY_PLAYING: "Animation is already playing.",
   NOT_ALLOWED_IN_FRAMEWORK: "This behavior is not allowed in the frameworks like React, Vue, or Angular.",
   NOT_INITIALIZED: "Flicking is not initialized yet, call init() first.",
-  NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels."
+  NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels.",
+  NOT_ALLOWED_IN_VIRTUAL: "This behavior is not allowed when the virtual option is enabled"
 } as const;

package/src/const/external.ts

@@ -92,3 +92,9 @@ export const MOVE_TYPE = {
   FREE_SCROLL: "freeScroll",
   STRICT: "strict"
 } as const;
+
+export const CLASS = {
+  VERTICAL: "vertical",
+  HIDDEN: "flicking-hidden",
+  DEFAULT_VIRTUAL: "flicking-panel"
+};

package/src/control/AxesController.ts

@@ -167,9 +167,11 @@ class AxesController {
    * @return {void}
    */
   public destroy(): void {
-    this.removePreventClickHandler();
+    if (this._axes) {
+      this.removePreventClickHandler();
+      this._axes.destroy();
+    }
 
-    this._axes?.destroy();
     this._panInput?.destroy();
 
     this._resetInternalValues();
@@ -209,7 +211,7 @@ class AxesController {
    * @return {this}
    */
   public update(controlParams: ControlParams): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const axes = this._axes!;
     const axis = axes.axis[AXES.POSITION_KEY];
@@ -229,7 +231,7 @@ class AxesController {
    * @return {this}
    */
   public addPreventClickHandler(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const axes = this._axes!;
     const cameraEl = flicking.camera.element;
 
@@ -246,7 +248,7 @@ class AxesController {
    * @return {this}
    */
   public removePreventClickHandler(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const axes = this._axes!;
     const cameraEl = flicking.camera.element;
 
@@ -280,17 +282,22 @@ class AxesController {
    */
   public animateTo(position: number, duration: number, axesEvent?: OnRelease): Promise<void> {
     const axes = this._axes;
+    const state = this._stateMachine.state;
 
     if (!axes) {
-      return Promise.reject(new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING("Control"), ERROR.CODE.NOT_ATTACHED_TO_FLICKING));
+      return Promise.reject(new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING, ERROR.CODE.NOT_ATTACHED_TO_FLICKING));
     }
 
     const startPos = axes.get([AXES.POSITION_KEY])[AXES.POSITION_KEY];
 
     if (startPos === position) {
-      const flicking = getFlickingAttached(this._flicking, "Control");
+      const flicking = getFlickingAttached(this._flicking);
 
       flicking.camera.lookAt(position);
+
+      if (state.targetPanel) {
+        flicking.control.setActive(state.targetPanel, flicking.control.activePanel, axesEvent?.isTrusted ?? false);
+      }
       return Promise.resolve();
     }
 
@@ -315,7 +322,7 @@ class AxesController {
     };
 
     if (duration === 0) {
-      const flicking = getFlickingAttached(this._flicking, "Control");
+      const flicking = getFlickingAttached(this._flicking);
       const camera = flicking.camera;
 
       animate();

package/src/control/Control.ts

@@ -171,8 +171,8 @@ abstract class Control {
    * @chainable
    * @return {Promise<void>}
    */
-  public updatePosition(_progressInPanel: number): void {   // eslint-disable-line @typescript-eslint/no-unused-vars
-    const flicking = getFlickingAttached(this._flicking, "Control");
+  public updatePosition(_progressInPanel: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
 
@@ -188,7 +188,7 @@ abstract class Control {
    * @return {this}
    */
   public updateInput(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
 
     this._controller.update(camera.controlParams);
@@ -255,7 +255,7 @@ abstract class Control {
     direction?: ValueOf<typeof DIRECTION>;
     axesEvent?: OnRelease;
   }) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
 
     let position = panel.position;
@@ -299,7 +299,7 @@ abstract class Control {
    * @internal
    */
   public setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
 
     this._activePanel = newActivePanel;
 
@@ -322,7 +322,7 @@ abstract class Control {
   }
 
   protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease): void {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;
     const camera = flicking.camera;
     const activePanel = this._activePanel;
@@ -351,7 +351,7 @@ abstract class Control {
     newActivePanel: Panel;
     axesEvent?: OnRelease;
   }) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const animate = () => this._controller.animateTo(position, duration, axesEvent);
     const state = this._controller.state;
 

package/src/control/FreeControl.ts

@@ -58,7 +58,7 @@ class FreeControl extends Control {
    * @return {Promise<void>}
    */
   public updatePosition(progressInPanel: number): void {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
 
@@ -107,7 +107,7 @@ class FreeControl extends Control {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
 
     const camera = flicking.camera;
     const targetPos = camera.clampToReachablePosition(position);

package/src/control/SnapControl.ts

@@ -85,7 +85,7 @@ class SnapControl extends Control {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activeAnchor = camera.findActiveAnchor();
     const anchorAtCamera = camera.findNearestAnchor(camera.position);
@@ -128,7 +128,7 @@ class SnapControl extends Control {
   }
 
   private _findSnappedAnchor(position: number, anchorAtCamera: AnchorPoint): AnchorPoint {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const count = this._count;
 
@@ -191,7 +191,7 @@ class SnapControl extends Control {
   }
 
   private _findAdjacentAnchor(posDelta: number, anchorAtCamera: AnchorPoint): AnchorPoint {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const adjacentAnchor = (posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) ?? anchorAtCamera;
 

package/src/control/StrictControl.ts

@@ -66,7 +66,7 @@ class StrictControl extends Control {
    * @return {this}
    */
   public updateInput(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const renderer = flicking.renderer;
     const controller = this._controller;
@@ -178,7 +178,7 @@ class StrictControl extends Control {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
     const axesRange = this._controller.range;

package/src/core/AutoResizer.ts

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../Flicking";
+
+class AutoResizer {
+  private _flicking: Flicking;
+  private _enabled: boolean;
+  private _resizeObserver: ResizeObserver | null;
+
+  public get enabled() { return this._enabled; }
+
+  public constructor(flicking: Flicking) {
+    this._flicking = flicking;
+    this._enabled = false;
+    this._resizeObserver = null;
+  }
+
+  public enable(): this {
+    const flicking = this._flicking;
+    const viewport = flicking.viewport;
+
+    if (this._enabled) {
+      this.disable();
+    }
+
+    if (flicking.useResizeObserver && !!window.ResizeObserver) {
+      const viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
+
+      const resizeObserver = viewportSizeNot0
+        ? new ResizeObserver(this._skipFirstResize)
+        : new ResizeObserver(this._onResize);
+
+      resizeObserver.observe(flicking.viewport.element);
+
+      this._resizeObserver = resizeObserver;
+    } else {
+      window.addEventListener("resize", this._onResize);
+    }
+
+    this._enabled = true;
+
+    return this;
+  }
+
+  public disable(): this {
+    if (!this._enabled) return this;
+
+    const resizeObserver = this._resizeObserver;
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      this._resizeObserver = null;
+    } else {
+      window.removeEventListener("resize", this._onResize);
+    }
+
+    this._enabled = false;
+
+    return this;
+  }
+
+  private _onResize = () => {
+    void this._flicking.resize();
+  };
+
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _skipFirstResize = (() => {
+    let isFirstResize = true;
+
+    return (() => {
+      if (isFirstResize) {
+        isFirstResize = false;
+        return;
+      }
+      this._onResize();
+    });
+  })();
+}
+
+export default AutoResizer;

package/src/core/Viewport.ts

@@ -124,10 +124,10 @@ class Viewport {
     this._width = el.clientWidth;
     this._height = el.clientHeight;
     this._padding = {
-      left: parseFloat(elStyle.paddingLeft),
-      right: parseFloat(elStyle.paddingRight),
-      top: parseFloat(elStyle.paddingTop),
-      bottom: parseFloat(elStyle.paddingBottom)
+      left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
+      right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
+      top: elStyle.paddingTop ? parseFloat(elStyle.paddingTop) : 0,
+      bottom: elStyle.paddingBottom ? parseFloat(elStyle.paddingBottom) : 0
     };
     this._isBorderBoxSizing = elStyle.boxSizing === "border-box";
   }