refactor: use updatePanelOrder as a camera method

src/Flicking.ts

@@ -13,9 +13,9 @@ import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
 import { Control, SnapControl, SnapControlOptions, FreeControl, StrictControl, FreeControlOptions, StrictControlOptions } from "./control";
 import { Camera } from "./camera";
 import { Renderer, VanillaRenderer, ExternalRenderer, RendererOptions, NormalRenderingStrategy, VirtualRenderingStrategy } from "./renderer";
-import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION, CIRCULAR_FALLBACK, ORDER } from "./const/external";
+import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION, CIRCULAR_FALLBACK } from "./const/external";
 import * as ERROR from "./const/error";
-import { findIndex, getElement, getStyle, includes, parseElement } from "./utils";
+import { findIndex, getElement, includes, parseElement } from "./utils";
 import { HoldStartEvent, HoldEndEvent, MoveStartEvent, SelectEvent, MoveEvent, MoveEndEvent, WillChangeEvent, WillRestoreEvent, NeedPanelEvent, VisibleChangeEvent, ReachEdgeEvent, ReadyEvent, AfterResizeEvent, BeforeResizeEvent, ChangedEvent, RestoredEvent, PanelChangeEvent } from "./type/event";
 import { LiteralUnion, ValueOf } from "./type/internal";
 import { ElementLike, Plugin, Status, MoveTypeOptions } from "./type/external";
