fabric 5.3.0 → 6.0.0-beta10

package/src/Point.ts

@@ -0,0 +1,388 @@
+import type { TMat2D, TRadian } from './typedefs';
+import { cos } from './util/misc/cos';
+import { sin } from './util/misc/sin';
+
+export interface XY {
+  x: number;
+  y: number;
+}
+
+/**
+ * Adaptation of work of Kevin Lindsey(kevin@kevlindev.com)
+ */
+export class Point implements XY {
+  declare x: number;
+
+  declare y: number;
+
+  constructor();
+  constructor(x: number, y: number);
+  constructor(point: XY);
+  constructor(arg0: number | XY = 0, y = 0) {
+    if (typeof arg0 === 'object') {
+      this.x = arg0.x;
+      this.y = arg0.y;
+    } else {
+      this.x = arg0;
+      this.y = y;
+    }
+  }
+
+  /**
+   * Adds another point to this one and returns another one
+   * @param {XY} that
+   * @return {Point} new Point instance with added values
+   */
+  add(that: XY): Point {
+    return new Point(this.x + that.x, this.y + that.y);
+  }
+
+  /**
+   * Adds another point to this one
+   * @param {XY} that
+   * @return {Point} thisArg
+   * @chainable
+   * @deprecated
+   */
+  addEquals(that: XY): Point {
+    this.x += that.x;
+    this.y += that.y;
+    return this;
+  }
+
+  /**
+   * Adds value to this point and returns a new one
+   * @param {Number} scalar
+   * @return {Point} new Point with added value
+   */
+  scalarAdd(scalar: number): Point {
+    return new Point(this.x + scalar, this.y + scalar);
+  }
+
+  /**
+   * Adds value to this point
+   * @param {Number} scalar
+   * @return {Point} thisArg
+   * @chainable
+   * @deprecated
+   */
+  scalarAddEquals(scalar: number): Point {
+    this.x += scalar;
+    this.y += scalar;
+    return this;
+  }
+
+  /**
+   * Subtracts another point from this point and returns a new one
+   * @param {XY} that
+   * @return {Point} new Point object with subtracted values
+   */
+  subtract(that: XY): Point {
+    return new Point(this.x - that.x, this.y - that.y);
+  }
+
+  /**
+   * Subtracts another point from this point
+   * @param {XY} that
+   * @return {Point} thisArg
+   * @chainable
+   * @deprecated
+   */
+  subtractEquals(that: XY): Point {
+    this.x -= that.x;
+    this.y -= that.y;
+    return this;
+  }
+
+  /**
+   * Subtracts value from this point and returns a new one
+   * @param {Number} scalar
+   * @return {Point}
+   */
+  scalarSubtract(scalar: number): Point {
+    return new Point(this.x - scalar, this.y - scalar);
+  }
+
+  /**
+   * Subtracts value from this point
+   * @param {Number} scalar
+   * @return {Point} thisArg
+   * @chainable
+   * @deprecated
+   */
+  scalarSubtractEquals(scalar: number): Point {
+    this.x -= scalar;
+    this.y -= scalar;
+    return this;
+  }
+
+  /**
+   * Multiplies this point by another value and returns a new one
+   * @param {XY} that
+   * @return {Point}
+   */
+  multiply(that: XY): Point {
+    return new Point(this.x * that.x, this.y * that.y);
+  }
+
+  /**
+   * Multiplies this point by a value and returns a new one
+   * @param {Number} scalar
+   * @return {Point}
+   */
+  scalarMultiply(scalar: number): Point {
+    return new Point(this.x * scalar, this.y * scalar);
+  }
+
+  /**
+   * Multiplies this point by a value
+   * @param {Number} scalar
+   * @return {Point} thisArg
+   * @chainable
+   * @deprecated
+   */
+  scalarMultiplyEquals(scalar: number): Point {
+    this.x *= scalar;
+    this.y *= scalar;
+    return this;
+  }
+
+  /**
+   * Divides this point by another and returns a new one
+   * @param {XY} that
+   * @return {Point}
+   */
+  divide(that: XY): Point {
+    return new Point(this.x / that.x, this.y / that.y);
+  }
+
+  /**
+   * Divides this point by a value and returns a new one
+   * @param {Number} scalar
+   * @return {Point}
+   */
+  scalarDivide(scalar: number): Point {
+    return new Point(this.x / scalar, this.y / scalar);
+  }
+
+  /**
+   * Divides this point by a value
+   * @param {Number} scalar
+   * @return {Point} thisArg
+   * @chainable
+   * @deprecated
+   */
+  scalarDivideEquals(scalar: number): Point {
+    this.x /= scalar;
+    this.y /= scalar;
+    return this;
+  }
+
+  /**
+   * Returns true if this point is equal to another one
+   * @param {XY} that
+   * @return {Boolean}
+   */
+  eq(that: XY): boolean {
+    return this.x === that.x && this.y === that.y;
+  }
+
+  /**
+   * Returns true if this point is less than another one
+   * @param {XY} that
+   * @return {Boolean}
+   */
+  lt(that: XY): boolean {
+    return this.x < that.x && this.y < that.y;
+  }
+
+  /**
+   * Returns true if this point is less than or equal to another one
+   * @param {XY} that
+   * @return {Boolean}
+   */
+  lte(that: XY): boolean {
+    return this.x <= that.x && this.y <= that.y;
+  }
+
+  /**
+
+   * Returns true if this point is greater another one
+   * @param {XY} that
+   * @return {Boolean}
+   */
+  gt(that: XY): boolean {
+    return this.x > that.x && this.y > that.y;
+  }
+
+  /**
+   * Returns true if this point is greater than or equal to another one
+   * @param {XY} that
+   * @return {Boolean}
+   */
+  gte(that: XY): boolean {
+    return this.x >= that.x && this.y >= that.y;
+  }
+
+  /**
+   * Returns new point which is the result of linear interpolation with this one and another one
+   * @param {XY} that
+   * @param {Number} t , position of interpolation, between 0 and 1 default 0.5
+   * @return {Point}
+   */
+  lerp(that: XY, t = 0.5): Point {
+    t = Math.max(Math.min(1, t), 0);
+    return new Point(
+      this.x + (that.x - this.x) * t,
+      this.y + (that.y - this.y) * t
+    );
+  }
+
+  /**
+   * Returns distance from this point and another one
+   * @param {XY} that
+   * @return {Number}
+   */
+  distanceFrom(that: XY): number {
+    const dx = this.x - that.x,
+      dy = this.y - that.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  /**
+   * Returns the point between this point and another one
+   * @param {XY} that
+   * @return {Point}
+   */
+  midPointFrom(that: XY): Point {
+    return this.lerp(that);
+  }
+
+  /**
+   * Returns a new point which is the min of this and another one
+   * @param {XY} that
+   * @return {Point}
+   */
+  min(that: XY): Point {
+    return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y));
+  }
+
+  /**
+   * Returns a new point which is the max of this and another one
+   * @param {XY} that
+   * @return {Point}
+   */
+  max(that: XY): Point {
+    return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y));
+  }
+
+  /**
+   * Returns string representation of this point
+   * @return {String}
+   */
+  toString(): string {
+    return `${this.x},${this.y}`;
+  }
+
+  /**
+   * Sets x/y of this point
+   * @param {Number} x
+   * @param {Number} y
+   * @chainable
+   */
+  setXY(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+    return this;
+  }
+
+  /**
+   * Sets x of this point
+   * @param {Number} x
+   * @chainable
+   */
+  setX(x: number) {
+    this.x = x;
+    return this;
+  }
+
+  /**
+   * Sets y of this point
+   * @param {Number} y
+   * @chainable
+   */
+  setY(y: number) {
+    this.y = y;
+    return this;
+  }
+
+  /**
+   * Sets x/y of this point from another point
+   * @param {XY} that
+   * @chainable
+   */
+  setFromPoint(that: XY) {
+    this.x = that.x;
+    this.y = that.y;
+    return this;
+  }
+
+  /**
+   * Swaps x/y of this point and another point
+   * @param {XY} that
+   */
+  swap(that: XY) {
+    const x = this.x,
+      y = this.y;
+    this.x = that.x;
+    this.y = that.y;
+    that.x = x;
+    that.y = y;
+  }
+
+  /**
+   * return a cloned instance of the point
+   * @return {Point}
+   */
+  clone(): Point {
+    return new Point(this.x, this.y);
+  }
+
+  /**
+   * Rotates `point` around `origin` with `radians`
+   * @static
+   * @memberOf fabric.util
+   * @param {XY} origin The origin of the rotation
+   * @param {TRadian} radians The radians of the angle for the rotation
+   * @return {Point} The new rotated point
+   */
+  rotate(radians: TRadian, origin: XY = originZero): Point {
+    // TODO benchmark and verify the add and subtract how much cost
+    // and then in case early return if no origin is passed
+    const sinus = sin(radians),
+      cosinus = cos(radians);
+    const p = this.subtract(origin);
+    const rotated = new Point(
+      p.x * cosinus - p.y * sinus,
+      p.x * sinus + p.y * cosinus
+    );
+    return rotated.add(origin);
+  }
+
+  /**
+   * Apply transform t to point p
+   * @static
+   * @memberOf fabric.util
+   * @param  {TMat2D} t The transform
+   * @param  {Boolean} [ignoreOffset] Indicates that the offset should not be applied
+   * @return {Point} The transformed point
+   */
+  transform(t: TMat2D, ignoreOffset = false): Point {
+    return new Point(
+      t[0] * this.x + t[2] * this.y + (ignoreOffset ? 0 : t[4]),
+      t[1] * this.x + t[3] * this.y + (ignoreOffset ? 0 : t[5])
+    );
+  }
+}
+
+const originZero = new Point(0, 0);

