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

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

@@ -0,0 +1,274 @@
+import { Factory } from '../Factory.ts';
+import type { Filter } from '../Node.ts';
+import { Node } from '../Node.ts';
+import { Util } from '../Util.ts';
+import { getNumberValidator } from '../Validators.ts';
+
+/*
+ * ToPolar Filter. Converts image data to polar coordinates. Performs
+ *  w*h*4 pixel reads and w*h pixel writes. The r axis is placed along
+ *  what would be the y axis and the theta axis along the x axis.
+ * @function
+ * @author ippo615
+ * @memberof Konva.Filters
+ * @param {ImageData} src, the source image data (what will be transformed)
+ * @param {ImageData} dst, the destination image data (where it will be saved)
+ * @param {Object} opt
+ * @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,
+ *  default is in the middle
+ * @param {Number} [opt.polarCenterY] vertical location for the center of the circle,
+ *  default is in the middle
+ */
+
+const ToPolar = function (src, dst, opt) {
+  const srcPixels = src.data,
+    dstPixels = dst.data,
+    xSize = src.width,
+    ySize = src.height,
+    xMid = opt.polarCenterX || xSize / 2,
+    yMid = opt.polarCenterY || ySize / 2;
+
+  // Find the largest radius
+  let rMax = Math.sqrt(xMid * xMid + yMid * yMid);
+  let x = xSize - xMid;
+  let y = ySize - yMid;
+  const rad = Math.sqrt(x * x + y * y);
+  rMax = rad > rMax ? rad : rMax;
+
+  // We'll be uisng y as the radius, and x as the angle (theta=t)
+  const rSize = ySize,
+    tSize = xSize;
+
+  // We want to cover all angles (0-360) and we need to convert to
+  // radians (*PI/180)
+  const conversion = ((360 / tSize) * Math.PI) / 180;
+
+  // var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
+
+  for (let theta = 0; theta < tSize; theta += 1) {
+    const sin = Math.sin(theta * conversion);
+    const cos = Math.cos(theta * conversion);
+    for (let radius = 0; radius < rSize; radius += 1) {
+      x = Math.floor(xMid + ((rMax * radius) / rSize) * cos);
+      y = Math.floor(yMid + ((rMax * radius) / rSize) * sin);
+      let i = (y * xSize + x) * 4;
+      const r = srcPixels[i + 0];
+      const g = srcPixels[i + 1];
+      const b = srcPixels[i + 2];
+      const a = srcPixels[i + 3];
+
+      // Store it
+      //i = (theta * xSize  +  radius) * 4;
+      i = (theta + radius * xSize) * 4;
+      dstPixels[i + 0] = r;
+      dstPixels[i + 1] = g;
+      dstPixels[i + 2] = b;
+      dstPixels[i + 3] = a;
+    }
+  }
+};
+
+/*
+ * FromPolar Filter. Converts image data from polar coordinates back to rectangular.
+ *  Performs w*h*4 pixel reads and w*h pixel writes.
+ * @function
+ * @author ippo615
+ * @memberof Konva.Filters
+ * @param {ImageData} src, the source image data (what will be transformed)
+ * @param {ImageData} dst, the destination image data (where it will be saved)
+ * @param {Object} opt
+ * @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,
+ *  default is in the middle
+ * @param {Number} [opt.polarCenterY] vertical location for the center of the circle,
+ *  default is in the middle
+ * @param {Number} [opt.polarRotation] amount to rotate the image counterclockwis,
+ *  0 is no rotation, 360 degrees is a full rotation
+ */
+
+const FromPolar = function (src, dst, opt) {
+  const srcPixels = src.data,
+    dstPixels = dst.data,
+    xSize = src.width,
+    ySize = src.height,
+    xMid = opt.polarCenterX || xSize / 2,
+    yMid = opt.polarCenterY || ySize / 2;
+
+  // Find the largest radius
+  let rMax = Math.sqrt(xMid * xMid + yMid * yMid);
+  let x = xSize - xMid;
+  let y = ySize - yMid;
+  const rad = Math.sqrt(x * x + y * y);
+  rMax = rad > rMax ? rad : rMax;
+
+  // We'll be uisng x as the radius, and y as the angle (theta=t)
+  const rSize = ySize,
+    tSize = xSize,
+    phaseShift = opt.polarRotation || 0;
+
+  // We need to convert to degrees and we need to make sure
+  // it's between (0-360)
+  // var conversion = tSize/360*180/Math.PI;
+  //var conversion = tSize/360*180/Math.PI;
+
+  let x1, y1;
+
+  for (x = 0; x < xSize; x += 1) {
+    for (y = 0; y < ySize; y += 1) {
+      const dx = x - xMid;
+      const dy = y - yMid;
+      const radius = (Math.sqrt(dx * dx + dy * dy) * rSize) / rMax;
+      let theta =
+        ((Math.atan2(dy, dx) * 180) / Math.PI + 360 + phaseShift) % 360;
+      theta = (theta * tSize) / 360;
+      x1 = Math.floor(theta);
+      y1 = Math.floor(radius);
+      let i = (y1 * xSize + x1) * 4;
+      const r = srcPixels[i + 0];
+      const g = srcPixels[i + 1];
+      const b = srcPixels[i + 2];
+      const a = srcPixels[i + 3];
+
+      // Store it
+      i = (y * xSize + x) * 4;
+      dstPixels[i + 0] = r;
+      dstPixels[i + 1] = g;
+      dstPixels[i + 2] = b;
+      dstPixels[i + 3] = a;
+    }
+  }
+};
+
+//Konva.Filters.ToPolar = Util._FilterWrapDoubleBuffer(ToPolar);
+//Konva.Filters.FromPolar = Util._FilterWrapDoubleBuffer(FromPolar);
+
+// create a temporary canvas for working - shared between multiple calls
+
+/*
+ * Kaleidoscope Filter.
+ * @function
+ * @name Kaleidoscope
+ * @author ippo615
+ * @memberof Konva.Filters
+ * @example
+ * node.cache();
+ * node.filters([Konva.Filters.Kaleidoscope]);
+ * node.kaleidoscopePower(3);
+ * node.kaleidoscopeAngle(45);
+ */
+export const Kaleidoscope: Filter = function (imageData) {
+  const xSize = imageData.width,
+    ySize = imageData.height;
+
+  let x, y, xoff, i, r, g, b, a, srcPos, dstPos;
+  let power = Math.round(this.kaleidoscopePower());
+  const angle = Math.round(this.kaleidoscopeAngle());
+  const offset = Math.floor((xSize * (angle % 360)) / 360);
+
+  if (power < 1) {
+    return;
+  }
+
+  // Work with our shared buffer canvas
+  const tempCanvas = Util.createCanvasElement();
+  tempCanvas.width = xSize;
+  tempCanvas.height = ySize;
+  const scratchData = tempCanvas
+    .getContext('2d')!
+    .getImageData(0, 0, xSize, ySize);
+  Util.releaseCanvas(tempCanvas);
+  // Convert thhe original to polar coordinates
+  ToPolar(imageData, scratchData, {
+    polarCenterX: xSize / 2,
+    polarCenterY: ySize / 2,
+  });
+
+  // Determine how big each section will be, if it's too small
+  // make it bigger
+  let minSectionSize = xSize / Math.pow(2, power);
+  while (minSectionSize <= 8) {
+    minSectionSize = minSectionSize * 2;
+    power -= 1;
+  }
+  minSectionSize = Math.ceil(minSectionSize);
+  let sectionSize = minSectionSize;
+
+  // Copy the offset region to 0
+  // Depending on the size of filter and location of the offset we may need
+  // to copy the section backwards to prevent it from rewriting itself
+  let xStart = 0,
+    xEnd = sectionSize,
+    xDelta = 1;
+  if (offset + minSectionSize > xSize) {
+    xStart = sectionSize;
+    xEnd = 0;
+    xDelta = -1;
+  }
+  for (y = 0; y < ySize; y += 1) {
+    for (x = xStart; x !== xEnd; x += xDelta) {
+      xoff = Math.round(x + offset) % xSize;
+      srcPos = (xSize * y + xoff) * 4;
+      r = scratchData.data[srcPos + 0];
+      g = scratchData.data[srcPos + 1];
+      b = scratchData.data[srcPos + 2];
+      a = scratchData.data[srcPos + 3];
+      dstPos = (xSize * y + x) * 4;
+      scratchData.data[dstPos + 0] = r;
+      scratchData.data[dstPos + 1] = g;
+      scratchData.data[dstPos + 2] = b;
+      scratchData.data[dstPos + 3] = a;
+    }
+  }
+
+  // Perform the actual effect
+  for (y = 0; y < ySize; y += 1) {
+    sectionSize = Math.floor(minSectionSize);
+    for (i = 0; i < power; i += 1) {
+      for (x = 0; x < sectionSize + 1; x += 1) {
+        srcPos = (xSize * y + x) * 4;
+        r = scratchData.data[srcPos + 0];
+        g = scratchData.data[srcPos + 1];
+        b = scratchData.data[srcPos + 2];
+        a = scratchData.data[srcPos + 3];
+        dstPos = (xSize * y + sectionSize * 2 - x - 1) * 4;
+        scratchData.data[dstPos + 0] = r;
+        scratchData.data[dstPos + 1] = g;
+        scratchData.data[dstPos + 2] = b;
+        scratchData.data[dstPos + 3] = a;
+      }
+      sectionSize *= 2;
+    }
+  }
+
+  // Convert back from polar coordinates
+  FromPolar(scratchData, imageData, { polarRotation: 0 });
+};
+
+/**
+ * get/set kaleidoscope power. Use with {@link Konva.Filters.Kaleidoscope} filter.
+ * @name Konva.Node#kaleidoscopePower
+ * @method
+ * @param {Integer} power of kaleidoscope
+ * @returns {Integer}
+ */
+Factory.addGetterSetter(
+  Node,
+  'kaleidoscopePower',
+  2,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);
+
+/**
+ * get/set kaleidoscope angle. Use with {@link Konva.Filters.Kaleidoscope} filter.
+ * @name Konva.Node#kaleidoscopeAngle
+ * @method
+ * @param {Integer} degrees
+ * @returns {Integer}
+ */
+Factory.addGetterSetter(
+  Node,
+  'kaleidoscopeAngle',
+  0,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);

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

