fabric 5.3.0 → 6.0.0-beta1

package/src/brushes/PencilBrush.ts

@@ -0,0 +1,300 @@
+import { ModifierKey, TEvent } from '../EventTypeDefs';
+import { Point } from '../Point';
+import { Shadow } from '../Shadow';
+import { Path } from '../shapes/Path';
+import { PathData } from '../typedefs';
+import { getSmoothPathFromPoints, joinPath } from '../util/path';
+import type { Canvas } from '../canvas/Canvas';
+import { BaseBrush } from './BaseBrush';
+
+/**
+ * @private
+ * @param {PathData} pathData SVG path commands
+ * @returns {boolean}
+ */
+function isEmptySVGPath(pathData: PathData): boolean {
+  return joinPath(pathData) === 'M 0 0 Q 0 0 0 0 L 0 0';
+}
+
+export class PencilBrush extends BaseBrush {
+  /**
+   * Discard points that are less than `decimate` pixel distant from each other
+   * @type Number
+   * @default 0.4
+   */
+  decimate = 0.4;
+
+  /**
+   * Draws a straight line between last recorded point to current pointer
+   * Used for `shift` functionality
+   *
+   * @type boolean
+   * @default false
+   */
+  drawStraightLine = false;
+
+  /**
+   * The event modifier key that makes the brush draw a straight line.
+   * If `null` or 'none' or any other string that is not a modifier key the feature is disabled.
+   * @type {ModifierKey | undefined | null}
+   */
+  straightLineKey: ModifierKey | undefined | null = 'shiftKey';
+
+  private declare _points: Point[];
+  private declare _hasStraightLine: boolean;
+  private declare oldEnd?: Point;
+
+  constructor(canvas: Canvas) {
+    super(canvas);
+    this._points = [];
+    this._hasStraightLine = false;
+  }
+
+  needsFullRender() {
+    return super.needsFullRender() || this._hasStraightLine;
+  }
+
+  static drawSegment(ctx: CanvasRenderingContext2D, p1: Point, p2: Point) {
+    const midPoint = p1.midPointFrom(p2);
+    ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
+    return midPoint;
+  }
+
+  /**
+   * Invoked on mouse down
+   * @param {Point} pointer
+   */
+  onMouseDown(pointer: Point, { e }: TEvent) {
+    if (!this.canvas._isMainEvent(e)) {
+      return;
+    }
+    this.drawStraightLine = !!this.straightLineKey && e[this.straightLineKey];
+    this._prepareForDrawing(pointer);
+    // capture coordinates immediately
+    // this allows to draw dots (when movement never occurs)
+    this._addPoint(pointer);
+    this._render();
+  }
+
+  /**
+   * Invoked on mouse move
+   * @param {Point} pointer
+   */
+  onMouseMove(pointer: Point, { e }: TEvent) {
+    if (!this.canvas._isMainEvent(e)) {
+      return;
+    }
+    this.drawStraightLine = !!this.straightLineKey && e[this.straightLineKey];
+    if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) {
+      return;
+    }
+    if (this._addPoint(pointer) && this._points.length > 1) {
+      if (this.needsFullRender()) {
+        // redraw curve
+        // clear top canvas
+        this.canvas.clearContext(this.canvas.contextTop);
+        this._render();
+      } else {
+        const points = this._points,
+          length = points.length,
+          ctx = this.canvas.contextTop;
+        // draw the curve update
+        this._saveAndTransform(ctx);
+        if (this.oldEnd) {
+          ctx.beginPath();
+          ctx.moveTo(this.oldEnd.x, this.oldEnd.y);
+        }
+        this.oldEnd = PencilBrush.drawSegment(
+          ctx,
+          points[length - 2],
+          points[length - 1]
+        );
+        ctx.stroke();
+        ctx.restore();
+      }
+    }
+  }
+
+  /**
+   * Invoked on mouse up
+   */
+  onMouseUp({ e }: TEvent) {
+    if (!this.canvas._isMainEvent(e)) {
+      return true;
+    }
+    this.drawStraightLine = false;
+    this.oldEnd = undefined;
+    this._finalizeAndAddPath();
+    return false;
+  }
+
+  /**
+   * @private
+   * @param {Point} pointer Actual mouse position related to the canvas.
+   */
+  _prepareForDrawing(pointer: Point) {
+    this._reset();
+    this._addPoint(pointer);
+    this.canvas.contextTop.moveTo(pointer.x, pointer.y);
+  }
+
+  /**
+   * @private
+   * @param {Point} point Point to be added to points array
+   */
+  _addPoint(point: Point) {
+    if (
+      this._points.length > 1 &&
+      point.eq(this._points[this._points.length - 1])
+    ) {
+      return false;
+    }
+    if (this.drawStraightLine && this._points.length > 1) {
+      this._hasStraightLine = true;
+      this._points.pop();
+    }
+    this._points.push(point);
+    return true;
+  }
+
+  /**
+   * Clear points array and set contextTop canvas style.
+   * @private
+   */
+  _reset() {
+    this._points = [];
+    this._setBrushStyles(this.canvas.contextTop);
+    this._setShadow();
+    this._hasStraightLine = false;
+  }
+
+  /**
+   * Draw a smooth path on the topCanvas using quadraticCurveTo
+   * @private
+   * @param {CanvasRenderingContext2D} [ctx]
+   */
+  _render(ctx: CanvasRenderingContext2D = this.canvas.contextTop) {
+    let p1 = this._points[0],
+      p2 = this._points[1];
+    this._saveAndTransform(ctx);
+    ctx.beginPath();
+    //if we only have 2 points in the path and they are the same
+    //it means that the user only clicked the canvas without moving the mouse
+    //then we should be drawing a dot. A path isn't drawn between two identical dots
+    //that's why we set them apart a bit
+    if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) {
+      const width = this.width / 1000;
+      p1.x -= width;
+      p2.x += width;
+    }
+    ctx.moveTo(p1.x, p1.y);
+
+    for (let i = 1; i < this._points.length; i++) {
+      // we pick the point between pi + 1 & pi + 2 as the
+      // end point and p1 as our control point.
+      PencilBrush.drawSegment(ctx, p1, p2);
+      p1 = this._points[i];
+      p2 = this._points[i + 1];
+    }
+    // Draw last line as a straight line while
+    // we wait for the next point to be able to calculate
+    // the bezier control point
+    ctx.lineTo(p1.x, p1.y);
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  /**
+   * Converts points to SVG path
+   * @param {Array} points Array of points
+   * @return {PathData} SVG path commands
+   */
+  convertPointsToSVGPath(points: Point[]): PathData {
+    const correction = this.width / 1000;
+    return getSmoothPathFromPoints(points, correction);
+  }
+
+  /**
+   * Creates a Path object to add on canvas
+   * @param {PathData} pathData Path data
+   * @return {Path} Path to add on canvas
+   */
+  createPath(pathData: PathData) {
+    const path = new Path(pathData, {
+      fill: null,
+      stroke: this.color,
+      strokeWidth: this.width,
+      strokeLineCap: this.strokeLineCap,
+      strokeMiterLimit: this.strokeMiterLimit,
+      strokeLineJoin: this.strokeLineJoin,
+      strokeDashArray: this.strokeDashArray,
+    });
+    if (this.shadow) {
+      this.shadow.affectStroke = true;
+      path.shadow = new Shadow(this.shadow);
+    }
+
+    return path;
+  }
+
+  /**
+   * Decimate points array with the decimate value
+   */
+  decimatePoints(points: Point[], distance: number) {
+    if (points.length <= 2) {
+      return points;
+    }
+    let lastPoint = points[0],
+      cDistance;
+    const zoom = this.canvas.getZoom(),
+      adjustedDistance = Math.pow(distance / zoom, 2),
+      l = points.length - 1,
+      newPoints = [lastPoint];
+    for (let i = 1; i < l - 1; i++) {
+      cDistance =
+        Math.pow(lastPoint.x - points[i].x, 2) +
+        Math.pow(lastPoint.y - points[i].y, 2);
+      if (cDistance >= adjustedDistance) {
+        lastPoint = points[i];
+        newPoints.push(lastPoint);
+      }
+    }
+    // Add the last point from the original line to the end of the array.
+    // This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point.
+    newPoints.push(points[l]);
+    return newPoints;
+  }
+
+  /**
+   * On mouseup after drawing the path on contextTop canvas
+   * we use the points captured to create an new Path object
+   * and add it to the canvas.
+   */
+  _finalizeAndAddPath() {
+    const ctx = this.canvas.contextTop;
+    ctx.closePath();
+    if (this.decimate) {
+      this._points = this.decimatePoints(this._points, this.decimate);
+    }
+    const pathData = this.convertPointsToSVGPath(this._points);
+    if (isEmptySVGPath(pathData)) {
+      // do not create 0 width/height paths, as they are
+      // rendered inconsistently across browsers
+      // Firefox 4, for example, renders a dot,
+      // whereas Chrome 10 renders nothing
+      this.canvas.requestRenderAll();
+      return;
+    }
+
+    const path = this.createPath(pathData);
+    this.canvas.clearContext(this.canvas.contextTop);
+    this.canvas.fire('before:path:created', { path: path });
+    this.canvas.add(path);
+    this.canvas.requestRenderAll();
+    path.setCoords();
+    this._resetShadow();
+
+    // fire event 'path' created
+    this.canvas.fire('path:created', { path: path });
+  }
+}

