fabric 7.4.0 → 7.5.0-beta.1

package/src/Intersection.ts

@@ -1,324 +0,0 @@
-import { Point } from './Point';
-import { createVector } from './util/misc/vectors';
-
-/* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */
-
-export type IntersectionType = 'Intersection' | 'Coincident' | 'Parallel';
-
-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
-   */
-  private append(...points: Point[]): Intersection {
-    this.points = this.points.concat(
-      points.filter((point) => {
-        return !this.includes(point);
-      }),
-    );
-    return this;
-  }
-
-  /**
-   * check if point T is on the segment or line defined between A and B
-   *
-   * @param {Point} T the point we are checking for
-   * @param {Point} A one extremity of the segment
-   * @param {Point} B the other extremity of the segment
-   * @param [infinite] if true checks if `T` is on the line defined by `A` and `B`
-   * @returns true if `T` is contained
-   */
-  static isPointContained(T: Point, A: Point, B: Point, infinite = false) {
-    if (A.eq(B)) {
-      // Edge case: the segment is a point, we check for coincidence,
-      // infinite param has no meaning because there are infinite lines to consider
-      return T.eq(A);
-    } else if (A.x === B.x) {
-      // Edge case: horizontal line.
-      // we first check if T.x has the same value, and then if T.y is contained between A.y and B.y
-      return (
-        T.x === A.x &&
-        (infinite || (T.y >= Math.min(A.y, B.y) && T.y <= Math.max(A.y, B.y)))
-      );
-    } else if (A.y === B.y) {
-      // Edge case: vertical line.
-      // we first check if T.y has the same value, and then if T.x is contained between A.x and B.x
-      return (
-        T.y === A.y &&
-        (infinite || (T.x >= Math.min(A.x, B.x) && T.x <= Math.max(A.x, B.x)))
-      );
-    } else {
-      // Generic case: sloped line.
-      // we check that AT has the same slope as AB
-      // for the segment case we need both the vectors to have the same direction and for AT to be lte AB in size
-      // for the infinite case we check the absolute value of the slope, since direction is meaningless
-      const AB = createVector(A, B);
-      const AT = createVector(A, T);
-      const s = AT.divide(AB);
-      return infinite
-        ? Math.abs(s.x) === Math.abs(s.y)
-        : s.x === s.y && s.x >= 0 && s.x <= 1;
-    }
-  }
-
-  /**
-   * Use the ray casting algorithm to determine if point is in the polygon defined by points
-   * @see https://en.wikipedia.org/wiki/Point_in_polygon
-   * @param point
-   * @param points polygon points
-   * @returns
-   */
-  static isPointInPolygon(point: Point, points: Point[]) {
-    const other = new Point(point).setX(
-      Math.min(point.x - 1, ...points.map((p) => p.x)),
-    );
-    let hits = 0;
-    for (let index = 0; index < points.length; index++) {
-      const inter = this.intersectSegmentSegment(
-        // polygon side
-        points[index],
-        points[(index + 1) % points.length],
-        // ray
-        point,
-        other,
-      );
-      if (inter.includes(point)) {
-        // point is on the polygon side
-        return true;
-      }
-      hits += Number(inter.status === 'Intersection');
-    }
-    return hits % 2 === 1;
-  }
-
-  /**
-   * Checks if a line intersects another
-   * @see {@link https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection line intersection}
-   * @see {@link https://en.wikipedia.org/wiki/Cramer%27s_rule Cramer's rule}
-   * @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 a2xa1x = a2.x - a1.x,
-      a2ya1y = a2.y - a1.y,
-      b2xb1x = b2.x - b1.x,
-      b2yb1y = b2.y - b1.y,
-      a1xb1x = a1.x - b1.x,
-      a1yb1y = a1.y - b1.y,
-      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 ||
-          Intersection.isPointContained(a1, b1, b2) ||
-          Intersection.isPointContained(a2, b1, b2) ||
-          Intersection.isPointContained(b1, a1, a2) ||
-          Intersection.isPointContained(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
-   * @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
-   * @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
-   *
-   * @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
-   * @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
-   *
-   * @param {Point[]} points1
-   * @param {Point[]} points2
-   * @return {Intersection}
-   */
-  static intersectPolygonPolygon(
-    points1: Point[],
-    points2: Point[],
-  ): Intersection {
-    const result = new Intersection(),
-      length = points1.length;
-    const coincidences: Intersection[] = [];
-
-    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
-   * @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/LayoutManager/ActiveSelectionLayoutManager.spec.ts

@@ -1,189 +0,0 @@
-import type { TModificationEvents } from '../EventTypeDefs';
-import { ActiveSelection } from '../shapes/ActiveSelection';
-import { Group } from '../shapes/Group';
-import { FabricObject } from '../shapes/Object/FabricObject';
-import { ActiveSelectionLayoutManager } from './ActiveSelectionLayoutManager';
-
-import { describe, expect, it, vi } from 'vitest';
-
-describe('ActiveSelectionLayoutManager', () => {
-  describe('onBeforeLayout', () => {
-    describe('triggers', () => {
-      const triggers: ('modified' | TModificationEvents | 'changed')[] = [
-        'modified',
-        'moving',
-        'resizing',
-        'rotating',
-        'scaling',
-        'skewing',
-        'changed',
-        'modifyPoly',
-        'modifyPath',
-      ];
-
-      it('should subscribe activeSelection that contains object', () => {
-        const manager = new ActiveSelectionLayoutManager();
-        const object = new FabricObject();
-        new Group([object], {
-          interactive: true,
-          subTargetCheck: true,
-        });
-        const as = new ActiveSelection([object], { layoutManager: manager });
-        const objectOn = vi.spyOn(object, 'on');
-        const objectOff = vi.spyOn(object, 'off');
-        const asOn = vi.spyOn(as, 'on');
-        manager.subscribeTargets({
-          targets: [object],
-          target: as,
-        });
-        expect(objectOn).not.toHaveBeenCalled();
-        expect(objectOff).not.toHaveBeenCalled();
-        expect(asOn).toHaveBeenCalledTimes(triggers.length);
-        expect(objectOff).not.toHaveBeenCalled();
-      });
-
-      it('a subscribed activeSelection should trigger layout on the object parent once per parent', () => {
-        const object = new FabricObject();
-        const object2 = new FabricObject();
-        const object3 = new FabricObject();
-        const object4 = new FabricObject();
-        const group = new Group([object, object2], {
-          interactive: true,
-          subTargetCheck: true,
-        });
-        const group2 = new Group([object3, object4], {
-          interactive: true,
-          subTargetCheck: true,
-        });
-        const as = new ActiveSelection([object, object2, object3, object4]);
-        const asPerformLayout = vi.spyOn(as.layoutManager, 'performLayout');
-        const groupPerformLayout = vi.spyOn(
-          group.layoutManager,
-          'performLayout',
-        );
-        const groupPerformLayout2 = vi.spyOn(
-          group2.layoutManager,
-          'performLayout',
-        );
-        groupPerformLayout.mockClear();
-        groupPerformLayout2.mockClear();
-        asPerformLayout.mockClear();
-        // group have registered the AS
-        expect(group.layoutManager['_subscriptions'].get(as)).toBeDefined();
-        expect(group2.layoutManager['_subscriptions'].get(as)).toBeDefined();
-        // the AS has registered nothing
-        expect(as.layoutManager['_subscriptions'].size).toBe(0);
-
-        const event = { foo: 'bar' };
-        triggers.forEach((trigger) => as.fire(trigger, event));
-        // the as does not need to perform a layout and indeed is not called
-        expect(asPerformLayout).not.toHaveBeenCalled();
-        expect(groupPerformLayout.mock.calls).toMatchObject([
-          [
-            {
-              e: event,
-              target: group,
-              trigger: 'modified',
-              type: 'object_modified',
-            },
-          ],
-          ...triggers.slice(1).map((trigger) => [
-            {
-              e: event,
-              target: group,
-              trigger,
-              type: 'object_modifying',
-            },
-          ]),
-        ]);
-        expect(groupPerformLayout2.mock.calls).toMatchObject([
-          [
-            {
-              e: event,
-              target: group2,
-              trigger: 'modified',
-              type: 'object_modified',
-            },
-          ],
-          ...triggers.slice(1).map((trigger) => [
-            {
-              e: event,
-              target: group2,
-              trigger,
-              type: 'object_modifying',
-            },
-          ]),
-        ]);
-        expect(groupPerformLayout).toHaveBeenCalledTimes(triggers.length);
-        expect(groupPerformLayout2).toHaveBeenCalledTimes(triggers.length);
-        // we remove a single object, but both group and group2 have multiple object in the as
-        // so with this removal nothing changes.
-        as.remove(object);
-        groupPerformLayout.mockClear();
-        groupPerformLayout2.mockClear();
-        asPerformLayout.mockClear();
-
-        triggers.forEach((trigger) => as.fire(trigger, event));
-        expect(asPerformLayout).not.toHaveBeenCalled();
-        expect(groupPerformLayout.mock.calls).toMatchObject([
-          [
-            {
-              e: event,
-              target: group,
-              trigger: 'modified',
-              type: 'object_modified',
-            },
-          ],
-          ...triggers.slice(1).map((trigger) => [
-            {
-              e: event,
-              target: group,
-              trigger,
-              type: 'object_modifying',
-            },
-          ]),
-        ]);
-        expect(groupPerformLayout2.mock.calls).toMatchObject([
-          [
-            {
-              e: event,
-              target: group2,
-              trigger: 'modified',
-              type: 'object_modified',
-            },
-          ],
-          ...triggers.slice(1).map((trigger) => [
-            {
-              e: event,
-              target: group2,
-              trigger,
-              type: 'object_modifying',
-            },
-          ]),
-        ]);
-        expect(groupPerformLayout).toHaveBeenCalledTimes(triggers.length);
-        expect(groupPerformLayout2).toHaveBeenCalledTimes(triggers.length);
-
-        groupPerformLayout.mockClear();
-        groupPerformLayout2.mockClear();
-        asPerformLayout.mockClear();
-        // now that we deselect object 2, the first group is out from the AS
-        as.remove(object2);
-        expect(group.layoutManager['_subscriptions'].get(as)).toBeUndefined();
-        expect(group2.layoutManager['_subscriptions'].get(as)).toBeDefined();
-        // now the active selection is empty and none of the groups is affected by the AS events
-        as.removeAll();
-        expect(group2.layoutManager['_subscriptions'].get(as)).toBeUndefined();
-
-        groupPerformLayout.mockClear();
-        groupPerformLayout2.mockClear();
-        asPerformLayout.mockClear();
-
-        triggers.forEach((trigger) => as.fire(trigger, event));
-        expect(groupPerformLayout).not.toHaveBeenCalled();
-        expect(groupPerformLayout2).not.toHaveBeenCalled();
-        expect(asPerformLayout).not.toHaveBeenCalled();
-      });
-    });
-  });
-});

package/src/LayoutManager/ActiveSelectionLayoutManager.ts

@@ -1,54 +0,0 @@
-import { LayoutManager } from './LayoutManager';
-import type { RegistrationContext, StrictLayoutContext } from './types';
-import type { Group } from '../shapes/Group';
-
-/**
- * Today the LayoutManager class also takes care of subscribing event handlers
- * to update the group layout when the group is interactive and a transform is applied
- * to a child object.
- * The ActiveSelection is never interactive, but it could contain objects from
- * groups that are.
- * The standard LayoutManager would subscribe the children of the activeSelection to
- * perform layout changes to the active selection itself, what we need instead is that
- * the transformation applied to the active selection will trigger changes to the
- * original group of the children ( the one referenced under the parent property )
- * This subclass of the LayoutManager has a single duty to fill the gap of this difference.`
- */
-export class ActiveSelectionLayoutManager extends LayoutManager {
-  subscribeTargets(
-    context: RegistrationContext & Partial<StrictLayoutContext>,
-  ): void {
-    const activeSelection = context.target;
-    const parents = context.targets.reduce((parents, target) => {
-      target.parent && parents.add(target.parent);
-      return parents;
-    }, new Set<Group>());
-    parents.forEach((parent) => {
-      parent.layoutManager.subscribeTargets({
-        target: parent,
-        targets: [activeSelection],
-      });
-    });
-  }
-
-  /**
-   * unsubscribe from parent only if all its children were deselected
-   */
-  unsubscribeTargets(
-    context: RegistrationContext & Partial<StrictLayoutContext>,
-  ): void {
-    const activeSelection = context.target;
-    const selectedObjects = activeSelection.getObjects();
-    const parents = context.targets.reduce((parents, target) => {
-      target.parent && parents.add(target.parent);
-      return parents;
-    }, new Set<Group>());
-    parents.forEach((parent) => {
-      !selectedObjects.some((object) => object.parent === parent) &&
-        parent.layoutManager.unsubscribeTargets({
-          target: parent,
-          targets: [activeSelection],
-        });
-    });
-  }
-}