chore(TS): migrate brushes (fabricjs#8182)

index.js

@@ -30,11 +30,6 @@ import './src/gradient'; // optional gradient
 import './src/pattern.class'; // optional pattern
 import './src/shadow.class'; // optional shadow
 import './src/static_canvas.class';
-import './src/brushes/base_brush.class'; // optional freedrawing
-import './src/brushes/pencil_brush.class'; // optional freedrawing
-import './src/brushes/circle_brush.class'; // optional freedrawing
-import './src/brushes/spray_brush.class'; // optional freedrawing
-import './src/brushes/pattern_brush.class'; // optional freedrawing
 import './src/canvas.class'; // optional interaction
 import './src/mixins/canvas_events.mixin'; // optional interaction
 import './src/mixins/canvas_grouping.mixin'; // optional interaction
@@ -93,5 +88,7 @@ import './src/mixins/itext_key_behavior.mixin'; // optional itext
 import './src/mixins/itext.svg_export'; // optional itext
 import './src/shapes/textbox.class'; // optional textbox
 import './src/mixins/default_controls'; // optional interaction
+
+import './src/brushes'; // optional freedrawing
 //  extends fabric.StaticCanvas, fabric.Canvas, fabric.Object, depends on fabric.PencilBrush and fabric.Rect
 // import './src/mixins/eraser_brush.mixin'; // optional erasing

src/__types__.ts

@@ -0,0 +1,6 @@
+/**
+ * @todo remove transient
+ */
+export type Shadow = any;
+export type Canvas = any;
+export type Rect = any;

src/brushes/base_brush.class.ts

@@ -1,148 +1,152 @@
-//@ts-nocheck
-
+import { fabric } from "../../HEADER";
 import { Color } from "../color";
+import { Point } from "../point.class";
+import { Canvas, Shadow } from "../__types__";
+
+/**
+ * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo}
+ */
+export abstract class BaseBrush {
+
+  /**
+   * Color of a brush
+   * @type String
+   * @default
+   */
+  color = 'rgb(0, 0, 0)'
+
+  /**
+   * Width of a brush, has to be a Number, no string literals
+   * @type Number
+   * @default
+   */
+  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
+   * @default
+   */
+  shadow: Shadow | null = null
+
+  /**
+   * Line endings style of a brush (one of "butt", "round", "square")
+   * @type String
+   * @default
+   */
+  strokeLineCap: CanvasLineCap = 'round'
+
+  /**
+   * Corner style of a brush (one of "bevel", "round", "miter")
+   * @type String
+   * @default
+   */
+  strokeLineJoin: CanvasLineJoin = 'round'
+
+  /**
+   * Maximum miter length (used for strokeLineJoin = "miter") of a brush's
+   * @type Number
+   * @default
+   */
+  strokeMiterLimit = 10
+
+  /**
+   * Stroke Dash Array.
+   * @type Array
+   * @default
+   */
+  strokeDashArray: number[] | null = null
 
-(function(global) {
-  var fabric = global.fabric;
   /**
-   * BaseBrush class
-   * @class fabric.BaseBrush
-   * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo}
+   * When `true`, the free drawing is limited to the whiteboard size. Default to false.
+   * @type Boolean
+   * @default false
+  */
+
+  limitedToCanvasSize = false
+
+  /**
+   * @todo add type
+   */
+  canvas: Canvas
+
+  constructor(canvas: Canvas) {
+    this.canvas = canvas;
+  }
+
+
+  /**
+   * 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
    */
-  fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ {
-
-    /**
-     * Color of a brush
-     * @type String
-     * @default
-     */
-    color: 'rgb(0, 0, 0)',
-
-    /**
-     * Width of a brush, has to be a Number, no string literals
-     * @type Number
-     * @default
-     */
-    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
-     * @default
-     */
-    shadow: null,
-
-    /**
-     * Line endings style of a brush (one of "butt", "round", "square")
-     * @type String
-     * @default
-     */
-    strokeLineCap: 'round',
-
-    /**
-     * Corner style of a brush (one of "bevel", "round", "miter")
-     * @type String
-     * @default
-     */
-    strokeLineJoin: 'round',
-
-    /**
-     * Maximum miter length (used for strokeLineJoin = "miter") of a brush's
-     * @type Number
-     * @default
-     */
-    strokeMiterLimit:         10,
-
-    /**
-     * Stroke Dash Array.
-     * @type Array
-     * @default
-     */
-    strokeDashArray: null,
-
-    /**
-     * When `true`, the free drawing is limited to the whiteboard size. Default to false.
-     * @type Boolean
-     * @default false
-    */
-
-    limitedToCanvasSize: false,
-
-
-    /**
-     * Sets brush styles
-     * @private
-     * @param {CanvasRenderingContext2D} ctx
-     */
-    _setBrushStyles: function (ctx) {
-      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
-     * @private
-     */
-    _saveAndTransform: function(ctx) {
-      var v = this.canvas.viewportTransform;
-      ctx.save();
-      ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
-    },
-
-    /**
-     * Sets brush shadow styles
-     * @private
-     */
-    _setShadow: function() {
-      if (!this.shadow) {
-        return;
-      }
-
-      var canvas = this.canvas,
-          shadow = this.shadow,
-          ctx = canvas.contextTop,
-          zoom = canvas.getZoom();
-      if (canvas && canvas._isRetinaScaling()) {
-        zoom *= fabric.devicePixelRatio;
-      }
-
-      ctx.shadowColor = shadow.color;
-      ctx.shadowBlur = shadow.blur * zoom;
-      ctx.shadowOffsetX = shadow.offsetX * zoom;
-      ctx.shadowOffsetY = shadow.offsetY * zoom;
-    },
-
-    needsFullRender: function() {
-      var color = new Color(this.color);
-      return color.getAlpha() < 1 || !!this.shadow;
-    },
-
-    /**
-     * Removes brush shadow styles
-     * @private
-     */
-    _resetShadow: function() {
-      var 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 _saveAndTransform(ctx: CanvasRenderingContext2D) {
+    const v = this.canvas.viewportTransform;
+    ctx.save();
+    ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
+  }
+
+  /**
+   * Sets brush shadow styles
+   * @private
+   */
+  protected _setShadow() {
+    if (!this.shadow || !this.canvas) {
+      return;
     }
-  });
-})(typeof exports !== 'undefined' ? exports : window);
+
+    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;
+  }
+
+  protected needsFullRender() {
+    const color = new Color(this.color);
+    return color.getAlpha() < 1 || !!this.shadow;
+  }
+
+  /**
+   * 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();
+  }
+}
+
+fabric.BaseBrush = BaseBrush;