fix(TS): EventSpec recognition

src/EventTypeDefs.ts

@@ -150,7 +150,7 @@ type CanvasSelectionEvents = {
   };
 };
 
-type CollectionEvents = {
+export type CollectionEvents = {
   'object:added': { target: FabricObject };
   'object:removed': { target: FabricObject };
 };

src/mixins/collection.mixin.ts

@@ -1,10 +1,9 @@
 import { fabric } from '../../HEADER';
-import type { FabricObject } from '../shapes/fabricObject.class';
+import { FabricObject } from '../shapes/fabricObject.class';
+import { Constructor } from '../typedefs';
 
-export function createCollectionMixin<T extends { new (...args: any[]): any }>(
-  Klass: T
-) {
-  return class Collection extends Klass {
+export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
+  class Collection extends Base {
     /**
      * @type {FabricObject[]}
      */
@@ -153,7 +152,10 @@ export function createCollectionMixin<T extends { new (...args: any[]): any }>(
         return memo;
       }, 0);
     }
-  };
+  }
+
+  // https://github.com/microsoft/TypeScript/issues/32080
+  return Collection as typeof Collection & TBase;
 }
 
 fabric.createCollectionMixin = createCollectionMixin;

src/shapes/fabricObject.class.ts

@@ -2,18 +2,16 @@ import { fabric } from '../../HEADER';
 import { ObjectEvents } from '../EventTypeDefs';
 import { FabricObjectSVGExportMixin } from '../mixins/object.svg_export';
 import { InteractiveFabricObject } from '../mixins/object_interactivity.mixin';
-import { applyMixins } from '../util/applyMixins';
 
 // TODO somehow we have to make a tree-shakeable import
 
-export class FabricObject extends applyMixins(InteractiveFabricObject, [
-  FabricObjectSVGExportMixin,
-]) {}
-
-// @ts-expect-error type conflict of generic EventSpec
+// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars
 export interface FabricObject<EventSpec extends ObjectEvents = ObjectEvents>
-  extends InteractiveFabricObject<EventSpec>,
-    FabricObjectSVGExportMixin {}
+  extends FabricObjectSVGExportMixin {}
+
+export class FabricObject<
+  EventSpec extends ObjectEvents = ObjectEvents
+> extends InteractiveFabricObject<EventSpec> {}
 
 export { fabricObjectDefaultValues } from './object.class';
 

src/shapes/group.class.ts

@@ -1,6 +1,6 @@
-//@ts-nocheck
-import type { ObjectEvents, CollectionEvents } from '../EventTypeDefs';
+// @ts-nocheck
 import { fabric } from '../../HEADER';
+import type { CollectionEvents, ObjectEvents } from '../EventTypeDefs';
 import { createCollectionMixin } from '../mixins/collection.mixin';
 import { resolveOrigin } from '../mixins/object_origin.mixin';
 import { Point } from '../point.class';
@@ -37,13 +37,6 @@ export type LayoutContext = {
   [key: string]: any;
 };
 
