chore(TS) Converting Object to a class (#8322)

* Observable changes to TS class from @ShaMan123 (#8330) Co-authored-by: ShaMan123 <[email protected]> Co-authored-by: Shachar <[email protected]>
fabricjs · Oct 20, 2022 · 8235106 · 8235106
1 parent a7e3cbb
commit 8235106
Show file tree

Hide file tree

Showing 35 changed files with 2,579 additions and 2,377 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(TS): convert object to es6 class [#8322](https://github.com/fabricjs/fabric.js/pull/8322)
 - docs(): guides follow up, feature request template [#8379](https://github.com/fabricjs/fabric.js/pull/8379)
 - docs(): refactor guides, bug report template [#8189](https://github.com/fabricjs/fabric.js/pull/8189)
 - BREAKING fix(polyline/polygon): stroke bounding box for all line join/cap cases [#8344](https://github.com/fabricjs/fabric.js/pull/8344)

diff --git a/index.js b/index.js
@@ -1,8 +1,6 @@
 import './HEADER';
 // import './lib/event'), // optional gestures
-import './src/mixins/observable.mixin';
 import './src/mixins/collection.mixin';
-import './src/mixins/shared_methods.mixin';
 import './src/util/misc/misc';
 // import './src/util/named_accessors.mixin'; i would imagine dead forever or proper setters/getters
 import './src/parser'; // optional parser

diff --git a/src/canvas.class.ts b/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

diff --git a/src/controls/default_controls.ts b/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,

diff --git a/src/gradient/gradient.class.ts b/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;

diff --git a/src/mixins/animation.mixin.ts b/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)

diff --git a/src/mixins/itext.svg_export.ts b/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
         );

diff --git a/src/mixins/object.svg_export.ts b/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 +

diff --git a/src/mixins/object_ancestry.mixin.ts b/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

diff --git a/src/mixins/object_geometry.mixin.ts b/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.

diff --git a/src/mixins/object_interactivity.mixin.ts b/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

diff --git a/src/mixins/object_origin.mixin.ts b/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

diff --git a/src/mixins/object_stacking.mixin.ts b/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

diff --git a/src/mixins/object_straightening.mixin.ts b/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