fabric 5.3.0-browser → 6.0.0-beta1

package/src/Intersection.ts

@@ -0,0 +1,273 @@
+import { Point } from './Point';
+
+/* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */
+
+export type IntersectionType = 'Intersection' | 'Coincident' | 'Parallel';
+
+/**
+ * **Assuming `T`, `A`, `B` are points on the same line**,
+ * check if `T` is contained in `[A, B]` by comparing the direction of the vectors from `T` to `A` and `B`
+ * @param T
+ * @param A
+ * @param B
+ * @returns true if `T` is contained
+ */
+const isContainedInInterval = (T: Point, A: Point, B: Point) => {
+  const TA = new Point(T).subtract(A);
+  const TB = new Point(T).subtract(B);
+  return (
+    Math.sign(TA.x) !== Math.sign(TB.x) || Math.sign(TA.y) !== Math.sign(TB.y)
+  );
+};
+
+export class Intersection {
+  declare points: Point[];
+
+  declare status?: IntersectionType;
+
+  constructor(status?: IntersectionType) {
+    this.status = status;
+    this.points = [];
+  }
+
+  /**
+   * Used to verify if a point is alredy in the collection
+   * @param {Point} point
+   * @returns {boolean}
+   */
+  private includes(point: Point): boolean {
+    return this.points.some((p) => p.eq(point));
+  }
+
+  /**
+   * Appends points of intersection
+   * @param {...Point[]} points
+   * @return {Intersection} thisArg
+   * @chainable
+   */
+  private append(...points: Point[]): Intersection {
+    this.points = this.points.concat(
+      points.filter((point) => {
+        return !this.includes(point);
+      })
+    );
+    return this;
+  }
+
+  /**
+   * Checks if a line intersects another
+   * @static
+   * @param {Point} a1
+   * @param {Point} a2
+   * @param {Point} b1
+   * @param {Point} b2
+   * @param {boolean} [aInfinite=true] check segment intersection by passing `false`
+   * @param {boolean} [bInfinite=true] check segment intersection by passing `false`
+   * @return {Intersection}
+   */
+  static intersectLineLine(
+    a1: Point,
+    a2: Point,
+    b1: Point,
+    b2: Point,
+    aInfinite = true,
+    bInfinite = true
+  ): Intersection {
+    const b2xb1x = b2.x - b1.x,
+      a1yb1y = a1.y - b1.y,
+      b2yb1y = b2.y - b1.y,
+      a1xb1x = a1.x - b1.x,
+      a2ya1y = a2.y - a1.y,
+      a2xa1x = a2.x - a1.x,
+      uaT = b2xb1x * a1yb1y - b2yb1y * a1xb1x,
+      ubT = a2xa1x * a1yb1y - a2ya1y * a1xb1x,
+      uB = b2yb1y * a2xa1x - b2xb1x * a2ya1y;
+    if (uB !== 0) {
+      const ua = uaT / uB,
+        ub = ubT / uB;
+      if (
+        (aInfinite || (0 <= ua && ua <= 1)) &&
+        (bInfinite || (0 <= ub && ub <= 1))
+      ) {
+        return new Intersection('Intersection').append(
+          new Point(a1.x + ua * a2xa1x, a1.y + ua * a2ya1y)
+        );
+      } else {
+        return new Intersection();
+      }
+    } else {
+      if (uaT === 0 || ubT === 0) {
+        const segmentsCoincide =
+          aInfinite ||
+          bInfinite ||
+          isContainedInInterval(a1, b1, b2) ||
+          isContainedInInterval(a2, b1, b2) ||
+          isContainedInInterval(b1, a1, a2) ||
+          isContainedInInterval(b2, a1, a2);
+        return new Intersection(segmentsCoincide ? 'Coincident' : undefined);
+      } else {
+        return new Intersection('Parallel');
+      }
+    }
+  }
+
+  /**
+   * Checks if a segment intersects a line
+   * @see {@link intersectLineLine} for line intersection
+   * @static
+   * @param {Point} s1 boundary point of segment
+   * @param {Point} s2 other boundary point of segment
+   * @param {Point} l1 point on line
+   * @param {Point} l2 other point on line
+   * @return {Intersection}
+   */
+  static intersectSegmentLine(
+    s1: Point,
+    s2: Point,
+    l1: Point,
+    l2: Point
+  ): Intersection {
+    return Intersection.intersectLineLine(s1, s2, l1, l2, false, true);
+  }
+
+  /**
+   * Checks if a segment intersects another
+   * @see {@link intersectLineLine} for line intersection
+   * @static
+   * @param {Point} a1 boundary point of segment
+   * @param {Point} a2 other boundary point of segment
+   * @param {Point} b1 boundary point of segment
+   * @param {Point} b2 other boundary point of segment
+   * @return {Intersection}
+   */
+  static intersectSegmentSegment(
+    a1: Point,
+    a2: Point,
+    b1: Point,
+    b2: Point
+  ): Intersection {
+    return Intersection.intersectLineLine(a1, a2, b1, b2, false, false);
+  }
+
+  /**
+   * Checks if line intersects polygon
+   *
+   * @todo account for stroke
+   *
+   * @static
+   * @see {@link intersectSegmentPolygon} for segment intersection
+   * @param {Point} a1 point on line
+   * @param {Point} a2 other point on line
+   * @param {Point[]} points polygon points
+   * @param {boolean} [infinite=true] check segment intersection by passing `false`
+   * @return {Intersection}
+   */
+  static intersectLinePolygon(
+    a1: Point,
+    a2: Point,
+    points: Point[],
+    infinite = true
+  ): Intersection {
+    const result = new Intersection();
+    const length = points.length;
+
+    for (let i = 0, b1, b2, inter; i < length; i++) {
+      b1 = points[i];
+      b2 = points[(i + 1) % length];
+      inter = Intersection.intersectLineLine(a1, a2, b1, b2, infinite, false);
+      if (inter.status === 'Coincident') {
+        return inter;
+      }
+      result.append(...inter.points);
+    }
+
+    if (result.points.length > 0) {
+      result.status = 'Intersection';
+    }
+
+    return result;
+  }
+
+  /**
+   * Checks if segment intersects polygon
+   * @static
+   * @see {@link intersectLinePolygon} for line intersection
+   * @param {Point} a1 boundary point of segment
+   * @param {Point} a2 other boundary point of segment
+   * @param {Point[]} points polygon points
+   * @return {Intersection}
+   */
+  static intersectSegmentPolygon(
+    a1: Point,
+    a2: Point,
+    points: Point[]
+  ): Intersection {
+    return Intersection.intersectLinePolygon(a1, a2, points, false);
+  }
+
+  /**
+   * Checks if polygon intersects another polygon
+   *
+   * @todo account for stroke
+   *
+   * @static
+   * @param {Point[]} points1
+   * @param {Point[]} points2
+   * @return {Intersection}
+   */
+  static intersectPolygonPolygon(
+    points1: Point[],
+    points2: Point[]
+  ): Intersection {
+    const result = new Intersection(),
+      length = points1.length;
+    const coincidences = [];
+
+    for (let i = 0; i < length; i++) {
+      const a1 = points1[i],
+        a2 = points1[(i + 1) % length],
+        inter = Intersection.intersectSegmentPolygon(a1, a2, points2);
+      if (inter.status === 'Coincident') {
+        coincidences.push(inter);
+        result.append(a1, a2);
+      } else {
+        result.append(...inter.points);
+      }
+    }
+
+    if (coincidences.length > 0 && coincidences.length === points1.length) {
+      return new Intersection('Coincident');
+    } else if (result.points.length > 0) {
+      result.status = 'Intersection';
+    }
+
+    return result;
+  }
+
+  /**
+   * Checks if polygon intersects rectangle
+   * @static
+   * @see {@link intersectPolygonPolygon} for polygon intersection
+   * @param {Point[]} points polygon points
+   * @param {Point} r1 top left point of rect
+   * @param {Point} r2 bottom right point of rect
+   * @return {Intersection}
+   */
+  static intersectPolygonRectangle(
+    points: Point[],
+    r1: Point,
+    r2: Point
+  ): Intersection {
+    const min = r1.min(r2),
+      max = r1.max(r2),
+      topRight = new Point(max.x, min.y),
+      bottomLeft = new Point(min.x, max.y);
+
+    return Intersection.intersectPolygonPolygon(points, [
+      min,
+      topRight,
+      max,
+      bottomLeft,
+    ]);
+  }
+}

