chore(TS) Converting Object to a class

src/canvas.class.ts

@@ -1,5 +1,6 @@
 //@ts-nocheck
 import { Point } from './point.class';
+import { FabricObject } from './shapes/object.class';
 
 (function (global) {
   var fabric = global.fabric,
@@ -871,7 +872,7 @@ import { Point } from './point.class';
         maxX -= strokeOffset;
         maxY -= strokeOffset;
         // selection border
-        fabric.Object.prototype._setLineDash.call(
+        FabricObject.prototype._setLineDash.call(
           this,
           ctx,
           this.selectionDashArray

src/controls/default_controls.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { FabricObject } from '../shapes/object.class';
+
 (function (global) {
   var fabric = global.fabric,
     controlsUtils = fabric.controlsUtils,
@@ -8,7 +10,7 @@
     scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX,
     scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY,
     scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName,
-    objectControls = fabric.Object.prototype.controls;
+    objectControls = FabricObject.prototype.controls;
 
   objectControls.ml = new fabric.Control({
     x: -0.5,

src/gradient/gradient.class.ts

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import { fabric } from '../../HEADER';
 import { Color } from '../color';
 import { iMatrix } from '../constants';
@@ -20,11 +21,7 @@ import {
   GradientUnits,
   SVGOptions,
 } from './typedefs';
-
-/**
- * @todo remove this transient junk
- */
-type FabricObject = any;
+import { FabricObject } from '../shapes/object.class';
 
 /**
  * Gradient class
@@ -93,7 +90,7 @@ export class Gradient<
     gradientTransform,
     id,
   }: GradientOptions<T>) {
-    const uid = fabric.Object.__uid++;
+    const uid = FabricObject.__uid++;
     this.id = id ? `${id}_${uid}` : uid;
     this.type = type;
     this.gradientUnits = gradientUnits;

src/mixins/animation.mixin.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { FabricObject } from '../shapes/object.class';
+
 (function (global) {
   var fabric = global.fabric;
   fabric.util.object.extend(
@@ -113,8 +115,8 @@
   );
 
   fabric.util.object.extend(
-    fabric.Object.prototype,
-    /** @lends fabric.Object.prototype */ {
+    FabricObject.prototype,
+    /** @lends FabricObject.prototype */ {
       /**
        * Animates object's properties
        * @param {String|Object} property Property to animate (if string) or properties to animate (if object)

src/mixins/itext.svg_export.ts

@@ -2,6 +2,7 @@
 
 import { Color } from '../color';
 import { config } from '../config';
+import { FabricObject } from '../shapes/object.class';
 
 /* _TO_SVG_START_ */
 (function (global) {
@@ -323,7 +324,7 @@ import { config } from '../config';
        * @return {String}
        */
       getSvgStyles: function (skipShadow) {
-        var svgStyle = fabric.Object.prototype.getSvgStyles.call(
+        var svgStyle = FabricObject.prototype.getSvgStyles.call(
           this,
           skipShadow
         );

src/mixins/object.svg_export.ts

@@ -2,6 +2,7 @@
 
 import { Color } from '../color';
 import { config } from '../config';
+import { FabricObject } from '../shapes/object.class';
 
 /* _TO_SVG_START_ */
 (function (global) {
@@ -27,8 +28,8 @@ import { config } from '../config';
     toFixed = fabric.util.toFixed;
 
   fabric.util.object.extend(
-    fabric.Object.prototype,
-    /** @lends fabric.Object.prototype */ {
+    FabricObject.prototype,
+    /** @lends FabricObject.prototype */ {
       /**
        * Returns styles-string for svg-export
        * @param {Boolean} skipShadow a boolean to skip shadow filter output
@@ -275,7 +276,7 @@ import { config } from '../config';
           index = objectMarkup.indexOf('COMMON_PARTS'),
           additionalTransform = options.additionalTransform;
         if (clipPath) {
-          clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++;
+          clipPath.clipPathId = 'CLIPPATH_' + FabricObject.__uid++;
           clipPathMarkup =
             '<clipPath id="' +
             clipPath.clipPathId +

src/mixins/object_ancestry.mixin.ts

@@ -1,9 +1,11 @@
 //@ts-nocheck
+import { FabricObject } from '../shapes/object.class';
+
 (function (global) {
   var fabric = global.fabric;
   fabric.util.object.extend(
-    fabric.Object.prototype,
-    /** @lends fabric.Object.prototype */ {
+    FabricObject.prototype,
+    /** @lends FabricObject.prototype */ {
       /**
        * Checks if object is decendant of target
        * Should be used instead of @link {fabric.Collection.contains} for performance reasons

src/mixins/object_geometry.mixin.ts

@@ -2,6 +2,7 @@
 
 import { Intersection } from '../intersection.class';
 import { Point } from '../point.class';
+import { FabricObject } from '../shapes/object.class';
 
 (function (global) {
   function arrayFromCoords(coords) {
@@ -20,8 +21,8 @@ import { Point } from '../point.class';
     transformPoint = util.transformPoint;
 
   util.object.extend(
-    fabric.Object.prototype,
-    /** @lends fabric.Object.prototype */ {
+    FabricObject.prototype,
+    /** @lends FabricObject.prototype */ {
       /**
        * Describe object's corner position in canvas element coordinates.
        * properties are depending on control keys and padding the main controls.

src/mixins/object_interactivity.mixin.ts

@@ -1,13 +1,14 @@
 //@ts-nocheck
 import { Point } from '../point.class';
+import { FabricObject } from '../shapes/object.class';
 
 (function (global) {
   var fabric = global.fabric,
     degreesToRadians = fabric.util.degreesToRadians;
 
   fabric.util.object.extend(
-    fabric.Object.prototype,
-    /** @lends fabric.Object.prototype */ {
+    FabricObject.prototype,
+    /** @lends FabricObject.prototype */ {
       /**
        * Determines which corner has been clicked
        * @private

src/mixins/object_origin.mixin.ts

@@ -1,5 +1,6 @@
 //@ts-nocheck
 import { Point } from '../point.class';
+import { FabricObject } from '../shapes/object.class';
 
 (function (global) {
   var fabric = global.fabric,
@@ -21,8 +22,8 @@ import { Point } from '../point.class';
    */
 
   fabric.util.object.extend(
-    fabric.Object.prototype,
-    /** @lends fabric.Object.prototype */ {
+    FabricObject.prototype,
+    /** @lends FabricObject.prototype */ {
       /**
        * Resolves origin value relative to center
        * @private

src/mixins/object_stacking.mixin.ts

@@ -1,9 +1,11 @@
 //@ts-nocheck
+import { FabricObject } from '../shapes/object.class';
+
 (function (global) {
   var fabric = global.fabric;
   fabric.util.object.extend(
-    fabric.Object.prototype,
-    /** @lends fabric.Object.prototype */ {
+    FabricObject.prototype,
+    /** @lends FabricObject.prototype */ {
       /**
        * Moves an object to the bottom of the stack of drawn objects
        * @return {fabric.Object} thisArg

src/mixins/object_straightening.mixin.ts

@@ -1,9 +1,11 @@
 //@ts-nocheck
+import { FabricObject } from '../shapes/object.class';
+
 (function (global) {
   var fabric = global.fabric;
   fabric.util.object.extend(
-    fabric.Object.prototype,
-    /** @lends fabric.Object.prototype */ {
+    FabricObject.prototype,
+    /** @lends FabricObject.prototype */ {
       /**
        * @private
        * @return {Number} angle value
@@ -26,7 +28,7 @@
       },
 
       /**
-       * Same as {@link fabric.Object.prototype.straighten} but with animation
+       * Same as {@link FabricObject.prototype.straighten} but with animation
        * @param {Object} callbacks Object with callback functions
        * @param {Function} [callbacks.onComplete] Invoked on completion
        * @param {Function} [callbacks.onChange] Invoked on every step of animation

src/mixins/observable.mixin.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { fabric as fabricHeader } from '../../HEADER';
+
 (function (global) {
   var fabric = global.fabric;
 
@@ -142,4 +144,10 @@
     once: once,
     off: off,
   };
+  fabricHeader.Observable = {
+    fire: fire,
+    on: on,
+    once: once,
+    off: off,
+  }
 })(typeof exports !== 'undefined' ? exports : window);

src/parser/parseSVGDocument.ts

@@ -1,6 +1,5 @@
 //@ts-nocheck
 
-import { fabric } from '../../HEADER';
 import { applyViewboxTransform } from './applyViewboxTransform';
 import {
   clipPaths,
@@ -14,6 +13,7 @@ import { getGradientDefs } from './getGradientDefs';
 import { hasAncestorWithNodeName } from './hasAncestorWithNodeName';
 import { parseElements } from './parseElements';
 import { parseUseDirectives } from './parseUseDirectives';
+import { FabricObject } from '../shapes/object.class';
 
 /**
  * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
@@ -41,7 +41,7 @@ export function parseSVGDocument(doc, callback, reviver, parsingOptions) {
   }
   parseUseDirectives(doc);
 
-  let svgUid = fabric.Object.__uid++,
+  let svgUid = FabricObject.__uid++,
     i,
     len,
     options = applyViewboxTransform(doc),

src/parser/setStrokeFillOpacity.ts

@@ -1,8 +1,8 @@
 //@ts-nocheck
-import { fabric } from '../../HEADER';
 import { Color } from '../color';
 import { toFixed } from '../util/misc/toFixed';
 import { colorAttributes } from './constants';
+import { FabricObject } from '../shapes/object.class';
 
 /**
  * @private
@@ -19,10 +19,10 @@ export function setStrokeFillOpacity(attributes) {
     }
 
     if (typeof attributes[attr] === 'undefined') {
-      if (!fabric.Object.prototype[attr]) {
+      if (!FabricObject.prototype[attr]) {
         continue;
       }
-      attributes[attr] = fabric.Object.prototype[attr];
+      attributes[attr] = FabricObject.prototype[attr];
     }
 
     if (attributes[attr].indexOf('url(') === 0) {

src/pattern.class.ts

@@ -7,7 +7,7 @@ import { ifNaN } from './util/internals';
 import { loadImage } from './util/misc/objectEnlive';
 import { pick } from './util/misc/pick';
 import { toFixed } from './util/misc/toFixed';
-
+import { FabricObject } from './shapes/object.class';
 export type TPatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
 
 type TExportedKeys =
@@ -86,7 +86,7 @@ export class Pattern {
    * @return {fabric.Pattern} thisArg
    */
   constructor(options: TPatternOptions = {}) {
-    this.id = fabric.Object.__uid++;
+    this.id = FabricObject.__uid++;
     this.setOptions(options);
   }
 

src/shadow.class.ts

@@ -3,6 +3,7 @@
 import { Color } from './color';
 import { config } from './config';
 import { Point } from './point.class';
+import { FabricObject } from './shapes/object.class';
 
 (function (global) {
   var fabric = global.fabric || (global.fabric = {}),
@@ -80,7 +81,7 @@ import { Point } from './point.class';
           this[prop] = options[prop];
         }
 
-        this.id = fabric.Object.__uid++;
+        this.id = FabricObject.__uid++;
       },
 
       /**

src/shapes/circle.class.ts

@@ -1,5 +1,6 @@
 //@ts-nocheck
 import { fabric } from '../../HEADER';
+import { FabricObject } from './object.class';
 
 const degreesToRadians = fabric.util.degreesToRadians;
 
@@ -10,14 +11,14 @@ const degreesToRadians = fabric.util.degreesToRadians;
  * @see {@link Circle#initialize} for constructor definition
  */
 const Circle = fabric.util.createClass(
-  fabric.Object,
+  FabricObject,
   /** @lends Circle.prototype */ {
     /**
      * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged})
      * as well as for history (undo/redo) purposes
      * @type Array
      */
-    stateProperties: fabric.Object.prototype.stateProperties.concat(
+    stateProperties: FabricObject.prototype.stateProperties.concat(
       'radius',
       'startAngle',
       'endAngle'
@@ -53,7 +54,7 @@ const Circle = fabric.util.createClass(
      */
     endAngle: 360,
 
-    cacheProperties: fabric.Object.prototype.cacheProperties.concat(
+    cacheProperties: FabricObject.prototype.cacheProperties.concat(
       'radius',
       'startAngle',
       'endAngle'
@@ -226,7 +227,7 @@ Circle.fromElement = function (element, callback) {
  * @returns {Promise<Circle>}
  */
 Circle.fromObject = (object) =>
-  fabric.Object._fromObject(fabric.Circle, object);
+  FabricObject._fromObject(fabric.Circle, object);
 
 fabric.Circle = Circle;
 export { Circle };

src/shapes/ellipse.class.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { FabricObject } from './object.class';
+
 (function (global) {
   var fabric = global.fabric || (global.fabric = {}),
     piBy2 = Math.PI * 2;
@@ -33,7 +35,7 @@
        */
       ry: 0,
 
-      cacheProperties: fabric.Object.prototype.cacheProperties.concat(
+      cacheProperties: FabricObject.prototype.cacheProperties.concat(
         'rx',
         'ry'
       ),
@@ -173,6 +175,6 @@
    * @returns {Promise<fabric.Ellipse>}
    */
   fabric.Ellipse.fromObject = function (object) {
-    return fabric.Object._fromObject(fabric.Ellipse, object);
+    return FabricObject._fromObject(fabric.Ellipse, object);
   };
 })(typeof exports !== 'undefined' ? exports : window);