fix: recalculate camera offset (#886)

* fix: recalculate camera offset * test: fix remove only * fix: fix adaptive height * fix: fix react firstPanelSize attr
naver · Sep 5, 2024 · 3b18491 · 3b18491
1 parent c83fc5e
commit 3b18491
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 4 deletions.
diff --git a/packages/react-flicking/src/react-flicking/consts.ts b/packages/react-flicking/src/react-flicking/consts.ts
@@ -28,6 +28,7 @@ export const DEFAULT_PROPS: FlickingProps = {
   viewportTag: "div",
   cameraTag: "div",
   cameraClass: "",
+  firstPanelSize: "",
   renderOnSameKey: false,
   plugins: [],
   useFindDOMNode: false,

diff --git a/src/camera/Camera.ts b/src/camera/Camera.ts
@@ -32,6 +32,7 @@ class Camera {
   private _mode: CameraMode;
   private _el: HTMLElement;
   private _transform: string;
+  private _lookedOffset = 0;
   private _position: number;
   private _alignPos: number;
   private _offset: number;
@@ -292,6 +293,8 @@ class Camera {
    * @return {this}
    */
   public lookAt(pos: number): void {
+    const prevOffset = this._offset;
+    const isChangedOffset = this._lookedOffset !== prevOffset;
     const flicking = getFlickingAttached(this._flicking);
     const prevPos = this._position;
 
@@ -304,7 +307,12 @@ class Camera {
     if (toggled) {
       void flicking.renderer.render().then(() => {
         this.updateOffset();
+        this._lookedOffset = this._offset;
       });
+    } else if (isChangedOffset) {
+      // sync offset for renderOnlyVisible on resize
+      this.updateOffset();
+      this._lookedOffset = this._offset;
     } else {
       this.applyTransform();
     }
@@ -502,8 +510,8 @@ class Camera {
   }
 
   /**
-   * Update Viewport's height to active panel's height
-   * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
+   * Update Viewport's height to visible panel's max height
+   * @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
    * @throws {FlickingError}
    * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
    * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
@@ -513,11 +521,22 @@ class Camera {
   public updateAdaptiveHeight() {
     const flicking = getFlickingAttached(this._flicking);
     const activePanel = flicking.control.activePanel;
+    const visiblePanels = flicking.visiblePanels;
+
+    const selectedPanels = [...visiblePanels];
+
+    if (activePanel) {
+      selectedPanels.push(activePanel);
+    }
+
+    if (!flicking.horizontal || !flicking.adaptive || !selectedPanels.length) return;
+
+
+    const maxHeight = Math.max(...selectedPanels.map(panel => panel.height));
 
-    if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
 
     flicking.viewport.setSize({
-      height: activePanel.height
+      height: maxHeight
     });
   }
 
@@ -599,6 +618,7 @@ class Camera {
 
   private _resetInternalValues() {
     this._position = 0;
+    this._lookedOffset = 0;
     this._alignPos = 0;
     this._offset = 0;
     this._circularOffset = 0;

diff --git a/test/unit/Flicking.spec.ts b/test/unit/Flicking.spec.ts
@@ -1207,6 +1207,7 @@ describe("Flicking", () => {
       expect(flicking.panels.map(panel => panel.rendered))
         .to.deep.equal([true, true, false, false, true]);
     });
+
   });
 
   describe("Events", () => {
@@ -1359,6 +1360,40 @@ describe("Flicking", () => {
         expect(event.height).to.equal(viewportSize.height);
       });
 
+      it("should have correct offset on extream resize", async () => {
+        const viewportSize = {
+          width: 400,
+          height: 800
+        };
+
+        const flicking = await createFlicking(
+          El.viewport().setWidth(viewportSize.width).setHeight(viewportSize.height).add(
+            El.camera().add(
+              El.panel().setWidth("100%").setHeight(800),
+              El.panel().setWidth("100%").setHeight(800),
+              El.panel().setWidth("100%").setHeight(800),
+              El.panel().setWidth("100%").setHeight(800),
+              El.panel().setWidth("100%").setHeight(800)
+            )
+          ),
+          { renderOnlyVisible: true, defaultIndex: 3, horizontal: false }
+        );
+
+        const prevOffset = flicking.camera.offset;
+
+        // resize 1/4 height
+        flicking.panels.forEach(panel => {
+          panel.element.style.height = "200px";
+        });
+        flicking.element.style.height = "200px";
+
+        await flicking.resize();
+
+        // 800 * 3 2400 => 200 * 3 600
+        expect(prevOffset).to.be.equals(2400);
+        expect(flicking.camera.offset).to.be.equals(600);
+      });
+
       it("should have size 0 on initialization", async () => {
         const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { autoInit: false, preventEventsBeforeInit: false });
         const resizeSpy = sinon.spy();