package/src/Observable.ts

@@ -0,0 +1,175 @@
+export type TEventCallback<T = any> = (options: T) => any;
+
+type EventRegistryObject<
+  K extends string | number | symbol = string,
+  E = any
+> = Record<K, TEventCallback<E>>;
+
+/**
+ * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events}
+ * @see {@link http://fabricjs.com/events|Events demo}
+ */
+export class Observable<EventSpec> {
+  private __eventListeners: Record<keyof EventSpec, TEventCallback[]> =
+    {} as Record<keyof EventSpec, TEventCallback[]>;
+
+  /**
+   * Observes specified event
+   * @alias on
+   * @param {string} eventName Event name (eg. 'after:render')
+   * @param {EventRegistryObject} handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
+   * @param {Function} handler Function that receives a notification when an event of the specified type occurs
+   * @return {Function} disposer
+   */
+  on<K extends keyof EventSpec, E extends EventSpec[K]>(
+    eventName: K,
+    handler: TEventCallback<E>
+  ): VoidFunction;
+  on<K extends string, E>(
+    eventName: K,
+    handler: TEventCallback<E>
+  ): VoidFunction;
+  on<K extends keyof EventSpec, E extends EventSpec[K]>(
+    handlers: EventRegistryObject<K, E>
+  ): VoidFunction;
+  on<K extends keyof EventSpec, E extends EventSpec[K]>(
+    arg0: K | EventRegistryObject<K, E>,
+    handler?: TEventCallback<E>
+  ): VoidFunction {
+    if (!this.__eventListeners) {
+      this.__eventListeners = {} as Record<keyof EventSpec, TEventCallback[]>;
+    }
+    if (typeof arg0 === 'object') {
+      // one object with key/value pairs was passed
+      for (const eventName in arg0) {
+        this.on(eventName as K, arg0[eventName]);
+      }
+      return () => this.off(arg0);
+    } else if (handler) {
+      const eventName = arg0;
+      if (!this.__eventListeners[eventName]) {
+        this.__eventListeners[eventName] = [];
+      }
+      this.__eventListeners[eventName].push(handler);
+      return () => this.off(eventName, handler);
+    } else {
+      // noop
+      return () => false;
+    }
+  }
+
+  /**
+   * Observes specified event **once**
+   * @alias once
+   * @param {string} eventName Event name (eg. 'after:render')
+   * @param {EventRegistryObject} handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
+   * @param {Function} handler Function that receives a notification when an event of the specified type occurs
+   * @return {Function} disposer
+   */
+  once<K extends keyof EventSpec, E extends EventSpec[K]>(
+    eventName: K,
+    handler: TEventCallback<E>
+  ): VoidFunction;
+  once<K extends string, E>(
+    eventName: K,
+    handler: TEventCallback<E>
+  ): VoidFunction;
+  once<K extends keyof EventSpec, E extends EventSpec[K]>(
+    handlers: EventRegistryObject<K, E>
+  ): VoidFunction;
+  once<K extends keyof EventSpec, E extends EventSpec[K]>(
+    arg0: K | EventRegistryObject<K, E>,
+    handler?: TEventCallback<E>
+  ): VoidFunction {
+    if (typeof arg0 === 'object') {
+      // one object with key/value pairs was passed
+      const disposers: VoidFunction[] = [];
+      for (const eventName in arg0) {
+        disposers.push(this.once(eventName as K, arg0[eventName]));
+      }
+      return () => disposers.forEach((d) => d());
+    } else if (handler) {
+      const disposer = this.on<K, E>(arg0, (...args) => {
+        handler(...args);
+        disposer();
+      });
+      return disposer;
+    } else {
+      // noop
+      return () => false;
+    }
+  }
+
+  /**
+   * @private
+   * @param {string} eventName
+   * @param {Function} [handler]
+   */
+  private _removeEventListener<K extends keyof EventSpec>(
+    eventName: K,
+    handler?: TEventCallback
+  ) {
+    if (!this.__eventListeners[eventName]) {
+      return;
+    }
+
+    if (handler) {
+      const eventListener = this.__eventListeners[eventName];
+      const index = eventListener.indexOf(handler);
+      index > -1 && eventListener.splice(index, 1);
+    } else {
+      this.__eventListeners[eventName] = [];
+    }
+  }
+
+  /**
+   * Stops event observing for a particular event handler. Calling this method
+   * without arguments removes all handlers for all events
+   * @param {string} eventName Event name (eg. 'after:render')
+   * @param {EventRegistryObject} handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
+   * @param {Function} handler Function to be deleted from EventListeners
+   */
+  off<K extends keyof EventSpec>(eventName: K, handler: TEventCallback): void;
+  off(handlers: EventRegistryObject): void;
+  off<K extends keyof EventSpec>(
+    arg0?: K | EventRegistryObject,
+    handler?: TEventCallback
+  ) {
+    if (!this.__eventListeners) {
+      return;
+    }
+
+    // remove all key/value pairs (event name -> event handler)
+    if (typeof arg0 === 'undefined') {
+      for (const eventName in this.__eventListeners) {
+        this._removeEventListener(eventName);
+      }
+    }
+    // one object with key/value pairs was passed
+    else if (typeof arg0 === 'object') {
+      for (const eventName in arg0) {
+        this._removeEventListener(eventName as K, arg0[eventName]);
+      }
+    } else {
+      this._removeEventListener(arg0, handler);
+    }
+  }
+
+  /**
+   * Fires event with an optional options object
+   * @param {String} eventName Event name to fire
+   * @param {Object} [options] Options object
+   */
+  fire<K extends keyof EventSpec>(eventName: K, options?: EventSpec[K]) {
+    if (!this.__eventListeners) {
+      return;
+    }
+
+    const listenersForEvent = this.__eventListeners[eventName]?.concat();
+    if (listenersForEvent) {
+      for (let i = 0; i < listenersForEvent.length; i++) {
+        listenersForEvent[i].call(this, options || {});
+      }
+    }
+  }
+}

