feat(): DrawShape, DrawOval, DrawPoly

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- feat(): DrawShape, DrawOval, DrawPoly [#8430](https://github.com/fabricjs/fabric.js/pull/8430)
 - patch(): Added WebGLProbe to env, removed isLikelyNode, added specific env dispose ( instead of cleanup JSDOM ) [#8652](https://github.com/fabricjs/fabric.js/pull/8652)
 - ci(): Removed the browser publish script [#8656](https://github.com/fabricjs/fabric.js/pull/8656)
 - feat(): Node entry point [#8632](https://github.com/fabricjs/fabric.js/pull/8632)

fabric.ts

@@ -338,6 +338,10 @@ import { PencilBrush } from './src/brushes/PencilBrush';
 import { CircleBrush } from './src/brushes/CircleBrush';
 import { SprayBrush } from './src/brushes/SprayBrush';
 import { PatternBrush } from './src/brushes/PatternBrush';
+import { DrawOval } from './src/brushes/DrawOval';
+import { DrawPoly } from './src/brushes/DrawPoly';
+import { DrawShape } from './src/brushes/DrawShape';
+import { DrawShapeBase } from './src/brushes/DrawShapeBase';
 import { FabricObject as Object } from './src/shapes/Object/FabricObject';
 import { Line } from './src/shapes/Line';
 import { Circle } from './src/shapes/Circle';
@@ -394,6 +398,10 @@ export {
   CircleBrush,
   SprayBrush,
   PatternBrush,
+  DrawOval,
+  DrawPoly,
+  DrawShape,
+  DrawShapeBase,
   Object,
   Line,
   Circle,

src/brushes/BaseBrush.ts

@@ -4,7 +4,7 @@ import { TEvent } from '../EventTypeDefs';
 import type { Shadow } from '../Shadow';
 import type { Canvas } from '../canvas/Canvas';
 
-type TBrushEventData = TEvent & { pointer: Point };
+export type TBrushEventData = TEvent & { pointer: Point };
 
 /**
  * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo}
@@ -85,6 +85,10 @@ export abstract class BaseBrush {
    * @returns true if brush should continue blocking interaction
    */
   abstract onMouseUp(ev: TBrushEventData): boolean | void;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onDoubleClick(pointer: Point) {
+    // noop
+  }
 
   /**
    * Sets brush styles
@@ -100,15 +104,16 @@ export abstract class BaseBrush {
     ctx.setLineDash(this.strokeDashArray || []);
   }
 
+  transform(ctx: CanvasRenderingContext2D) {
+    ctx.transform(...this.canvas.viewportTransform);
+  }
+
   /**
    * 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]);
+    this.transform(ctx);
   }
 
   protected needsFullRender() {

src/brushes/DrawOval.ts

@@ -0,0 +1,34 @@
+import { Point } from '../Point';
+import { Ellipse } from '../shapes/Ellipse';
+import { DrawShape } from './DrawShape';
+
+export class DrawOval extends DrawShape<Ellipse> {
+  builder = Ellipse;
+
+  protected setBounds(a: Point, b: Point) {
+    const v = b.subtract(a);
+    const shape = this.shape!;
+    const d = new Point(Math.abs(v.x), Math.abs(v.y));
+    // set radii
+    if (this.symmetric) {
+      const r = this.centered
+        ? d.distanceFrom(new Point())
+        : Math.max(d.x, d.y) / 2;
+      shape.set({ rx: r, ry: r });
+    } else {
+      const { x: rx, y: ry } = this.centered ? d : d.scalarDivide(2);
+      shape.set({ rx, ry });
+    }
+    // set position
+    if (this.centered) {
+      shape.setPositionByOrigin(a, 0.5, 0.5);
+    } else {
+      // keep a in place
+      shape.setPositionByOrigin(
+        a,
+        -Math.sign(v.x) * 0.5 + 0.5,
+        -Math.sign(v.y) * 0.5 + 0.5
+      );
+    }
+  }
+}

src/brushes/DrawPoly.ts

@@ -0,0 +1,61 @@
+import { Point } from '../Point';
+import { Polygon } from '../shapes/Polygon';
+import { Polyline } from '../shapes/Polyline';
+import { DrawShapeBase } from './DrawShapeBase';
+
+export class DrawPoly extends DrawShapeBase<Polyline> {
+  builder = Polygon;
+
+  private addPoint(pointer: Point) {
+    this.shape!.points.push(pointer);
+  }
+
+  private replacePoint(pointer: Point) {
+    this.shape!.points.pop();
+    this.addPoint(pointer);
+    this._render();
+  }
+
+  create() {
+    return new this.builder();
+  }
+
+  protected finalize() {
+    // release interaction
+    this.canvas._isCurrentlyDrawing = false;
+    const shape = this.shape;
+    if (!shape) return;
+    shape.setBoundingBox(true);
+    const r = this.width / 2;
+    shape.set({
+      left: shape.left + r,
+      top: shape.top + r,
+    });
+    super.finalize();
+  }
+
+  onMouseDown(pointer: Point) {
+    if (this.shape) {
+      this.addPoint(pointer);
+    } else {
+      this.build();
+      this.addPoint(pointer);
+      this.addPoint(pointer);
+    }
+  }
+
+  onMouseMove(pointer: Point) {
+    this.replacePoint(pointer);
+  }
+
+  onMouseUp({ pointer }: { pointer: Point }) {
+    this.replacePoint(pointer);
+    this.addPoint(pointer);
+    return true;
+  }
+
+  onDoubleClick(pointer: Point) {
+    this.shape && this.replacePoint(pointer);
+    this.finalize();
+  }
+}

src/brushes/DrawShape.ts

@@ -0,0 +1,76 @@
+import { ModifierKey } from '../EventTypeDefs';
+import { Point } from '../Point';
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import { Rect } from '../shapes/Rect';
+import { Constructor } from '../typedefs';
+import { TBrushEventData } from './BaseBrush';
+import { DrawShapeBase } from './DrawShapeBase';
+
+export class DrawShape<T extends FabricObject = Rect> extends DrawShapeBase<T> {
+  /**
+   * class to build shape from
+   */
+  builder: Constructor<T> = Rect as unknown as Constructor<T>;
+
+  /**
+   * set to `true` for the shape to be centered on mouse/touch down
+   */
+  centered = false;
+
+  /**
+   * The event modifier key that makes the brush symmetric.
+   */
+  modifierKey?: ModifierKey = 'shiftKey';
+
+  /**
+   * set to `true` for the shape to be symmetric
+   */
+  symmetric?: boolean;
+
+  protected start: Point;
+
+  create() {
+    return new this.builder();
+  }
+
+  protected setBounds(a: Point, b: Point) {
+    const v = b.subtract(a);
+    const shape = this.shape!;
+    const d = new Point(Math.abs(v.x), Math.abs(v.y));
+    // size
+    if (this.symmetric) {
+      const side =
+        (d.distanceFrom(new Point()) / Math.SQRT2) * (this.centered ? 2 : 1);
+      shape.set({ width: side, height: side });
+    } else {
+      shape.set({ width: d.x, height: d.y });
+    }
+    // position
+    if (this.centered) {
+      shape.setPositionByOrigin(a, 0.5, 0.5);
+    } else {
+      // keep a in place
+      shape.setPositionByOrigin(
+        a,
+        -Math.sign(v.x) * 0.5 + 0.5,
+        -Math.sign(v.y) * 0.5 + 0.5
+      );
+    }
+  }
+
+  onMouseDown(pointer: Point) {
+    this.build();
+    this.start = pointer;
+  }
+
+  onMouseMove(pointer: Point, ev: TBrushEventData) {
+    this.symmetric = this.modifierKey && ev.e[this.modifierKey];
+    this.setBounds(this.start, pointer);
+    this._render();
+  }
+
+  onMouseUp(ev: TBrushEventData) {
+    this.setBounds(this.start, ev.pointer);
+    this.finalize();
+  }
+}

src/brushes/DrawShapeBase.ts

@@ -0,0 +1,64 @@
+import { Point } from '../Point';
+import { Shadow } from '../Shadow';
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import { BaseBrush } from './BaseBrush';
+
+/**
+ * Declarative shape drawing using pointer events
+ */
+export abstract class DrawShapeBase<T extends FabricObject> extends BaseBrush {
+  shape: T | undefined;
+  stroke = '';
+  fill = '';
+
+  abstract create(): T;
+
+  protected build() {
+    this.shape = this.create();
+    this.shape.set('canvas', this.canvas);
+    this.setStyles();
+  }
+
+  setStyles() {
+    this.shape?.set({
+      stroke: this.stroke || this.color,
+      fill: this.fill || this.color,
+      strokeWidth: this.width,
+      strokeLineCap: this.strokeLineCap,
+      strokeMiterLimit: this.strokeMiterLimit,
+      strokeLineJoin: this.strokeLineJoin,
+      strokeDashArray: this.strokeDashArray,
+      shadow: this.shadow ? new Shadow(this.shadow) : undefined,
+    });
+  }
+
+  protected finalize() {
+    const shape = this.shape;
+    if (!shape) return;
+    shape.setCoords();
+    this.canvas.fire('before:path:created', { path: shape });
+    this.canvas.add(shape);
+    this.canvas.fire('path:created', { path: shape });
+    this.canvas.clearContext(this.canvas.contextTop);
+    this.shape = undefined;
+  }
+
+  _setBrushStyles() {
+    this.setStyles();
+  }
+
+  transform(ctx: CanvasRenderingContext2D) {
+    const t = this.canvas.viewportTransform;
+    const offset = new Point().transform(t);
+    ctx.transform(t[0], t[1], t[2], t[3], -offset.x, -offset.y);
+  }
+
+  _render(ctx: CanvasRenderingContext2D = this.canvas.contextTop) {
+    this.canvas.clearContext(ctx);
+    ctx.save();
+    this.transform(ctx);
+    this.shape!.transform(ctx);
+    this.shape!._render(ctx);
+    ctx.restore();
+  }
+}

src/canvas/Canvas.ts

@@ -539,10 +539,6 @@ export class Canvas extends SelectableCanvas {
     this.fire('drop:after', options);
   }
 
-  /**
-   * @private
-   * @param {Event} e Event object fired on mousedown
-   */
   private _onContextMenu(e: TPointerEvent): false {
     const target = this.findTarget(e),
       subTargets = this.targets || [];
@@ -557,11 +553,8 @@ export class Canvas extends SelectableCanvas {
     return false;
   }
 
-  /**
-   * @private
-   * @param {Event} e Event object fired on mousedown
-   */
   private _onDoubleClick(e: TPointerEvent) {
+    this.freeDrawingBrush?.onDoubleClick(this.getPointer(e));
     this._cacheTransformEventData(e);
     this._handleEvent(e, 'dblclick');
     this._resetTransformEventData();

src/shapes/Ellipse.ts

@@ -25,7 +25,7 @@ export class Ellipse extends FabricObject {
    * @param {Object} [options] Options object
    * @return {Ellipse} thisArg
    */
-  constructor(options: Record<string, unknown>) {
+  constructor(options?: Record<string, unknown>) {
     super(options);
   }
 

src/shapes/Rect.ts

@@ -25,7 +25,7 @@ export class Rect extends FabricObject {
    * @param {Object} [options] Options object
    * @return {Object} thisArg
    */
-  constructor(options: Record<string, unknown>) {
+  constructor(options?: Record<string, unknown>) {
     super(options);
     this._initRxRy();
   }