@@ -0,0 +1,220 @@
+import { Factory } from '../Factory.ts';
+import type { Filter } from '../Node.ts';
+import { Node } from '../Node.ts';
+import { getNumberValidator } from '../Validators.ts';
+
+function pixelAt(idata, x: number, y: number) {
+  let idx = (y * idata.width + x) * 4;
+  const d: Array<number> = [];
+  d.push(
+    idata.data[idx++],
+    idata.data[idx++],
+    idata.data[idx++],
+    idata.data[idx++]
+  );
+  return d;
+}
+
+function rgbDistance(p1, p2) {
+  return Math.sqrt(
+    Math.pow(p1[0] - p2[0], 2) +
+      Math.pow(p1[1] - p2[1], 2) +
+      Math.pow(p1[2] - p2[2], 2)
+  );
+}
+
+function rgbMean(pTab) {
+  const m = [0, 0, 0];
+
+  for (let i = 0; i < pTab.length; i++) {
+    m[0] += pTab[i][0];
+    m[1] += pTab[i][1];
+    m[2] += pTab[i][2];
+  }
+
+  m[0] /= pTab.length;
+  m[1] /= pTab.length;
+  m[2] /= pTab.length;
+
+  return m;
+}
+
+function backgroundMask(idata, threshold) {
+  const rgbv_no = pixelAt(idata, 0, 0);
+  const rgbv_ne = pixelAt(idata, idata.width - 1, 0);
+  const rgbv_so = pixelAt(idata, 0, idata.height - 1);
+  const rgbv_se = pixelAt(idata, idata.width - 1, idata.height - 1);
+
+  const thres = threshold || 10;
+  if (
+    rgbDistance(rgbv_no, rgbv_ne) < thres &&
+    rgbDistance(rgbv_ne, rgbv_se) < thres &&
+    rgbDistance(rgbv_se, rgbv_so) < thres &&
+    rgbDistance(rgbv_so, rgbv_no) < thres
+  ) {
+    // Mean color
+    const mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]);
+
+    // Mask based on color distance
+    const mask: Array<number> = [];
+    for (let i = 0; i < idata.width * idata.height; i++) {
+      const d = rgbDistance(mean, [
+        idata.data[i * 4],
+        idata.data[i * 4 + 1],
+        idata.data[i * 4 + 2],
+      ]);
+      mask[i] = d < thres ? 0 : 255;
+    }
+
+    return mask;
+  }
+}
+
+function applyMask(idata, mask) {
+  for (let i = 0; i < idata.width * idata.height; i++) {
+    idata.data[4 * i + 3] = mask[i];
+  }
+}
+
+function erodeMask(mask, sw, sh) {
+  const weights = [1, 1, 1, 1, 0, 1, 1, 1, 1];
+  const side = Math.round(Math.sqrt(weights.length));
+  const halfSide = Math.floor(side / 2);
+
+  const maskResult: Array<number> = [];
+  for (let y = 0; y < sh; y++) {
+    for (let x = 0; x < sw; x++) {
+      const so = y * sw + x;
+      let a = 0;
+      for (let cy = 0; cy < side; cy++) {
+        for (let cx = 0; cx < side; cx++) {
+          const scy = y + cy - halfSide;
+          const scx = x + cx - halfSide;
+
+          if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
+            const srcOff = scy * sw + scx;
+            const wt = weights[cy * side + cx];
+
+            a += mask[srcOff] * wt;
+          }
+        }
+      }
+
+      maskResult[so] = a === 255 * 8 ? 255 : 0;
+    }
+  }
+
+  return maskResult;
+}
+
+function dilateMask(mask, sw, sh) {
+  const weights = [1, 1, 1, 1, 1, 1, 1, 1, 1];
+  const side = Math.round(Math.sqrt(weights.length));
+  const halfSide = Math.floor(side / 2);
+
+  const maskResult: Array<number> = [];
+  for (let y = 0; y < sh; y++) {
+    for (let x = 0; x < sw; x++) {
+      const so = y * sw + x;
+      let a = 0;
+      for (let cy = 0; cy < side; cy++) {
+        for (let cx = 0; cx < side; cx++) {
+          const scy = y + cy - halfSide;
+          const scx = x + cx - halfSide;
+
+          if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
+            const srcOff = scy * sw + scx;
+            const wt = weights[cy * side + cx];
+
+            a += mask[srcOff] * wt;
+          }
+        }
+      }
+
+      maskResult[so] = a >= 255 * 4 ? 255 : 0;
+    }
+  }
+
+  return maskResult;
+}
+
+function smoothEdgeMask(mask, sw: number, sh: number) {
+  const weights = [
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+  ];
+  const side = Math.round(Math.sqrt(weights.length));
+  const halfSide = Math.floor(side / 2);
+
+  const maskResult: Array<number> = [];
+  for (let y = 0; y < sh; y++) {
+    for (let x = 0; x < sw; x++) {
+      const so = y * sw + x;
+      let a = 0;
+      for (let cy = 0; cy < side; cy++) {
+        for (let cx = 0; cx < side; cx++) {
+          const scy = y + cy - halfSide;
+          const scx = x + cx - halfSide;
+
+          if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
+            const srcOff = scy * sw + scx;
+            const wt = weights[cy * side + cx];
+
+            a += mask[srcOff] * wt;
+          }
+        }
+      }
+
+      maskResult[so] = a;
+    }
+  }
+
+  return maskResult;
+}
+
+/**
+ * Mask Filter
+ * @function
+ * @name Mask
+ * @memberof Konva.Filters
+ * @param {Object} imageData
+ * @example
+ * node.cache();
+ * node.filters([Konva.Filters.Mask]);
+ * node.threshold(200);
+ */
+export const Mask: Filter = function (imageData) {
+  // Detect pixels close to the background color
+  const threshold = this.threshold();
+  let mask = backgroundMask(imageData, threshold);
+  if (mask) {
+    // Erode
+    mask = erodeMask(mask, imageData.width, imageData.height);
+
+    // Dilate
+    mask = dilateMask(mask, imageData.width, imageData.height);
+
+    // Gradient
+    mask = smoothEdgeMask(mask, imageData.width, imageData.height);
+
+    // Apply mask
+    applyMask(imageData, mask);
+  }
+
+  return imageData;
+};
+
+Factory.addGetterSetter(
+  Node,
+  'threshold',
+  0,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);

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