@@ -174,7 +174,6 @@ class Flicking extends Component<FlickingEvents> {
   // Internal State
   private _initialized: boolean;
   private _plugins: Plugin[];
-  private _panelOrder: ValueOf<typeof ORDER>;
 
   // Components
   /**
@@ -317,13 +316,6 @@ class Flicking extends Component<FlickingEvents> {
    * @readonly
    */
   public get activePlugins() { return this._plugins; }
-  /**
-   * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS property applied to the camera element(`.flicking-camera`)
-   * @ko 카메라 엘리먼트(`.flicking-camera`)에 적용된 {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS 속성
-   * @type {string}
-   * @readonly
-   */
-  public get panelOrder() { return this._panelOrder; }
 
   // Options Getter
   // UI / LAYOUT
@@ -1000,7 +992,6 @@ class Flicking extends Component<FlickingEvents> {
     // Internal states
     this._initialized = false;
     this._plugins = [];
-    this._panelOrder = ORDER.LTR;
 
     // Bind options
     this._align = align;
@@ -1074,7 +1065,6 @@ class Flicking extends Component<FlickingEvents> {
     camera.init();
     virtualManager.init();
     renderer.init(this);
-    this._updatePanelOrder(camera);
     control.init(this);
 
     if (preventEventsBeforeInit) {
@@ -1520,7 +1510,6 @@ class Flicking extends Component<FlickingEvents> {
     camera.updateAdaptiveHeight();
     camera.updateOffset();
     await renderer.render();
-    this._updatePanelOrder(camera);
 
     if (control.animating) {
       // TODO:
@@ -1774,18 +1763,6 @@ class Flicking extends Component<FlickingEvents> {
       element: viewport.element
     }));
   }
-
-  private _updatePanelOrder(camera: Camera): void {
-    if (this.horizontal) {
-      const direction = getStyle(camera.element).direction;
-      if (direction !== this._panelOrder) {
-        this._panelOrder = direction === ORDER.RTL ? ORDER.RTL : ORDER.LTR;
-        if (this._initialized) {
-          this._control.controller.updateDirection();
-        }
-      }
-    }
-  }
 }
 
 export default Flicking;

src/camera/Camera.ts

@@ -10,7 +10,8 @@ import Panel from "../core/panel/Panel";
 import AnchorPoint from "../core/AnchorPoint";
 import * as ERROR from "../const/error";
 import { ALIGN, CIRCULAR_FALLBACK, DIRECTION, EVENTS, ORDER } from "../const/external";
-import { checkExistence, find, getFlickingAttached, getProgress, includes, parseAlign, toArray } from "../utils";
+import { checkExistence, find, getFlickingAttached, getProgress, getStyle, includes, parseAlign, toArray } from "../utils";
+import { ValueOf } from "../type/internal";
 
 import { CameraMode, BoundCameraMode, CircularCameraMode, LinearCameraMode } from "./mode";
 
@@ -40,6 +41,7 @@ class Camera {
   private _visiblePanels: Panel[];
   private _anchors: AnchorPoint[];
   private _needPanelTriggered: { prev: boolean; next: boolean };
+  private _panelOrder: ValueOf<typeof ORDER>;
 
   // Internal states getter
   /**
@@ -217,6 +219,14 @@ class Camera {
     }
   }
 
+  /**
+   * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS property applied to the camera element(`.flicking-camera`)
+   * @ko 카메라 엘리먼트(`.flicking-camera`)에 적용된 {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS 속성
+   * @type {string}
+   * @readonly
+   */
+  public get panelOrder() { return this._panelOrder; }
+
   // Options Getter
   /**
    * A value indicating where the {@link Camera#alignPosition alignPosition} should be located at inside the viewport element
@@ -257,6 +267,7 @@ class Camera {
     this._checkTranslateSupport();
 
     this._updateMode();
+    this.updatePanelOrder();
 
     return this;
   }
@@ -556,12 +567,34 @@ class Camera {
     const actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
 
     el.style[this._transform] = flicking.horizontal
-      ? `translate(${flicking.panelOrder === ORDER.RTL ? actualPosition : -actualPosition}px)`
+      ? `translate(${this._panelOrder === ORDER.RTL ? actualPosition : -actualPosition}px)`
       : `translate(0, ${-actualPosition}px)`;
 
     return this;
   }
 
+  /**
+   * Update direction to match the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS property applied to the camera element
+   * @ko 카메라 엘리먼트에 적용된 {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS 속성에 맞게 방향을 업데이트합니다
+   * @return {this}
+   */
+  public updatePanelOrder(): this {
+    const el = this._el;
+    const flicking = getFlickingAttached(this._flicking);
+    if (flicking.horizontal) {
+      const direction = getStyle(el).direction;
+      if (direction !== this._panelOrder) {
+        this._panelOrder = direction === ORDER.RTL ? ORDER.RTL : ORDER.LTR;
+        if (flicking.initialized) {
+          flicking.control.controller.updateDirection();
+          this.applyTransform();
+        }
+      }
+    }
+
+    return this;
+  }
+
   private _resetInternalValues() {
     this._position = 0;
     this._alignPos = 0;

src/control/AxesController.ts

@@ -151,7 +151,7 @@ class AxesController {
       threshold: 1,
       iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold,
       preventDefaultOnDrag: flicking.preventDefaultOnDrag,
-      scale: flicking.horizontal ? [flicking.panelOrder === ORDER.RTL ? 1 : -1, 0] : [0, -1],
+      scale: flicking.horizontal ? [flicking.camera.panelOrder === ORDER.RTL ? 1 : -1, 0] : [0, -1],
       releaseOnScroll: true
     });
 
@@ -404,7 +404,7 @@ class AxesController {
     axes.disconnect(panInput);
     axes.connect(flicking.horizontal ? [AXES.POSITION_KEY, ""] : ["", AXES.POSITION_KEY], panInput);
 
-    panInput.options.scale = flicking.horizontal ? [flicking.panelOrder === ORDER.RTL ? 1 : -1, 0] : [0, -1];
+    panInput.options.scale = flicking.horizontal ? [flicking.camera.panelOrder === ORDER.RTL ? 1 : -1, 0] : [0, -1];
   }
 
   private _resetInternalValues() {

test/manual/js/rtl.js

@@ -3,5 +3,5 @@ const flicking = new Flicking(el);
 
 const setDirection = (dir) => {
   el.style.direction = dir.value;
-  flicking.resize();
+  flicking.camera.updatePanelOrder();
 }

test/unit/Flicking.spec.ts

@@ -96,37 +96,6 @@ describe("Flicking", () => {
         expect(flicking.currentPanel).to.equal(flicking.camera.anchorPoints[0].panel);
       });
     });
-
-    it("should guarantee behavior for panels placed in RTL order", async () => {
-      const flicking = await createFlicking(
-        El.viewport().setDirection("rtl").add(
-          El.camera()
-            .add(El.panel("300px"))
-            .add(El.panel("300px"))
-            .add(El.panel("300px"))
-        )
-      );
-
-      await simulate(flicking.element, { deltaX: 1000 });
-
-      expect(flicking.index).to.equal(2);
-    });
-
-    it("should update direction of panels when resize occurs", async () => {
-      const viewportEl = El.viewport().setDirection("ltr").add(
-        El.camera()
-          .add(El.panel("300px"))
-          .add(El.panel("300px"))
-          .add(El.panel("300px"))
-      );
-      const flicking = await createFlicking(viewportEl);
-
-      viewportEl.setDirection("rtl");
-      await flicking.resize();
-      await simulate(flicking.element, { deltaX: 1000 });
-
-      expect(flicking.index).to.equal(2);
-    });
   });
 
   describe("Properties", () => {

test/unit/camera/Camera.spec.ts

@@ -4,7 +4,7 @@ import { BoundCameraMode, CircularCameraMode, LinearCameraMode } from "~/camera"
 import FlickingError from "~/core/FlickingError";
 import * as ERROR from "~/const/error";
 
-import { createFlicking } from "../helper/test-util";
+import { createFlicking, simulate } from "../helper/test-util";
 import El from "../helper/El";
 
 describe("Camera", () => {
@@ -390,5 +390,39 @@ describe("Camera", () => {
         expect(camera.alignPosition).to.equal(flicking.viewport.width * 0.7);
       });
     });
+
+    describe("updatePanelOrder", () => {
+      it("should guarantee behavior for panels placed in RTL order by default", async () => {
+        const flicking = await createFlicking(
+          El.viewport().setDirection("rtl").add(
+            El.camera()
+              .add(El.panel("300px"))
+              .add(El.panel("300px"))
+              .add(El.panel("300px"))
+          )
+        );
+
+        await simulate(flicking.element, { deltaX: 1000 });
+
+        expect(flicking.index).to.equal(2);
+      });
+
+      it("should update direction of panels", async () => {
+        const viewportEl = El.viewport().setDirection("ltr").add(
+          El.camera()
+            .add(El.panel("300px"))
+            .add(El.panel("300px"))
+            .add(El.panel("300px"))
+        );
+        const flicking = await createFlicking(viewportEl);
+        const camera = flicking.camera;
+
+        viewportEl.setDirection("rtl");
+        camera.updatePanelOrder();
+        await simulate(flicking.element, { deltaX: 1000 });
+
+        expect(flicking.index).to.equal(2);
+      });
+    })
   });
 });