package/src/Pattern.ts

@@ -0,0 +1,211 @@
+import { config } from './config';
+import { TCrossOrigin, TMat2D, TSize } from './typedefs';
+import { ifNaN } from './util/internals';
+import { uid } from './util/internals/uid';
+import { loadImage } from './util/misc/objectEnlive';
+import { pick } from './util/misc/pick';
+import { toFixed } from './util/misc/toFixed';
+import { classRegistry } from './util/class_registry';
+
+export type TPatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
+
+type TExportedKeys =
+  | 'crossOrigin'
+  | 'offsetX'
+  | 'offsetY'
+  | 'patternTransform'
+  | 'repeat'
+  | 'source';
+
+export type TPatternOptions = Partial<Pick<Pattern, TExportedKeys>>;
+
+export type TPatternSerialized = TPatternOptions & {
+  source: string;
+};
+
+export type TPatternHydrationOptions = {
+  /**
+   * handle aborting
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+   */
+  signal?: AbortSignal;
+};
+
+type TImageSource = { source: HTMLImageElement };
+type TCanvasSource = { source: HTMLCanvasElement };
+
+/**
+ * @see {@link http://fabricjs.com/patterns demo}
+ * @see {@link http://fabricjs.com/dynamic-patterns demo}
+ */
+export class Pattern {
+  type = 'pattern';
+
+  /**
+   * @type TPatternRepeat
+   * @defaults
+   */
+  repeat: TPatternRepeat = 'repeat';
+
+  /**
+   * Pattern horizontal offset from object's left/top corner
+   * @type Number
+   * @default
+   */
+  offsetX = 0;
+
+  /**
+   * Pattern vertical offset from object's left/top corner
+   * @type Number
+   * @default
+   */
+  offsetY = 0;
+
+  /**
+   * @type TCrossOrigin
+   * @default
+   */
+  crossOrigin: TCrossOrigin = '';
+
+  /**
+   * transform matrix to change the pattern, imported from svgs.
+   * @todo verify if using the identity matrix as default makes the rest of the code more easy
+   * @type Array
+   * @default
+   */
+  patternTransform: TMat2D | null = null;
+
+  /**
+   * The actual pixel source of the pattern
+   */
+  declare source: CanvasImageSource;
+
+  /**
+   * If true, this object will not be exported during the serialization of a canvas
+   * @type boolean
+   */
+  declare excludeFromExport?: boolean;
+
+  /**
+   * ID used for SVG export functionalities
+   * @type number
+   */
+  declare readonly id: number;
+
+  /**
+   * Constructor
+   * @param {Object} [options] Options object
+   * @param {option.source} [source] the pattern source, eventually empty or a drawable
+   */
+  constructor(options: TPatternOptions = {}) {
+    this.id = uid();
+    Object.assign(this, options);
+  }
+
+  /**
+   * @returns true if {@link source} is an <img> element
+   */
+  isImageSource(): this is TImageSource {
+    return (
+      !!this.source && typeof (this.source as HTMLImageElement).src === 'string'
+    );
+  }
+
+  /**
+   * @returns true if {@link source} is a <canvas> element
+   */
+  isCanvasSource(): this is TCanvasSource {
+    return !!this.source && !!(this.source as HTMLCanvasElement).toDataURL;
+  }
+
+  sourceToString(): string {
+    return this.isImageSource()
+      ? this.source.src
+      : this.isCanvasSource()
+      ? this.source.toDataURL()
+      : '';
+  }
+
+  /**
+   * Returns an instance of CanvasPattern
+   * @param {CanvasRenderingContext2D} ctx Context to create pattern
+   * @return {CanvasPattern}
+   */
+  toLive(ctx: CanvasRenderingContext2D): CanvasPattern | null {
+    if (
+      // if the image failed to load, return, and allow rest to continue loading
+      !this.source ||
+      // if an image
+      (this.isImageSource() &&
+        (!this.source.complete ||
+          this.source.naturalWidth === 0 ||
+          this.source.naturalHeight === 0))
+    ) {
+      return null;
+    }
+
+    return ctx.createPattern(this.source, this.repeat)!;
+  }
+
+  /**
+   * Returns object representation of a pattern
+   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+   * @return {object} Object representation of a pattern instance
+   */
+  toObject(propertiesToInclude: string[] = []): Record<string, any> {
+    const { repeat, crossOrigin } = this;
+    return {
+      ...pick(this, propertiesToInclude as (keyof this)[]),
+      type: 'pattern',
+      source: this.sourceToString(),
+      repeat,
+      crossOrigin,
+      offsetX: toFixed(this.offsetX, config.NUM_FRACTION_DIGITS),
+      offsetY: toFixed(this.offsetY, config.NUM_FRACTION_DIGITS),
+      patternTransform: this.patternTransform
+        ? [...this.patternTransform]
+        : null,
+    };
+  }
+
+  /* _TO_SVG_START_ */
+  /**
+   * Returns SVG representation of a pattern
+   */
+  toSVG({ width, height }: TSize): string {
+    const { source: patternSource, repeat, id } = this,
+      patternOffsetX = ifNaN(this.offsetX / width, 0),
+      patternOffsetY = ifNaN(this.offsetY / height, 0),
+      patternWidth =
+        repeat === 'repeat-y' || repeat === 'no-repeat'
+          ? 1 + Math.abs(patternOffsetX || 0)
+          : ifNaN((patternSource.width as number) / width, 0),
+      patternHeight =
+        repeat === 'repeat-x' || repeat === 'no-repeat'
+          ? 1 + Math.abs(patternOffsetY || 0)
+          : ifNaN((patternSource.height as number) / height, 0);
+
+    return [
+      `<pattern id="SVGID_${id}" x="${patternOffsetX}" y="${patternOffsetY}" width="${patternWidth}" height="${patternHeight}">`,
+      `<image x="0" y="0" width="${patternSource.width}" height="${
+        patternSource.height
+      }" xlink:href="${this.sourceToString()}"></image>`,
+      `</pattern>`,
+      '',
+    ].join('\n');
+  }
+  /* _TO_SVG_END_ */
+
+  static async fromObject(
+    { source, ...serialized }: TPatternSerialized,
+    options: TPatternHydrationOptions
+  ): Promise<Pattern> {
+    const img = await loadImage(source, {
+      ...options,
+      crossOrigin: serialized.crossOrigin,
+    });
+    return new this({ ...serialized, source: img });
+  }
+}
+
+classRegistry.setClass(Pattern, 'pattern');