fabric 5.3.0 → 6.0.0-beta3

package/src/brushes/{base_brush.class.js → BaseBrush.ts}

@@ -1,140 +1,163 @@
+import { Color } from '../color/Color';
+import type { Point } from '../Point';
+import { TEvent } from '../EventTypeDefs';
+import type { Shadow } from '../Shadow';
+import type { Canvas } from '../canvas/Canvas';
+
+type TBrushEventData = TEvent & { pointer: Point };
+
 /**
- * BaseBrush class
- * @class fabric.BaseBrush
  * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo}
  */
-fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ {
-
+export abstract class BaseBrush {
   /**
    * Color of a brush
    * @type String
    * @default
    */
-  color: 'rgb(0, 0, 0)',
+  color = 'rgb(0, 0, 0)';
 
   /**
    * Width of a brush, has to be a Number, no string literals
    * @type Number
    * @default
    */
-  width: 1,
+  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 fabric.Shadow
+   * @type Shadow
    * @default
    */
-  shadow: null,
+  shadow: Shadow | null = null;
 
   /**
    * Line endings style of a brush (one of "butt", "round", "square")
    * @type String
    * @default
    */
-  strokeLineCap: 'round',
+  strokeLineCap: CanvasLineCap = 'round';
 
   /**
    * Corner style of a brush (one of "bevel", "round", "miter")
    * @type String
    * @default
    */
-  strokeLineJoin: 'round',
+  strokeLineJoin: CanvasLineJoin = 'round';
 
   /**
    * Maximum miter length (used for strokeLineJoin = "miter") of a brush's
    * @type Number
    * @default
    */
-  strokeMiterLimit:         10,
+  strokeMiterLimit = 10;
 
   /**
    * Stroke Dash Array.
    * @type Array
    * @default
    */
-  strokeDashArray: null,
+  strokeDashArray: number[] | null = null;
 
   /**
    * When `true`, the free drawing is limited to the whiteboard size. Default to false.
    * @type Boolean
    * @default false
-  */
+   */
 
-  limitedToCanvasSize: 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: function (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 {RenderingContext2d} ctx context to render on
+   * @param {CanvasRenderingContext2D} ctx context to render on
    * @private
    */
-  _saveAndTransform: function(ctx) {
-    var v = this.canvas.viewportTransform;
+  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
    */
-  _setShadow: function() {
-    if (!this.shadow) {
+  protected _setShadow() {
+    if (!this.shadow || !this.canvas) {
       return;
     }
 
-    var canvas = this.canvas,
-        shadow = this.shadow,
-        ctx = canvas.contextTop,
-        zoom = canvas.getZoom();
-    if (canvas && canvas._isRetinaScaling()) {
-      zoom *= fabric.devicePixelRatio;
-    }
+    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;
-  },
-
-  needsFullRender: function() {
-    var color = new fabric.Color(this.color);
-    return color.getAlpha() < 1 || !!this.shadow;
-  },
+  }
 
   /**
    * Removes brush shadow styles
    * @private
    */
-  _resetShadow: function() {
-    var ctx = this.canvas.contextTop;
+  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
-  */
-  _isOutSideCanvas: function(pointer) {
-    return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight();
+   */
+  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.ts

@@ -0,0 +1,145 @@
+import { Color } from '../color/Color';
+import { Point } from '../Point';
+import { Shadow } from '../Shadow';
+import { Circle } from '../shapes/Circle';
+import { Group } from '../shapes/Group';
+import { getRandomInt } from '../util/internals';
+import type { Canvas } from '../canvas/Canvas';
+import { BaseBrush } from './BaseBrush';
+
+export type CircleBrushPoint = {
+  x: number;
+  y: number;
+  radius: number;
+  fill: string;
+};
+
+export class CircleBrush extends BaseBrush {
+  /**
+   * Width of a brush
+   * @type Number
+   * @default
+   */
+  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 { 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;
+  }
+}