kinetic-slider/dist/cjs/utils/placeholderUtils.cjs.map

A WebGL-powered kinetic slider component using PIXI.js

{"version":3,"file":"placeholderUtils.cjs","sources":["../../../src/utils/placeholderUtils.ts"],"sourcesContent":["import { Sprite, Texture, Graphics, Container, type Renderer, RenderTexture } from 'pixi.js';\nimport { type EnhancedSprite } from '../types';\nimport ResourceManager from '../managers/ResourceManager';\n\n/**\n * Options for creating a placeholder sprite\n */\nexport interface PlaceholderOptions {\n    /** Width of the placeholder */\n    width: number;\n\n    /** Height of the placeholder */\n    height: number;\n\n    /** Background color (hex) */\n    color?: number;\n\n    /** Whether to add a label with the slide index */\n    showIndex?: boolean;\n\n    /** Slide index (for labeling) */\n    index?: number;\n\n    /** Whether to track with resource manager */\n    trackWithResourceManager?: boolean;\n\n    /** Resource manager instance */\n    resourceManager?: ResourceManager | null;\n\n    /** Renderer instance for texture generation */\n    renderer?: Renderer;\n}\n\n/**\n * Container with loading animation capabilities\n */\nexport interface LoadingContainer extends Container {\n    updateLoading: (delta: number) => void;\n}\n\n/**\n * Sprite with rotation animation flag\n */\nexport interface LoadingSprite extends Sprite {\n    _rotate: boolean;\n}\n\n/**\n * Create a lightweight placeholder sprite for slides outside the visibility window\n *\n * @param options - Placeholder options\n * @returns Enhanced sprite with placeholder graphics\n */\nexport function createPlaceholderSprite(options: PlaceholderOptions): EnhancedSprite {\n    const {\n        width,\n        height,\n        color = 0x333333,\n        showIndex = false,\n        index = -1,\n        trackWithResourceManager = true,\n        resourceManager = null,\n        renderer\n    } = options;\n\n    // Create a graphics object for the placeholder\n    const graphics = new Graphics();\n    graphics.beginFill(color, 0.5);\n    graphics.drawRect(0, 0, width, height);\n    graphics.endFill();\n\n    // If showing index, add a label\n    if (showIndex && index >= 0) {\n        // Add a lighter rectangle in the center\n        graphics.beginFill(0xffffff, 0.2);\n        graphics.drawRect(\n            width / 2 - 30,\n            height / 2 - 15,\n            60,\n            30\n        );\n        graphics.endFill();\n\n        // Add index text (not actually visible, just for debugging)\n        graphics.lineStyle(2, 0xffffff, 0.8);\n        graphics.drawRect(\n            width / 2 - 25,\n            height / 2 - 10,\n            50,\n            20\n        );\n    }\n\n    // Generate texture from graphics\n    let texture: Texture;\n\n    if (renderer) {\n        // Use renderer to generate texture (Pixi v8 approach)\n        texture = renderer.generateTexture(graphics);\n    } else {\n        // Create a simple colored texture as fallback\n        // In Pixi v8, we can't directly convert Graphics to Texture without a renderer\n        // So we create a simple colored texture instead\n        const canvas = document.createElement('canvas');\n        canvas.width = width;\n        canvas.height = height;\n        const ctx = canvas.getContext('2d');\n        if (ctx) {\n            ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`;\n            ctx.globalAlpha = 0.5;\n            ctx.fillRect(0, 0, width, height);\n\n            if (showIndex && index >= 0) {\n                ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';\n                ctx.fillRect(width / 2 - 30, height / 2 - 15, 60, 30);\n\n                ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';\n                ctx.lineWidth = 2;\n                ctx.strokeRect(width / 2 - 25, height / 2 - 10, 50, 20);\n            }\n        }\n        texture = Texture.from(canvas);\n    }\n\n    // Create sprite with the texture\n    const sprite = new Sprite(texture) as EnhancedSprite;\n    sprite.anchor.set(0.5);\n\n    // Set base scale for animations\n    sprite.baseScale = 1;\n\n    // Add metadata to identify as placeholder\n    sprite._isPlaceholder = true;\n    sprite._placeholderIndex = index;\n\n    // Track resources if requested\n    if (trackWithResourceManager && resourceManager) {\n        resourceManager.trackTexture(`placeholder-${index}`, texture);\n        resourceManager.trackDisplayObject(sprite);\n    }\n\n    return sprite;\n}\n\n/**\n * Check if a sprite is a placeholder\n *\n * @param sprite - Sprite to check\n * @returns Whether the sprite is a placeholder\n */\nexport function isPlaceholderSprite(sprite: EnhancedSprite): boolean {\n    return !!sprite._isPlaceholder;\n}\n\n/**\n * Create a placeholder texture that uses minimal memory\n *\n * @param width - Width of the texture\n * @param height - Height of the texture\n * @param color - Color of the texture (hex)\n * @param renderer - Renderer instance for texture generation\n * @returns Placeholder texture\n */\nexport function createPlaceholderTexture(\n    width: number = 64,\n    height: number = 64,\n    color: number = 0x333333,\n    renderer?: Renderer\n): Texture {\n    // Create a tiny graphics object\n    const graphics = new Graphics();\n    graphics.beginFill(color, 0.5);\n    graphics.drawRect(0, 0, width, height);\n    graphics.endFill();\n\n    // Generate and return texture\n    if (renderer) {\n        return renderer.generateTexture(graphics);\n    } else {\n        // Create a simple colored texture as fallback\n        const canvas = document.createElement('canvas');\n        canvas.width = width;\n        canvas.height = height;\n        const ctx = canvas.getContext('2d');\n        if (ctx) {\n            ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`;\n            ctx.globalAlpha = 0.5;\n            ctx.fillRect(0, 0, width, height);\n        }\n        return Texture.from(canvas);\n    }\n}\n\n/**\n * Replace a fully loaded sprite with a placeholder\n *\n * @param sprite - Sprite to replace\n * @param options - Placeholder options\n * @returns New placeholder sprite or null if sprite is invalid\n */\nexport function replaceWithPlaceholder(\n    sprite: EnhancedSprite,\n    options: Partial<PlaceholderOptions> = {}\n): EnhancedSprite | null {\n    if (!sprite) return null;\n\n    // Get parent and position\n    const parent = sprite.parent;\n    const position = { x: sprite.x, y: sprite.y };\n    const scale = { x: sprite.scale.x, y: sprite.scale.y };\n    const alpha = sprite.alpha;\n    const visible = sprite.visible;\n\n    // Create placeholder with same dimensions\n    const placeholderOptions: PlaceholderOptions = {\n        width: sprite.width / sprite.scale.x,\n        height: sprite.height / sprite.scale.y,\n        index: sprite._placeholderIndex || options.index || -1,\n        ...options\n    };\n\n    const placeholder = createPlaceholderSprite(placeholderOptions);\n\n    // Copy position and visibility\n    placeholder.x = position.x;\n    placeholder.y = position.y;\n    placeholder.scale.set(scale.x, scale.y);\n    placeholder.alpha = alpha;\n    placeholder.visible = visible;\n\n    // Replace in parent if available\n    if (parent) {\n        const index = parent.getChildIndex(sprite);\n        parent.removeChild(sprite);\n        parent.addChildAt(placeholder, index);\n    }\n\n    // Dispose the original sprite's texture if it's not shared\n    if (sprite.texture && !sprite.texture.baseTexture.resource?.isShared) {\n        sprite.texture.destroy(true);\n    }\n\n    return placeholder;\n}\n\n/**\n * Create a container with a placeholder sprite and optional loading indicator\n *\n * @param options - Placeholder options\n * @param showLoading - Whether to show a loading indicator\n * @returns Container with placeholder content\n */\nexport function createPlaceholderContainer(\n    options: PlaceholderOptions,\n    showLoading: boolean = false\n): LoadingContainer {\n    const container = new Container() as LoadingContainer;\n\n    // Create and add placeholder sprite\n    const placeholder = createPlaceholderSprite(options);\n    container.addChild(placeholder);\n\n    // Add loading indicator if requested\n    if (showLoading) {\n        // Create loading indicator (simple spinning line)\n        const loadingGraphics = new Graphics();\n        loadingGraphics.lineStyle(3, 0xffffff, 0.8);\n        loadingGraphics.drawCircle(0, 0, 15);\n        loadingGraphics.moveTo(0, 0);\n        loadingGraphics.lineTo(0, -15);\n\n        // Generate texture\n        let loadingTexture: Texture;\n        if (options.renderer) {\n            loadingTexture = options.renderer.generateTexture(loadingGraphics);\n        } else {\n            // Create a simple loading indicator texture using canvas\n            const canvas = document.createElement('canvas');\n            canvas.width = 30;\n            canvas.height = 30;\n            const ctx = canvas.getContext('2d');\n            if (ctx) {\n                ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';\n                ctx.lineWidth = 3;\n                ctx.beginPath();\n                ctx.arc(15, 15, 15, 0, Math.PI * 2);\n                ctx.stroke();\n                ctx.beginPath();\n                ctx.moveTo(15, 15);\n                ctx.lineTo(15, 0);\n                ctx.stroke();\n            }\n            loadingTexture = Texture.from(canvas);\n        }\n\n        const loadingSprite = new Sprite(loadingTexture) as LoadingSprite;\n\n        loadingSprite.anchor.set(0.5);\n        loadingSprite.x = 0;\n        loadingSprite.y = 0;\n\n        // Add animation to rotate the loading indicator\n        loadingSprite._rotate = true;\n\n        // Add update function for rotation\n        container.updateLoading = (delta: number) => {\n            if (loadingSprite._rotate) {\n                loadingSprite.rotation += 0.1 * delta;\n            }\n        };\n\n        container.addChild(loadingSprite);\n\n        // Track resources if requested\n        if (options.trackWithResourceManager && options.resourceManager) {\n            options.resourceManager.trackTexture('loading-indicator', loadingTexture);\n            options.resourceManager.trackDisplayObject(loadingSprite);\n        }\n    } else {\n        // Add a no-op update function if no loading indicator\n        container.updateLoading = () => {};\n    }\n\n    return container;\n}"],"names":["Graphics","Texture","Sprite"],"mappings":"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"}