fix: recalculate camera offset

naver · Aug 26, 2024 · f9f3250 · f9f3250
1 parent c83fc5e
commit f9f3250
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
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();
     }
@@ -599,6 +607,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.only("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();