@egjs/flicking 4.2.4 → 4.4.0

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,39 +197,47 @@ class CircularCamera extends Camera {
       this._range = { min: firstPanel.position, max: lastPanel.position };
     }
 
-    this._updateCircularOffset();
+    this.updateOffset();
 
     return this;
   }
 
-  public async lookAt(pos: number) {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+  public updateOffset() {
+    this._updateCircularOffset();
+
+    return super.updateOffset();
+  }
+
+  public lookAt(pos: number) {
+    const flicking = getFlickingAttached(this._flicking);
     const prevPos = this._position;
 
-    if (pos === prevPos) return await super.lookAt(pos);
+    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)) {
-      this._updateCircularOffset();
-      await flicking.renderer.render();
+      void flicking.renderer.render().then(() => {
+        this.updateOffset();
+      });
     }
-
-    return await 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/getRenderingPanels.ts

@@ -8,12 +8,17 @@ export default <T>(flicking: Flicking, diffResult: DiffResult<T>) => {
     return map;
   }, {});
 
+  const maintainedMap = diffResult.maintained.reduce((map, [prev, current]) => {
+    map[prev] = current;
+    return map;
+  }, {});
+
   return [
     ...flicking.panels
       .filter(panel => !removedPanels[panel.index])
       // Sort panels by position
       .sort((panel1, panel2) => (panel1.position + panel1.offset) - (panel2.position + panel2.offset))
-      .map(panel => diffResult.prevList[panel.index]),
+      .map(panel => diffResult.list[maintainedMap[panel.index]]),
     ...diffResult.added.map(idx => diffResult.list[idx])
   ];
 };

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,23 @@ 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);
 
-      return flicking.camera.lookAt(position);
+      if (state.targetPanel) {
+        flicking.control.setActive(state.targetPanel, flicking.control.activePanel, axesEvent?.isTrusted ?? false);
+      }
+      return Promise.resolve();
     }
 
     this._animatingContext = {
@@ -314,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

@@ -14,8 +14,6 @@ import * as ERROR from "../const/error";
 import { getDirection, getFlickingAttached } from "../utils";
 import { ValueOf } from "../type/internal";
 
-import { STATE_TYPE } from "./states/State";
-
 /**
  * A component that manages inputs and animation of Flicking
  * @ko Flicking의 입력 장치 & 애니메이션을 담당하는 컴포넌트
@@ -173,13 +171,13 @@ abstract class Control {
    * @chainable
    * @return {Promise<void>}
    */
-  public async updatePosition(_progressInPanel: number): Promise<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;
 
     if (activePanel) {
-      await camera.lookAt(camera.clampToReachablePosition(activePanel.position));
+      camera.lookAt(camera.clampToReachablePosition(activePanel.position));
     }
   }
 
@@ -190,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);
@@ -257,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;
@@ -297,8 +295,34 @@ abstract class Control {
     return this._animateToPosition({ position, duration, newActivePanel: panel, axesEvent });
   }
 
+  /**
+   * @internal
+   */
+  public setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) {
+    const flicking = getFlickingAttached(this._flicking);
+
+    this._activePanel = newActivePanel;
+
+    flicking.camera.updateAdaptiveHeight();
+
+    if (newActivePanel !== prevActivePanel) {
+      flicking.trigger(new ComponentEvent(EVENTS.CHANGED, {
+        index: newActivePanel.index,
+        panel: newActivePanel,
+        prevIndex: prevActivePanel?.index ?? -1,
+        prevPanel: prevActivePanel,
+        isTrusted,
+        direction: prevActivePanel ? getDirection(prevActivePanel.position, newActivePanel.position) : DIRECTION.NONE
+      }));
+    } else {
+      flicking.trigger(new ComponentEvent(EVENTS.RESTORED, {
+        isTrusted
+      }));
+    }
+  }
+
   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;
@@ -327,18 +351,16 @@ abstract class Control {
     newActivePanel: Panel;
     axesEvent?: OnRelease;
   }) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
-    const currentPanel = this._activePanel;
+    const flicking = getFlickingAttached(this._flicking);
     const animate = () => this._controller.animateTo(position, duration, axesEvent);
