chore(TS): convert StaticCanvas (#8485)

Co-authored-by: ShaMan123 <shacharnen@gmail.com>

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(TS): migrate StatiCanvas to TS [#8485](https://github.com/fabricjs/fabric.js/pull/8485)
 - chore(): refactor `Object.__uid++` => `uid()` [#8482](https://github.com/fabricjs/fabric.js/pull/8482)
 - chore(TS): migrate object mixins to TS [#8414](https://github.com/fabricjs/fabric.js/pull/8414)
 - chore(TS): migrate filters [#8474](https://github.com/fabricjs/fabric.js/pull/8474)

src/EventTypeDefs.ts

@@ -6,6 +6,7 @@ import type { TOriginX, TOriginY, TRadian } from './typedefs';
 import type { saveObjectTransform } from './util/misc/objectTransforms';
 import type { Canvas } from './__types__';
 import type { IText } from './shapes/itext.class';
+import type { StaticCanvas } from './static_canvas.class';
 
 export type ModifierKey = 'altKey' | 'shiftKey' | 'ctrlKey';
 
@@ -149,6 +150,11 @@ type CanvasSelectionEvents = {
   };
 };
 
+type CollectionEvents = {
+  'object:added': { target: FabricObject };
+  'object:removed': { target: FabricObject };
+};
+
 type BeforeSuffix<T extends string> = `${T}:before`;
 type WithBeforeSuffix<T extends string> = T | BeforeSuffix<T>;
 
@@ -181,17 +187,15 @@ export type ObjectEvents = ObjectPointerEvents &
     };
 
     // tree
-    added: { target: Group | Canvas };
-    removed: { target: Group | Canvas };
+    added: { target: Group | Canvas | StaticCanvas };
+    removed: { target: Group | Canvas | StaticCanvas };
 
     // erasing
     'erasing:end': { path: FabricObject };
   };
 
-export type StaticCanvasEvents = {
+export type StaticCanvasEvents = CollectionEvents & {
   // tree
-  'object:added': { target: FabricObject };
-  'object:removed': { target: FabricObject };
   'canvas:cleared': never;
 
   // rendering

src/canvas.class.ts

@@ -1418,6 +1418,11 @@ import { saveObjectTransform } from './util/misc/objectTransforms';
         // this.discardActiveGroup();
         this.discardActiveObject();
         this.clearContext(this.contextTop);
+        if (this._hasITextHandlers) {
+          this.off('mouse:up', this._mouseUpITextHandler);
+          this._iTextInstances = null;
+          this._hasITextHandlers = false;
+        }
         return this.callSuper('clear');
       },
 

src/gradient/gradient.class.ts

@@ -75,10 +75,25 @@ export class Gradient<
    */
   type: T;
 
+  /**
+   * Defines how the gradient is located in space and spread
+   * @type GradientCoords
+   */
   coords: GradientCoords<T>;
 
+  /**
+   * Defines how many colors a gradient has and how they are located on the axis
+   * defined by coords
+   * @type GradientCoords
+   */
   colorStops: ColorStop[];
 
+  /**
+   * If true, this object will not be exported during the serialization of a canvas
+   * @type boolean
+   */
+  excludeFromExport?: boolean;
+
   private id: string | number;
 
   constructor({
@@ -130,7 +145,7 @@ export class Gradient<
    * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output
    * @return {object}
    */
-  toObject(propertiesToInclude?: (keyof this)[]) {
+  toObject(propertiesToInclude?: (keyof this | string)[]) {
     return {
       ...pick(this, propertiesToInclude),
       type: this.type,
@@ -276,11 +291,7 @@ export class Gradient<
    * @param {CanvasRenderingContext2D} ctx Context to render on
    * @return {CanvasGradient}
    */
-  toLive(ctx: CanvasRenderingContext2D) {
-    if (!this.type) {
-      return;
-    }
-
+  toLive(ctx: CanvasRenderingContext2D): CanvasGradient {
     const coords = this.coords as GradientCoords<'radial'>;
     const gradient =
       this.type === 'linear'

src/mixins/collection.mixin.ts

@@ -26,7 +26,7 @@ export function createCollectionMixin<T extends { new (...args: any[]): any }>(
      * @param {...FabricObject[]} objects to add
      * @returns {number} new array length
      */
-    add(...objects: FabricObject[]) {
+    add(...objects: FabricObject[]): number {
       const size = this._objects.push(...objects);
       objects.forEach((object) => this._onObjectAdded(object));
       return size;

src/mixins/object.svg_export.ts

@@ -5,7 +5,7 @@ import { uid } from '../util/internals/uid';
 import { matrixToSVG } from '../util/misc/svgParsing';
 import { toFixed } from '../util/misc/toFixed';
 
-type SVGReviver = (markup: string) => string;
+export type TSVGReviver = (markup: string) => string;
 
 /* _TO_SVG_START_ */
 
@@ -29,6 +29,13 @@ function getSvgColorString(prop: string, value?: any) {
 }
 
 export class FabricObjectSVGExportMixin {
+  /**
+   * When an object is being exported as SVG as a clippath, a reference inside the SVG is needed.
+   * This reference is a UID in the fabric namespace and is temporary stored here.
+   * @type {String}
+   */
+  clipPathId?: string;
+
   /**
    * Returns styles-string for svg-export
    * @param {Boolean} skipShadow a boolean to skip shadow filter output
@@ -191,21 +198,21 @@ export class FabricObjectSVGExportMixin {
 
   /**
    * Returns svg representation of an instance
-   * @param {SVGReviver} [reviver] Method for further parsing of svg representation.
+   * @param {TSVGReviver} [reviver] Method for further parsing of svg representation.
    * @return {String} svg representation of an instance
    */
-  toSVG(reviver?: SVGReviver) {
+  toSVG(reviver?: TSVGReviver) {
     return this._createBaseSVGMarkup(this._toSVG(reviver), {
       reviver,
     });
   }
 
   /**
    * Returns svg clipPath representation of an instance
-   * @param {SVGReviver} [reviver] Method for further parsing of svg representation.
+   * @param {TSVGReviver} [reviver] Method for further parsing of svg representation.
    * @return {String} svg representation of an instance
    */
-  toClipPathSVG(reviver?: SVGReviver) {
+  toClipPathSVG(reviver?: TSVGReviver) {
     return (
       '\t' +
       this._createBaseClipPathSVGMarkup(this._toSVG(reviver), {
@@ -222,7 +229,7 @@ export class FabricObjectSVGExportMixin {
     {
       reviver,
       additionalTransform = '',
-    }: { reviver?: SVGReviver; additionalTransform?: string } = {}
+    }: { reviver?: TSVGReviver; additionalTransform?: string } = {}
   ) {
     const commonPieces = [
         this.getSvgTransform(true, additionalTransform),
@@ -246,7 +253,7 @@ export class FabricObjectSVGExportMixin {
       additionalTransform,
     }: {
       noStyle?: boolean;
-      reviver?: SVGReviver;
+      reviver?: TSVGReviver;
       withShadow?: boolean;
       additionalTransform?: string;
     } = {}

src/mixins/object_geometry.mixin.ts

@@ -293,8 +293,8 @@ export class ObjectGeometry<
    */
   intersectsWithObject(
     other: ObjectGeometry,
-    absolute: boolean,
-    calculate: boolean
+    absolute = false,
+    calculate = false
   ): boolean {
     const intersection = Intersection.intersectPolygonPolygon(
       this.getCoords(absolute, calculate),
@@ -318,8 +318,8 @@ export class ObjectGeometry<
    */
   isContainedWithinObject(
     other: ObjectGeometry,
-    absolute: boolean,
-    calculate: boolean
+    absolute = false,
+    calculate = false
   ): boolean {
     const points = this.getCoords(absolute, calculate),
       otherCoords = absolute ? other.aCoords : other.lineCoords,

src/pattern.class.ts

@@ -75,8 +75,17 @@ export class Pattern {
    */
   patternTransform: TMat2D | null = null;
 
+  /**
+   * The actual pixel source of the pattern
+   */
   source!: CanvasImageSource;
 
+  /**
+   * If true, this object will not be exported during the serialization of a canvas
+   * @type boolean
+   */
+  excludeFromExport?: boolean;
+
   readonly id: number;
 
   /**
@@ -122,7 +131,7 @@ export class Pattern {
    * @param {CanvasRenderingContext2D} ctx Context to create pattern
    * @return {CanvasPattern}
    */
-  toLive(ctx: CanvasRenderingContext2D) {
+  toLive(ctx: CanvasRenderingContext2D): CanvasPattern | string {
     if (
       // if the image failed to load, return, and allow rest to continue loading
       !this.source ||
@@ -143,7 +152,7 @@ export class Pattern {
    * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
    * @return {object} Object representation of a pattern instance
    */
-  toObject(propertiesToInclude?: (keyof this)[]) {
+  toObject(propertiesToInclude?: (keyof this | string)[]) {
     return {
       ...pick(this, propertiesToInclude),
       type: 'pattern',

src/shapes/group.class.ts

@@ -1,10 +1,10 @@
 //@ts-nocheck
-import { ObjectEvents } from '../EventTypeDefs';
+import type { ObjectEvents, CollectionEvents } from '../EventTypeDefs';
 import { fabric } from '../../HEADER';
 import { createCollectionMixin } from '../mixins/collection.mixin';
 import { resolveOrigin } from '../mixins/object_origin.mixin';
 import { Point } from '../point.class';
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { cos } from '../util/misc/cos';
 import {
   invertTransform,
@@ -44,15 +44,14 @@ export type LayoutResult = {
   height: number;
 };
 
-export type GroupEvents = ObjectEvents & {
-  layout: {
-    context: LayoutContext;
-    result: LayoutResult;
-    diff: Point;
+export type GroupEvents = ObjectEvents &
+  CollectionEvents & {
+    layout: {
+      context: LayoutContext;
+      result: LayoutResult;
+      diff: Point;
+    };
   };
-  'object:added': { target: FabricObject };
-  'object:removed': { target: FabricObject };
-};
 
 export type LayoutStrategy =
   | 'fit-content'

src/shapes/object.class.ts

@@ -7,7 +7,13 @@ import { ObjectEvents } from '../EventTypeDefs';
 import { AnimatableObject } from '../mixins/object_animation.mixin';
 import { Point } from '../point.class';
 import { Shadow } from '../shadow.class';
-import type { TClassProperties, TDegree, TFiller, TSize } from '../typedefs';
+import type {
+  TClassProperties,
+  TDegree,
+  TFiller,
+  TSize,
+  TCacheCanvasDimensions,
+} from '../typedefs';
 import { runningAnimations } from '../util/animation_registry';
 import { clone } from '../util/lang_object';
 import { capitalize } from '../util/lang_string';
@@ -19,6 +25,18 @@ import { pick } from '../util/misc/pick';
 import { toFixed } from '../util/misc/toFixed';
 import type { Group } from './group.class';
 
+export type TCachedFabricObject = FabricObject &
+  Required<
+    Pick<
+      FabricObject,
+      | 'zoomX'
+      | 'zoomY'
+      | '_cacheCanvas'
+      | 'cacheTranslationX'
+      | 'cacheTranslationY'
+    >
+  >;
+
 // temporary hack for unfinished migration
 type TCallSuper = (arg0: string, ...moreArgs: any[]) => any;
 
@@ -596,6 +614,15 @@ export class FabricObject<
    */
   ownCaching?: boolean;
 
+  /**
+   * Private. indicates if the object inside a group is on a transformed context or not
+   * or is part of a larger cache for many object ( a group for example)
+   * @type boolean
+   * @default undefined
+   * @private
+   */
+  _transformDone?: boolean;
+
   callSuper?: TCallSuper;
 
   /**
@@ -694,7 +721,7 @@ export class FabricObject<
    * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache
    * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache
    */
-  _getCacheCanvasDimensions() {
+  _getCacheCanvasDimensions(): TCacheCanvasDimensions {
     const objectScale = this.getTotalObjectScaling(),
       // calculate dimensions without skewing
       dim = this._getTransformedDimensions({ skewX: 0, skewY: 0 }),
@@ -826,7 +853,7 @@ export class FabricObject<
    * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
    * @return {Object} Object representation of an instance
    */
-  toObject(propertiesToInclude?: (keyof this)[]): Record<string, any> {
+  toObject(propertiesToInclude?: (keyof this | string)[]): Record<string, any> {
     const NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS,
       clipPathData =
         this.clipPath && !this.clipPath.excludeFromExport
@@ -891,7 +918,7 @@ export class FabricObject<
    * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
    * @return {Object} Object representation of an instance
    */
-  toDatalessObject(propertiesToInclude: (keyof this)[]) {
+  toDatalessObject(propertiesToInclude?: (keyof this | string)[]) {
     // will be overwritten by subclasses
     return this.toObject(propertiesToInclude);
   }

src/shapes/text.class.ts

@@ -4,7 +4,7 @@ import { cache } from '../cache';
 import { DEFAULT_SVG_FONT_SIZE } from '../constants';
 import { ObjectEvents } from '../EventTypeDefs';
 import { TextStyle, TextStyleMixin } from '../mixins/text_style.mixin';
-import { TClassProperties, TFiller } from '../typedefs';
+import { TClassProperties, TFiller, TCacheCanvasDimensions } from '../typedefs';
 import { graphemeSplit } from '../util/lang_string';
 import { createCanvasElement } from '../util/misc/dom';
 import {
@@ -556,7 +556,7 @@ export class Text<
    * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache
    * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache
    */
-  _getCacheCanvasDimensions(): object {
+  _getCacheCanvasDimensions(): TCacheCanvasDimensions {
     const dims = super._getCacheCanvasDimensions();
     const fontSize = this.fontSize;
     dims.width += fontSize * dims.zoomX;