kinetic-slider/dist/esm/utils/placeholderUtils.js

A WebGL-powered kinetic slider component using PIXI.js

import { Graphics, Texture, Sprite } from 'pixi.js';

function createPlaceholderSprite(options) {
  const {
    width,
    height,
    color = 3355443,
    showIndex = false,
    index = -1,
    trackWithResourceManager = true,
    resourceManager = null,
    renderer
  } = options;
  const graphics = new Graphics();
  graphics.beginFill(color, 0.5);
  graphics.drawRect(0, 0, width, height);
  graphics.endFill();
  if (showIndex && index >= 0) {
    graphics.beginFill(16777215, 0.2);
    graphics.drawRect(
      width / 2 - 30,
      height / 2 - 15,
      60,
      30
    );
    graphics.endFill();
    graphics.lineStyle(2, 16777215, 0.8);
    graphics.drawRect(
      width / 2 - 25,
      height / 2 - 10,
      50,
      20
    );
  }
  let texture;
  if (renderer) {
    texture = renderer.generateTexture(graphics);
  } else {
    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);
  }
  const sprite = new Sprite(texture);
  sprite.anchor.set(0.5);
  sprite.baseScale = 1;
  sprite._isPlaceholder = true;
  sprite._placeholderIndex = index;
  if (trackWithResourceManager && resourceManager) {
    resourceManager.trackTexture(`placeholder-${index}`, texture);
    resourceManager.trackDisplayObject(sprite);
  }
  return sprite;
}

export { createPlaceholderSprite };
//# sourceMappingURL=placeholderUtils.js.map