@nasser-sw/fabric 7.0.1-beta3 → 7.0.1-beta5

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

@@ -1,82 +0,0 @@
-import { Factory } from '../Factory.ts';
-import type { Filter } from '../Node.ts';
-import { Node } from '../Node.ts';
-import { RGBComponent } from '../Validators.ts';
-
-/**
- * RGB Filter
- * @function
- * @name RGB
- * @memberof Konva.Filters
- * @param {Object} imageData
- * @author ippo615
- * @example
- * node.cache();
- * node.filters([Konva.Filters.RGB]);
- * node.blue(120);
- * node.green(200);
- */
-export const RGB: Filter = function (imageData) {
-  const data = imageData.data,
-    nPixels = data.length,
-    red = this.red(),
-    green = this.green(),
-    blue = this.blue();
-
-  for (let i = 0; i < nPixels; i += 4) {
-    const brightness =
-      (0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]) / 255;
-    data[i] = brightness * red; // r
-    data[i + 1] = brightness * green; // g
-    data[i + 2] = brightness * blue; // b
-    data[i + 3] = data[i + 3]; // alpha
-  }
-};
-
-Factory.addGetterSetter(Node, 'red', 0, function (this: Node, val) {
-  this._filterUpToDate = false;
-  if (val > 255) {
-    return 255;
-  } else if (val < 0) {
-    return 0;
-  } else {
-    return Math.round(val);
-  }
-});
-/**
- * get/set filter red value. Use with {@link Konva.Filters.RGB} filter.
- * @name red
- * @method
- * @memberof Konva.Node.prototype
- * @param {Integer} red value between 0 and 255
- * @returns {Integer}
- */
-
-Factory.addGetterSetter(Node, 'green', 0, function (this: Node, val) {
-  this._filterUpToDate = false;
-  if (val > 255) {
-    return 255;
-  } else if (val < 0) {
-    return 0;
-  } else {
-    return Math.round(val);
-  }
-});
-/**
- * get/set filter green value. Use with {@link Konva.Filters.RGB} filter.
- * @name green
- * @method
- * @memberof Konva.Node.prototype
- * @param {Integer} green value between 0 and 255
- * @returns {Integer}
- */
-
-Factory.addGetterSetter(Node, 'blue', 0, RGBComponent, Factory.afterSetFilter);
-/**
- * get/set filter blue value. Use with {@link Konva.Filters.RGB} filter.
- * @name blue
- * @method
- * @memberof Konva.Node.prototype
- * @param {Integer} blue value between 0 and 255
- * @returns {Integer}
- */

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

@@ -1,103 +0,0 @@
-import { Factory } from '../Factory.ts';
-import type { Filter } from '../Node.ts';
-import { Node } from '../Node.ts';
-import { RGBComponent } from '../Validators.ts';
-
-/**
- * RGBA Filter
- * @function
- * @name RGBA
- * @memberof Konva.Filters
- * @param {Object} imageData
- * @author codefo
- * @example
- * node.cache();
- * node.filters([Konva.Filters.RGBA]);
- * node.blue(120);
- * node.green(200);
- * node.alpha(0.3);
- */
-
-export const RGBA: Filter = function (imageData) {
-  const data = imageData.data,
-    nPixels = data.length,
-    red = this.red(),
-    green = this.green(),
-    blue = this.blue(),
-    alpha = this.alpha();
-
-  for (let i = 0; i < nPixels; i += 4) {
-    const ia = 1 - alpha;
-
-    data[i] = red * alpha + data[i] * ia; // r
-    data[i + 1] = green * alpha + data[i + 1] * ia; // g
-    data[i + 2] = blue * alpha + data[i + 2] * ia; // b
-  }
-};
-
-Factory.addGetterSetter(Node, 'red', 0, function (this: Node, val: number) {
-  this._filterUpToDate = false;
-  if (val > 255) {
-    return 255;
-  } else if (val < 0) {
-    return 0;
-  } else {
-    return Math.round(val);
-  }
-});
-/**
- * get/set filter red value. Use with {@link Konva.Filters.RGBA} filter.
- * @name red
- * @method
- * @memberof Konva.Node.prototype
- * @param {Integer} red value between 0 and 255
- * @returns {Integer}
- */
-
-Factory.addGetterSetter(Node, 'green', 0, function (this: Node, val) {
-  this._filterUpToDate = false;
-  if (val > 255) {
-    return 255;
-  } else if (val < 0) {
-    return 0;
-  } else {
-    return Math.round(val);
-  }
-});
-/**
- * get/set filter green value. Use with {@link Konva.Filters.RGBA} filter.
- * @name green
- * @method
- * @memberof Konva.Node.prototype
- * @param {Integer} green value between 0 and 255
- * @returns {Integer}
- */
-
-Factory.addGetterSetter(Node, 'blue', 0, RGBComponent, Factory.afterSetFilter);
-/**
- * get/set filter blue value. Use with {@link Konva.Filters.RGBA} filter.
- * @name blue
- * @method
- * @memberof Konva.Node.prototype
- * @param {Integer} blue value between 0 and 255
- * @returns {Integer}
- */
-
-Factory.addGetterSetter(Node, 'alpha', 1, function (this: Node, val) {
-  this._filterUpToDate = false;
-  if (val > 1) {
-    return 1;
-  } else if (val < 0) {
-    return 0;
-  } else {
-    return val;
-  }
-});
-/**
- * get/set filter alpha value. Use with {@link Konva.Filters.RGBA} filter.
- * @name alpha
- * @method
- * @memberof Konva.Node.prototype
- * @param {Float} alpha value between 0 and 1
- * @returns {Float}
- */

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

