@nasser-sw/fabric 7.0.1-beta8 → 7.0.1-beta9

package/debug/konva-master/src/filters/Emboss.ts

@@ -0,0 +1,207 @@
+import { Factory } from '../Factory.ts';
+import type { Filter } from '../Node.ts';
+import { Node } from '../Node.ts';
+import { getNumberValidator } from '../Validators.ts';
+/**
+ * Emboss Filter.
+ * @function
+ * @memberof Konva.Filters
+ * @param {Object} imageData
+ * @example
+ * node.cache();
+ * node.filters([Konva.Filters.Emboss]);
+ * node.embossStrength(0.8);
+ * node.embossWhiteLevel(0.3);
+ * node.embossDirection('right');
+ * node.embossBlend(true);
+ */
+export const Emboss: Filter = function (imageData) {
+  const data = imageData.data;
+  const w = imageData.width;
+  const h = imageData.height;
+
+  // Inputs from Konva node
+  const strength01 = Math.min(1, Math.max(0, this.embossStrength?.() ?? 0.5)); // [0..1]
+  const whiteLevel01 = Math.min(
+    1,
+    Math.max(0, this.embossWhiteLevel?.() ?? 0.5)
+  ); // [0..1]
+  // Convert string direction to degrees
+  const directionMap = {
+    'top-left': 315,
+    top: 270,
+    'top-right': 225,
+    right: 180,
+    'bottom-right': 135,
+    bottom: 90,
+    'bottom-left': 45,
+    left: 0,
+  };
+  const directionDeg =
+    directionMap[this.embossDirection?.() ?? 'top-left'] ?? 315; // degrees
+  const blend = !!(this.embossBlend?.() ?? false);
+
+  // Internal mapping:
+  // -  "strength" was 0..10; we honor your 0..1 API and scale accordingly.
+  // - Sobel directional response is roughly in [-1020..1020] for 8-bit luminance; scale to ~±128.
+  const strength = strength01 * 10;
+  const bias = whiteLevel01 * 255;
+  const dirRad = (directionDeg * Math.PI) / 180;
+  const cx = Math.cos(dirRad);
+  const cy = Math.sin(dirRad);
+  const SCALE = (128 / 1020) * strength; // ≈0.1255 * strength
+
+  // Precompute luminance (Rec.709)
+  const src = new Uint8ClampedArray(data); // snapshot
+  const lum = new Float32Array(w * h);
+  for (let p = 0, i = 0; i < data.length; i += 4, p++) {
+    lum[p] = 0.2126 * src[i] + 0.7152 * src[i + 1] + 0.0722 * src[i + 2];
+  }
+
+  // Sobel kernels (flattened)
+  const Gx = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
+  const Gy = [-1, -2, -1, 0, 0, 0, 1, 2, 1];
+
+  // neighbor offsets around center pixel in lum space
+  const OFF = [-w - 1, -w, -w + 1, -1, 0, 1, w - 1, w, w + 1];
+
+  // Helpers
+  const clamp8 = (v) => (v < 0 ? 0 : v > 255 ? 255 : v);
+
+  // Process: leave a 1px border unchanged (faster/cleaner)
+  for (let y = 1; y < h - 1; y++) {
+    for (let x = 1; x < w - 1; x++) {
+      const p = y * w + x;
+
+      // Directional derivative = (cosθ * Gx + sinθ * Gy) • neighborhood(lum)
+      let sx = 0,
+        sy = 0;
+      // unroll loop for speed
+      sx += lum[p + OFF[0]] * Gx[0];
+      sy += lum[p + OFF[0]] * Gy[0];
+      sx += lum[p + OFF[1]] * Gx[1];
+      sy += lum[p + OFF[1]] * Gy[1];
+      sx += lum[p + OFF[2]] * Gx[2];
+      sy += lum[p + OFF[2]] * Gy[2];
+      sx += lum[p + OFF[3]] * Gx[3];
+      sy += lum[p + OFF[3]] * Gy[3];
+      // center has 0 weights in both Sobel masks; can skip if desired
+      sx += lum[p + OFF[5]] * Gx[5];
+      sy += lum[p + OFF[5]] * Gy[5];
+      sx += lum[p + OFF[6]] * Gx[6];
+      sy += lum[p + OFF[6]] * Gy[6];
+      sx += lum[p + OFF[7]] * Gx[7];
+      sy += lum[p + OFF[7]] * Gy[7];
+      sx += lum[p + OFF[8]] * Gx[8];
+      sy += lum[p + OFF[8]] * Gy[8];
+
+      const r = cx * sx + cy * sy; // directional response
+      const outGray = clamp8(bias + r * SCALE); // biased, scaled, clamped
+
+      const o = p * 4;
+      if (blend) {
+        // Add the emboss "relief" around chosen bias to original RGB
+        const delta = outGray - bias; // symmetric around whiteLevel
+        data[o] = clamp8(src[o] + delta);
+        data[o + 1] = clamp8(src[o + 1] + delta);
+        data[o + 2] = clamp8(src[o + 2] + delta);
+        data[o + 3] = src[o + 3];
+      } else {
+        // Grayscale embossed output
+        data[o] = data[o + 1] = data[o + 2] = outGray;
+        data[o + 3] = src[o + 3];
+      }
+    }
+  }
+
+  // Copy border (untouched) to keep edges clean
+  // top & bottom rows
+  for (let x = 0; x < w; x++) {
+    let oTop = x * 4,
+      oBot = ((h - 1) * w + x) * 4;
+    data[oTop] = src[oTop];
+    data[oTop + 1] = src[oTop + 1];
+    data[oTop + 2] = src[oTop + 2];
+    data[oTop + 3] = src[oTop + 3];
+    data[oBot] = src[oBot];
+    data[oBot + 1] = src[oBot + 1];
+    data[oBot + 2] = src[oBot + 2];
+    data[oBot + 3] = src[oBot + 3];
+  }
+  // left & right columns
+  for (let y = 1; y < h - 1; y++) {
+    let oL = y * w * 4,
+      oR = (y * w + (w - 1)) * 4;
+    data[oL] = src[oL];
+    data[oL + 1] = src[oL + 1];
+    data[oL + 2] = src[oL + 2];
+    data[oL + 3] = src[oL + 3];
+    data[oR] = src[oR];
+    data[oR + 1] = src[oR + 1];
+    data[oR + 2] = src[oR + 2];
+    data[oR + 3] = src[oR + 3];
+  }
+
+  return imageData;
+};
+
+Factory.addGetterSetter(
+  Node,
+  'embossStrength',
+  0.5,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);
+/**
+ * get/set emboss strength. Use with {@link Konva.Filters.Emboss} filter.
+ * @name Konva.Node#embossStrength
+ * @method
+ * @param {Number} level between 0 and 1.  Default is 0.5
+ * @returns {Number}
+ */
+
+Factory.addGetterSetter(
+  Node,
+  'embossWhiteLevel',
+  0.5,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);
+/**
+ * get/set emboss white level. Use with {@link Konva.Filters.Emboss} filter.
+ * @name Konva.Node#embossWhiteLevel
+ * @method
+ * @param {Number} embossWhiteLevel between 0 and 1.  Default is 0.5
+ * @returns {Number}
+ */
+
+Factory.addGetterSetter(
+  Node,
+  'embossDirection',
+  'top-left',
+  undefined,
+  Factory.afterSetFilter
+);
+/**
+ * get/set emboss direction. Use with {@link Konva.Filters.Emboss} filter.
+ * @name Konva.Node#embossDirection
+ * @method
+ * @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left
+ *   The default is top-left
+ * @returns {String}
+ */
+
+Factory.addGetterSetter(
+  Node,
+  'embossBlend',
+  false,
+  undefined,
+  Factory.afterSetFilter
+);
+/**
+ * get/set emboss blend. Use with {@link Konva.Filters.Emboss} filter.
+ * @name Konva.Node#embossBlend
+ * @method
+ * @param {Boolean} embossBlend
+ * @returns {Boolean}
+ */

