HSL.ts

import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';

Factory.addGetterSetter(
  Node,
  'hue',
  0,
  getNumberValidator(),
  Factory.afterSetFilter
);
/**
 * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
 * @name Konva.Node#hue
 * @method
 * @param {Number} hue value between 0 and 359
 * @returns {Number}
 */

Factory.addGetterSetter(
  Node,
  'saturation',
  0,
  getNumberValidator(),
  Factory.afterSetFilter
);
/**
 * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
 * @name Konva.Node#saturation
 * @method
 * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
 * @returns {Number}
 */

Factory.addGetterSetter(
  Node,
  'luminance',
  0,
  getNumberValidator(),
  Factory.afterSetFilter
);
/**
 * get/set hsl luminance. Use with {@link Konva.Filters.HSL} filter.
 * @name Konva.Node#luminance
 * @method
 * @param {Number} value from -1 to 1
 * @returns {Number}
 */

/**
 * HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
 * @function
 * @memberof Konva.Filters
 * @param {Object} imageData
 * @author ippo615
 * @example
 * image.filters([Konva.Filters.HSL]);
 * image.luminance(0.2);
 */

export const HSL: Filter = function (imageData) {
  const data = imageData.data,
    nPixels = data.length,
    v = 1,
    s = Math.pow(2, this.saturation()),
    h = Math.abs(this.hue() + 360) % 360,
    l = this.luminance() * 127;

  // Basis for the technique used:
  // http://beesbuzz.biz/code/hsv_color_transforms.php
  // V is the value multiplier (1 for none, 2 for double, 0.5 for half)
  // S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
  // H is the hue shift in degrees (0 to 360)
  // vsu = V*S*cos(H*PI/180);
  // vsw = V*S*sin(H*PI/180);
  //[ .299V+.701vsu+.168vsw    .587V-.587vsu+.330vsw    .114V-.114vsu-.497vsw ] [R]
  //[ .299V-.299vsu-.328vsw    .587V+.413vsu+.035vsw    .114V-.114vsu+.292vsw ]*[G]
  //[ .299V-.300vsu+1.25vsw    .587V-.588vsu-1.05vsw    .114V+.886vsu-.203vsw ] [B]

  // Precompute the values in the matrix:
  const vsu = v * s * Math.cos((h * Math.PI) / 180),
    vsw = v * s * Math.sin((h * Math.PI) / 180);
  // (result spot)(source spot)
  const rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
    rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,
    rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
  const gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
    gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw,
    gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
  const br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
    bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
    bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;

  let r: number, g: number, b: number, a: number;

  for (let i = 0; i < nPixels; i += 4) {
    r = data[i + 0];
    g = data[i + 1];
    b = data[i + 2];
    a = data[i + 3];

    data[i + 0] = rr * r + rg * g + rb * b + l;
    data[i + 1] = gr * r + gg * g + gb * b + l;
    data[i + 2] = br * r + bg * g + bb * b + l;
    data[i + 3] = a; // alpha
  }
};