fabric 7.4.0 → 7.5.0-beta.1

package/src/brushes/SprayBrush.ts

@@ -1,207 +0,0 @@
-import type { Point } from '../Point';
-import { Group } from '../shapes/Group';
-import { Shadow } from '../Shadow';
-import { Rect } from '../shapes/Rect';
-import { getRandomInt } from '../util/internals/getRandomInt';
-import type { Canvas } from '../canvas/Canvas';
-import { BaseBrush } from './BaseBrush';
-import type { SprayBrushPoint } from './typedefs';
-import { CENTER } from '../constants';
-
-/**
- *
- * @param rects
- * @returns
- */
-function getUniqueRects(rects: Rect[]) {
-  const uniqueRects: Record<string, boolean> = {};
-  const uniqueRectsArray: Rect[] = [];
-
-  for (let i = 0, key: string; i < rects.length; i++) {
-    key = `${rects[i].left}${rects[i].top}`;
-    if (!uniqueRects[key]) {
-      uniqueRects[key] = true;
-      uniqueRectsArray.push(rects[i]);
-    }
-  }
-
-  return uniqueRectsArray;
-}
-
-export class SprayBrush extends BaseBrush {
-  /**
-   * Width of a spray
-   * @type Number
-   */
-  width = 10;
-
-  /**
-   * Density of a spray (number of dots per chunk)
-   * @type Number
-   */
-  density = 20;
-
-  /**
-   * Width of spray dots
-   * @type Number
-   */
-  dotWidth = 1;
-
-  /**
-   * Width variance of spray dots
-   * @type Number
-   */
-  dotWidthVariance = 1;
-
-  /**
-   * Whether opacity of a dot should be random
-   * @type Boolean
-   */
-  randomOpacity = false;
-
-  /**
-   * Whether overlapping dots (rectangles) should be removed (for performance reasons)
-   * @type Boolean
-   */
-  optimizeOverlapping = true;
-
-  declare private sprayChunks: SprayBrushPoint[][];
-
-  declare private sprayChunk: SprayBrushPoint[];
-
-  /**
-   * Constructor
-   * @param {Canvas} canvas
-   * @return {SprayBrush} Instance of a spray brush
-   */
-  constructor(canvas: Canvas) {
-    super(canvas);
-    this.sprayChunks = [];
-    this.sprayChunk = [];
-  }
-
-  /**
-   * Invoked on mouse down
-   * @param {Point} pointer
-   */
-  onMouseDown(pointer: Point) {
-    this.sprayChunks = [];
-    this.canvas.clearContext(this.canvas.contextTop);
-    this._setShadow();
-
-    this.addSprayChunk(pointer);
-    this.renderChunck(this.sprayChunk);
-  }
-
-  /**
-   * Invoked on mouse move
-   * @param {Point} pointer
-   */
-  onMouseMove(pointer: Point) {
-    if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) {
-      return;
-    }
-    this.addSprayChunk(pointer);
-    this.renderChunck(this.sprayChunk);
-  }
-
-  /**
-   * Invoked on mouse up
-   */
-  onMouseUp() {
-    const originalRenderOnAddRemove = this.canvas.renderOnAddRemove;
-    this.canvas.renderOnAddRemove = false;
-
-    const rects: Rect[] = [];
-
-    for (let i = 0; i < this.sprayChunks.length; i++) {
-      const sprayChunk = this.sprayChunks[i];
-      for (let j = 0; j < sprayChunk.length; j++) {
-        const chunck = sprayChunk[j];
-        const rect = new Rect({
-          width: chunck.width,
-          height: chunck.width,
-          left: chunck.x + 1,
-          top: chunck.y + 1,
-          originX: CENTER,
-          originY: CENTER,
-          fill: this.color,
-        });
-        rects.push(rect);
-      }
-    }
-
-    const group = new Group(
-      this.optimizeOverlapping ? getUniqueRects(rects) : rects,
-      {
-        objectCaching: true,
-        subTargetCheck: false,
-        interactive: false,
-      },
-    );
-    this.shadow && group.set('shadow', new Shadow(this.shadow));
-    this.canvas.fire('before:path:created', { path: group });
-    this.canvas.add(group);
-    this.canvas.fire('path:created', { path: group });
-
-    this.canvas.clearContext(this.canvas.contextTop);
-    this._resetShadow();
-    this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
-    this.canvas.requestRenderAll();
-  }
-
-  renderChunck(sprayChunck: SprayBrushPoint[]) {
-    const ctx = this.canvas.contextTop;
-    ctx.fillStyle = this.color;
-
-    this._saveAndTransform(ctx);
-
-    for (let i = 0; i < sprayChunck.length; i++) {
-      const point = sprayChunck[i];
-      ctx.globalAlpha = point.opacity;
-      ctx.fillRect(point.x, point.y, point.width, point.width);
-    }
-
-    ctx.restore();
-  }
-
-  /**
-   * Render all spray chunks
-   */
-  _render() {
-    const ctx = this.canvas.contextTop;
-    ctx.fillStyle = this.color;
-
-    this._saveAndTransform(ctx);
-
-    for (let i = 0; i < this.sprayChunks.length; i++) {
-      this.renderChunck(this.sprayChunks[i]);
-    }
-    ctx.restore();
-  }
-
-  /**
-   * @param {Point} pointer
-   */
-  addSprayChunk(pointer: Point) {
-    this.sprayChunk = [];
-    const radius = this.width / 2;
-
-    for (let i = 0; i < this.density; i++) {
-      this.sprayChunk.push({
-        x: getRandomInt(pointer.x - radius, pointer.x + radius),
-        y: getRandomInt(pointer.y - radius, pointer.y + radius),
-        width: this.dotWidthVariance
-          ? getRandomInt(
-              // bottom clamp width to 1
-              Math.max(1, this.dotWidth - this.dotWidthVariance),
-              this.dotWidth + this.dotWidthVariance,
-            )
-          : this.dotWidth,
-        opacity: this.randomOpacity ? getRandomInt(0, 100) / 100 : 1,
-      });
-    }
-
-    this.sprayChunks.push(this.sprayChunk);
-  }
-}

