fabric 7.4.0 → 7.5.0-beta.1

package/extensions/linear_gradient_controls/linearGradientHandlers.spec.ts

@@ -1,186 +0,0 @@
-import { Rect, Gradient, Point, iMatrix, Canvas, type Transform } from 'fabric';
-import {
-  linearGradientCoordPositionHandlerGenerator,
-  linearGradientColorPositionHandlerGenerator,
-  linearGradientColorActionHandlerGenerator,
-  linearGradientCoordsActionHandlerGenerator,
-} from './linearGradientHandlers';
-import { describe, test, expect } from 'vitest';
-
-function prepareTransform(target: Rect): Transform {
-  return {
-    target,
-    corner: 'xxx',
-    originX: 'center',
-    originY: 'center',
-  } as unknown as Transform;
-}
-
-const prepareRectWithGradient = () => {
-  const canvas = new Canvas(undefined, { renderOnAddRemove: false });
-
-  canvas.setDimensions({ width: 900, height: 700 });
-  canvas.viewportTransform = [0.5, 0, 0, 0.5, 100, 100];
-  const gradient = new Gradient({
-    type: 'linear',
-    // gradientTransform: [1, 0, 0, 2, 50, 40], <-- unsupported yet
-    coords: {
-      x1: 20,
-      x2: 380,
-      y1: 20,
-      y2: 230,
-    },
-    colorStops: [
-      {
-        offset: 0.2,
-        color: 'red',
-      },
-      {
-        offset: 0.4,
-        color: 'green',
-      },
-      {
-        offset: 0.6,
-        color: 'blue',
-      },
-      {
-        offset: 0.8,
-        color: 'yellow',
-      },
-    ],
-  });
-  const rect = new Rect({
-    width: 400,
-    height: 250,
-    flipY: true,
-    fill: gradient,
-    left: 200,
-    top: 200,
-  });
-  canvas.add(rect);
-  canvas.centerObject(rect);
-
-  return {
-    rect,
-    gradient,
-  };
-};
-
-describe('position generators', () => {
-  let p1: Point, p2: Point, color: Point;
-  describe('linearGradientCoordPositionHandlerGenerator', () => {
-    test('places the controls correctly on the first coord point', () => {
-      const { rect, gradient } = prepareRectWithGradient();
-      const gradientCoordPositionHandler =
-        linearGradientCoordPositionHandlerGenerator(gradient, 1);
-      p1 = gradientCoordPositionHandler(new Point(), iMatrix, rect);
-      expect(p1).toEqual({ x: 235, y: 327.5 });
-    });
-    test('places the controls correctly on the second coord point', () => {
-      const { rect, gradient } = prepareRectWithGradient();
-      const gradientCoordPositionHandler =
-        linearGradientCoordPositionHandlerGenerator(gradient, 2);
-      p2 = gradientCoordPositionHandler(new Point(), iMatrix, rect);
-      expect(p2).toEqual({ x: 415, y: 222.5 });
-    });
-  });
-  describe('linearGradientColorPositionHandlerGenerator', () => {
-    test('places the controls correctly along the 2 coords of the gradient', () => {
-      const { rect, gradient } = prepareRectWithGradient();
-      const gradientColorPositionHandler =
-        linearGradientColorPositionHandlerGenerator(gradient, 2);
-      color = gradientColorPositionHandler(new Point(), iMatrix, rect);
-      expect(color).toEqual({ x: 343, y: 264.5 });
-      // CHECK RESULTS OF BEFORE TESTS
-      expect(p1.lerp(p2, 0.6)).toEqual(color);
-    });
-  });
-});
-
-describe('action generator', () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const eventData = {} as any;
-  describe('color handling', () => {
-    test('moves the color point data', () => {
-      const { rect, gradient } = prepareRectWithGradient();
-      const transform = prepareTransform(rect);
-      const actionHandler = linearGradientColorActionHandlerGenerator(
-        gradient,
-        0,
-      );
-      rect.dirty = false;
-      expect(rect.dirty).toBe(false);
-      expect(gradient.colorStops[0].offset).toBe(0.2);
-      const returned = actionHandler(eventData, transform, 289, 441);
-      expect(rect.dirty).toBe(true);
-      expect(returned).toBe(true);
-      expect(gradient.colorStops[0].offset).toBeLessThan(0.06);
-    });
-    test('moves the color point data caps to 0', () => {
-      const { rect, gradient } = prepareRectWithGradient();
-      const transform = prepareTransform(rect);
-      const actionHandler = linearGradientColorActionHandlerGenerator(
-        gradient,
-        0,
-      );
-      rect.dirty = false;
-      expect(rect.dirty).toBe(false);
-      expect(gradient.colorStops[0].offset).toBe(0.2);
-      const returned = actionHandler(eventData, transform, 197, 507);
-      expect(rect.dirty).toBe(true);
-      expect(returned).toBe(true);
-      expect(gradient.colorStops[0].offset).toBe(0);
-    });
-    test('moves the color point data caps to 1', () => {
-      const { rect, gradient } = prepareRectWithGradient();
-      const transform = prepareTransform(rect);
-      const actionHandler = linearGradientColorActionHandlerGenerator(
-        gradient,
-        0,
-      );
-      rect.dirty = false;
-      expect(rect.dirty).toBe(false);
-      expect(gradient.colorStops[0].offset).toBe(0.2);
-      const returned = actionHandler(eventData, transform, 719, 204);
-      expect(rect.dirty).toBe(true);
-      expect(returned).toBe(true);
-      expect(gradient.colorStops[0].offset).toBe(1);
-    });
-  });
-  describe('linearGradientCoordsActionHandlerGenerator', () => {
-    test('can reloacate x1 and y1', () => {
-      const { rect, gradient } = prepareRectWithGradient();
-      const transform = prepareTransform(rect);
-      const coordActionHandler = linearGradientCoordsActionHandlerGenerator(
-        gradient,
-        1,
-      );
-      rect.dirty = false;
-      expect(rect.dirty).toBe(false);
-      expect(gradient.coords.x1).toBe(20);
-      expect(gradient.coords.y1).toBe(20);
-      const returned = coordActionHandler(eventData, transform, 600, 400);
-      expect(rect.dirty).toBe(true);
-      expect(returned).toBe(true);
-      expect(gradient.coords.x1).toBe(350);
-      expect(gradient.coords.y1).toBe(75);
-    });
-    test('can reloacate x2 and y2', () => {
-      const { rect, gradient } = prepareRectWithGradient();
-      const transform = prepareTransform(rect);
-      const coordActionHandler = linearGradientCoordsActionHandlerGenerator(
-        gradient,
-        2,
-      );
-      rect.dirty = false;
-      expect(rect.dirty).toBe(false);
-      expect(gradient.coords.x2).toBe(380);
-      expect(gradient.coords.y2).toBe(230);
-      const returned = coordActionHandler(eventData, transform, 600, 400);
-      expect(rect.dirty).toBe(true);
-      expect(returned).toBe(true);
-      expect(gradient.coords.x2).toBe(350);
-      expect(gradient.coords.y2).toBe(75);
-    });
-  });
-});

