kinetic-slider/dist/cjs/filters/convolutionFilter.cjs

A WebGL-powered kinetic slider component using PIXI.js

'use strict';

var pixiFilters = require('pixi-filters');
var ShaderResourceManager = require('../managers/ShaderResourceManager.cjs');

function createMatrix(values) {
  return new Float32Array(values);
}
function createConvolutionFilter(config) {
  const shaderManager = ShaderResourceManager.ShaderResourceManager.getInstance();
  const options = {
    width: config.width ?? 200,
    // Default width
    height: config.height ?? 200
    // Default height
  };
  const defaultMatrix = createMatrix([0, 0, 0, 0, 1, 0, 0, 0, 0]);
  if (config.matrix) {
    options.matrix = config.matrix;
  } else {
    options.matrix = defaultMatrix;
  }
  const presetKey = config.preset || "custom";
  const shaderKey = `convolution-filter-${presetKey}-${config.width || 200}-${config.height || 200}`;
  const filter = new pixiFilters.ConvolutionFilter(options);
  try {
    shaderManager.registerFilter(filter, shaderKey);
  } catch (error) {
    console.warn("Error registering convolution filter with shader manager:", error);
  }
  const presetMatrices = {
    normal: createMatrix([0, 0, 0, 0, 1, 0, 0, 0, 0]),
    // Identity (no effect)
    gaussianBlur: createMatrix([
      1 / 16,
      2 / 16,
      1 / 16,
      2 / 16,
      4 / 16,
      2 / 16,
      1 / 16,
      2 / 16,
      1 / 16
    ]),
    // Gaussian blur
    boxBlur: createMatrix([
      1 / 9,
      1 / 9,
      1 / 9,
      1 / 9,
      1 / 9,
      1 / 9,
      1 / 9,
      1 / 9,
      1 / 9
    ]),
    // Box blur
    sharpen: createMatrix([
      0,
      -1,
      0,
      -1,
      5,
      -1,
      0,
      -1,
      0
    ]),
    // Sharpen
    edgeDetection: createMatrix([
      -1,
      -1,
      -1,
      -1,
      8,
      -1,
      -1,
      -1,
      -1
    ]),
    // Edge detection
    emboss: createMatrix([
      -2,
      -1,
      0,
      -1,
      1,
      1,
      0,
      1,
      2
    ]),
    // Emboss
    topSobel: createMatrix([
      1,
      2,
      1,
      0,
      0,
      0,
      -1,
      -2,
      -1
    ]),
    // Top Sobel edge detection
    rightSobel: createMatrix([
      -1,
      0,
      1,
      -2,
      0,
      2,
      -1,
      0,
      1
    ])
    // Right Sobel edge detection
  };
  const applyPreset = (presetName, intensity = 1) => {
    if (presetMatrices[presetName]) {
      if (intensity !== 1) {
        const baseMatrix = new Float32Array(presetMatrices.normal);
        const effectMatrix = presetMatrices[presetName];
        const scaledMatrix = new Float32Array(9);
        for (let i = 0; i < 9; i++) {
          const diff = effectMatrix[i] - baseMatrix[i];
          scaledMatrix[i] = baseMatrix[i] + diff * intensity;
        }
        filter.matrix = scaledMatrix;
      } else {
        filter.matrix = new Float32Array(presetMatrices[presetName]);
      }
    } else {
      console.warn(`Preset "${presetName}" not found, using default matrix`);
      filter.matrix = new Float32Array(defaultMatrix);
    }
  };
  const updateIntensity = (intensity) => {
    const normalizedIntensity = Math.max(0, Math.min(10, intensity));
    const scaledIntensity = normalizedIntensity / 10;
    if (config.preset && presetMatrices[config.preset]) {
      applyPreset(config.preset, scaledIntensity);
    } else if (config.primaryProperty === "matrix" && config.matrix) {
      const baseMatrix = new Float32Array(presetMatrices.normal);
      const scaledMatrix = new Float32Array(9);
      for (let i = 0; i < 9; i++) {
        if (config.matrix) {
          const diff = config.matrix[i] - baseMatrix[i];
          scaledMatrix[i] = baseMatrix[i] + diff * scaledIntensity;
        } else {
          scaledMatrix[i] = baseMatrix[i];
        }
      }
      filter.matrix = scaledMatrix;
    } else {
      applyPreset("sharpen", scaledIntensity);
    }
  };
  updateIntensity(config.intensity);
  const reset = () => {
    filter.matrix = new Float32Array(presetMatrices.normal);
  };
  const dispose = () => {
    try {
      shaderManager.releaseFilter(filter, shaderKey);
    } catch (error) {
      console.warn("Error releasing convolution filter shader:", error);
    }
    filter.destroy();
  };
  return { filter, updateIntensity, reset, dispose };
}

exports.createConvolutionFilter = createConvolutionFilter;
//# sourceMappingURL=convolutionFilter.cjs.map