package/src/brushes/__snapshots__/PencilBrush.spec.ts.snap

@@ -1,59 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`PencilBrush > with canvas.enableRetinaScaling = false > fires events and creates path on mouse up 1`] = `
-[
-  [
-    "M",
-    9.999,
-    9.999,
-  ],
-  [
-    "Q",
-    10,
-    10,
-    12.5,
-    12.5,
-  ],
-  [
-    "Q",
-    15,
-    15,
-    17.5,
-    17.5,
-  ],
-  [
-    "L",
-    20,
-    20,
-  ],
-]
-`;
-
-exports[`PencilBrush > with canvas.enableRetinaScaling = true > fires events and creates path on mouse up 1`] = `
-[
-  [
-    "M",
-    9.999,
-    9.999,
-  ],
-  [
-    "Q",
-    10,
-    10,
-    12.5,
-    12.5,
-  ],
-  [
-    "Q",
-    15,
-    15,
-    17.5,
-    17.5,
-  ],
-  [
-    "L",
-    20,
-    20,
-  ],
-]
-`;

package/src/brushes/typedefs.ts

@@ -1,18 +0,0 @@
-import type { TEvent } from '../EventTypeDefs';
-import type { Point } from '../Point';
-
-export type TBrushEventData = TEvent & { pointer: Point };
-
-export type CircleBrushPoint = {
-  x: number;
-  y: number;
-  radius: number;
-  fill: string;
-};
-
-export type SprayBrushPoint = {
-  x: number;
-  y: number;
-  width: number;
-  opacity: number;
-};

package/src/cache.spec.ts

@@ -1,75 +0,0 @@
-import { afterEach, describe, beforeEach, expect, it } from 'vitest';
-import { cache } from './cache';
-import { config } from './config';
-
-describe('cache', () => {
-  describe('clearFontCache', () => {
-    it('removes specified font cache or all caches', () => {
-      expect(cache.clearFontCache).toBeTypeOf('function');
-
-      cache.charWidthsCache.set(
-        'arial',
-        new Map([['some', new Map([['aa', 10]])]]),
-      );
-      cache.charWidthsCache.set(
-        'helvetica',
-        new Map([['some', new Map([['aa', 11]])]]),
-      );
-      cache.clearFontCache('arial');
-      expect(cache.charWidthsCache.get('arial')).toBe(undefined);
-      expect(
-        cache.charWidthsCache.get('helvetica')?.get('some'),
-      ).toBeInstanceOf(Map);
-
-      cache.clearFontCache();
-      expect(cache.charWidthsCache.size).toEqual(0);
-    });
-
-    it('handles case-insensitive font names', () => {
-      cache.charWidthsCache.set(
-        'arial',
-        new Map([['some', new Map([['aa', 10]])]]),
-      );
-      cache.charWidthsCache.set(
-        'helvetica',
-        new Map([['some', new Map([['aa', 11]])]]),
-      );
-      cache.clearFontCache('ARIAL');
-      expect(cache.charWidthsCache.get('arial')).toBe(undefined);
-      expect(
-        cache.charWidthsCache.get('helvetica')?.get('some'),
-      ).toBeInstanceOf(Map);
-    });
-  });
-
-  describe('limitDimsByArea', () => {
-    const perfLimit = config.perfLimitSizeTotal;
-
-    beforeEach(() => {
-      config.perfLimitSizeTotal = 10000;
-    });
-
-    afterEach(() => {
-      config.perfLimitSizeTotal = perfLimit;
-    });
-
-    it('limitDimsByArea provides correct dimensions for aspect ratio 1', () => {
-      expect(cache.limitDimsByArea).toBeTypeOf('function');
-      const [x, y] = cache.limitDimsByArea(1);
-      expect(x).toBe(100);
-      expect(y).toBe(100);
-    });
-
-    it('limitDimsByArea provides correct dimensions for aspect ratio > 1', () => {
-      const [x, y] = cache.limitDimsByArea(3);
-      expect(x).toBe(173);
-      expect(y).toBe(57);
-    });
-
-    it('limitDimsByArea provides correct dimensions for aspect ratio < 1', () => {
-      const [x, y] = cache.limitDimsByArea(1 / 3);
-      expect(x).toBe(57);
-      expect(y).toBe(173);
-    });
-  });
-});