-export type LayoutResult = {
-  centerX: number;
-  centerY: number;
-  width: number;
-  height: number;
-};
-
 export type GroupEvents = ObjectEvents &
   CollectionEvents & {
     layout: {

src/static_canvas.class.ts

@@ -1,4 +1,6 @@
+// @ts-nocheck
 import { fabric } from '../HEADER';
+import type { BaseBrush } from './brushes';
 import { config } from './config';
 import { iMatrix, VERSION } from './constants';
 import type { StaticCanvasEvents } from './EventTypeDefs';
@@ -229,6 +231,8 @@ export class StaticCanvas extends createCollectionMixin(
    */
   lowerCanvasEl: HTMLCanvasElement;
 
+  contextContainer: CanvasRenderingContext2D;
+
   /**
    * Width in virtual/logical pixels of the canvas.
    * The canvas can be larger than width if retina scaling is active
@@ -257,6 +261,28 @@ export class StaticCanvas extends createCollectionMixin(
    */
   disposed?: boolean;
 
+  renderAndResetBound: () => void;
+  requestRenderAllBound: () => StaticCanvas;
+
+  // TODO: move to canvas
+  interactive: boolean;
+  upperCanvasEl: HTMLCanvasElement;
+  contextTop: CanvasRenderingContext2D;
+  wrapperEl: HTMLDivElement;
+  cacheCanvasEl: HTMLCanvasElement;
+  protected _isCurrentlyDrawing: boolean;
+  freeDrawingBrush: BaseBrush;
+  _activeObject: FabricObject;
+
+  _offset: { left: number; top: number };
+  protected _originalCanvasStyle?: string;
+  protected hasLostContext: boolean;
+  protected nextRenderHandle: number;
+  protected __cleanupTask: {
+    (): void;
+    kill: (reason?: any) => void;
+  };
+
   add(...objects: FabricObject[]) {
     const size = super.add(...objects);
     objects.length > 0 && this.renderOnAddRemove && this.requestRenderAll();
@@ -453,6 +479,9 @@ export class StaticCanvas extends createCollectionMixin(
 
     this.contextContainer = this.lowerCanvasEl.getContext('2d');
   }
+  _applyCanvasStyle(lowerCanvasEl: HTMLCanvasElement) {
+    throw new Error('Method not implemented.');
+  }
 
   /**
    * Returns canvas width (in px)
@@ -554,6 +583,7 @@ export class StaticCanvas extends createCollectionMixin(
       this.upperCanvasEl[prop] = value;
     }
 
+    // TODO: move to canvas
     if (this.cacheCanvasEl) {
       this.cacheCanvasEl[prop] = value;
     }
@@ -851,6 +881,9 @@ export class StaticCanvas extends createCollectionMixin(
       this.__cleanupTask = undefined;
     }
   }
+  drawControls(ctx: CanvasRenderingContext2D) {
+    throw new Error('Method not implemented.');
+  }
 
   /**
    * Paint the cached clipPath on the lowerCanvasEl
@@ -1764,16 +1797,17 @@ export class StaticCanvas extends createCollectionMixin(
     }
     this.overlayImage = null;
     this._iTextInstances = null;
+    // @ts-expect-error disposing
     this.contextContainer = null;
     const canvasElement = this.lowerCanvasEl;
-    // @ts-ignore
+    // @ts-expect-error disposing
     this.lowerCanvasEl = undefined;
     // restore canvas style and attributes
     canvasElement.classList.remove('lower-canvas');
     canvasElement.removeAttribute('data-fabric');
     // needs to be moved into Canvas class
     if (this.interactive) {
-      canvasElement.style.cssText = this._originalCanvasStyle;
+      canvasElement.style.cssText = this._originalCanvasStyle || '';
       delete this._originalCanvasStyle;
     }
     // restore canvas size to original size in case retina scaling was applied

src/typedefs.ts

@@ -15,6 +15,9 @@ type TNonFunctionPropertyNames<T> = {
 }[keyof T];
 export type TClassProperties<T> = Pick<T, TNonFunctionPropertyNames<T>>;
 
+// https://github.com/microsoft/TypeScript/issues/32080
+export type Constructor<T = object> = new (...args: any[]) => T;
+
 const enum Degree {}
 const enum Radian {}
 

src/util/applyMixins.ts

@@ -1,9 +1,9 @@
-type TClass = { new (...args: any[]): any };
+import { Constructor } from '../typedefs';
 
 /***
  * https://www.typescriptlang.org/docs/handbook/mixins.html#alternative-pattern
  */
-export function applyMixins<T extends TClass, S extends TClass>(
+export function applyMixins<T extends Constructor, S extends Constructor>(
   derivedCtor: T,
   constructors: S[]
 ) {
@@ -18,5 +18,5 @@ export function applyMixins<T extends TClass, S extends TClass>(
         );
     });
   });
-  return derivedCtor;
+  return derivedCtor as T & { prototype: InstanceType<T & S> };
 }