@egjs/flicking 4.4.1 → 4.5.1

package/src/camera/{BoundCamera.ts → mode/BoundCameraMode.ts}

@@ -2,40 +2,46 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import Panel from "../core/panel/Panel";
-import AnchorPoint from "../core/AnchorPoint";
-import { getFlickingAttached, parseAlign } from "../utils";
+import AnchorPoint from "../../core/AnchorPoint";
+import Panel from "../../core/panel/Panel";
+import { parseAlign } from "../../utils";
 
-import Camera from "./Camera";
+import CameraMode from "./CameraMode";
 
-/**
- * A {@link Camera} that set range not to go out of the first/last panel, so it won't show empty spaces before/after the first/last panel
- * @ko 첫번째와 마지막 패널 밖으로 넘어가지 못하도록 범위를 설정하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 종류의 {@link Camera}
- */
-class BoundCamera extends Camera {
-  /**
-   * Update {@link Camera#range range} of Camera
-   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-   * @chainable
-   * @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>
-   * @return {this}
-   */
-  public updateRange() {
-    const flicking = getFlickingAttached(this._flicking);
+class BoundCameraMode extends CameraMode {
+  public checkAvailability(): boolean {
+    const flicking = this._flicking;
+    const renderer = flicking.renderer;
+
+    const firstPanel = renderer.getPanel(0);
+    const lastPanel = renderer.getPanel(renderer.panelCount - 1);
+
+    if (!firstPanel || !lastPanel) {
+      return false;
+    }
+
+    const viewportSize = flicking.camera.size;
+    const firstPanelPrev = firstPanel.range.min;
+    const lastPanelNext = lastPanel.range.max;
+    const panelAreaSize = lastPanelNext - firstPanelPrev;
+    const isBiggerThanViewport = viewportSize < panelAreaSize;
+
+    return isBiggerThanViewport;
+  }
+
+  public getRange(): { min: number; max: number } {
+    const flicking = this._flicking;
     const renderer = flicking.renderer;
-    const alignPos = this._alignPos;
+    const alignPos = flicking.camera.alignPosition;
 
     const firstPanel = renderer.getPanel(0);
     const lastPanel = renderer.getPanel(renderer.panelCount - 1);
 
     if (!firstPanel || !lastPanel) {
-      this._range = { min: 0, max: 0 };
-      return this;
+      return { min: 0, max: 0 };
     }
 
-    const viewportSize = this.size;
+    const viewportSize = flicking.camera.size;
     const firstPanelPrev = firstPanel.range.min;
     const lastPanelNext = lastPanel.range.max;
     const panelAreaSize = lastPanelNext - firstPanelPrev;
@@ -45,32 +51,30 @@ class BoundCamera extends Camera {
     const lastPos = lastPanelNext - viewportSize + alignPos;
 
     if (isBiggerThanViewport) {
-      this._range = { min: firstPos, max: lastPos };
+      return { min: firstPos, max: lastPos };
     } else {
-      const align = this._align;
+      const align = flicking.camera.align;
       const alignVal = typeof align === "object"
         ? (align as { camera: string | number }).camera
         : align;
 
       const pos = firstPos + parseAlign(alignVal, lastPos - firstPos);
 
-      this._range = { min: pos, max: pos };
+      return { min: pos, max: pos };
     }
-
-    return this;
   }
 
-  public updateAnchors(): this {
-    const flicking = getFlickingAttached(this._flicking);
+  public getAnchors(): AnchorPoint[] {
+    const flicking = this._flicking;
+    const camera = flicking.camera;
     const panels = flicking.renderer.panels;
 
     if (panels.length <= 0) {
-      this._anchors = [];
-      return this;
+      return [];
     }
 
-    const range = this._range;
-    const reachablePanels = panels.filter(panel => this.canReach(panel));
+    const range = flicking.camera.range;
+    const reachablePanels = panels.filter(panel => camera.canReach(panel));
 
     if (reachablePanels.length > 0) {
       const shouldPrependBoundAnchor = reachablePanels[0].position !== range.min;
@@ -99,7 +103,7 @@ class BoundCamera extends Camera {
         }));
       }
 
-      this._anchors = newAnchors;
+      return newAnchors;
     } else if (range.min !== range.max) {
       // There're more than 2 panels
       const nearestPanelAtMin = this._findNearestPanel(range.min, panels);
@@ -108,7 +112,7 @@ class BoundCamera extends Camera {
         : nearestPanelAtMin;
       const panelAtMax = panelAtMin.next()!;
 
-      this._anchors = [
+      return [
         new AnchorPoint({
           index: 0,
           position: range.min,
@@ -121,19 +125,18 @@ class BoundCamera extends Camera {
         })
       ];
     } else {
-      this._anchors = [new AnchorPoint({
+      return [new AnchorPoint({
         index: 0,
         position: range.min,
         panel: this._findNearestPanel(range.min, panels)
       })];
     }
-
-    return this;
   }
 
   public findAnchorIncludePosition(position: number): AnchorPoint | null {
-    const range = this._range;
-    const anchors = this._anchors;
+    const camera = this._flicking.camera;
+    const range = camera.range;
+    const anchors = camera.anchorPoints;
 
     if (anchors.length <= 0) return null;
 
@@ -165,4 +168,4 @@ class BoundCamera extends Camera {
   }
 }
 
-export default BoundCamera;
+export default BoundCameraMode;

package/src/camera/mode/CameraMode.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../../Flicking";
+import Panel from "../../core/panel/Panel";
+import AnchorPoint from "../../core/AnchorPoint";
+import { clamp } from "../../utils";
+
+/**
+ * A mode of camera
+ */
+abstract class CameraMode {
+  protected _flicking: Flicking;
+
+  /** */
+  public constructor(flicking: Flicking) {
+    this._flicking = flicking;
+  }
+
+  public abstract checkAvailability(): boolean;
+  public abstract getRange(): { min: number; max: number };
+
+  public getAnchors(): AnchorPoint[] {
+    const panels = this._flicking.renderer.panels;
+
+    return panels.map((panel, index) => new AnchorPoint({
+      index,
+      position: panel.position,
+      panel
+    }));
+  }
+
+  public findAnchorIncludePosition(position: number): AnchorPoint | null {
+    const anchors = this._flicking.camera.anchorPoints;
+    const anchorsIncludingPosition = anchors.filter(anchor => anchor.panel.includePosition(position, true));
+
+    return anchorsIncludingPosition.reduce((nearest: AnchorPoint | null, anchor) => {
+      if (!nearest) return anchor;
+
+      return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)
+        ? nearest
+        : anchor;
+    }, null);
+  }
+
+  public clampToReachablePosition(position: number): number {
+    const camera = this._flicking.camera;
+    const range = camera.range;
+
+    return clamp(position, range.min, range.max);
+  }
+
+  public getCircularOffset(): number {
+    return 0;
+  }
+
+  public canReach(panel: Panel): boolean {
+    const camera = this._flicking.camera;
+    const range = camera.range;
+
+    if (panel.removed) return false;
+
+    const panelPos = panel.position;
+
+    return panelPos >= range.min && panelPos <= range.max;
+  }
+
+  public canSee(panel: Panel): boolean {
+    const camera = this._flicking.camera;
+    const visibleRange = camera.visibleRange;
+    // Should not include margin, as we don't declare what the margin is visible as what the panel is visible.
+    return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);
+  }
+}
+
+export default CameraMode;

package/src/camera/mode/CircularCameraMode.ts

@@ -0,0 +1,171 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Panel from "../../core/panel/Panel";
+import AnchorPoint from "../../core/AnchorPoint";
+import { DIRECTION } from "../../const/external";
+import { circulatePosition } from "../../utils";
+
+import CameraMode from "./CameraMode";
+
+/**
+ * A {@link Camera} mode that connects the last panel and the first panel, enabling continuous loop
+ * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera} 모드
+ */
+class CircularCameraMode extends CameraMode {
+  public checkAvailability(): boolean {
+    const flicking = this._flicking;
+    const renderer = flicking.renderer;
+    const panels = renderer.panels;
+
+    if (panels.length <= 0) {
+      return false;
+    }
+
+    const firstPanel = panels[0];
+    const lastPanel = panels[panels.length - 1];
+    const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
+    const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
+
+    const visibleSize = flicking.camera.size;
+    const panelSizeSum = lastPanelNext - firstPanelPrev;
+
+    const canSetCircularMode = panels
+      .every(panel => panelSizeSum - panel.size >= visibleSize);
+
+    return canSetCircularMode;
+  }
+
+  public getRange(): { min: number; max: number } {
+    const flicking = this._flicking;
+    const panels = flicking.renderer.panels;
+
+    if (panels.length <= 0) {
+      return { min: 0, max: 0 };
+    }
+
+    const firstPanel = panels[0];
+    const lastPanel = panels[panels.length - 1];
+    const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
+    const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
+
+    return { min: firstPanelPrev, max: lastPanelNext };
+  }
+
+  public getAnchors(): AnchorPoint[] {
+    const flicking = this._flicking;
+    const panels = flicking.renderer.panels;
+
+    return panels.map((panel, index) => new AnchorPoint({
+      index,
+      position: panel.position,
+      panel
+    }));
+  }
+
+  public findAnchorIncludePosition(position: number): AnchorPoint | null {
+    const camera = this._flicking.camera;
+    const range = camera.range;
+    const anchors = camera.anchorPoints;
+    const rangeDiff = camera.rangeDiff;
+    const anchorCount = anchors.length;
+    const positionInRange = circulatePosition(position, range.min, range.max);
+
+    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);
+    }
+
+    if (!anchorInRange) return null;
+
+    if (position < range.min) {
+      const loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
+
+      return new AnchorPoint({
+        index: anchorInRange.index,
+        position: anchorInRange.position + rangeDiff * loopCount,
+        panel: anchorInRange.panel
+      });
+    } else if (position > range.max) {
+      const loopCount = Math.floor((position - range.max) / rangeDiff) + 1;
+
+      return new AnchorPoint({
+        index: anchorInRange.index,
+        position: anchorInRange.position + rangeDiff * loopCount,
+        panel: anchorInRange.panel
+      });
+    }
+
+    return anchorInRange;
+  }
+
+  public getCircularOffset(): number {
+    const flicking = this._flicking;
+    const camera = flicking.camera;
+
+    if (!camera.circularEnabled) return 0;
+
+    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);
+
+    return this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
+  }
+
+  public clampToReachablePosition(position: number): number {
+    // Basically all position is reachable for circular camera
+    return position;
+  }
+
+  public canReach(panel: Panel): boolean {
+    if (panel.removed) return false;
+
+    // Always reachable on circular mode
+    return true;
+  }
+
+  public canSee(panel: Panel): boolean {
+    const camera = this._flicking.camera;
+    const range = camera.range;
+    const rangeDiff = camera.rangeDiff;
+    const visibleRange = camera.visibleRange;
+    const visibleInCurrentRange = super.canSee(panel);
+
+    // Check looped visible area for circular case
+    if (visibleRange.min < range.min) {
+      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
+    } else if (visibleRange.max > range.max) {
+      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
+    }
+
+    return visibleInCurrentRange;
+  }
+
+  private _calcPanelAreaSum(panels: Panel[]) {
+    return panels.reduce((sum: number, panel: Panel) => sum + panel.sizeIncludingMargin, 0);
+  }
+}
+
+export default CircularCameraMode;

package/src/camera/mode/LinearCameraMode.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import CameraMode from "./CameraMode";
+
+class LinearCameraMode extends CameraMode {
+  public checkAvailability(): boolean {
+    // It's always available
+    return true;
+  }
+
+  public getRange(): { min: number; max: number } {
+    const renderer = this._flicking.renderer;
+
+    const firstPanel = renderer.getPanel(0);
+    const lastPanel = renderer.getPanel(renderer.panelCount - 1);
+
+    return { min: firstPanel?.position ?? 0, max: lastPanel?.position ?? 0 };
+  }
+}
+
+export default LinearCameraMode;

package/src/camera/mode/index.ts

@@ -0,0 +1,14 @@
+import CameraMode from "./CameraMode";
+import LinearCameraMode from "./LinearCameraMode";
+import CircularCameraMode from "./CircularCameraMode";
+import BoundCameraMode from "./BoundCameraMode";
+
+export {
+  LinearCameraMode,
+  CircularCameraMode,
+  BoundCameraMode
+};
+
+export type {
+  CameraMode
+};

package/src/cfc/sync.ts

@@ -6,6 +6,7 @@ import Renderer from "../renderer/Renderer";
 export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]) => {
   const renderer = flicking.renderer;
   const panels = renderer.panels;
+  const prevList = [...diffResult.prevList];
 
   if (diffResult.removed.length > 0) {
     let endIdx = -1;
@@ -24,6 +25,8 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
       } else {
         prevIdx = removedIdx;
       }
+
+      prevList.splice(removedIdx, 1);
     });
 
     batchRemove(renderer, prevIdx, endIdx + 1);