package/src/Shadow.ts

@@ -0,0 +1,214 @@
+import { Color } from './color/Color';
+import { config } from './config';
+import { Point } from './Point';
+import type { FabricObject } from './shapes/Object/FabricObject';
+import type { TClassProperties } from './typedefs';
+import { uid } from './util/internals/uid';
+import { pickBy } from './util/misc/pick';
+import { degreesToRadians } from './util/misc/radiansDegreesConversion';
+import { toFixed } from './util/misc/toFixed';
+import { rotateVector } from './util/misc/vectors';
+
+export const shadowDefaultValues: Partial<TClassProperties<Shadow>> = {
+  color: 'rgb(0,0,0)',
+  blur: 0,
+  offsetX: 0,
+  offsetY: 0,
+  affectStroke: false,
+  includeDefaultValues: true,
+  nonScaling: false,
+};
+
+export type SerializedShadowOptions = {
+  color: string;
+  blur: number;
+  offsetX: number;
+  offsetY: number;
+  affectStroke: boolean;
+  nonScaling: boolean;
+};
+
+export class Shadow {
+  /**
+   * Shadow color
+   * @type String
+   * @default
+   */
+  declare color: string;
+
+  /**
+   * Shadow blur
+   * @type Number
+   */
+  declare blur: number;
+
+  /**
+   * Shadow horizontal offset
+   * @type Number
+   * @default
+   */
+  declare offsetX: number;
+
+  /**
+   * Shadow vertical offset
+   * @type Number
+   * @default
+   */
+  declare offsetY: number;
+
+  /**
+   * Whether the shadow should affect stroke operations
+   * @type Boolean
+   * @default
+   */
+  declare affectStroke: boolean;
+
+  /**
+   * Indicates whether toObject should include default values
+   * @type Boolean
+   * @default
+   */
+  declare includeDefaultValues: boolean;
+
+  /**
+   * When `false`, the shadow will scale with the object.
+   * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale.
+   * default to false
+   * @type Boolean
+   * @default
+   */
+  declare nonScaling: boolean;
+
+  declare id: number;
+
+  static ownDefaults = shadowDefaultValues;
+  /**
+   * @see {@link http://fabricjs.com/shadows|Shadow demo}
+   * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px")
+   */
+  constructor(options: Partial<TClassProperties<Shadow>>);
+  constructor(svgAttribute: string);
+  constructor(arg0: string | Partial<TClassProperties<Shadow>>) {
+    const options: Partial<TClassProperties<Shadow>> =
+      typeof arg0 === 'string' ? Shadow.parseShadow(arg0) : arg0;
+    Object.assign(this, (this.constructor as typeof Shadow).ownDefaults);
+    for (const prop in options) {
+      // @ts-expect-error for loops are so messy in TS
+      this[prop] = options[prop];
+    }
+
+    this.id = uid();
+  }
+
+  /**
+   * @param {String} value Shadow value to parse
+   * @return {Object} Shadow object with color, offsetX, offsetY and blur
+   */
+  static parseShadow(value: string) {
+    const shadowStr = value.trim(),
+      [__, offsetX = 0, offsetY = 0, blur = 0] = (
+        Shadow.reOffsetsAndBlur.exec(shadowStr) || []
+      ).map((value) => parseFloat(value) || 0),
+      color = (
+        shadowStr.replace(Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'
+      ).trim();
+
+    return {
+      color,
+      offsetX,
+      offsetY,
+      blur,
+    };
+  }
+
+  /**
+   * Returns a string representation of an instance
+   * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow
+   * @return {String} Returns CSS3 text-shadow declaration
+   */
+  toString() {
+    return [this.offsetX, this.offsetY, this.blur, this.color].join('px ');
+  }
+
+  /**
+   * Returns SVG representation of a shadow
+   * @param {FabricObject} object
+   * @return {String} SVG representation of a shadow
+   */
+  toSVG(object: FabricObject) {
+    const offset = rotateVector(
+        new Point(this.offsetX, this.offsetY),
+        degreesToRadians(-object.angle)
+      ),
+      BLUR_BOX = 20,
+      color = new Color(this.color);
+    let fBoxX = 40,
+      fBoxY = 40;
+
+    if (object.width && object.height) {
+      //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion
+      // we add some extra space to filter box to contain the blur ( 20 )
+      fBoxX =
+        toFixed(
+          (Math.abs(offset.x) + this.blur) / object.width,
+          config.NUM_FRACTION_DIGITS
+        ) *
+          100 +
+        BLUR_BOX;
+      fBoxY =
+        toFixed(
+          (Math.abs(offset.y) + this.blur) / object.height,
+          config.NUM_FRACTION_DIGITS
+        ) *
+          100 +
+        BLUR_BOX;
+    }
+    if (object.flipX) {
+      offset.x *= -1;
+    }
+    if (object.flipY) {
+      offset.y *= -1;
+    }
+
+    return `<filter id="SVGID_${this.id}" y="-${fBoxY}%" height="${
+      100 + 2 * fBoxY
+    }%" x="-${fBoxX}%" width="${
+      100 + 2 * fBoxX
+    }%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="${toFixed(
+      this.blur ? this.blur / 2 : 0,
+      config.NUM_FRACTION_DIGITS
+    )}"></feGaussianBlur>\n\t<feOffset dx="${toFixed(
+      offset.x,
+      config.NUM_FRACTION_DIGITS
+    )}" dy="${toFixed(
+      offset.y,
+      config.NUM_FRACTION_DIGITS
+    )}" result="oBlur" ></feOffset>\n\t<feFlood flood-color="${color.toRgb()}" flood-opacity="${color.getAlpha()}"/>\n\t<feComposite in2="oBlur" operator="in" />\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n`;
+  }
+
+  /**
+   * Returns object representation of a shadow
+   * @return {Object} Object representation of a shadow instance
+   */
+  toObject() {
+    const data: SerializedShadowOptions = {
+      color: this.color,
+      blur: this.blur,
+      offsetX: this.offsetX,
+      offsetY: this.offsetY,
+      affectStroke: this.affectStroke,
+      nonScaling: this.nonScaling,
+    };
+    const defaults = Shadow.ownDefaults;
+    return !this.includeDefaultValues
+      ? pickBy(data, (value, key) => value !== defaults[key])
+      : data;
+  }
+
+  /**
+   * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px")
+   */
+  // eslint-disable-next-line max-len
+  static reOffsetsAndBlur =
+    /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/;
+}