package/debug/konva-master/src/filters/Enhance.ts

@@ -0,0 +1,154 @@
+import { Factory } from '../Factory.ts';
+import type { Filter } from '../Node.ts';
+import { Node } from '../Node.ts';
+import { getNumberValidator } from '../Validators.ts';
+
+function remap(
+  fromValue: number,
+  fromMin: number,
+  fromMax: number,
+  toMin: number,
+  toMax: number
+) {
+  // Compute the range of the data
+  const fromRange = fromMax - fromMin,
+    toRange = toMax - toMin;
+
+  // If either range is 0, then the value can only be mapped to 1 value
+  if (fromRange === 0) {
+    return toMin + toRange / 2;
+  }
+  if (toRange === 0) {
+    return toMin;
+  }
+
+  // (1) untranslate, (2) unscale, (3) rescale, (4) retranslate
+  let toValue = (fromValue - fromMin) / fromRange;
+  toValue = toRange * toValue + toMin;
+
+  return toValue;
+}
+
+/**
+ * Enhance Filter. Adjusts the colors so that they span the widest
+ *  possible range (ie 0-255). Performs w*h pixel reads and w*h pixel
+ *  writes.
+ * @function
+ * @name Enhance
+ * @memberof Konva.Filters
+ * @param {Object} imageData
+ * @author ippo615
+ * @example
+ * node.cache();
+ * node.filters([Konva.Filters.Enhance]);
+ * node.enhance(0.4);
+ */
+export const Enhance: Filter = function (imageData) {
+  const data = imageData.data,
+    nSubPixels = data.length;
+  let rMin = data[0],
+    rMax = rMin,
+    r,
+    gMin = data[1],
+    gMax = gMin,
+    g,
+    bMin = data[2],
+    bMax = bMin,
+    b;
+
+  // If we are not enhancing anything - don't do any computation
+  const enhanceAmount = this.enhance();
+  if (enhanceAmount === 0) {
+    return;
+  }
+
+  // 1st Pass - find the min and max for each channel:
+  for (let i = 0; i < nSubPixels; i += 4) {
+    r = data[i + 0];
+    if (r < rMin) {
+      rMin = r;
+    } else if (r > rMax) {
+      rMax = r;
+    }
+    g = data[i + 1];
+    if (g < gMin) {
+      gMin = g;
+    } else if (g > gMax) {
+      gMax = g;
+    }
+    b = data[i + 2];
+    if (b < bMin) {
+      bMin = b;
+    } else if (b > bMax) {
+      bMax = b;
+    }
+    //a = data[i + 3];
+    //if (a < aMin) { aMin = a; } else
+    //if (a > aMax) { aMax = a; }
+  }
+
+  // If there is only 1 level - don't remap
+  if (rMax === rMin) {
+    rMax = 255;
+    rMin = 0;
+  }
+  if (gMax === gMin) {
+    gMax = 255;
+    gMin = 0;
+  }
+  if (bMax === bMin) {
+    bMax = 255;
+    bMin = 0;
+  }
+
+  let rGoalMax: number,
+    rGoalMin: number,
+    gGoalMax: number,
+    gGoalMin: number,
+    bGoalMax: number,
+    bGoalMin: number;
+
+  // If the enhancement is positive - stretch the histogram
+  if (enhanceAmount > 0) {
+    rGoalMax = rMax + enhanceAmount * (255 - rMax);
+    rGoalMin = rMin - enhanceAmount * (rMin - 0);
+    gGoalMax = gMax + enhanceAmount * (255 - gMax);
+    gGoalMin = gMin - enhanceAmount * (gMin - 0);
+    bGoalMax = bMax + enhanceAmount * (255 - bMax);
+    bGoalMin = bMin - enhanceAmount * (bMin - 0);
+    // If the enhancement is negative -   compress the histogram
+  } else {
+    const rMid = (rMax + rMin) * 0.5;
+    rGoalMax = rMax + enhanceAmount * (rMax - rMid);
+    rGoalMin = rMin + enhanceAmount * (rMin - rMid);
+    const gMid = (gMax + gMin) * 0.5;
+    gGoalMax = gMax + enhanceAmount * (gMax - gMid);
+    gGoalMin = gMin + enhanceAmount * (gMin - gMid);
+    const bMid = (bMax + bMin) * 0.5;
+    bGoalMax = bMax + enhanceAmount * (bMax - bMid);
+    bGoalMin = bMin + enhanceAmount * (bMin - bMid);
+  }
+
+  // Pass 2 - remap everything, except the alpha
+  for (let i = 0; i < nSubPixels; i += 4) {
+    data[i + 0] = remap(data[i + 0], rMin, rMax, rGoalMin, rGoalMax);
+    data[i + 1] = remap(data[i + 1], gMin, gMax, gGoalMin, gGoalMax);
+    data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);
+    //data[i + 3] = remap(data[i + 3], aMin, aMax, aGoalMin, aGoalMax);
+  }
+};
+
+/**
+ * get/set enhance. Use with {@link Konva.Filters.Enhance} filter. -1 to 1 values
+ * @name Konva.Node#enhance
+ * @method
+ * @param {Float} amount
+ * @returns {Float}
+ */
+Factory.addGetterSetter(
+  Node,
+  'enhance',
+  0,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);

