fix(TS): extending canvas and object event types

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(TS): extending canvas and object event types (`type` => `interface`) [#8926](https://github.com/fabricjs/fabric.js/pull/8926)
 - chore(build) simple deps update [#8929](https://github.com/fabricjs/fabric.js/pull/8929)
 - fix(Canvas): sync cleanup of dom elements in dispose [#8903](https://github.com/fabricjs/fabric.js/pull/8903)
 - chore(TS): export util types [#8915](https://github.com/fabricjs/fabric.js/pull/8915)

src/EventTypeDefs.ts

@@ -167,7 +167,7 @@ export type DragEventData = TEvent<DragEvent> & {
 
 export type DropEventData = DragEventData & { pointer: Point };
 
-type DnDEvents = {
+interface DnDEvents {
   dragstart: TEventWithTarget<DragEvent>;
   drag: DragEventData;
   dragover: DragEventData;
@@ -177,14 +177,14 @@ type DnDEvents = {
   'drop:before': DropEventData;
   drop: DropEventData;
   'drop:after': DropEventData;
-};
+}
 
-type CanvasDnDEvents = DnDEvents & {
+interface CanvasDnDEvents extends DnDEvents {
   'drag:enter': DragEventData & InEvent;
   'drag:leave': DragEventData & OutEvent;
-};
+}
 
-type CanvasSelectionEvents = {
+interface CanvasSelectionEvents {
   'selection:created': Partial<TEvent> & {
     selected: FabricObject[];
   };
@@ -198,12 +198,12 @@ type CanvasSelectionEvents = {
   'selection:cleared': Partial<TEvent> & {
     deselected: FabricObject[];
   };
-};
+}
 
-export type CollectionEvents = {
+export interface CollectionEvents {
   'object:added': { target: StaticFabricObject };
   'object:removed': { target: StaticFabricObject };
-};
+}
 
 type BeforeSuffix<T extends string> = `${T}:before`;
 type WithBeforeSuffix<T extends string> = T | BeforeSuffix<T>;
@@ -230,67 +230,69 @@ export type TPointerEventNames =
 export type ObjectPointerEvents = TPointerEvents<'mouse'>;
 export type CanvasPointerEvents = TPointerEvents<'mouse:'>;
 
-export type MiscEvents = {
+export interface MiscEvents {
   'contextmenu:before': SimpleEventHandler<Event>;
   contextmenu: SimpleEventHandler<Event>;
-};
-
-export type ObjectEvents = ObjectPointerEvents &
-  DnDEvents &
-  MiscEvents &
-  ObjectModificationEvents & {
-    // selection
-    selected: Partial<TEvent> & {
-      target: FabricObject;
-    };
-    deselected: Partial<TEvent> & {
-      target: FabricObject;
-    };
-
-    // tree
-    added: { target: Group | Canvas | StaticCanvas };
-    removed: { target: Group | Canvas | StaticCanvas };
-
-    // erasing
-    'erasing:end': { path: FabricObject };
+}
+
+export interface ObjectEvents
+  extends ObjectPointerEvents,
+    DnDEvents,
+    MiscEvents,
+    ObjectModificationEvents {
+  // selection
+  selected: Partial<TEvent> & {
+    target: FabricObject;
+  };
+  deselected: Partial<TEvent> & {
+    target: FabricObject;
   };
 
-export type StaticCanvasEvents = CollectionEvents & {
+  // tree
+  added: { target: Group | Canvas | StaticCanvas };
+  removed: { target: Group | Canvas | StaticCanvas };
+
+  // erasing
+  'erasing:end': { path: FabricObject };
+}
+
+export interface StaticCanvasEvents extends CollectionEvents {
   // tree
   'canvas:cleared': never;
 
   // rendering
   'before:render': { ctx: CanvasRenderingContext2D };
   'after:render': { ctx: CanvasRenderingContext2D };
-};
-
-export type CanvasEvents = StaticCanvasEvents &
-  CanvasPointerEvents &
-  CanvasDnDEvents &
-  MiscEvents &
-  CanvasModificationEvents &
-  CanvasSelectionEvents & {
-    // brushes
-    'before:path:created': { path: FabricObject };
-    'path:created': { path: FabricObject };
-
-    // erasing
-    'erasing:start': never;
-    'erasing:end':
-      | never
-      | {
-          path: FabricObject;
-          targets: FabricObject[];
-          subTargets: FabricObject[];
-          drawables: {
-            backgroundImage?: FabricObject;
-            overlayImage?: FabricObject;
-          };
+}
+
+export interface CanvasEvents
+  extends StaticCanvasEvents,
+    CanvasPointerEvents,
+    CanvasDnDEvents,
+    MiscEvents,
+    CanvasModificationEvents,
+    CanvasSelectionEvents {
+  // brushes
+  'before:path:created': { path: FabricObject };
+  'path:created': { path: FabricObject };
+
+  // erasing
+  'erasing:start': never;
+  'erasing:end':
+    | never
+    | {
+        path: FabricObject;
+        targets: FabricObject[];
+        subTargets: FabricObject[];
+        drawables: {
+          backgroundImage?: FabricObject;
+          overlayImage?: FabricObject;
         };
-
-    // IText
-    'text:selection:changed': { target: IText };
-    'text:changed': { target: IText };
-    'text:editing:entered': { target: IText };
-    'text:editing:exited': { target: IText };
-  };
+      };
+
+  // IText
+  'text:selection:changed': { target: IText };
+  'text:changed': { target: IText };
+  'text:editing:entered': { target: IText };
+  'text:editing:exited': { target: IText };
+}