package/src/cache.ts

@@ -1,92 +0,0 @@
-import { config } from './config';
-import type { TRectBounds } from './typedefs';
-
-type TextCouplesCache = Map</** char */ string, /** width */ number>;
-
-type FamilyCache = Map</** fontStyleCacheKey */ string, TextCouplesCache>;
-
-export class Cache {
-  /**
-   * Cache of widths of chars in text rendering.
-   */
-  declare charWidthsCache: Map</** fontFamily */ string, FamilyCache>;
-
-  constructor() {
-    this.charWidthsCache = new Map();
-  }
-
-  /**
-   * @return {Object} reference to cache
-   */
-  getFontCache({
-    fontFamily,
-    fontStyle,
-    fontWeight,
-  }: {
-    fontFamily: string;
-    fontStyle: string;
-    fontWeight: string | number;
-  }): TextCouplesCache {
-    fontFamily = fontFamily.toLowerCase();
-    const cache = this.charWidthsCache;
-    if (!cache.has(fontFamily)) {
-      cache.set(fontFamily, new Map<string, TextCouplesCache>());
-    }
-    const fontCache = cache.get(fontFamily)!;
-    const cacheKey = `${fontStyle.toLowerCase()}_${(
-      fontWeight + ''
-    ).toLowerCase()}`;
-    if (!fontCache.has(cacheKey)) {
-      fontCache.set(cacheKey, new Map<string, number>());
-    }
-    return fontCache.get(cacheKey)!;
-  }
-
-  /**
-   * Clear char widths cache for the given font family or all the cache if no
-   * fontFamily is specified.
-   * Use it if you know you are loading fonts in a lazy way and you are not waiting
-   * for custom fonts to load properly when adding text objects to the canvas.
-   * If a text object is added when its own font is not loaded yet, you will get wrong
-   * measurement and so wrong bounding boxes.
-   * After the font cache is cleared, either change the textObject text content or call
-   * initDimensions() to trigger a recalculation
-   * @param {String} [fontFamily] font family to clear
-   */
-  clearFontCache(fontFamily?: string) {
-    if (!fontFamily) {
-      this.charWidthsCache = new Map();
-    } else {
-      this.charWidthsCache.delete((fontFamily || '').toLowerCase());
-    }
-  }
-
-  /**
-   * Given current aspect ratio, determines the max width and height that can
-   * respect the total allowed area for the cache.
-   * @param {number} ar aspect ratio
-   * @return {number[]} Limited dimensions X and Y
-   */
-  limitDimsByArea(ar: number) {
-    const { perfLimitSizeTotal } = config;
-    const roughWidth = Math.sqrt(perfLimitSizeTotal * ar);
-    // we are not returning a point on purpose, to avoid circular dependencies
-    // this is an internal utility
-    return [
-      Math.floor(roughWidth),
-      Math.floor(perfLimitSizeTotal / roughWidth),
-    ];
-  }
-
-  /**
-   * This object keeps the results of the boundsOfCurve calculation mapped by the joined arguments necessary to calculate it.
-   * It does speed up calculation, if you parse and add always the same paths, but in case of heavy usage of freedrawing
-   * you do not get any speed benefit and you get a big object in memory.
-   * The object was a private variable before, while now is appended to the lib so that you have access to it and you
-   * can eventually clear it.
-   * It was an internal variable, is accessible since version 2.3.4
-   */
-  boundsOfCurveCache: Record<string, TRectBounds> = {};
-}
-
-export const cache = new Cache();