kinetic-slider
Version:
A WebGL-powered kinetic slider component using PIXI.js
322 lines (321 loc) • 9.45 kB
TypeScript
import { Texture, Filter, Container, Application } from 'pixi.js';
import { ShaderResourceManager } from './ShaderResourceManager';
/**
* Types for resource tracking and management
*/
type EventCallback = EventListenerOrEventListenerObject;
type Timer = ReturnType<typeof setTimeout>;
type Animation = gsap.core.Tween | gsap.core.Timeline;
/**
* Resource batch tracking statistics
*/
interface BatchStats {
totalBatches: number;
totalItems: number;
averageBatchSize: number;
largestBatch: number;
}
/**
* Configuration options for the ResourceManager
*/
interface ResourceManagerOptions {
logLevel?: 'error' | 'warn' | 'info' | 'debug';
enableMetrics?: boolean;
autoCleanupInterval?: number | null;
enableShaderPooling?: boolean;
}
/**
* Performance metrics for resource operations
*/
interface PerformanceMetrics {
operations: {
[key: string]: {
count: number;
totalTime: number;
averageTime: number;
};
};
batchStats: {
textures: BatchStats;
filters: BatchStats;
displayObjects: BatchStats;
animations: BatchStats;
};
}
/**
* Centralized Resource Manager for WebGL and Browser Resources
*
* Provides efficient batch tracking and lifecycle management for:
* - PIXI.js textures, filters, and display objects
* - GSAP animations
* - DOM event listeners
* - Timers and intervals
*/
declare class ResourceManager {
private textures;
private filters;
private displayObjects;
private pixiApps;
private animations;
private listeners;
private timeouts;
private intervals;
private disposed;
private unmounting;
private readonly componentId;
private readonly options;
private metrics;
private autoCleanupTimer;
private shaderManager;
/**
* Creates a new ResourceManager instance
*
* @param componentId - Unique identifier for this component instance
* @param options - Configuration options
*/
constructor(componentId: string, options?: ResourceManagerOptions);
/**
* Creates an empty batch statistics object
*/
private createEmptyBatchStats;
/**
* Set up automatic cleanup interval
*/
private setupAutoCleanup;
/**
* Perform automatic cleanup of unused resources
*/
private performAutoCleanup;
/**
* Log a message with the appropriate level
*
* @param level - Log level
* @param message - Log message
* @param data - Optional data to log
*/
private log;
/**
* Records performance metric for an operation
*
* @param name - Operation name
* @param startTime - Start time of the operation
*/
private recordMetric;
/**
* Update batch statistics
*
* @param type - Resource type
* @param batchSize - Size of the batch
*/
private updateBatchStats;
/**
* Mark component as unmounting to prevent new resource allocations
*/
markUnmounting(): void;
/**
* Check if the resource manager is active and can allocate resources
*/
isActive(): boolean;
/**
* Safely disable a filter to ensure it has no visible effect
*
* @param filter - Filter to disable
*/
disableFilter(filter: Filter): void;
/**
* Disable all filters on a display object
*
* @param displayObject - The display object whose filters should be disabled
*/
disableFiltersOnObject(displayObject: Container): void;
/**
* Initialize a filter in a disabled state
* This ensures the filter has no effect when first created
*
* @param filter - Filter to initialize
* @returns The initialized filter
*/
initializeFilterDisabled<T extends Filter>(filter: T): T;
/**
* Batch initialize and disable filters
*
* @param filters - Array of filters to initialize disabled
* @returns The array of initialized filters
*/
initializeFilterBatchDisabled<T extends Filter[]>(filters: T): T;
/**
* Track a filter
*
* @param filter - Filter to track
* @returns The filter for chaining
*/
trackFilter(filter: Filter): Filter;
/**
* Dispose of a single filter
*/
private disposeFilter;
/**
* Get shader manager instance
*
* @returns The shader manager instance or null if not enabled
*/
getShaderManager(): ShaderResourceManager | null;
/**
* Track multiple textures at once
*
* @param textures - Map of URL to texture
* @returns The same map for chaining
*/
trackTextureBatch(textures: Map<string, Texture>): Map<string, Texture>;
/**
* Track multiple filters at once
*
* @param filters - Array of filters to track
* @returns The same array for chaining
*/
trackFilterBatch(filters: Filter[]): Filter[];
/**
* Track multiple display objects at once
*
* @param objects - Array of display objects to track
* @returns The same array for chaining
*/
trackDisplayObjectBatch(objects: Container[]): Container[];
/**
* Track multiple animations at once
*
* @param animations - Array of animations to track
* @returns The same array for chaining
*/
trackAnimationBatch(animations: Animation[]): Animation[];
/**
* Track event listeners in batch
*
* @param element - DOM element
* @param listeners - Map of event types to callbacks
*/
addEventListenerBatch(element: EventTarget, listeners: Map<string, EventCallback[]>): void;
/**
* Track a GSAP animation
*
* @param animation - Animation to track
* @returns The animation for chaining
*/
trackAnimation<T extends Animation>(animation: T): T;
/**
* Track a texture
*
* @param url - Texture URL
* @param texture - Texture to track
* @returns The texture for chaining
*/
trackTexture(url: string, texture: Texture): Texture;
/**
* Release a texture, destroying it when no longer referenced
*/
releaseTexture(url: string): void;
/**
* Track a PIXI Application
*
* @param app - Application to track
* @returns The application for chaining
*/
trackPixiApp(app: Application): Application;
/**
* Dispose of a PIXI Application
*/
private disposePixiApp;
/**
* Track a display object
*
* @param displayObject - Display object to track
* @returns The display object for chaining
*/
trackDisplayObject<T extends Container>(displayObject: T): T;
/**
* Dispose of a display object
*/
private disposeDisplayObject;
/**
* Add an event listener with tracking
*/
addEventListener(element: EventTarget, eventType: string, callback: EventCallback): void;
/**
* Remove all event listeners
*/
private removeAllEventListeners;
/**
* Create a setTimeout with tracking
*/
setTimeout(callback: () => void, delay: number): Timer;
/**
* Create a setInterval with tracking
*/
setInterval(callback: () => void, delay: number): Timer;
/**
* Clear a tracked timeout
*/
clearTimeout(id: Timer): void;
/**
* Clear a tracked interval
*/
clearInterval(id: Timer): void;
/**
* Clear all tracked timeouts
*/
private clearAllTimeouts;
/**
* Clear all tracked intervals
*/
private clearAllIntervals;
/**
* Get current resource statistics
*
* @returns An object containing counts of various tracked resources
*/
getStats(): Record<string, number | BatchStats | PerformanceMetrics | any>;
/**
* Clear all tracked resources
*/
dispose(): void;
/**
* Clears any pending updates in the queue
*/
clearPendingUpdates(): void;
/**
* Monitor filter performance and adjust quality if necessary
* Part of the shader optimization implementation
*
* @param filter - Filter to monitor
* @param performanceThreshold - Performance threshold in ms
* @param qualityReduceFactor - How much to reduce quality (0-1)
* @returns Whether the filter was optimized
*/
monitorFilterPerformance(filter: Filter, performanceThreshold?: number, qualityReduceFactor?: number): boolean;
/**
* Optimize a filter's quality settings to improve performance
*
* @param filter - Filter to optimize
* @param factor - Factor to reduce quality by (0-1)
* @returns Whether optimization was applied
*/
optimizeFilterQuality(filter: Filter, factor?: number): boolean;
/**
* Run diagnostics on all active filters
* Provides insights into filter performance
*
* @returns Diagnostic information about filters
*/
runFilterDiagnostics(): Record<string, any>;
/**
* Automatically optimize all filters based on FPS
* This method should be called periodically during animation
*
* @param currentFPS - Current FPS of the application
* @param targetFPS - Target FPS to maintain
* @param optimizationStep - How aggressive to optimize (0-1)
* @returns Number of filters optimized
*/
autoOptimizeFilters(currentFPS: number, targetFPS?: number, optimizationStep?: number): number;
}
export default ResourceManager;