@@ -0,0 +1,44 @@
+import { Factory } from '../Factory.ts';
+import type { Filter } from '../Node.ts';
+import { Node } from '../Node.ts';
+import { getNumberValidator } from '../Validators.ts';
+
+/**
+ * Noise Filter. Randomly adds or substracts to the color channels
+ * @function
+ * @name Noise
+ * @memberof Konva.Filters
+ * @param {Object} imageData
+ * @author ippo615
+ * @example
+ * node.cache();
+ * node.filters([Konva.Filters.Noise]);
+ * node.noise(0.8);
+ */
+export const Noise: Filter = function (imageData) {
+  const amount = this.noise() * 255,
+    data = imageData.data,
+    nPixels = data.length,
+    half = amount / 2;
+
+  for (let i = 0; i < nPixels; i += 4) {
+    data[i + 0] += half - 2 * half * Math.random();
+    data[i + 1] += half - 2 * half * Math.random();
+    data[i + 2] += half - 2 * half * Math.random();
+  }
+};
+
+Factory.addGetterSetter(
+  Node,
+  'noise',
+  0.2,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);
+/**
+ * get/set noise amount.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
+ * @name Konva.Node#noise
+ * @method
+ * @param {Number} noise
+ * @returns {Number}
+ */

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

@@ -0,0 +1,107 @@
+import { Factory } from '../Factory.ts';
+import { Util } from '../Util.ts';
+import type { Filter } from '../Node.ts';
+import { Node } from '../Node.ts';
+import { getNumberValidator } from '../Validators.ts';
+
+/**
+ * Pixelate Filter. Averages groups of pixels and redraws
+ *  them as larger pixels
+ * @function
+ * @name Pixelate
+ * @memberof Konva.Filters
+ * @param {Object} imageData
+ * @author ippo615
+ * @example
+ * node.cache();
+ * node.filters([Konva.Filters.Pixelate]);
+ * node.pixelSize(10);
+ */
+
+export const Pixelate: Filter = function (imageData) {
+  let pixelSize = Math.ceil(this.pixelSize()),
+    width = imageData.width,
+    height = imageData.height,
+    //pixelsPerBin = pixelSize * pixelSize,
+    nBinsX = Math.ceil(width / pixelSize),
+    nBinsY = Math.ceil(height / pixelSize),
+    data = imageData.data;
+
+  if (pixelSize <= 0) {
+    Util.error('pixelSize value can not be <= 0');
+    return;
+  }
+
+  for (let xBin = 0; xBin < nBinsX; xBin += 1) {
+    for (let yBin = 0; yBin < nBinsY; yBin += 1) {
+      // Initialize the color accumlators to 0
+      let red = 0;
+      let green = 0;
+      let blue = 0;
+      let alpha = 0;
+
+      // Determine which pixels are included in this bin
+      const xBinStart = xBin * pixelSize;
+      const xBinEnd = xBinStart + pixelSize;
+      const yBinStart = yBin * pixelSize;
+      const yBinEnd = yBinStart + pixelSize;
+
+      // Add all of the pixels to this bin!
+      let pixelsInBin = 0;
+      for (let x = xBinStart; x < xBinEnd; x += 1) {
+        if (x >= width) {
+          continue;
+        }
+        for (let y = yBinStart; y < yBinEnd; y += 1) {
+          if (y >= height) {
+            continue;
+          }
+          const i = (width * y + x) * 4;
+          red += data[i + 0];
+          green += data[i + 1];
+          blue += data[i + 2];
+          alpha += data[i + 3];
+          pixelsInBin += 1;
+        }
+      }
+
+      // Make sure the channels are between 0-255
+      red = red / pixelsInBin;
+      green = green / pixelsInBin;
+      blue = blue / pixelsInBin;
+      alpha = alpha / pixelsInBin;
+
+      // Draw this bin
+      for (let x = xBinStart; x < xBinEnd; x += 1) {
+        if (x >= width) {
+          continue;
+        }
+        for (let y = yBinStart; y < yBinEnd; y += 1) {
+          if (y >= height) {
+            continue;
+          }
+          const i = (width * y + x) * 4;
+          data[i + 0] = red;
+          data[i + 1] = green;
+          data[i + 2] = blue;
+          data[i + 3] = alpha;
+        }
+      }
+    }
+  }
+};
+
+Factory.addGetterSetter(
+  Node,
+  'pixelSize',
+  8,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);
+/**
+ * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
+ * @name Konva.Node#pixelSize
+ * @method
+ * @param {Integer} pixelSize
+ * @returns {Integer}
+ */

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

