@nasser-sw/fabric 7.0.0-beta1

package/src/Shadow.ts

@@ -0,0 +1,236 @@
+import { classRegistry } from './ClassRegistry';
+import { Color } from './color/Color';
+import { config } from './config';
+import { reNum } from './parser/constants';
+import { Point } from './Point';
+import type { FabricObject } from './shapes/Object/FabricObject';
+import type { TClassProperties } from './typedefs';
+import { uid } from './util/internals/uid';
+import { pickBy } from './util/misc/pick';
+import { degreesToRadians } from './util/misc/radiansDegreesConversion';
+import { toFixed } from './util/misc/toFixed';
+import { rotateVector } from './util/misc/vectors';
+
+/**
+   * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px")
+   * - (?:\s|^): This part captures either a whitespace character (\s) or the beginning of a line (^). It's non-capturing (due to (?:...)), meaning it doesn't create a capturing group.
+   * - (-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?: This captures the first component of the shadow, which is the horizontal offset. Breaking it down:
+   *   - (-?\d+): Captures an optional minus sign followed by one or more digits (integer part of the number).
+   *   - (?:\.\d*)?: Optionally captures a decimal point followed by zero or more digits (decimal part of the number).
+   *   - (?:px)?: Optionally captures the "px" unit.
+   *   - (?:\s?|$): Captures either an optional whitespace or the end of the line. This whole part is wrapped in a non-capturing group and marked as optional with ?.
+   * - (-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?: Similar to the previous step, this captures the vertical offset.
+
+(\d+(?:\.\d*)?(?:px)?)?: This captures the blur radius. It's similar to the horizontal offset but without the optional minus sign.
+
+(?:\s+(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?){0,1}: This captures an optional part for the color. It allows for whitespace followed by a component with an optional minus sign, digits, decimal point, and "px" unit.
+
+(?:$|\s): This captures either the end of the line or a whitespace character. It ensures that the match ends either at the end of the string or with a whitespace character.
+   */
+// eslint-disable-next-line max-len
+
+const shadowOffsetRegex = '(-?\\d+(?:\\.\\d*)?(?:px)?(?:\\s?|$))?';
+
+const reOffsetsAndBlur = new RegExp(
+  '(?:\\s|^)' +
+    shadowOffsetRegex +
+    shadowOffsetRegex +
+    '(' +
+    reNum +
+    '?(?:px)?)?(?:\\s?|$)(?:$|\\s)',
+);
+
+export const shadowDefaultValues: Partial<TClassProperties<Shadow>> = {
+  color: 'rgb(0,0,0)',
+  blur: 0,
+  offsetX: 0,
+  offsetY: 0,
+  affectStroke: false,
+  includeDefaultValues: true,
+  nonScaling: false,
+};
+
+export type SerializedShadowOptions = {
+  color: string;
+  blur: number;
+  offsetX: number;
+  offsetY: number;
+  affectStroke: boolean;
+  nonScaling: boolean;
+  type: string;
+};
+
+export class Shadow {
+  /**
+   * Shadow color
+   * @type String
+   */
+  declare color: string;
+
+  /**
+   * Shadow blur
+   * @type Number
+   */
+  declare blur: number;
+
+  /**
+   * Shadow horizontal offset
+   * @type Number
+   */
+  declare offsetX: number;
+
+  /**
+   * Shadow vertical offset
+   * @type Number
+   */
+  declare offsetY: number;
+
+  /**
+   * Whether the shadow should affect stroke operations
+   * @type Boolean
+   */
+  declare affectStroke: boolean;
+
+  /**
+   * Indicates whether toObject should include default values
+   * @type Boolean
+   */
+  declare includeDefaultValues: boolean;
+
+  /**
+   * When `false`, the shadow will scale with the object.
+   * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale.
+   * default to false
+   * @type Boolean
+   */
+  declare nonScaling: boolean;
+
+  declare id: number;
+
+  static ownDefaults = shadowDefaultValues;
+
+  static type = 'shadow';
+
+  /**
+   * @see {@link http://fabricjs.com/shadows|Shadow demo}
+   * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px")
+   */
+  constructor(options?: Partial<TClassProperties<Shadow>>);
+  constructor(svgAttribute: string);
+  constructor(arg0: string | Partial<TClassProperties<Shadow>> = {}) {
+    const options: Partial<TClassProperties<Shadow>> =
+      typeof arg0 === 'string' ? Shadow.parseShadow(arg0) : arg0;
+    Object.assign(this, Shadow.ownDefaults, options);
+    this.id = uid();
+  }
+
+  /**
+   * @param {String} value Shadow value to parse
+   * @return {Object} Shadow object with color, offsetX, offsetY and blur
+   */
+  static parseShadow(value: string) {
+    const shadowStr = value.trim(),
+      [, offsetX = 0, offsetY = 0, blur = 0] = (
+        reOffsetsAndBlur.exec(shadowStr) || []
+      ).map((value) => parseFloat(value) || 0),
+      color = (shadowStr.replace(reOffsetsAndBlur, '') || 'rgb(0,0,0)').trim();
+
+    return {
+      color,
+      offsetX,
+      offsetY,
+      blur,
+    };
+  }
+
+  /**
+   * Returns a string representation of an instance
+   * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow
+   * @return {String} Returns CSS3 text-shadow declaration
+   */
+  toString() {
+    return [this.offsetX, this.offsetY, this.blur, this.color].join('px ');
+  }
+
+  /**
+   * Returns SVG representation of a shadow
+   * @param {FabricObject} object
+   * @return {String} SVG representation of a shadow
+   */
+  toSVG(object: FabricObject) {
+    const offset = rotateVector(
+        new Point(this.offsetX, this.offsetY),
+        degreesToRadians(-object.angle),
+      ),
+      BLUR_BOX = 20,
+      color = new Color(this.color);
+    let fBoxX = 40,
+      fBoxY = 40;
+
+    if (object.width && object.height) {
+      //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion
+      // we add some extra space to filter box to contain the blur ( 20 )
+      fBoxX =
+        toFixed(
+          (Math.abs(offset.x) + this.blur) / object.width,
+          config.NUM_FRACTION_DIGITS,
+        ) *
+          100 +
+        BLUR_BOX;
+      fBoxY =
+        toFixed(
+          (Math.abs(offset.y) + this.blur) / object.height,
+          config.NUM_FRACTION_DIGITS,
+        ) *
+          100 +
+        BLUR_BOX;
+    }
+    if (object.flipX) {
+      offset.x *= -1;
+    }
+    if (object.flipY) {
+      offset.y *= -1;
+    }
+
+    return `<filter id="SVGID_${this.id}" y="-${fBoxY}%" height="${
+      100 + 2 * fBoxY
+    }%" x="-${fBoxX}%" width="${
+      100 + 2 * fBoxX
+    }%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="${toFixed(
+      this.blur ? this.blur / 2 : 0,
+      config.NUM_FRACTION_DIGITS,
+    )}"></feGaussianBlur>\n\t<feOffset dx="${toFixed(
+      offset.x,
+      config.NUM_FRACTION_DIGITS,
+    )}" dy="${toFixed(
+      offset.y,
+      config.NUM_FRACTION_DIGITS,
+    )}" result="oBlur" ></feOffset>\n\t<feFlood flood-color="${color.toRgb()}" flood-opacity="${color.getAlpha()}"/>\n\t<feComposite in2="oBlur" operator="in" />\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n`;
+  }
+
+  /**
+   * Returns object representation of a shadow
+   * @return {Object} Object representation of a shadow instance
+   */
+  toObject() {
+    const data: SerializedShadowOptions = {
+      color: this.color,
+      blur: this.blur,
+      offsetX: this.offsetX,
+      offsetY: this.offsetY,
+      affectStroke: this.affectStroke,
+      nonScaling: this.nonScaling,
+      type: (this.constructor as typeof Shadow).type,
+    };
+    const defaults = Shadow.ownDefaults as SerializedShadowOptions;
+    return !this.includeDefaultValues
+      ? pickBy(data, (value, key) => value !== defaults[key])
+      : data;
+  }
+
+  static async fromObject(options: Partial<TClassProperties<Shadow>>) {
+    return new this(options);
+  }
+}
+
+classRegistry.setClass(Shadow, 'shadow');

