@egjs/flicking

import Panel, { PanelOptions } from "../core/panel/Panel"; import Flicking, { FlickingOptions } from "../Flicking"; import RenderingStrategy from "./strategy/RenderingStrategy"; /** * Options for creating a {@link Renderer} */ export interface RendererOptions { /** An {@link Flicking.align | align} value that will be applied to all panels */ align?: FlickingOptions["align"]; /** An instance of RenderingStrategy(internal module) */ strategy: RenderingStrategy; } /** * Parameters for {@link Renderer.batchInsert} * @public */ export interface BatchInsertParams { /** Index to insert new panels at */ index: number; /** An array of element or framework component with element in it */ elements: any[]; /** Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element */ hasDOMInElements: boolean; } /** * Parameters for {@link Renderer.batchRemove} * @public */ export interface BatchRemoveParams { /** Index of panel to remove */ index: number; /** Number of panels to remove from index */ deleteCount: number; /** Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element */ hasDOMInElements: boolean; } /** * A component that manages {@link Panel} and its elements * @public */ declare abstract class Renderer { protected _flicking: Flicking | null; protected _panels: Panel[]; protected _rendering: boolean; protected _align: NonNullable<RendererOptions["align"]>; protected _strategy: RendererOptions["strategy"]; /** * Array of panels * @readonly * @see Panel */ get panels(): Panel[]; /** * A boolean value indicating whether rendering is in progress * @readonly * @internal */ get rendering(): boolean; /** * Count of panels * @readonly */ get panelCount(): number; /** * @internal */ get strategy(): RendererOptions["strategy"]; /** * A {@link Panel}'s {@link Panel.align | align} value that applied to all panels */ get align(): NonNullable<RendererOptions["align"]>; set align(val: NonNullable<RendererOptions["align"]>); /** * @param options - {@link RendererOptions} */ constructor(options: RendererOptions); /** * Render panel elements inside the camera element * @remarks * This method updates the DOM to reflect the current panel state. * @returns A Promise that resolves when rendering is complete */ abstract render(): Promise<void>; /** * @internal * @privateRemarks * Collects panel elements from the camera element and creates Panel instances. */ protected abstract _collectPanels(): void; /** * @internal * @privateRemarks * Creates a Panel instance from an element with the given options. */ protected abstract _createPanel(el: any, options: Omit<PanelOptions, "elementProvider">): Panel; /** * Initialize Renderer * @remarks * This method is called automatically during {@link Flicking.init}. It collects existing panel elements. * @param flicking - An instance of {@link Flicking} * @returns The current instance for method chaining */ init(flicking: Flicking): this; /** * Destroy Renderer and return to initial state * @remarks * This method clears all panel references and resets the internal state. */ destroy(): void; /** * Return the {@link Panel} at the given index. `null` if it doesn't exist. * @remarks * This is equivalent to accessing `Flicking.panels[index]`. * @param index - Index of the panel to get * @returns Panel at the given index * @see Panel */ getPanel(index: number): Panel | null; forceRenderAllPanels(): Promise<void>; /** * Return Rendered Panels * @returns Rendered Panels */ getRenderedPanels(): Panel[]; /** * Update all panel sizes * @returns The current instance for method chaining */ updatePanelSize(): this; /** * Insert new panels at given index * @remarks * This will increase index of panels after by the number of panels added. * @param items - An array of {@link BatchInsertParams} * @throws {@link DOMManipulationErrors} * @returns An array of inserted panels */ batchInsert(...items: BatchInsertParams[]): Panel[]; /** * @internal * @privateRemarks * Defers update. Camera position & others will be updated after calling updateAfterPanelChange. */ batchInsertDefer(...items: BatchInsertParams[]): Panel[]; /** * Remove the panel at the given index * @remarks * This will decrease index of panels after by the number of panels removed. * @param items - An array of {@link BatchRemoveParams} * @throws {@link DOMManipulationErrors} * @returns An array of removed panels */ batchRemove(...items: BatchRemoveParams[]): Panel[]; /** * @internal * @privateRemarks * Defers update. Camera position & others will be updated after calling updateAfterPanelChange. */ batchRemoveDefer(...items: BatchRemoveParams[]): Panel[]; /** * @internal * @privateRemarks * Updates camera, control, and triggers {@link PanelChangeEvent} after panels are added or removed. */ updateAfterPanelChange(panelsAdded: Panel[], panelsRemoved: Panel[]): void; /** * @internal * @privateRemarks * Checks if panel contents (images/videos) are ready and triggers resize when loaded. */ checkPanelContentsReady(checkingPanels: Panel[]): void; /** * @internal * @privateRemarks * Updates camera range, anchors, and control input after panel changes. */ protected _updateCameraAndControl(): void; /** * @internal * @privateRemarks * Marks only visible panels for rendering when {@link FlickingOptions.renderOnlyVisible | renderOnlyVisible} is enabled. */ protected _showOnlyVisiblePanels(flicking: Flicking): void; /** * @internal * @privateRemarks * Calculates and applies panel sizes when {@link FlickingOptions.panelsPerView | panelsPerView} is enabled. */ protected _updatePanelSizeByGrid(referencePanel: Panel, panels: Panel[]): void; /** * @internal * @privateRemarks * Removes all child elements from the camera element. */ protected _removeAllChildsFromCamera(): void; /** * @internal * @privateRemarks * Inserts panel elements into the camera element at the specified position. */ protected _insertPanelElements(panels: Panel[], nextSibling?: Panel | null): void; /** * @internal * @privateRemarks * Removes panel elements from the camera element. */ protected _removePanelElements(panels: Panel[]): void; /** * @internal * @privateRemarks * Called after rendering to apply the camera transform. */ protected _afterRender(): void; } export default Renderer;