package/extensions/linear_gradient_controls/linearGradientHandlers.ts

@@ -1,186 +0,0 @@
-import type {
-  TMat2D,
-  FabricObject,
-  TransformActionHandler,
-  Control,
-  ControlRenderingStyleOverride,
-  InteractiveFabricObject,
-  Gradient,
-} from 'fabric';
-import { Point, util, controlsUtils, iMatrix } from 'fabric';
-
-/** A deduping code block */
-const commonGradientInfo = (
-  fabricObject: FabricObject,
-  gradient: Gradient<'linear'>,
-) => {
-  const { width, height } = fabricObject;
-  const { colorStops, coords, gradientUnits } = gradient;
-  const isPerc = gradientUnits === 'percentage';
-  const matrix = fabricObject.calcTransformMatrix();
-  const vpt = fabricObject.getViewportTransform();
-  const _finalMatrix = util.multiplyTransformMatrixArray([vpt, matrix]);
-  return {
-    width,
-    height,
-    colorStops,
-    coords,
-    isPerc,
-    _finalMatrix,
-  };
-};
-
-export const linearGradientColorPositionHandlerGenerator = (
-  gradient: Gradient<'linear'>,
-  stopIndex: number,
-) =>
-  function linearGradientColorPositionHandler(
-    this: Control,
-    dim: Point, // currentDimension
-    finalMatrix: TMat2D,
-    fabricObject: FabricObject,
-    // currentControl: Control,) => {};
-  ) {
-    const { width, height, isPerc, coords, colorStops, _finalMatrix } =
-      commonGradientInfo(fabricObject, gradient);
-    const p1 = new Point(
-      coords.x1 * (isPerc ? width : 1) - width / 2,
-      coords.y1 * (isPerc ? height : 1) - height / 2,
-    );
-    const p2 = new Point(
-      coords.x2 * (isPerc ? width : 1) - width / 2,
-      coords.y2 * (isPerc ? height : 1) - height / 2,
-    );
-    const offset = colorStops[stopIndex].offset;
-    return p1.lerp(p2, offset).transform(_finalMatrix);
-  };
-
-export const linearGradientCoordPositionHandlerGenerator = (
-  gradient: Gradient<'linear'>,
-  pointNumber: 1 | 2,
-) =>
-  function linearGradientCoordPositionHandler(
-    this: Control,
-    dim: Point, // currentDimension
-    finalMatrix: TMat2D,
-    fabricObject: FabricObject,
-    // currentControl: Control,) => {};
-  ) {
-    const { width, height, isPerc, coords, _finalMatrix } = commonGradientInfo(
-      fabricObject,
-      gradient,
-    );
-
-    return (
-      pointNumber === 1
-        ? new Point(
-            coords.x1 * (isPerc ? width : 1) - width / 2,
-            coords.y1 * (isPerc ? height : 1) - height / 2,
-          )
-        : new Point(
-            coords.x2 * (isPerc ? width : 1) - width / 2,
-            coords.y2 * (isPerc ? height : 1) - height / 2,
-          )
-    ).transform(_finalMatrix);
-  };
-
-export const linearGradientColorActionHandlerGenerator =
-  (gradient: Gradient<'linear'>, colorIndex: number): TransformActionHandler =>
-  (eventData, { target }, x, y) => {
-    const {
-      width,
-      height,
-      isPerc,
-      coords: { x1, x2, y1, y2 },
-      colorStops,
-    } = commonGradientInfo(target, gradient);
-
-    // find point in the space inside the object.
-    const point = util
-      .sendPointToPlane(
-        new Point(x, y),
-        undefined,
-        target.calcTransformMatrix(),
-      )
-      .add(new Point(width / 2, height / 2));
-
-    const p1 = new Point(x1 * (isPerc ? width : 1), y1 * (isPerc ? height : 1));
-    const v = util.createVector(
-      p1,
-      new Point(x2 * (isPerc ? width : 1), y2 * (isPerc ? height : 1)),
-    );
-    const u = util.createVector(p1, point);
-    const t = util.dotProduct(u, v) / util.dotProduct(v, v);
-    colorStops[colorIndex].offset = util.capValue(0, t, 1);
-    target.set('dirty', true);
-    return true;
-  };
-
-export const linearGradientCoordsActionHandlerGenerator =
-  (gradient: Gradient<'linear'>, pointIndex: 1 | 2): TransformActionHandler =>
-  (eventData, { target }, x, y) => {
-    const { width, height, isPerc, coords } = commonGradientInfo(
-      target,
-      gradient,
-    );
-    // find point in the space inside the object.
-    const point = util
-      .sendPointToPlane(
-        new Point(x, y),
-        undefined,
-        target.calcTransformMatrix(),
-      )
-      .add(new Point(width / 2, height / 2));
-    if (pointIndex === 1) {
-      coords.x1 = point.x / (isPerc ? width : 1);
-      coords.y1 = point.y / (isPerc ? height : 1);
-    }
-
-    if (pointIndex === 2) {
-      coords.x2 = point.x / (isPerc ? width : 1);
-      coords.y2 = point.y / (isPerc ? height : 1);
-    }
-    target.set('dirty', true);
-    return true;
-  };
-
-export const linearGradientControlLineRender = (gradient: Gradient<'linear'>) =>
-  function renderCircleControlWithLine(
-    this: Control,
-    ctx: CanvasRenderingContext2D,
-    left: number,
-    top: number,
-    styleOverride: ControlRenderingStyleOverride,
-    fabricObject: InteractiveFabricObject,
-  ) {
-    // we are position in center of coords.x1/y1
-    ctx.save();
-    const { width, height, isPerc, coords } = commonGradientInfo(
-      fabricObject as FabricObject,
-      gradient,
-    );
-    const finalP = util.sendPointToPlane(
-      new Point(
-        coords.x2 * (isPerc ? width : 1) - width / 2,
-        coords.y2 * (isPerc ? height : 1) - height / 2,
-      ),
-      util.multiplyTransformMatrices(
-        fabricObject.canvas?.viewportTransform ?? iMatrix,
-        fabricObject.calcTransformMatrix(),
-      ),
-    );
-    ctx.lineWidth = fabricObject.borderScaleFactor;
-    ctx.beginPath();
-    ctx.moveTo(left, top);
-    ctx.lineTo(finalP.x, finalP.y);
-    ctx.stroke();
-    controlsUtils.renderCircleControl.call(
-      this,
-      ctx,
-      left,
-      top,
-      styleOverride,
-      fabricObject,
-    );
-    ctx.restore();
-  };

