chore(TS): Polyline/Polygon

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(TS): migrate Polyline/Polygon [#8417](https://github.com/fabricjs/fabric.js/pull/8417)
 - chore(TS): migrate Ellipse [#8408](https://github.com/fabricjs/fabric.js/pull/8408)
 - 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)

src/mixins/object_origin.mixin.ts

@@ -1,10 +1,10 @@
 import { Point } from '../point.class';
 import { transformPoint } from '../util/misc/matrix';
 import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
-import { CommonMethods } from './shared_methods.mixin';
-import { TDegree, TOriginX, TOriginY } from '../typedefs';
 import { Group } from '../shapes/group.class';
+import { TDegree, TOriginX, TOriginY } from '../typedefs';
 import { sizeAfterTransform } from '../util/misc/objectTransforms';
+import { CommonMethods } from './shared_methods.mixin';
 
 const originOffset = {
   left: -0.5,

src/point.class.ts

@@ -16,8 +16,6 @@ export class Point {
 
   y: number;
 
-  type = 'point';
-
   constructor();
   constructor(x: number, y: number);
   constructor(point: IPoint);

src/shapes/object.class.ts

@@ -235,14 +235,14 @@ export class FabricObject extends ObjectGeometry {
    * @type String
    * @default butt
    */
-  strokeLineCap: string;
+  strokeLineCap: CanvasLineCap;
 
   /**
    * Corner style of an object's stroke (one of "bevel", "round", "miter")
    * @type String
    * @default
    */
-  strokeLineJoin: string;
+  strokeLineJoin: CanvasLineJoin;
 
   /**
    * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke

src/shapes/polygon.class.ts

@@ -1,77 +1,51 @@
-//@ts-nocheck
+import { fabric } from '../../HEADER';
+import { TClassProperties } from '../typedefs';
+import { FabricObject } from './object.class';
+import { polyFromElement, Polyline } from './polyline.class';
 
-import { projectStrokeOnPoints } from '../util/misc/projectStroke';
-
-(function (global) {
-  var fabric = global.fabric || (global.fabric = {});
-
-  /**
-   * Polygon class
-   * @class fabric.Polygon
-   * @extends fabric.Polyline
-   * @see {@link fabric.Polygon#initialize} for constructor definition
-   */
-  fabric.Polygon = fabric.util.createClass(
-    fabric.Polyline,
-    /** @lends fabric.Polygon.prototype */ {
-      /**
-       * Type of an object
-       * @type String
-       * @default
-       */
-      type: 'polygon',
-
-      /**
-       * @private
-       */
-      _projectStrokeOnPoints: function () {
-        return projectStrokeOnPoints(this.points, this);
-      },
-
-      /**
-       * @private
-       * @param {CanvasRenderingContext2D} ctx Context to render on
-       */
-      _render: function (ctx) {
-        if (!this.commonRender(ctx)) {
-          return;
-        }
-        ctx.closePath();
-        this._renderPaintInOrder(ctx);
-      },
-    }
-  );
+export class Polygon extends Polyline {
+  protected isOpen() {
+    return false;
+  }
 
   /* _FROM_SVG_START_ */
-  /**
-   * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)
-   * @static
-   * @memberOf fabric.Polygon
-   * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement
-   */
-  fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat();
 
   /**
-   * Returns {@link fabric.Polygon} instance from an SVG element
+   * Returns {@link Polygon} instance from an SVG element
    * @static
-   * @memberOf fabric.Polygon
+   * @memberOf Polygon
    * @param {SVGElement} element Element to parse
    * @param {Function} callback callback function invoked after parsing
    * @param {Object} [options] Options object
    */
-  fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon');
+  static fromElement(
+    element: SVGElement,
+    callback: (poly: Polygon | null) => any,
+    options?: any
+  ) {
+    return polyFromElement(Polygon, element, callback, options);
+  }
+
   /* _FROM_SVG_END_ */
 
   /**
-   * Returns fabric.Polygon instance from an object representation
+   * Returns Polygon instance from an object representation
    * @static
-   * @memberOf fabric.Polygon
+   * @memberOf Polygon
    * @param {Object} object Object to create an instance from
-   * @returns {Promise<fabric.Polygon>}
+   * @returns {Promise<Polygon>}
    */
-  fabric.Polygon.fromObject = function (object) {
-    return fabric.Object._fromObject(fabric.Polygon, object, {
+  static fromObject(object: any) {
+    return FabricObject._fromObject(Polygon, object, {
       extraParam: 'points',
     });
-  };
-})(typeof exports !== 'undefined' ? exports : window);
+  }
+}
+
+export const polygonDefaultValues: Partial<TClassProperties<Polygon>> = {
+  type: 'polygon',
+};
+
+Object.assign(Polygon.prototype, polygonDefaultValues);
+/** @todo TODO_JS_MIGRATION remove next line after refactoring build */
+fabric.Polygon = Polygon;