-    const isTrusted = axesEvent?.isTrusted || false;
+    const state = this._controller.state;
+
+    state.targetPanel = newActivePanel;
 
     if (duration <= 0) {
-      const animation = animate();
-      this._setActive(newActivePanel, currentPanel, isTrusted);
-      return animation;
+      return animate();
     } else {
       return animate().then(async () => {
-        this._setActive(newActivePanel, currentPanel, isTrusted);
         await flicking.renderer.render();
       }).catch(err => {
         if (axesEvent && err instanceof FlickingError && err.code === ERROR.CODE.ANIMATION_INTERRUPTED) return;
@@ -346,30 +368,6 @@ abstract class Control {
       });
     }
   }
-
-  protected _setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
-
-    this._activePanel = newActivePanel;
-
-    flicking.camera.updateAdaptiveHeight();
-    this._controller.stateMachine.transitTo(STATE_TYPE.IDLE);
-
-    if (newActivePanel !== prevActivePanel) {
-      flicking.trigger(new ComponentEvent(EVENTS.CHANGED, {
-        index: newActivePanel.index,
-        panel: newActivePanel,
-        prevIndex: prevActivePanel?.index ?? -1,
-        prevPanel: prevActivePanel,
-        isTrusted,
-        direction: prevActivePanel ? getDirection(prevActivePanel.position, newActivePanel.position) : DIRECTION.NONE
-      }));
-    } else {
-      flicking.trigger(new ComponentEvent(EVENTS.RESTORED, {
-        isTrusted
-      }));
-    }
-  }
 }
 
 export default Control;

package/src/control/FreeControl.ts

@@ -57,8 +57,8 @@ class FreeControl extends Control {
    * @chainable
    * @return {Promise<void>}
    */
-  public async updatePosition(progressInPanel: number): Promise<void> {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+  public updatePosition(progressInPanel: number): void {
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
 
@@ -66,7 +66,7 @@ class FreeControl extends Control {
       const panelRange = activePanel.range;
       const newPosition = panelRange.min + (panelRange.max - panelRange.min) * progressInPanel;
 
-      await camera.lookAt(camera.clampToReachablePosition(newPosition));
+      camera.lookAt(camera.clampToReachablePosition(newPosition));
     }
   }
 
@@ -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;
@@ -239,8 +239,8 @@ class StrictControl extends Control {
     });
   }
 
-  protected _setActive = (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => {
-    super._setActive(newActivePanel, prevActivePanel, isTrusted);
+  public setActive = (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => {
+    super.setActive(newActivePanel, prevActivePanel, isTrusted);
     this.updateInput();
   };
 

package/src/control/states/AnimatingState.ts

@@ -51,18 +51,21 @@ class AnimatingState extends State {
   }
 
   public onFinish(ctx: Parameters<State["onFinish"]>[0]) {
-    const { flicking, axesEvent } = ctx;
+    const { flicking, axesEvent, transitTo } = ctx;
 
-    const controller = flicking.control.controller;
+    const control = flicking.control;
+    const controller = control.controller;
     const animatingContext = controller.animatingContext;
 
+    transitTo(STATE_TYPE.IDLE);
+
     flicking.trigger(new ComponentEvent(EVENTS.MOVE_END, {
       isTrusted: axesEvent.isTrusted,
       direction: getDirection(animatingContext.start, animatingContext.end),
       axesEvent
     }));
 
-    // transitTo is controlled by class Control because of order
+    control.setActive(this._targetPanel!, control.activePanel, axesEvent.isTrusted);
   }
 }
 

package/src/control/states/State.ts

@@ -60,6 +60,8 @@ abstract class State {
    */
   public get targetPanel() { return this._targetPanel; }
 
+  public set targetPanel(val: Panel | null) { this._targetPanel = val; }
+
   /**
    * An callback which is called when state has changed to this state
    * @ko 현재 상태로 돌입했을때 호출되는 콜백 함수
@@ -177,7 +179,7 @@ abstract class State {
       ? circulatePosition(position, camera.range.min, camera.range.max)
       : position;
 
-    void camera.lookAt(newPosition);
+    camera.lookAt(newPosition);
 
     const moveEvent = new ComponentEvent(EVENTS.MOVE, {
       isTrusted: axesEvent.isTrusted,
@@ -190,7 +192,7 @@ abstract class State {
 
     if (moveEvent.isCanceled()) {
       // Return to previous position
-      void camera.lookAt(prevPosition);
+      camera.lookAt(prevPosition);
       transitTo(STATE_TYPE.DISABLED);
     }
   }

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;