package/extensions/types.d.ts

@@ -1 +0,0 @@
-declare module 'westures';

package/extensions/westures_integration/index.ts

@@ -1,133 +0,0 @@
-import wes from 'westures';
-import { type Canvas, type CanvasEvents, type XY, util } from 'fabric';
-
-type PinchEventData = {
-  centroid: XY;
-  event: PointerEvent;
-  phase: string;
-  type: 'pinch';
-  scale: number;
-  target: HTMLElement;
-};
-
-type RotateEventData = {
-  centroid: XY;
-  event: PointerEvent;
-  phase: string;
-  type: 'rotate';
-  rotation: number;
-  target: HTMLElement;
-};
-
-type TapEventData = {
-  centroid: XY;
-  event: PointerEvent;
-  phase: string;
-  type: 'tap';
-  target: HTMLElement;
-};
-
-/**
- * Register this handler on canvas.on('pinch', pinchEventHandler);
- * To get an out of the box functionality for the pinch to zoom
- */
-export function pinchEventHandler(
-  this: Canvas,
-  { scale, target, scenePoint }: CanvasEvents['pinch'],
-) {
-  if (target && this.getActiveObject() === target) {
-    // if we are pinching on the active object, let's scale it
-    target.scaleX *= scale;
-    target.scaleY *= scale;
-  } else {
-    this.zoomToPoint(scenePoint, this.getZoom() * scale);
-  }
-}
-
-export function rotateEventHandler(
-  this: Canvas,
-  { rotation, target }: CanvasEvents['rotate'],
-) {
-  if (target && this.getActiveObject() === target) {
-    target.rotate(target.angle + util.radiansToDegrees(rotation));
-  }
-}
-
-export const tripleTapGesture = (canvas: Canvas) => {
-  return new wes.Tap(
-    canvas.upperCanvasEl,
-    ({ event }: TapEventData) => {
-      canvas.fireEventFromPointerEvent(
-        event,
-        'mouse:tripleclick',
-        'mousetripleclick',
-        undefined,
-      );
-      event.preventDefault();
-    },
-    {
-      numTaps: 3,
-      maxRetain: 400,
-    },
-  );
-};
-
-export const doubleTapGesture = (canvas: Canvas) => {
-  return new wes.Tap(
-    canvas.upperCanvasEl,
-    ({ event }: TapEventData) => {
-      canvas.fireEventFromPointerEvent(
-        event,
-        'mouse:dblclick',
-        'mousedblclick',
-        undefined,
-      );
-      event.preventDefault();
-    },
-    {
-      numTaps: 2,
-      maxRetain: 300,
-    },
-  );
-};
-
-export const pinchGesture = (canvas: Canvas) => {
-  return new wes.Pinch(
-    canvas.upperCanvasEl,
-    ({ scale, event }: PinchEventData) => {
-      canvas.fireEventFromPointerEvent(event, 'pinch', 'pinch', { scale });
-    },
-  );
-};
-
-export const rotateGesture = (canvas: Canvas) => {
-  return new wes.Rotate(
-    canvas.upperCanvasEl,
-    ({ rotation, event }: RotateEventData) => {
-      canvas.fireEventFromPointerEvent(event, 'rotate', 'rotate', { rotation });
-    },
-  );
-};
-
-/**
- * Add a serie of gestures recognition on the canvas
- */
-export const addGestures = (canvas: Canvas) => {
-  const canvasRegion = new wes.Region(canvas.upperCanvasEl);
-  canvas.addOrRemove(
-    (
-      el: HTMLElement,
-      ...args: Parameters<HTMLElement['removeEventListener']>
-    ) => el.removeEventListener(...args),
-  );
-  canvasRegion.addGesture(rotateGesture(canvas));
-  canvasRegion.addGesture(pinchGesture(canvas));
-  canvasRegion.addGesture(tripleTapGesture(canvas));
-  canvasRegion.addGesture(doubleTapGesture(canvas));
-  // add back events, excluding the click one
-  canvas.addOrRemove(
-    (el: HTMLElement, ...args: Parameters<HTMLElement['addEventListener']>) =>
-      el.addEventListener(...args),
-    true,
-  );
-};