@@ -1,27 +0,0 @@
-import type { Filter } from '../Node.ts';
-
-// based on https://stackoverflow.com/questions/1061093/how-is-a-sepia-tone-created
-
-/**
- * @function
- * @name Sepia
- * @memberof Konva.Filters
- * @param {Object} imageData
- * @example
- * node.cache();
- * node.filters([Konva.Filters.Sepia]);
- */
-export const Sepia: Filter = function (imageData) {
-  const data = imageData.data,
-    nPixels = data.length;
-
-  for (let i = 0; i < nPixels; i += 4) {
-    const r = data[i + 0];
-    const g = data[i + 1];
-    const b = data[i + 2];
-
-    data[i + 0] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
-    data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
-    data[i + 2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
-  }
-};

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

@@ -1,29 +0,0 @@
-import type { Filter } from '../Node.ts';
-/**
- * Solarize Filter
- * @function
- * @name Solarize
- * @memberof Konva.Filters
- * @param {Object} imageData
- * @example
- * node.cache();
- * node.filters([Konva.Filters.Solarize]);
- */
-
-export const Solarize: Filter = function (imageData) {
-  const threshold = 128;
-  const d = imageData.data;
-  for (let i = 0; i < d.length; i += 4) {
-    const r = d[i],
-      g = d[i + 1],
-      b = d[i + 2];
-    // sRGB luma
-    const L = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-    if (L >= threshold) {
-      d[i] = 255 - r;
-      d[i + 1] = 255 - g;
-      d[i + 2] = 255 - b;
-    }
-  }
-  return imageData;
-};

package/debug/konva/src/filters/Threshold.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';
-/**
- * Threshold Filter. Pushes any value above the mid point to
- *  the max and any value below the mid point to the min.
- *  This affects the alpha channel.
- * @function
- * @name Threshold
- * @memberof Konva.Filters
- * @param {Object} imageData
- * @author ippo615
- * @example
- * node.cache();
- * node.filters([Konva.Filters.Threshold]);
- * node.threshold(0.1);
- */
-
-export const Threshold: Filter = function (imageData) {
-  const level = this.threshold() * 255,
-    data = imageData.data,
-    len = data.length;
-
-  for (let i = 0; i < len; i += 1) {
-    data[i] = data[i] < level ? 0 : 255;
-  }
-};
-
-Factory.addGetterSetter(
-  Node,
-  'threshold',
-  0.5,
-  getNumberValidator(),
-  Factory.afterSetFilter
-);
-/**
- * get/set threshold.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.
- * @name threshold
- * @method
- * @memberof Konva.Node.prototype
- * @param {Number} threshold
- * @returns {Number}
- */

package/debug/konva/src/index.ts

@@ -1,3 +0,0 @@
-import { Konva } from './_FullInternals.ts';
-
-export default Konva;

package/debug/konva/src/shapes/Arc.ts

@@ -1,176 +0,0 @@
-import { Factory } from '../Factory.ts';
-import type { ShapeConfig } from '../Shape.ts';
-import { Shape } from '../Shape.ts';
-import { Konva } from '../Global.ts';
-import type { GetSet } from '../types.ts';
-import { getNumberValidator, getBooleanValidator } from '../Validators.ts';
-import { _registerNode } from '../Global.ts';
-import type { Context } from '../Context.ts';
-
-export interface ArcConfig extends ShapeConfig {
-  angle: number;
-  innerRadius: number;
-  outerRadius: number;
-  clockwise?: boolean;
-}
-
-/**
- * Arc constructor
- * @constructor
- * @memberof Konva
- * @augments Konva.Shape
- * @param {Object} config
- * @param {Number} config.angle in degrees
- * @param {Number} config.innerRadius
- * @param {Number} config.outerRadius
- * @param {Boolean} [config.clockwise]
- * @@shapeParams
- * @@nodeParams
- * @example
- * // draw a Arc that's pointing downwards
- * var arc = new Konva.Arc({
- *   innerRadius: 40,
- *   outerRadius: 80,
- *   fill: 'red',
- *   stroke: 'black'
- *   strokeWidth: 5,
- *   angle: 60,
- *   rotationDeg: -120
- * });
- */
-export class Arc extends Shape<ArcConfig> {
-  _sceneFunc(context: Context) {
-    const angle = Konva.getAngle(this.angle()),
-      clockwise = this.clockwise();
-
-    context.beginPath();
-    context.arc(0, 0, this.outerRadius(), 0, angle, clockwise);
-    context.arc(0, 0, this.innerRadius(), angle, 0, !clockwise);
-    context.closePath();
-    context.fillStrokeShape(this);
-  }
-  getWidth() {
-    return this.outerRadius() * 2;
-  }
-  getHeight() {
-    return this.outerRadius() * 2;
-  }
-  setWidth(width: number) {
-    this.outerRadius(width / 2);
-  }
-  setHeight(height: number) {
-    this.outerRadius(height / 2);
-  }
-
-  getSelfRect() {
-    const innerRadius = this.innerRadius();
-    const outerRadius = this.outerRadius();
-    const clockwise = this.clockwise();
-    const angle = Konva.getAngle(clockwise ? 360 - this.angle() : this.angle());
-
-    const boundLeftRatio = Math.cos(Math.min(angle, Math.PI));
-    const boundRightRatio = 1;
-    const boundTopRatio = Math.sin(
-      Math.min(Math.max(Math.PI, angle), (3 * Math.PI) / 2)
-    );
-    const boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
-    const boundLeft =
-      boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
-    const boundRight =
-      boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius);
-    const boundTop =
-      boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius);
-    const boundBottom =
-      boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius);
-
-    return {
-      x: boundLeft,
-      y: clockwise ? -1 * boundBottom : boundTop,
-      width: boundRight - boundLeft,
-      height: boundBottom - boundTop,
-    };
-  }
-
-  innerRadius: GetSet<number, this>;
-  outerRadius: GetSet<number, this>;
-  angle: GetSet<number, this>;
-  clockwise: GetSet<boolean, this>;
-}
-
-Arc.prototype._centroid = true;
-Arc.prototype.className = 'Arc';
-Arc.prototype._attrsAffectingSize = [
-  'innerRadius',
-  'outerRadius',
-  'angle',
-  'clockwise',
-];
-_registerNode(Arc);
-
-// add getters setters
-Factory.addGetterSetter(Arc, 'innerRadius', 0, getNumberValidator());
-
-/**
- * get/set innerRadius
- * @name Konva.Arc#innerRadius
- * @method
- * @param {Number} innerRadius
- * @returns {Number}
- * @example
- * // get inner radius
- * var innerRadius = arc.innerRadius();
- *
- * // set inner radius
- * arc.innerRadius(20);
- */
-
-Factory.addGetterSetter(Arc, 'outerRadius', 0, getNumberValidator());
-
-/**
- * get/set outerRadius
- * @name Konva.Arc#outerRadius
- * @method
- * @param {Number} outerRadius
- * @returns {Number}
- * @example
- * // get outer radius
- * var outerRadius = arc.outerRadius();
- *
- * // set outer radius
- * arc.outerRadius(20);
- */
-
-Factory.addGetterSetter(Arc, 'angle', 0, getNumberValidator());
-
-/**
- * get/set angle in degrees
- * @name Konva.Arc#angle
- * @method
- * @param {Number} angle
- * @returns {Number}
- * @example
- * // get angle
- * var angle = arc.angle();
- *
- * // set angle
- * arc.angle(20);
- */
-
-Factory.addGetterSetter(Arc, 'clockwise', false, getBooleanValidator());
-
-/**
- * get/set clockwise flag
- * @name Konva.Arc#clockwise
- * @method
- * @param {Boolean} clockwise
- * @returns {Boolean}
- * @example
- * // get clockwise flag
- * var clockwise = arc.clockwise();
- *
- * // draw arc counter-clockwise
- * arc.clockwise(false);
- *
- * // draw arc clockwise
- * arc.clockwise(true);
- */

