chore(TS): convert Triangle to TS (#8410)

fabricjs · Oct 31, 2022 · 5d95075 · 5d95075
1 parent 391eb99
commit 5d95075
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 ## [next]
 
-- chore(TS): migrate Circle [#8406](https://github.com/fabricjs/fabric.js/pull/8406)
+- chore(TS): migrate Triangle to TS [#8410](https://github.com/fabricjs/fabric.js/pull/8410)
+- chore(TS): migrate Circle to TS [#8406](https://github.com/fabricjs/fabric.js/pull/8406)
 - chore(TS): convert Object interactivity mixin to its own class [#8401](https://github.com/fabricjs/fabric.js/pull/8401)
 - chore(TS): Convert controls e6/ts [#8400](https://github.com/fabricjs/fabric.js/pull/8400)
 - ci(): remove buggy changelog action in favor of `git diff` bash script + direct git how to merge `CHANGELOG.md` [#8309](https://github.com/fabricjs/fabric.js/pull/8346)

diff --git a/src/shapes/triangle.class.ts b/src/shapes/triangle.class.ts
@@ -1,82 +1,55 @@
-//@ts-nocheck
-(function (global) {
-  var fabric = global.fabric || (global.fabric = {});
+import { fabric } from '../../HEADER';
+import { TClassProperties } from '../typedefs';
+import { FabricObject } from './fabricObject.class';
+
+export class Triangle extends FabricObject {
   /**
-   * Triangle class
-   * @class fabric.Triangle
-   * @extends fabric.Object
-   * @return {fabric.Triangle} thisArg
-   * @see {@link fabric.Triangle#initialize} for constructor definition
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
    */
-  fabric.Triangle = fabric.util.createClass(
-    fabric.Object,
-    /** @lends fabric.Triangle.prototype */ {
-      /**
-       * Type of an object
-       * @type String
-       * @default
-       */
-      type: 'triangle',
-
-      /**
-       * Width is set to 100 to compensate the old initialize code that was setting it to 100
-       * @type Number
-       * @default
-       */
-      width: 100,
-
-      /**
-       * Height is set to 100 to compensate the old initialize code that was setting it to 100
-       * @type Number
-       * @default
-       */
-      height: 100,
+  _render(ctx: CanvasRenderingContext2D) {
+    const widthBy2 = this.width / 2,
+      heightBy2 = this.height / 2;
 
-      /**
-       * @private
-       * @param {CanvasRenderingContext2D} ctx Context to render on
-       */
-      _render: function (ctx) {
-        var widthBy2 = this.width / 2,
-          heightBy2 = this.height / 2;
+    ctx.beginPath();
+    ctx.moveTo(-widthBy2, heightBy2);
+    ctx.lineTo(0, -heightBy2);
+    ctx.lineTo(widthBy2, heightBy2);
+    ctx.closePath();
 
-        ctx.beginPath();
-        ctx.moveTo(-widthBy2, heightBy2);
-        ctx.lineTo(0, -heightBy2);
-        ctx.lineTo(widthBy2, heightBy2);
-        ctx.closePath();
+    this._renderPaintInOrder(ctx);
+  }
 
-        this._renderPaintInOrder(ctx);
-      },
-
-      /* _TO_SVG_START_ */
-      /**
-       * Returns svg representation of an instance
-       * @return {Array} an array of strings with the specific svg representation
-       * of the instance
-       */
-      _toSVG: function () {
-        var widthBy2 = this.width / 2,
-          heightBy2 = this.height / 2,
-          points = [
-            -widthBy2 + ' ' + heightBy2,
-            '0 ' + -heightBy2,
-            widthBy2 + ' ' + heightBy2,
-          ].join(',');
-        return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
-      },
-      /* _TO_SVG_END_ */
-    }
-  );
+  /**
+   * Returns svg representation of an instance
+   * @return {Array} an array of strings with the specific svg representation
+   * of the instance
+   */
+  _toSVG() {
+    const widthBy2 = this.width / 2,
+      heightBy2 = this.height / 2,
+      points = `${-widthBy2} ${heightBy2},0 ${-heightBy2},${widthBy2} ${heightBy2}`;
+    return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
+  }
 
   /**
-   * Returns {@link fabric.Triangle} instance from an object representation
+   * Returns {@link Triangle} instance from an object representation
    * @static
-   * @memberOf fabric.Triangle
+   * @memberOf Triangle
    * @param {Object} object Object to create an instance from
-   * @returns {Promise<fabric.Triangle>}
+   * @returns {Promise<Triangle>}
    */
-  fabric.Triangle.fromObject = function (object) {
-    return fabric.Object._fromObject(fabric.Triangle, object);
-  };
-})(typeof exports !== 'undefined' ? exports : window);
+  static fromObject(object: any) {
+    return FabricObject._fromObject(Triangle, object);
+  }
+}
+
+export const triangleDefaultValues: Partial<TClassProperties<Triangle>> = {
+  type: 'triangle',
+  width: 100,
+  height: 100,
+};
+
+Object.assign(Triangle.prototype, triangleDefaultValues);
+
+fabric.Triangle = Triangle;