@egjs/flicking 4.4.2 → 4.6.0

package/TODO.md

@@ -0,0 +1,3 @@
+## React 18 대응
+- [] updateoffset을 미루기
+  - render가 완료되기 전에 updateOffset이 3번 호출되었음

package/declaration/Flicking.d.ts

@@ -5,7 +5,7 @@ import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
 import { Control } from "./control";
 import { Camera } from "./camera";
 import { Renderer, ExternalRenderer, RendererOptions } from "./renderer";
-import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } from "./const/external";
+import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION, CIRCULAR_FALLBACK } from "./const/external";
 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";
@@ -36,6 +36,7 @@ export interface FlickingOptions {
     defaultIndex: number;
     horizontal: boolean;
     circular: boolean;
+    circularFallback: LiteralUnion<ValueOf<typeof CIRCULAR_FALLBACK>>;
     bound: boolean;
     adaptive: boolean;
     panelsPerView: number;
@@ -59,6 +60,8 @@ export interface FlickingOptions {
     autoInit: boolean;
     autoResize: boolean;
     useResizeObserver: boolean;
+    resizeDebounce: number;
+    maxResizeDebounce: number;
     externalRenderer: ExternalRenderer | null;
     renderExternal: {
         renderer: new (options: RendererOptions) => ExternalRenderer;
@@ -77,6 +80,7 @@ declare class Flicking extends Component<FlickingEvents> {
     private _defaultIndex;
     private _horizontal;
     private _circular;
+    private _circularFallback;
     private _bound;
     private _adaptive;
     private _panelsPerView;
@@ -100,6 +104,8 @@ declare class Flicking extends Component<FlickingEvents> {
     private _autoInit;
     private _autoResize;
     private _useResizeObserver;
+    private _resizeDebounce;
+    private _maxResizeDebounce;
     private _externalRenderer;
     private _renderExternal;
     private _initialized;
@@ -124,6 +130,10 @@ declare class Flicking extends Component<FlickingEvents> {
     get defaultIndex(): FlickingOptions["defaultIndex"];
     get horizontal(): FlickingOptions["horizontal"];
     get circular(): FlickingOptions["circular"];
+    get circularFallback(): LiteralUnion<ValueOf<{
+        readonly LINEAR: "linear";
+        readonly BOUND: "bound";
+    }>, string>;
     get bound(): FlickingOptions["bound"];
     get adaptive(): FlickingOptions["adaptive"];
     get panelsPerView(): FlickingOptions["panelsPerView"];
@@ -147,6 +157,8 @@ declare class Flicking extends Component<FlickingEvents> {
     get autoInit(): boolean;
     get autoResize(): FlickingOptions["autoResize"];
     get useResizeObserver(): FlickingOptions["useResizeObserver"];
+    get resizeDebounce(): number;
+    get maxResizeDebounce(): number;
     get externalRenderer(): ExternalRenderer;
     get renderExternal(): {
         renderer: new (options: RendererOptions) => ExternalRenderer;
@@ -177,7 +189,7 @@ declare class Flicking extends Component<FlickingEvents> {
     set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]);
     set autoResize(val: FlickingOptions["autoResize"]);
     set useResizeObserver(val: FlickingOptions["useResizeObserver"]);
-    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
+    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;
@@ -206,5 +218,6 @@ declare class Flicking extends Component<FlickingEvents> {
     private _createExternalRenderer;
     private _createVanillaRenderer;
     private _moveToInitialPanel;
+    private _initialResize;
 }
 export default Flicking;

package/declaration/camera/Camera.d.ts

@@ -1,32 +1,32 @@
 import Flicking, { FlickingOptions } from "../Flicking";
 import Panel from "../core/panel/Panel";
 import AnchorPoint from "../core/AnchorPoint";
+import { CameraMode } from "./mode";
 export interface CameraOptions {
     align: FlickingOptions["align"];
 }
-declare abstract class Camera {
-    protected _align: FlickingOptions["align"];
-    protected _flicking: Flicking | null;
-    protected _el: HTMLElement;
-    protected _transform: string;
-    protected _position: number;
-    protected _alignPos: number;
-    protected _offset: number;
-    protected _range: {
-        min: number;
-        max: number;
-    };
-    protected _visiblePanels: Panel[];
-    protected _anchors: AnchorPoint[];
-    protected _needPanelTriggered: {
-        prev: boolean;
-        next: boolean;
-    };
+declare class Camera {
+    private _align;
+    private _flicking;
+    private _mode;
+    private _el;
+    private _transform;
+    private _position;
+    private _alignPos;
+    private _offset;
+    private _circularOffset;
+    private _circularEnabled;
+    private _range;
+    private _visiblePanels;
+    private _anchors;
+    private _needPanelTriggered;
     get element(): HTMLElement;
     get children(): HTMLElement[];
     get position(): number;
     get alignPosition(): number;
     get offset(): number;
+    get circularEnabled(): boolean;
+    get mode(): CameraMode;
     get range(): {
         min: number;
         max: number;
@@ -51,9 +51,8 @@ declare abstract class Camera {
     get progress(): number;
     get align(): FlickingOptions["align"];
     set align(val: FlickingOptions["align"]);
-    constructor({ align }?: Partial<CameraOptions>);
-    abstract updateRange(): this;
-    init(flicking: Flicking): this;
+    constructor(flicking: Flicking, { align }?: Partial<CameraOptions>);
+    init(): this;
     destroy(): this;
     lookAt(pos: number): void;
     getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null;
@@ -65,16 +64,19 @@ declare abstract class Camera {
     clampToReachablePosition(position: number): number;
     canReach(panel: Panel): boolean;
     canSee(panel: Panel): boolean;
+    updateRange(): this;
     updateAlignPos(): this;
     updateAnchors(): this;
     updateAdaptiveHeight(): void;
     updateOffset(): this;
     resetNeedPanelHistory(): this;
     applyTransform(): this;
-    protected _resetInternalValues(): void;
-    protected _refreshVisiblePanels(): void;
-    protected _checkNeedPanel(): void;
-    protected _checkReachEnd(prevPos: number, newPos: number): void;
-    protected _checkTranslateSupport: () => void;
+    private _resetInternalValues;
+    private _refreshVisiblePanels;
+    private _checkNeedPanel;
+    private _checkReachEnd;
+    private _checkTranslateSupport;
+    private _updateMode;
+    private _togglePanels;
 }
 export default Camera;

package/declaration/camera/index.d.ts

@@ -1,6 +1,4 @@
 import Camera, { CameraOptions } from "./Camera";
-import LinearCamera from "./LinearCamera";
-import CircularCamera from "./CircularCamera";
-import BoundCamera from "./BoundCamera";
-export { Camera, LinearCamera, CircularCamera, BoundCamera };
+export { Camera };
 export type { CameraOptions };
+export * from "./mode";

package/declaration/camera/mode/BoundCameraMode.d.ts

@@ -0,0 +1,13 @@
+import AnchorPoint from "../../core/AnchorPoint";
+import CameraMode from "./CameraMode";
+declare class BoundCameraMode extends CameraMode {
+    checkAvailability(): boolean;
+    getRange(): {
+        min: number;
+        max: number;
+    };
+    getAnchors(): AnchorPoint[];
+    findAnchorIncludePosition(position: number): AnchorPoint | null;
+    private _findNearestPanel;
+}
+export default BoundCameraMode;

package/declaration/camera/mode/CameraMode.d.ts

@@ -0,0 +1,19 @@
+import Flicking from "../../Flicking";
+import Panel from "../../core/panel/Panel";
+import AnchorPoint from "../../core/AnchorPoint";
+declare abstract class CameraMode {
+    protected _flicking: Flicking;
+    constructor(flicking: Flicking);
+    abstract checkAvailability(): boolean;
+    abstract getRange(): {
+        min: number;
+        max: number;
+    };
+    getAnchors(): AnchorPoint[];
+    findAnchorIncludePosition(position: number): AnchorPoint | null;
+    clampToReachablePosition(position: number): number;
+    getCircularOffset(): number;
+    canReach(panel: Panel): boolean;
+    canSee(panel: Panel): boolean;
+}
+export default CameraMode;

package/declaration/camera/mode/CircularCameraMode.d.ts

@@ -0,0 +1,18 @@
+import Panel from "../../core/panel/Panel";
+import AnchorPoint from "../../core/AnchorPoint";
+import CameraMode from "./CameraMode";
+declare class CircularCameraMode extends CameraMode {
+    checkAvailability(): boolean;
+    getRange(): {
+        min: number;
+        max: number;
+    };
+    getAnchors(): AnchorPoint[];
+    findAnchorIncludePosition(position: number): AnchorPoint | null;
+    getCircularOffset(): number;
+    clampToReachablePosition(position: number): number;
+    canReach(panel: Panel): boolean;
+    canSee(panel: Panel): boolean;
+    private _calcPanelAreaSum;
+}
+export default CircularCameraMode;

package/declaration/camera/mode/LinearCameraMode.d.ts

@@ -0,0 +1,9 @@
+import CameraMode from "./CameraMode";
+declare class LinearCameraMode extends CameraMode {
+    checkAvailability(): boolean;
+    getRange(): {
+        min: number;
+        max: number;
+    };
+}
+export default LinearCameraMode;

package/declaration/camera/mode/index.d.ts

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

package/declaration/const/external.d.ts

@@ -38,3 +38,7 @@ export declare const CLASS: {
     HIDDEN: string;
     DEFAULT_VIRTUAL: string;
 };
+export declare const CIRCULAR_FALLBACK: {
+    readonly LINEAR: "linear";
+    readonly BOUND: "bound";
+};

package/declaration/control/StrictControl.d.ts

@@ -12,6 +12,7 @@ declare class StrictControl extends Control {
     constructor({ count }?: Partial<StrictControlOptions>);
     destroy(): void;
     updateInput(): this;
+    moveToPanel(panel: Panel, options: Parameters<Control["moveToPanel"]>[1]): Promise<void>;
     moveToPosition(position: number, duration: number, axesEvent?: OnRelease): Promise<void>;
     setActive: (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => void;
     private _resetIndexRange;

package/declaration/core/AutoResizer.d.ts

@@ -3,11 +3,14 @@ declare class AutoResizer {
     private _flicking;
     private _enabled;
     private _resizeObserver;
+    private _resizeTimer;
+    private _maxResizeDebounceTimer;
     get enabled(): boolean;
     constructor(flicking: Flicking);
     enable(): this;
     disable(): this;
     private _onResize;
+    private _doScheduledResize;
     private _skipFirstResize;
 }
 export default AutoResizer;

package/declaration/core/ResizeWatcher.d.ts

@@ -0,0 +1,33 @@
+export interface ResizeWatherOptions {
+    resizeDebounce?: number;
+    maxResizeDebounce?: number;
+    useResizeObserver?: boolean;
+    useWindowResize?: boolean;
+    watchDirection?: "width" | "height" | "box" | false;
+    rectBox?: "border-box" | "content-box";
+}
+declare class ResizeWatcher {
+    private _container;
+    private _rect;
+    private _resizeTimer;
+    private _maxResizeDebounceTimer;
+    private _emitter;
+    private _observer;
+    private _options;
+    constructor(container: HTMLElement | string, options?: ResizeWatherOptions);
+    getRect(): {
+        width: number;
+        height: number;
+    };
+    setRect(rect: {
+        width: number;
+        height: number;
+    }): void;
+    resize(): void;
+    listen(callback: () => void): this;
+    destroy(): void;
+    private _init;
+    private _onResize;
+    private _scheduleResize;
+}
+export default ResizeWatcher;

package/declaration/renderer/Renderer.d.ts

@@ -8,9 +8,11 @@ export interface RendererOptions {
 declare abstract class Renderer {
     protected _flicking: Flicking | null;
     protected _panels: Panel[];
+    protected _rendering: boolean;
     protected _align: NonNullable<RendererOptions["align"]>;
     protected _strategy: RendererOptions["strategy"];
     get panels(): Panel[];
+    get rendering(): boolean;
     get panelCount(): number;
     get strategy(): RenderingStrategy;
     get align(): NonNullable<RendererOptions["align"]>;
@@ -29,11 +31,22 @@ declare abstract class Renderer {
         elements: any[];
         hasDOMInElements: boolean;
     }>): Panel[];
+    batchInsertDefer(...items: Array<{
+        index: number;
+        elements: any[];
+        hasDOMInElements: boolean;
+    }>): any[];
     batchRemove(...items: Array<{
         index: number;
         deleteCount: number;
         hasDOMInElements: boolean;
     }>): Panel[];
+    batchRemoveDefer(...items: Array<{
+        index: number;
+        deleteCount: number;
+        hasDOMInElements: boolean;
+    }>): any[];
+    updateAfterPanelChange(panelsAdded: Panel[], panelsRemoved: Panel[]): void;
     checkPanelContentsReady(checkingPanels: Panel[]): void;
     protected _updateCameraAndControl(): void;
     protected _showOnlyVisiblePanels(flicking: Flicking): void;

package/declaration/type/external.d.ts

@@ -20,9 +20,7 @@ export interface Status {
         html?: string;
     }>;
 }
-export declare type MoveTypeOptions<T extends ValueOf<typeof MOVE_TYPE>> = T extends typeof MOVE_TYPE.SNAP ? [T] | [T, Partial<SnapControlOptions>] : T extends typeof MOVE_TYPE.FREE_SCROLL ? [T] | [T, Partial<FreeControlOptions>] : T extends typeof MOVE_TYPE.STRICT ? [T] | [T, Partial<StrictControlOptions>] : [
-    T
-];
+export declare type MoveTypeOptions<T extends ValueOf<typeof MOVE_TYPE>> = T extends typeof MOVE_TYPE.SNAP ? [T] | [T, Partial<SnapControlOptions>] : T extends typeof MOVE_TYPE.FREE_SCROLL ? [T] | [T, Partial<FreeControlOptions>] : T extends typeof MOVE_TYPE.STRICT ? [T] | [T, Partial<StrictControlOptions>] : [T];
 export interface ControlParams {
     range: {
         min: number;

package/{css → dist/css}/flicking-inline.css

@@ -2,37 +2,44 @@
   position: relative;
   overflow: hidden;
 }
+
 .flicking-viewport:not(.vertical) {
   width: 100%;
   height: 100%;
 }
-.flicking-camera {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  z-index: 1;
-  white-space: nowrap;
-  will-change: transform;
-}
 
-.flicking-camera>* {
-  display: inline-block;
-  white-space: normal;
-  vertical-align: top;
-}
 .flicking-viewport.vertical,
 .flicking-viewport.vertical > .flicking-camera {
   display: inline-block;
 }
+
 .flicking-viewport.vertical.middle > .flicking-camera > * {
   vertical-align: middle;
 }
+
 .flicking-viewport.vertical.bottom > .flicking-camera > * {
   vertical-align: bottom;
 }
+
 .flicking-viewport.vertical > .flicking-camera > * {
   display: block;
 }
+
 .flicking-viewport.flicking-hidden > .flicking-camera > * {
   visibility: hidden;
 }
+
+.flicking-camera {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  white-space: nowrap;
+  will-change: transform;
+}
+
+.flicking-camera > * {
+  display: inline-block;
+  white-space: normal;
+  vertical-align: top;
+}

package/dist/css/flicking-inline.min.css

@@ -0,0 +1 @@
+.flicking-viewport{position:relative;overflow:hidden}.flicking-viewport:not(.vertical){width:100%;height:100%}.flicking-viewport.vertical,.flicking-viewport.vertical>.flicking-camera{display:inline-block}.flicking-viewport.vertical.middle>.flicking-camera>*{vertical-align:middle}.flicking-viewport.vertical.bottom>.flicking-camera>*{vertical-align:bottom}.flicking-viewport.vertical>.flicking-camera>*{display:block}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}.flicking-camera{width:100%;height:100%;position:relative;z-index:1;white-space:nowrap;will-change:transform}.flicking-camera>*{display:inline-block;white-space:normal;vertical-align:top}

package/dist/css/flicking.css

@@ -0,0 +1,44 @@
+.flicking-viewport {
+  position: relative;
+  overflow: hidden;
+}
+
+.flicking-viewport.vertical {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.flicking-viewport.vertical > .flicking-camera {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.flicking-viewport.flicking-hidden > .flicking-camera > * {
+  visibility: hidden;
+}
+
+.flicking-camera {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  z-index: 1;
+  will-change: transform;
+}
+
+.flicking-camera > * {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}

package/dist/css/flicking.min.css

@@ -0,0 +1 @@
+.flicking-viewport{position:relative;overflow:hidden}.flicking-viewport.vertical{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flicking-viewport.vertical>.flicking-camera{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}.flicking-camera{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;z-index:1;will-change:transform}.flicking-camera>*{-ms-flex-negative:0;flex-shrink:0}