@@ -56,13 +59,15 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
     let startIdx = -1;
     let prevIdx = -1;
 
+    const addedElements = rendered.slice(prevList.length);
+
     diffResult.added.forEach((addedIdx, idx) => {
       if (startIdx < 0) {
         startIdx = idx;
       }
 
       if (prevIdx >= 0 && addedIdx !== prevIdx + 1) {
-        batchInsert(renderer, diffResult, rendered, startIdx, idx + 1);
+        batchInsert(renderer, diffResult, addedElements, startIdx, idx + 1);
 
         startIdx = -1;
         prevIdx = -1;
@@ -72,14 +77,14 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
     });
 
     if (startIdx >= 0) {
-      batchInsert(renderer, diffResult, rendered, startIdx);
+      batchInsert(renderer, diffResult, addedElements, startIdx);
     }
   }
 };
 
-const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, rendered: any[], startIdx: number, endIdx?: number) => {
+const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, addedElements: any[], startIdx: number, endIdx?: number) => {
   renderer.batchInsert(
-    ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [rendered[elIdx + diffResult.prevList.length]], hasDOMInElements: false }))
+    ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [addedElements[elIdx]], hasDOMInElements: false }))
   );
 };
 

package/src/cfc/withFlickingMethods.ts

@@ -34,7 +34,8 @@ const withFlickingMethods = (prototype: any, flickingName: string) => {
           const getterDescriptor: { get?: () => any; set?: (val: any) => void } = {};
           if (descriptor.get) {
             getterDescriptor.get = function() {
-              return descriptor.get?.call(this[flickingName]);
+              const flicking = this[flickingName];
+              return flicking && descriptor.get?.call(flicking);
             };
           }
           if (descriptor.set) {

package/src/const/external.ts

@@ -98,3 +98,15 @@ export const CLASS = {
   HIDDEN: "flicking-hidden",
   DEFAULT_VIRTUAL: "flicking-panel"
 };
+
+/**
+ * An object with all possible {@link Flicking#circularFallback circularFallback}s
+ * @ko Flicking의 {@link Flicking#circularFallback circularFallback}에 설정 가능한 값들을 담고 있는 객체
+ * @type {object}
+ * @property {string} LINEAR "linear"
+ * @property {string} BOUND "bound"
+ */
+export const CIRCULAR_FALLBACK = {
+  LINEAR: "linear",
+  BOUND: "bound"
+} as const;

package/src/control/StrictControl.ts

@@ -141,6 +141,16 @@ class StrictControl extends Control {
     return this;
   }
 
+  public async moveToPanel(panel: Panel, options: Parameters<Control["moveToPanel"]>[1]): Promise<void> {
+    const flicking = getFlickingAttached(this._flicking);
+    const camera = flicking.camera;
+    const controller = this._controller;
+
+    controller.update(camera.controlParams);
+
+    return super.moveToPanel(panel, options);
+  }
+
   /**
    * Move {@link Camera} to the given position
    * @ko {@link Camera}를 주어진 좌표로 이동합니다

package/declaration/camera/BoundCamera.d.ts

@@ -1,9 +0,0 @@
-import AnchorPoint from "../core/AnchorPoint";
-import Camera from "./Camera";
-declare class BoundCamera extends Camera {
-    updateRange(): this;
-    updateAnchors(): this;
-    findAnchorIncludePosition(position: number): AnchorPoint | null;
-    private _findNearestPanel;
-}
-export default BoundCamera;

package/declaration/camera/CircularCamera.d.ts

@@ -1,37 +0,0 @@
-import Panel from "../core/panel/Panel";
-import AnchorPoint from "../core/AnchorPoint";
-import { DIRECTION } from "../const/external";
-import { ValueOf } from "../type/internal";
-import Camera from "./Camera";
-export interface TogglePoint {
-    panel: Panel;
-    direction: ValueOf<typeof DIRECTION>;
-    toggled: boolean;
-}
-declare class CircularCamera extends Camera {
-    private _circularOffset;
-    private _circularEnabled;
-    get offset(): number;
-    get controlParams(): {
-        range: {
-            min: number;
-            max: number;
-        };
-        position: number;
-        circular: boolean;
-    };
-    getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null;
-    getNextAnchor(anchor: AnchorPoint): AnchorPoint | null;
-    findAnchorIncludePosition(position: number): AnchorPoint | null;
-    clampToReachablePosition(position: number): number;
-    canReach(panel: Panel): boolean;
-    canSee(panel: Panel): boolean;
-    updateRange(): this;
-    updateOffset(): this;
-    lookAt(pos: number): void;
-    applyTransform(): this;
-    protected _resetInternalValues(): void;
-    private _calcPanelAreaSum;
-    private _updateCircularOffset;
-}
-export default CircularCamera;

package/declaration/camera/LinearCamera.d.ts

@@ -1,5 +0,0 @@
-import Camera from "./Camera";
-declare class LinearCamera extends Camera {
-    updateRange(): this;
-}
-export default LinearCamera;