@egjs/flicking 4.5.0 → 4.6.1

package/TODO.md

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

package/declaration/Flicking.d.ts

@@ -60,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;
@@ -102,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;
@@ -153,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;
@@ -183,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, circularFallback, 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>;
@@ -212,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

@@ -51,8 +51,8 @@ declare class Camera {
     get progress(): number;
     get align(): FlickingOptions["align"];
     set align(val: FlickingOptions["align"]);
-    constructor({ align }?: Partial<CameraOptions>);
-    init(flicking: Flicking): this;
+    constructor(flicking: Flicking, { align }?: Partial<CameraOptions>);
+    init(): this;
     destroy(): this;
     lookAt(pos: number): void;
     getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null;

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/dist/flicking-inline.css

@@ -1,2 +1,45 @@
-.flicking-viewport{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}
-/*# sourceMappingURL=flicking-inline.css.map */
+.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/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/flicking.css

@@ -1,2 +1,44 @@
-.flicking-viewport{position:relative;overflow: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}.flicking-camera>*{-ms-flex-negative:0;flex-shrink:0}.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}
-/*# sourceMappingURL=flicking.css.map */
+.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;
+}