@nasser-sw/fabric 7.0.1-beta2 → 7.0.1-beta4

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

@@ -1,274 +0,0 @@
-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/src/filters/Mask.ts

@@ -1,220 +0,0 @@
-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/src/filters/Noise.ts

@@ -1,44 +0,0 @@
-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/src/filters/Pixelate.ts

@@ -1,107 +0,0 @@
-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/src/filters/Posterize.ts

@@ -1,46 +0,0 @@
-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}
- */