package/debug/konva/src/shapes/Arrow.ts

@@ -1,231 +0,0 @@
-import { Factory } from '../Factory.ts';
-import type { LineConfig } from './Line.ts';
-import { Line } from './Line.ts';
-import type { GetSet } from '../types.ts';
-import { getNumberValidator } from '../Validators.ts';
-import { _registerNode } from '../Global.ts';
-import { Path } from './Path.ts';
-import type { Context } from '../Context.ts';
-
-export interface ArrowConfig extends LineConfig {
-  points: number[];
-  tension?: number;
-  closed?: boolean;
-  pointerLength?: number;
-  pointerWidth?: number;
-  pointerAtBeginning?: boolean;
-  pointerAtEnding?: boolean;
-}
-
-/**
- * Arrow constructor
- * @constructor
- * @memberof Konva
- * @augments Konva.Line
- * @param {Object} config
- * @param {Array} config.points Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].
- * @param {Number} [config.tension] Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
- *   The default is 0
- * @param {Number} config.pointerLength Arrow pointer length. Default value is 10.
- * @param {Number} config.pointerWidth Arrow pointer width. Default value is 10.
- * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on beginning position?. Default false.
- * @param {Boolean} config.pointerAtEnding Do we need to draw pointer on ending position?. Default true.
- * @@shapeParams
- * @@nodeParams
- * @example
- * var line = new Konva.Line({
- *   points: [73, 70, 340, 23, 450, 60, 500, 20],
- *   stroke: 'red',
- *   tension: 1,
- *   pointerLength : 10,
- *   pointerWidth : 12
- * });
- */
-export class Arrow extends Line<ArrowConfig> {
-  _sceneFunc(ctx: Context) {
-    super._sceneFunc(ctx);
-    const PI2 = Math.PI * 2;
-    const points = this.points();
-
-    let tp = points;
-    const fromTension = this.tension() !== 0 && points.length > 4;
-    if (fromTension) {
-      tp = this.getTensionPoints();
-    }
-    const length = this.pointerLength();
-
-    const n = points.length;
-
-    let dx, dy;
-    if (fromTension) {
-      const lp = [
-        tp[tp.length - 4],
-        tp[tp.length - 3],
-        tp[tp.length - 2],
-        tp[tp.length - 1],
-        points[n - 2],
-        points[n - 1],
-      ];
-      const lastLength = Path.calcLength(
-        tp[tp.length - 4],
-        tp[tp.length - 3],
-        'C',
-        lp
-      );
-      const previous = Path.getPointOnQuadraticBezier(
-        Math.min(1, 1 - length / lastLength),
-        lp[0],
-        lp[1],
-        lp[2],
-        lp[3],
-        lp[4],
-        lp[5]
-      );
-
-      dx = points[n - 2] - previous.x;
-      dy = points[n - 1] - previous.y;
-    } else {
-      dx = points[n - 2] - points[n - 4];
-      dy = points[n - 1] - points[n - 3];
-    }
-
-    const radians = (Math.atan2(dy, dx) + PI2) % PI2;
-
-    const width = this.pointerWidth();
-
-    if (this.pointerAtEnding()) {
-      ctx.save();
-      ctx.beginPath();
-      ctx.translate(points[n - 2], points[n - 1]);
-      ctx.rotate(radians);
-      ctx.moveTo(0, 0);
-      ctx.lineTo(-length, width / 2);
-      ctx.lineTo(-length, -width / 2);
-      ctx.closePath();
-      ctx.restore();
-      this.__fillStroke(ctx);
-    }
-
-    if (this.pointerAtBeginning()) {
-      ctx.save();
-      ctx.beginPath();
-      ctx.translate(points[0], points[1]);
-      if (fromTension) {
-        dx = (tp[0] + tp[2]) / 2 - points[0];
-        dy = (tp[1] + tp[3]) / 2 - points[1];
-      } else {
-        dx = points[2] - points[0];
-        dy = points[3] - points[1];
-      }
-
-      ctx.rotate((Math.atan2(-dy, -dx) + PI2) % PI2);
-      ctx.moveTo(0, 0);
-      ctx.lineTo(-length, width / 2);
-      ctx.lineTo(-length, -width / 2);
-      ctx.closePath();
-      ctx.restore();
-      this.__fillStroke(ctx);
-    }
-  }
-
-  __fillStroke(ctx: Context) {
-    // here is a tricky part
-    // we need to disable dash for arrow pointers
-    const isDashEnabled = this.dashEnabled();
-    if (isDashEnabled) {
-      // manually disable dash for head
-      // it is better not to use setter here,
-      // because it will trigger attr change event
-      this.attrs.dashEnabled = false;
-      ctx.setLineDash([]);
-    }
-
-    ctx.fillStrokeShape(this);
-
-    // restore old value
-    if (isDashEnabled) {
-      this.attrs.dashEnabled = true;
-    }
-  }
-
-  getSelfRect() {
-    const lineRect = super.getSelfRect();
-    const offset = this.pointerWidth() / 2;
-    return {
-      x: lineRect.x,
-      y: lineRect.y - offset,
-      width: lineRect.width,
-      height: lineRect.height + offset * 2,
-    };
-  }
-
-  pointerLength: GetSet<number, this>;
-  pointerWidth: GetSet<number, this>;
-  pointerAtEnding: GetSet<boolean, this>;
-  pointerAtBeginning: GetSet<boolean, this>;
-}
-
-Arrow.prototype.className = 'Arrow';
-_registerNode(Arrow);
-
-/**
- * get/set pointerLength
- * @name Konva.Arrow#pointerLength
- * @method
- * @param {Number} Length of pointer of arrow. The default is 10.
- * @returns {Number}
- * @example
- * // get length
- * var pointerLength = line.pointerLength();
- *
- * // set length
- * line.pointerLength(15);
- */
-
-Factory.addGetterSetter(Arrow, 'pointerLength', 10, getNumberValidator());
-/**
- * get/set pointerWidth
- * @name Konva.Arrow#pointerWidth
- * @method
- * @param {Number} Width of pointer of arrow.
- *   The default is 10.
- * @returns {Number}
- * @example
- * // get width
- * var pointerWidth = line.pointerWidth();
- *
- * // set width
- * line.pointerWidth(15);
- */
-
-Factory.addGetterSetter(Arrow, 'pointerWidth', 10, getNumberValidator());
-/**
- * get/set pointerAtBeginning
- * @name Konva.Arrow#pointerAtBeginning
- * @method
- * @param {Number} Should pointer displayed at beginning of arrow. The default is false.
- * @returns {Boolean}
- * @example
- * // get value
- * var pointerAtBeginning = line.pointerAtBeginning();
- *
- * // set value
- * line.pointerAtBeginning(true);
- */
-
-Factory.addGetterSetter(Arrow, 'pointerAtBeginning', false);
-/**
- * get/set pointerAtEnding
- * @name Konva.Arrow#pointerAtEnding
- * @method
- * @param {Number} Should pointer displayed at ending of arrow. The default is true.
- * @returns {Boolean}
- * @example
- * // get value
- * var pointerAtEnding = line.pointerAtEnding();
- *
- * // set value
- * line.pointerAtEnding(false);
- */
-
-Factory.addGetterSetter(Arrow, 'pointerAtEnding', true);