feat: resize에 updatePanelOrder를 대응

naver · Nov 15, 2023 · 583246d · 583246d
1 parent 8151c21
commit 583246d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 25 deletions.
diff --git a/src/Flicking.ts b/src/Flicking.ts
@@ -1508,6 +1508,7 @@ class Flicking extends Component<FlickingEvents> {
     camera.updateRange();
     camera.updateAnchors();
     camera.updateAdaptiveHeight();
+    camera.updatePanelOrder();
     camera.updateOffset();
     await renderer.render();
 

diff --git a/src/camera/Camera.ts b/src/camera/Camera.ts
@@ -541,6 +541,28 @@ class Camera {
     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 flicking = getFlickingAttached(this._flicking);
+
+    if (!flicking.horizontal) return this;
+
+    const el = this._el;
+    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();
+      }
+    }
+
+    return this;
+  }
+
   /**
    * Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again
    * @ko 발생한 {@link Flicking#event:needPanel needPanel} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
@@ -573,28 +595,6 @@ class Camera {
     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 flicking = getFlickingAttached(this._flicking);
-    if (flicking.horizontal) {
-      const el = this._el;
-      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;

diff --git a/test/unit/camera/Camera.spec.ts b/test/unit/camera/Camera.spec.ts
@@ -407,18 +407,17 @@ describe("Camera", () => {
         expect(flicking.index).to.equal(2);
       });
 
-      it("should update direction of panels", async () => {
+      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);
-        const camera = flicking.camera;
 
         viewportEl.setDirection("rtl");
-        camera.updatePanelOrder();
+        await flicking.resize();
         await simulate(flicking.element, { deltaX: 1000 });
 
         expect(flicking.index).to.equal(2);