@@ -0,0 +1,46 @@
+import { Factory } from '../Factory.ts';
+import type { Filter } from '../Node.ts';
+import { Node } from '../Node.ts';
+import { getNumberValidator } from '../Validators.ts';
+
+/**
+ * Posterize Filter. Adjusts the channels so that there are no more
+ *  than n different values for that channel. This is also applied
+ *  to the alpha channel.
+ * @function
+ * @name Posterize
+ * @author ippo615
+ * @memberof Konva.Filters
+ * @param {Object} imageData
+ * @example
+ * node.cache();
+ * node.filters([Konva.Filters.Posterize]);
+ * node.levels(0.8); // between 0 and 1
+ */
+export const Posterize: Filter = function (imageData) {
+  // level must be between 1 and 255
+  const levels = Math.round(this.levels() * 254) + 1,
+    data = imageData.data,
+    len = data.length,
+    scale = 255 / levels;
+
+  for (let i = 0; i < len; i += 1) {
+    data[i] = Math.floor(data[i] / scale) * scale;
+  }
+};
+
+Factory.addGetterSetter(
+  Node,
+  'levels',
+  0.5,
+  getNumberValidator(),
+  Factory.afterSetFilter
+);
+
+/**
+ * get/set levels.  Must be a number between 0 and 1.  Use with {@link Konva.Filters.Posterize} filter.
+ * @name Konva.Node#levels
+ * @method
+ * @param {Number} level between 0 and 1
+ * @returns {Number}
+ */