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

A WebGL-powered kinetic slider component using PIXI.js

'use strict';

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

function createRGBSplitFilter(config) {
  const shaderManager = ShaderResourceManager.ShaderResourceManager.getInstance();
  const options = {};
  if (config.red) options.red = config.red;
  if (config.green) options.green = config.green;
  if (config.blue) options.blue = config.blue;
  if (config.redX !== void 0) options.redX = config.redX;
  if (config.redY !== void 0) options.redY = config.redY;
  if (config.greenX !== void 0) options.greenX = config.greenX;
  if (config.greenY !== void 0) options.greenY = config.greenY;
  if (config.blueX !== void 0) options.blueX = config.blueX;
  if (config.blueY !== void 0) options.blueY = config.blueY;
  const shaderKey = "rgb-split-filter";
  const filter = new pixiFilters.RGBSplitFilter(options);
  try {
    shaderManager.registerFilter(filter, shaderKey);
  } catch (error) {
    console.warn("Error registering RGB split filter with shader manager:", error);
  }
  const updateIntensity = (intensity) => {
    const normalizedIntensity = Math.max(0, Math.min(10, intensity));
    if (config.primaryProperty) {
      switch (config.primaryProperty) {
        case "red":
          if (config.redDirection === "horizontal" || !config.redDirection) {
            filter.red = { x: -normalizedIntensity, y: 0 };
          } else if (config.redDirection === "vertical") {
            filter.red = { x: 0, y: -normalizedIntensity };
          } else if (config.redDirection === "diagonal") {
            filter.red = { x: -normalizedIntensity, y: -normalizedIntensity };
          }
          break;
        case "green":
          if (config.greenDirection === "horizontal") {
            filter.green = { x: normalizedIntensity, y: 0 };
          } else if (config.greenDirection === "vertical" || !config.greenDirection) {
            filter.green = { x: 0, y: normalizedIntensity };
          } else if (config.greenDirection === "diagonal") {
            filter.green = { x: normalizedIntensity, y: normalizedIntensity };
          }
          break;
        case "blue":
          if (config.blueDirection === "horizontal") {
            filter.blue = { x: normalizedIntensity, y: 0 };
          } else if (config.blueDirection === "vertical") {
            filter.blue = { x: 0, y: normalizedIntensity };
          } else if (config.blueDirection === "diagonal" || !config.blueDirection) {
            filter.blue = { x: normalizedIntensity, y: -normalizedIntensity };
          }
          break;
        default:
          applyBalancedSplit(normalizedIntensity);
      }
    } else {
      applyBalancedSplit(normalizedIntensity);
    }
  };
  const applyBalancedSplit = (intensity) => {
    const scaledIntensity = intensity * 1.5;
    filter.red = { x: -scaledIntensity, y: 0 };
    filter.green = { x: 0, y: scaledIntensity };
    filter.blue = { x: scaledIntensity, y: 0 };
  };
  updateIntensity(config.intensity);
  const reset = () => {
    if (config.red) {
      filter.red = config.red;
    } else if (config.redX !== void 0 || config.redY !== void 0) {
      filter.red = {
        x: config.redX !== void 0 ? config.redX : -10,
        // Default redX is -10
        y: config.redY !== void 0 ? config.redY : 0
        // Default redY is 0
      };
    } else {
      filter.red = { x: -10, y: 0 };
    }
    if (config.green) {
      filter.green = config.green;
    } else if (config.greenX !== void 0 || config.greenY !== void 0) {
      filter.green = {
        x: config.greenX !== void 0 ? config.greenX : 0,
        // Default greenX is 0
        y: config.greenY !== void 0 ? config.greenY : 10
        // Default greenY is 10
      };
    } else {
      filter.green = { x: 0, y: 10 };
    }
    if (config.blue) {
      filter.blue = config.blue;
    } else if (config.blueX !== void 0 || config.blueY !== void 0) {
      filter.blue = {
        x: config.blueX !== void 0 ? config.blueX : 0,
        // Default blueX is 0
        y: config.blueY !== void 0 ? config.blueY : 0
        // Default blueY is 0
      };
    } else {
      filter.blue = { x: 0, y: 0 };
    }
  };
  const dispose = () => {
    try {
      shaderManager.releaseFilter(filter, shaderKey);
    } catch (error) {
      console.warn("Error releasing RGB split filter shader:", error);
    }
    filter.destroy();
  };
  return { filter, updateIntensity, reset, dispose };
}

exports.createRGBSplitFilter = createRGBSplitFilter;
//# sourceMappingURL=rgbSplitFilter.cjs.map