kinetic-slider
Version:
A WebGL-powered kinetic slider component using PIXI.js
72 lines (69 loc) • 2.85 kB
JavaScript
import { Graphics, Texture, Sprite } from 'pixi.js';
/**
* Create a lightweight placeholder sprite for slides outside the visibility window
*
* @param options - Placeholder options
* @returns Enhanced sprite with placeholder graphics
*/
function createPlaceholderSprite(options) {
const { width, height, color = 0x333333, showIndex = false, index = -1, trackWithResourceManager = true, resourceManager = null, renderer } = options;
// Create a graphics object for the placeholder
const graphics = new Graphics();
graphics.beginFill(color, 0.5);
graphics.drawRect(0, 0, width, height);
graphics.endFill();
// If showing index, add a label
if (showIndex && index >= 0) {
// Add a lighter rectangle in the center
graphics.beginFill(0xffffff, 0.2);
graphics.drawRect(width / 2 - 30, height / 2 - 15, 60, 30);
graphics.endFill();
// Add index text (not actually visible, just for debugging)
graphics.lineStyle(2, 0xffffff, 0.8);
graphics.drawRect(width / 2 - 25, height / 2 - 10, 50, 20);
}
// Generate texture from graphics
let texture;
if (renderer) {
// Use renderer to generate texture (Pixi v8 approach)
texture = renderer.generateTexture(graphics);
}
else {
// Create a simple colored texture as fallback
// In Pixi v8, we can't directly convert Graphics to Texture without a renderer
// So we create a simple colored texture instead
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`;
ctx.globalAlpha = 0.5;
ctx.fillRect(0, 0, width, height);
if (showIndex && index >= 0) {
ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
ctx.fillRect(width / 2 - 30, height / 2 - 15, 60, 30);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
ctx.lineWidth = 2;
ctx.strokeRect(width / 2 - 25, height / 2 - 10, 50, 20);
}
}
texture = Texture.from(canvas);
}
// Create sprite with the texture
const sprite = new Sprite(texture);
sprite.anchor.set(0.5);
// Set base scale for animations
sprite.baseScale = 1;
// Add metadata to identify as placeholder
sprite._isPlaceholder = true;
sprite._placeholderIndex = index;
// Track resources if requested
if (trackWithResourceManager && resourceManager) {
resourceManager.trackTexture(`placeholder-${index}`, texture);
resourceManager.trackDisplayObject(sprite);
}
return sprite;
}
export { createPlaceholderSprite };
//# sourceMappingURL=placeholderUtils.js.map