package/debug/konva-master/src/filters/Grayscale.ts

@@ -0,0 +1,25 @@
+import type { Filter } from '../Node.ts';
+
+/**
+ * Grayscale Filter
+ * @function
+ * @memberof Konva.Filters
+ * @param {Object} imageData
+ * @example
+ * node.cache();
+ * node.filters([Konva.Filters.Grayscale]);
+ */
+export const Grayscale: Filter = function (imageData) {
+  const data = imageData.data,
+    len = data.length;
+
+  for (let i = 0; i < len; i += 4) {
+    const brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
+    // red
+    data[i] = brightness;
+    // green
+    data[i + 1] = brightness;
+    // blue
+    data[i + 2] = brightness;
+  }
+};

package/debug/konva-master/src/filters/HSL.ts

@@ -0,0 +1,108 @@
+import { Factory } from '../Factory.ts';
+import type { Filter } from '../Node.ts';
+import { Node } from '../Node.ts';
+import { getNumberValidator } from '../Validators.ts';
+
+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
+  }
+};

package/debug/konva-master/src/filters/HSV.ts

@@ -0,0 +1,106 @@
+import { Factory } from '../Factory.ts';
+import type { Filter } from '../Node.ts';
+import { Node } from '../Node.ts';
+import { getNumberValidator } from '../Validators.ts';
+
+/**
+ * HSV Filter. Adjusts the hue, saturation and value
+ * @function
+ * @name HSV
+ * @memberof Konva.Filters
+ * @param {Object} imageData
+ * @author ippo615
+ * @example
+ * image.filters([Konva.Filters.HSV]);
+ * image.value(200);
+ */
+
+export const HSV: Filter = function (imageData) {
+  const data = imageData.data,
+    nPixels = data.length,
+    v = Math.pow(2, this.value()),
+    s = Math.pow(2, this.saturation()),
+    h = Math.abs(this.hue() + 360) % 360;
+
+  // 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;
+
+  for (let i = 0; i < nPixels; i += 4) {
+    const r = data[i + 0];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const a = data[i + 3];
+
+    data[i + 0] = rr * r + rg * g + rb * b;
+    data[i + 1] = gr * r + gg * g + gb * b;
+    data[i + 2] = br * r + bg * g + bb * b;
+    data[i + 3] = a; // alpha
+  }
+};
+
+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,
+  'value',
+  0,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);
+/**
+ * get/set hsv value. Use with {@link Konva.Filters.HSV} filter.
+ * @name Konva.Node#value
+ * @method
+ * @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
+ * @returns {Number}
+ */

package/debug/konva-master/src/filters/Invert.ts

@@ -0,0 +1,23 @@
+import type { Filter } from '../Node.ts';
+/**
+ * Invert Filter
+ * @function
+ * @memberof Konva.Filters
+ * @param {Object} imageData
+ * @example
+ * node.cache();
+ * node.filters([Konva.Filters.Invert]);
+ */
+export const Invert: Filter = function (imageData) {
+  const data = imageData.data,
+    len = data.length;
+
+  for (let i = 0; i < len; i += 4) {
+    // red
+    data[i] = 255 - data[i];
+    // green
+    data[i + 1] = 255 - data[i + 1];
+    // blue
+    data[i + 2] = 255 - data[i + 2];
+  }
+};