package/src/brushes/SprayBrush.ts

@@ -0,0 +1,219 @@
+import { Point } from '../Point';
+import { Group } from '../shapes/Group';
+import { Shadow } from '../Shadow';
+import { Rect } from '../shapes/Rect';
+import { getRandomInt } from '../util/internals';
+import type { Canvas } from '../canvas/Canvas';
+import { BaseBrush } from './BaseBrush';
+
+export type SprayBrushPoint = {
+  x: number;
+  y: number;
+  width: number;
+  opacity: number;
+};
+
+/**
+ *
+ * @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
+   * @default
+   */
+  width = 10;
+
+  /**
+   * Density of a spray (number of dots per chunk)
+   * @type Number
+   * @default
+   */
+  density = 20;
+
+  /**
+   * Width of spray dots
+   * @type Number
+   * @default
+   */
+  dotWidth = 1;
+
+  /**
+   * Width variance of spray dots
+   * @type Number
+   * @default
+   */
+  dotWidthVariance = 1;
+
+  /**
+   * Whether opacity of a dot should be random
+   * @type Boolean
+   * @default
+   */
+  randomOpacity = false;
+
+  /**
+   * Whether overlapping dots (rectangles) should be removed (for performance reasons)
+   * @type Boolean
+   * @default
+   */
+  optimizeOverlapping = true;
+
+  private declare sprayChunks: SprayBrushPoint[][];
+
+  private declare 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 = [];
+
+    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,
+        layout: 'fixed',
+        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/cache.ts

