diff --git a/CHANGELOG.md b/CHANGELOG.md index 40e118b2077..5e5b05bf392 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/EventTypeDefs.ts b/src/EventTypeDefs.ts index fd47f57f2c0..ab8e01af5a8 100644 --- a/src/EventTypeDefs.ts +++ b/src/EventTypeDefs.ts @@ -167,7 +167,7 @@ export type DragEventData = TEvent & { export type DropEventData = DragEventData & { pointer: Point }; -type DnDEvents = { +interface DnDEvents { dragstart: TEventWithTarget; 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 & { selected: FabricObject[]; }; @@ -198,12 +198,12 @@ type CanvasSelectionEvents = { 'selection:cleared': Partial & { deselected: FabricObject[]; }; -}; +} -export type CollectionEvents = { +export interface CollectionEvents { 'object:added': { target: StaticFabricObject }; 'object:removed': { target: StaticFabricObject }; -}; +} type BeforeSuffix = `${T}:before`; type WithBeforeSuffix = T | BeforeSuffix; @@ -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; contextmenu: SimpleEventHandler; -}; - -export type ObjectEvents = ObjectPointerEvents & - DnDEvents & - MiscEvents & - ObjectModificationEvents & { - // selection - selected: Partial & { - target: FabricObject; - }; - deselected: Partial & { - 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 & { + target: FabricObject; + }; + deselected: Partial & { + 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 }; +}