package/fabric.ts

@@ -1,183 +0,0 @@
-export { getEnv, getFabricDocument, getFabricWindow, setEnv } from './src/env';
-export { cache } from './src/cache';
-export { VERSION as version, iMatrix } from './src/constants';
-export { config } from './src/config';
-export { classRegistry } from './src/ClassRegistry';
-export { runningAnimations } from './src/util/animation/AnimationRegistry';
-
-export type * from './src/typedefs';
-
-export type * from './src/EventTypeDefs';
-export type { ITextEvents } from './src/shapes/IText/ITextBehavior';
-
-export { Observable } from './src/Observable';
-
-export type {
-  TCanvasSizeOptions,
-  TSVGExportOptions,
-} from './src/canvas/StaticCanvas';
-export type { StaticCanvasOptions } from './src/canvas/StaticCanvasOptions';
-export { StaticCanvas } from './src/canvas/StaticCanvas';
-export { Canvas } from './src/canvas/Canvas';
-export type { CanvasOptions } from './src/canvas/CanvasOptions';
-export { CanvasDOMManager } from './src/canvas/DOMManagers/CanvasDOMManager';
-export { StaticCanvasDOMManager } from './src/canvas/DOMManagers/StaticCanvasDOMManager';
-
-export type { XY } from './src/Point';
-export { Point } from './src/Point';
-export type { IntersectionType } from './src/Intersection';
-export { Intersection } from './src/Intersection';
-export { Color } from './src/color/Color';
-export type * from './src/color/typedefs';
-
-export * from './src/gradient';
-export * from './src/Pattern';
-export { Shadow } from './src/Shadow';
-export type { SerializedShadowOptions } from './src/Shadow';
-
-export { BaseBrush } from './src/brushes/BaseBrush';
-export type * from './src/brushes/typedefs';
-
-export { PencilBrush } from './src/brushes/PencilBrush';
-export { CircleBrush } from './src/brushes/CircleBrush';
-export { SprayBrush } from './src/brushes/SprayBrush';
-export { PatternBrush } from './src/brushes/PatternBrush';
-
-// many path types
-export type * from './src/util/path/typedefs';
-
-export {
-  FabricObject,
-
-  /**
-   * @deprecated Due to a naming conflict with the
-   * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object JS API},
-   * `fabric.Object` has been renamed to `FabricObject`
-   *
-   * @example
-   * import { Object } from 'fabric'; // deprecated
-   * import { FabricObject } from 'fabric'; // migration path
-   *
-   */
-  FabricObject as Object,
-} from './src/shapes/Object/FabricObject';
-/**
- * Exported so we can tweak default values
- */
-export {
-  FabricObject as BaseFabricObject,
-  type DrawContext,
-} from './src/shapes/Object/Object';
-/**
- * Exported so we can tweak default values
- */
-export { InteractiveFabricObject } from './src/shapes/Object/InteractiveObject';
-
-export type {
-  TFabricObjectProps,
-  FabricObjectProps,
-  SerializedObjectProps,
-} from './src/shapes/Object/types';
-export type { SerializedLineProps } from './src/shapes/Line';
-export { Line } from './src/shapes/Line';
-export type { CircleProps, SerializedCircleProps } from './src/shapes/Circle';
-export { Circle } from './src/shapes/Circle';
-export { Triangle } from './src/shapes/Triangle';
-export type {
-  EllipseProps,
-  SerializedEllipseProps,
-} from './src/shapes/Ellipse';
-export { Ellipse } from './src/shapes/Ellipse';
-export type { RectProps, SerializedRectProps } from './src/shapes/Rect';
-export { Rect } from './src/shapes/Rect';
-export type { PathProps, SerializedPathProps } from './src/shapes/Path';
-export { Path } from './src/shapes/Path';
-export type { SerializedPolylineProps } from './src/shapes/Polyline';
-export { Polyline } from './src/shapes/Polyline';
-export { Polygon } from './src/shapes/Polygon';
-export type {
-  GraphemeBBox,
-  SerializedTextProps,
-  TPathAlign,
-  TPathSide,
-  TextProps,
-} from './src/shapes/Text/Text';
-export {
-  FabricText,
-  /**
-   * @deprecated Due to a naming conflict with the
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/Text/Text Web API},
-   * `fabric.Text` has been renamed to `FabricText`
-   *
-   * @example
-   * import { Text } from 'fabric'; // deprecated
-   * import { FabricText } from 'fabric'; // migration path
-   *
-   */
-  FabricText as Text,
-} from './src/shapes/Text/Text';
-export type {
-  ITextProps,
-  SerializedITextProps,
-  CursorRenderingData,
-  CursorBoundaries,
-} from './src/shapes/IText/IText';
-export { IText } from './src/shapes/IText/IText';
-export type {
-  GraphemeData,
-  SerializedTextboxProps,
-  TextboxProps,
-} from './src/shapes/Textbox';
-export { Textbox } from './src/shapes/Textbox';
-export type {
-  CompleteTextStyleDeclaration,
-  TextStyleDeclaration,
-  TextStyle,
-} from './src/shapes/Text/StyledText';
-export type {
-  GroupEvents,
-  GroupProps,
-  GroupOwnProps,
-  SerializedGroupProps,
-} from './src/shapes/Group';
-export { Group } from './src/shapes/Group';
-export * from './src/LayoutManager';
-export type { SerializedLayoutManager } from './src/LayoutManager';
-export type {
-  ActiveSelectionOptions,
-  MultiSelectionStacking,
-} from './src/shapes/ActiveSelection';
-export { ActiveSelection } from './src/shapes/ActiveSelection';
-export {
-  FabricImage,
-
-  /**
-   * @deprecated Due to a naming conflict with the
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image Web API},
-   * `fabric.Image` has been renamed to `FabricImage`
-   *
-   * @example
-   * import { Image } from 'fabric'; // deprecated
-   * import { FabricImage } from 'fabric'; // migration path
-   *
-   */
-  FabricImage as Image,
-} from './src/shapes/Image';
-export type {
-  ImageSource,
-  SerializedImageProps,
-  ImageProps,
-} from './src/shapes/Image';
-export { createCollectionMixin } from './src/Collection';
-
-export * as util from './src/util';
-
-export { loadSVGFromString } from './src/parser/loadSVGFromString';
-export { loadSVGFromURL } from './src/parser/loadSVGFromURL';
-export { parseSVGDocument } from './src/parser/parseSVGDocument';
-
-export { Control } from './src/controls/Control';
-export * as controlsUtils from './src/controls';
-export type { ControlRenderingStyleOverride } from './src/controls';
-
-export * from './src/filters';