@@ -0,0 +1,89 @@
+import { config } from './config';
+
+export class Cache {
+  /**
+   * Cache of widths of chars in text rendering.
+   */
+  charWidthsCache: Record<
+    /** fontFamily */ string,
+    Record<
+      /** fontStyleCacheKey */ string,
+      Record</** char */ string, /** width */ number>
+    >
+  > = {};
+
+  /**
+   * @return {Object} reference to cache
+   */
+  getFontCache({
+    fontFamily,
+    fontStyle,
+    fontWeight,
+  }: {
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: string | number;
+  }) {
+    fontFamily = fontFamily.toLowerCase();
+    if (!this.charWidthsCache[fontFamily]) {
+      this.charWidthsCache[fontFamily] = {};
+    }
+    const fontCache = this.charWidthsCache[fontFamily];
+    const cacheKey = `${fontStyle.toLowerCase()}_${(
+      fontWeight + ''
+    ).toLowerCase()}`;
+    if (!fontCache[cacheKey]) {
+      fontCache[cacheKey] = {};
+    }
+    return fontCache[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) {
+    fontFamily = (fontFamily || '').toLowerCase();
+    if (!fontFamily) {
+      this.charWidthsCache = {};
+    } else if (this.charWidthsCache[fontFamily]) {
+      delete this.charWidthsCache[fontFamily];
+    }
+  }
+
+  /**
+   * 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 = {};
+}
+
+export const cache = new Cache();