package/src/__snapshots__/Shadow.spec.ts.snap

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Shadow > fromObject 1`] = `
+{
+  "affectStroke": false,
+  "blur": 0,
+  "color": "red",
+  "id": 0,
+  "includeDefaultValues": true,
+  "nonScaling": false,
+  "offsetX": 10,
+  "offsetY": 0,
+}
+`;
+
+exports[`Shadow > fromObject 2`] = `
+{
+  "affectStroke": false,
+  "blur": 0,
+  "color": "red",
+  "id": 0,
+  "includeDefaultValues": true,
+  "nonScaling": false,
+  "offsetX": 10,
+  "offsetY": 0,
+}
+`;

package/src/brushes/BaseBrush.spec.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { BaseBrush } from './BaseBrush';
+
+describe('BaseBrush', () => {
+  it('initializes constructor correctly', () => {
+    expect(BaseBrush).toBeTruthy();
+
+    // @ts-expect-error -- TODO: not sure if we need this test since this is an abstract class and only derivative classes are instantiated
+    const brush = new BaseBrush();
+
+    expect(brush, 'should inherit from fabric.BaseBrush').toBeInstanceOf(
+      BaseBrush,
+    );
+    expect(brush.color, 'default color is black').toBe('rgb(0, 0, 0)');
+    expect(brush.width, 'default width is 1').toBe(1);
+  });
+});

package/src/brushes/BaseBrush.ts

@@ -0,0 +1,154 @@
+import { Color } from '../color/Color';
+import type { Point } from '../Point';
+import type { Shadow } from '../Shadow';
+import type { Canvas } from '../canvas/Canvas';
+import type { TBrushEventData } from './typedefs';
+
+/**
+ * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo}
+ */
+export abstract class BaseBrush {
+  /**
+   * Color of a brush
+   * @type String
+   */
+  color = 'rgb(0, 0, 0)';
+
+  /**
+   * Width of a brush, has to be a Number, no string literals
+   * @type Number
+   */
+  width = 1;
+
+  /**
+   * Shadow object representing shadow of this shape.
+   * <b>Backwards incompatibility note:</b> This property replaces "shadowColor" (String), "shadowOffsetX" (Number),
+   * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12
+   * @type Shadow
+   */
+  shadow: Shadow | null = null;
+
+  /**
+   * Line endings style of a brush (one of "butt", "round", "square")
+   * @type String
+   */
+  strokeLineCap: CanvasLineCap = 'round';
+
+  /**
+   * Corner style of a brush (one of "bevel", "round", "miter")
+   * @type String
+   */
+  strokeLineJoin: CanvasLineJoin = 'round';
+
+  /**
+   * Maximum miter length (used for strokeLineJoin = "miter") of a brush's
+   * @type Number
+   */
+  strokeMiterLimit = 10;
+
+  /**
+   * Stroke Dash Array.
+   * @type Array
+   */
+  strokeDashArray: number[] | null = null;
+
+  /**
+   * When `true`, the free drawing is limited to the whiteboard size. Default to false.
+   * @type Boolean
+   * @default false
+   */
+
+  limitedToCanvasSize = false;
+
+  /**
+   * @todo add type
+   */
+  declare canvas: Canvas;
+
+  constructor(canvas: Canvas) {
+    this.canvas = canvas;
+  }
+
+  abstract _render(): void;
+  abstract onMouseDown(pointer: Point, ev: TBrushEventData): void;
+  abstract onMouseMove(pointer: Point, ev: TBrushEventData): void;
+  /**
+   * @returns true if brush should continue blocking interaction
+   */
+  abstract onMouseUp(ev: TBrushEventData): boolean | void;
+
+  /**
+   * Sets brush styles
+   * @private
+   * @param {CanvasRenderingContext2D} ctx
+   */
+  _setBrushStyles(ctx: CanvasRenderingContext2D) {
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this.width;
+    ctx.lineCap = this.strokeLineCap;
+    ctx.miterLimit = this.strokeMiterLimit;
+    ctx.lineJoin = this.strokeLineJoin;
+    ctx.setLineDash(this.strokeDashArray || []);
+  }
+
+  /**
+   * Sets the transformation on given context
+   * @param {CanvasRenderingContext2D} ctx context to render on
+   * @private
+   */
+  protected _saveAndTransform(ctx: CanvasRenderingContext2D) {
+    const v = this.canvas.viewportTransform;
+    ctx.save();
+    ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
+  }
+
+  protected needsFullRender() {
+    const color = new Color(this.color);
+    return color.getAlpha() < 1 || !!this.shadow;
+  }
+
+  /**
+   * Sets brush shadow styles
+   * @private
+   */
+  protected _setShadow() {
+    if (!this.shadow || !this.canvas) {
+      return;
+    }
+
+    const canvas = this.canvas,
+      shadow = this.shadow,
+      ctx = canvas.contextTop,
+      zoom = canvas.getZoom() * canvas.getRetinaScaling();
+
+    ctx.shadowColor = shadow.color;
+    ctx.shadowBlur = shadow.blur * zoom;
+    ctx.shadowOffsetX = shadow.offsetX * zoom;
+    ctx.shadowOffsetY = shadow.offsetY * zoom;
+  }
+
+  /**
+   * Removes brush shadow styles
+   * @private
+   */
+  protected _resetShadow() {
+    const ctx = this.canvas.contextTop;
+
+    ctx.shadowColor = '';
+    ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
+  }
+
+  /**
+   * Check is pointer is outside canvas boundaries
+   * @param {Object} pointer
+   * @private
+   */
+  protected _isOutSideCanvas(pointer: Point) {
+    return (
+      pointer.x < 0 ||
+      pointer.x > this.canvas.getWidth() ||
+      pointer.y < 0 ||
+      pointer.y > this.canvas.getHeight()
+    );
+  }
+}

package/src/brushes/CircleBrush.test.ts

@@ -0,0 +1,13 @@
+import { CircleBrush } from './CircleBrush';
+import { Canvas } from '../canvas/Canvas';
+
+import { describe, expect, it } from 'vitest';
+
+describe('CircleBrush', () => {
+  it('can be initialized', () => {
+    const canvas = new Canvas('test', {});
+    const circleBrush = new CircleBrush(canvas);
+    expect(circleBrush instanceof CircleBrush).toBe(true);
+    expect(circleBrush.points).toEqual([]);
+  });
+});

package/src/brushes/CircleBrush.ts

@@ -0,0 +1,139 @@
+import { Color } from '../color/Color';
+import type { Point } from '../Point';
+import { Shadow } from '../Shadow';
+import { Circle } from '../shapes/Circle';
+import { Group } from '../shapes/Group';
+import { getRandomInt } from '../util/internals/getRandomInt';
+import type { Canvas } from '../canvas/Canvas';
+import { BaseBrush } from './BaseBrush';
+import type { CircleBrushPoint } from './typedefs';
+import { CENTER } from '../constants';
+
+export class CircleBrush extends BaseBrush {
+  /**
+   * Width of a brush
+   * @type Number
+   */
+  width = 10;
+
+  declare points: CircleBrushPoint[];
+
+  constructor(canvas: Canvas) {
+    super(canvas);
+    this.points = [];
+  }
+
+  /**
+   * Invoked inside on mouse down and mouse move
+   * @param {Point} pointer
+   */
+  drawDot(pointer: Point) {
+    const point = this.addPoint(pointer),
+      ctx = this.canvas.contextTop;
+    this._saveAndTransform(ctx);
+    this.dot(ctx, point);
+    ctx.restore();
+  }
+
+  dot(ctx: CanvasRenderingContext2D, point: CircleBrushPoint) {
+    ctx.fillStyle = point.fill;
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
+    ctx.closePath();
+    ctx.fill();
+  }
+
+  /**
+   * Invoked on mouse down
+   */
+  onMouseDown(pointer: Point) {
+    this.points = [];
+    this.canvas.clearContext(this.canvas.contextTop);
+    this._setShadow();
+    this.drawDot(pointer);
+  }
+
+  /**
+   * Render the full state of the brush
+   * @private
+   */
+  _render() {
+    const ctx = this.canvas.contextTop,
+      points = this.points;
+    this._saveAndTransform(ctx);
+    for (let i = 0; i < points.length; i++) {
+      this.dot(ctx, points[i]);
+    }
+    ctx.restore();
+  }
+
+  /**
+   * Invoked on mouse move
+   * @param {Point} pointer
+   */
+  onMouseMove(pointer: Point) {
+    if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) {
+      return;
+    }
+    if (this.needsFullRender()) {
+      this.canvas.clearContext(this.canvas.contextTop);
+      this.addPoint(pointer);
+      this._render();
+    } else {
+      this.drawDot(pointer);
+    }
+  }
+
+  /**
+   * Invoked on mouse up
+   */
+  onMouseUp() {
+    const originalRenderOnAddRemove = this.canvas.renderOnAddRemove;
+    this.canvas.renderOnAddRemove = false;
+
+    const circles: Circle[] = [];
+
+    for (let i = 0; i < this.points.length; i++) {
+      const point = this.points[i],
+        circle = new Circle({
+          radius: point.radius,
+          left: point.x,
+          top: point.y,
+          originX: CENTER,
+          originY: CENTER,
+          fill: point.fill,
+        });
+
+      this.shadow && (circle.shadow = new Shadow(this.shadow));
+
+      circles.push(circle);
+    }
+    const group = new Group(circles, { canvas: this.canvas });
+
+    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();
+  }
+
+  /**
+   * @param {Object} pointer
+   * @return {Point} Just added pointer point
+   */
+  addPoint({ x, y }: Point) {
+    const pointerPoint: CircleBrushPoint = {
+      x,
+      y,
+      radius: getRandomInt(Math.max(0, this.width - 20), this.width + 20) / 2,
+      fill: new Color(this.color).setAlpha(getRandomInt(0, 100) / 100).toRgba(),
+    };
+
+    this.points.push(pointerPoint);
+
+    return pointerPoint;
+  }
+}

package/src/brushes/PatternBrush.ts

@@ -0,0 +1,70 @@
+import { Pattern } from '../Pattern';
+import { createCanvasElement } from '../util/misc/dom';
+import type { Canvas } from '../canvas/Canvas';
+import { PencilBrush } from './PencilBrush';
+import type { TSimplePathData } from '../util/path/typedefs';
+
+export class PatternBrush extends PencilBrush {
+  declare source?: CanvasImageSource;
+
+  constructor(canvas: Canvas) {
+    super(canvas);
+  }
+
+  getPatternSrc() {
+    const dotWidth = 20,
+      dotDistance = 5,
+      patternCanvas = createCanvasElement(),
+      patternCtx = patternCanvas.getContext('2d');
+
+    patternCanvas.width = patternCanvas.height = dotWidth + dotDistance;
+    if (patternCtx) {
+      patternCtx.fillStyle = this.color;
+      patternCtx.beginPath();
+      patternCtx.arc(
+        dotWidth / 2,
+        dotWidth / 2,
+        dotWidth / 2,
+        0,
+        Math.PI * 2,
+        false,
+      );
+      patternCtx.closePath();
+      patternCtx.fill();
+    }
+    return patternCanvas;
+  }
+
+  /**
+   * Creates "pattern" instance property
+   * @param {CanvasRenderingContext2D} ctx
+   */
+  getPattern(ctx: CanvasRenderingContext2D) {
+    return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat');
+  }
+
+  /**
+   * Sets brush styles
+   * @param {CanvasRenderingContext2D} ctx
+   */
+  _setBrushStyles(ctx: CanvasRenderingContext2D) {
+    super._setBrushStyles(ctx);
+    const pattern = this.getPattern(ctx);
+    pattern && (ctx.strokeStyle = pattern);
+  }
+
+  /**
+   * Creates path
+   */
+  createPath(pathData: TSimplePathData) {
+    const path = super.createPath(pathData),
+      topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2);
+
+    path.stroke = new Pattern({
+      source: this.source || this.getPatternSrc(),
+      offsetX: -topLeft.x,
+      offsetY: -topLeft.y,
+    });
+    return path;
+  }
+}