fix(core): SlickEventHandler should infer handler args Types (#948)

src/models/drag.interface.ts

@@ -49,4 +49,5 @@ export interface DragRowMove {
   selectedRows: number[];
   startX: number;
   startY: number;
+  range: DragRange;
 }

src/models/gridEvents.interface.ts

@@ -37,7 +37,7 @@ export interface OnRenderedEventArgs extends SlickGridEventData { startRow: numb
 export interface OnSelectedRowsChangedEventArgs extends SlickGridEventData { rows: number[]; previousSelectedRows: number[]; changedSelectedRows: number[]; changedUnselectedRows: number[]; caller: string; }
 export interface OnSetOptionsEventArgs extends SlickGridEventData { optionsBefore: GridOption; optionsAfter: GridOption; }
 export interface OnActivateChangedOptionsEventArgs extends SlickGridEventData { options: GridOption; }
-export interface OnScrollEventArgs extends SlickGridEventData { scrollLeft: number; scrollTop: number; }
+export interface OnScrollEventArgs extends SlickGridEventData { scrollLeft: number; scrollTop: number; cell: number; row: number; }
 export interface OnDragEventArgs extends SlickGridEventData {
   count: number; deltaX: number; deltaY: number; offsetX: number; offsetY: number; originalX: number; originalY: number;
   available: HTMLDivElement | HTMLDivElement[]; drag: HTMLDivElement; drop: HTMLDivElement | HTMLDivElement[]; helper: HTMLDivElement;

src/plugins/slick.cellmenu.ts

@@ -196,7 +196,7 @@ export class SlickCellMenu implements SlickPlugin {
     this._gridOptions = grid.getOptions();
     Utils.addSlickEventPubSubWhenDefined(grid.getPubSubService(), this);
     this._gridUid = grid?.getUID() || '';
-    this._handler.subscribe(this._grid.onClick, this.handleCellClick.bind(this));
+    this._handler.subscribe(this._grid.onClick as any, this.handleCellClick.bind(this));
     if (this._cellMenuProperties.hideMenuOnScroll) {
       this._handler.subscribe(this._grid.onScroll, this.closeMenu.bind(this));
     }

src/plugins/slick.cellrangeselector.ts

@@ -1,7 +1,7 @@
 import { SlickEvent as SlickEvent_, SlickEventData, SlickEventHandler as SlickEventHandler_, SlickRange as SlickRange_, Utils as Utils_ } from '../slick.core';
 import { Draggable as Draggable_ } from '../slick.interactions';
 import { SlickCellRangeDecorator as SlickCellRangeDecorator_ } from './slick.cellrangedecorator';
-import type { CellRangeSelectorOption, DOMMouseOrTouchEvent, DragPosition, DragRange, GridOption, MouseOffsetViewport, OnScrollEventArgs, SlickPlugin } from '../models/index';
+import type { CellRangeSelectorOption, DOMMouseOrTouchEvent, DragPosition, DragRange, DragRowMove, GridOption, MouseOffsetViewport, OnScrollEventArgs, SlickPlugin } from '../models/index';
 import type { SlickGrid } from '../slick.grid';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (esm)
@@ -143,7 +143,7 @@ export class SlickCellRangeSelector implements SlickPlugin {
     e.preventDefault();
   }
 
-  protected handleDragStart(e: DOMMouseOrTouchEvent<HTMLDivElement>, dd: DragPosition) {
+  protected handleDragStart(e: DOMMouseOrTouchEvent<HTMLDivElement>, dd: DragRowMove) {
     const cell = this._grid.getCellFromEvent(e);
     if (cell && this.onBeforeCellRangeSelected.notify(cell).getReturnValue() !== false && this._grid.canCellBeSelected(cell.row, cell.cell)) {
       this._dragging = true;
@@ -174,7 +174,7 @@ export class SlickCellRangeSelector implements SlickPlugin {
     return this._decorator.show(new SlickRange(start.row, start.cell));
   }
 
-  protected handleDrag(evt: SlickEventData, dd: DragPosition) {
+  protected handleDrag(evt: SlickEventData, dd: DragRowMove) {
     if (!this._dragging && !this._isRowMoveRegistered) {
       return;
     }
@@ -193,7 +193,7 @@ export class SlickCellRangeSelector implements SlickPlugin {
     this.handleDragTo(e, dd);
   }
 
-  protected getMouseOffsetViewport(e: MouseEvent | TouchEvent, dd: DragPosition): MouseOffsetViewport {
+  protected getMouseOffsetViewport(e: MouseEvent | TouchEvent, dd: DragRowMove): MouseOffsetViewport {
     const targetEvent: MouseEvent | Touch = (e as TouchEvent)?.touches?.[0] ?? e;
     const viewportLeft = this._activeViewport.scrollLeft;
     const viewportTop = this._activeViewport.scrollTop;

src/plugins/slick.checkboxselectcolumn.ts

@@ -1,4 +1,4 @@
-import type { CheckboxSelectorOption, Column, DOMEvent, SlickPlugin, SelectableOverrideCallback } from '../models/index';
+import type { CheckboxSelectorOption, Column, DOMEvent, SlickPlugin, SelectableOverrideCallback, OnHeaderClickEventArgs } from '../models/index';
 import { BindingEventService as BindingEventService_, SlickEventHandler as SlickEventHandler_, Utils as Utils_ } from '../slick.core';
 import type { SlickDataView } from '../slick.dataview';
 import type { SlickGrid } from '../slick.grid';
@@ -281,7 +281,7 @@ export class SlickCheckboxSelectColumn<T = any> implements SlickPlugin {
     this._grid.setSelectedRows(this._grid.getSelectedRows().filter((n) => removeRows.indexOf(n) < 0), 'SlickCheckboxSelectColumn.deSelectRows');
   }
 
-  protected handleHeaderClick(e: DOMEvent<HTMLInputElement>, args: any) {
+  protected handleHeaderClick(e: DOMEvent<HTMLInputElement>, args: OnHeaderClickEventArgs) {
     if (args.column.id === this._options.columnId && e.target.type === 'checkbox') {
       // if editing, try to commit
       if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) {

src/plugins/slick.crossgridrowmovemanager.ts

@@ -74,7 +74,7 @@ export class SlickCrossGridRowMoveManager {
 
     this._eventHandler
       .subscribe(this._grid.onDragInit, this.handleDragInit.bind(this))
-      .subscribe(this._grid.onDragStart, this.handleDragStart.bind(this))
+      .subscribe(this._grid.onDragStart as any, this.handleDragStart.bind(this))
       .subscribe(this._grid.onDrag, this.handleDrag.bind(this))
       .subscribe(this._grid.onDragEnd, this.handleDragEnd.bind(this));
   }

src/plugins/slick.rowmovemanager.ts

@@ -85,7 +85,7 @@ export class SlickRowMoveManager {
     this._options = Utils.extend({}, this._options, newOptions);
   }
 
-  protected handleDragInit(e: SlickEventData_) {
+  protected handleDragInit(e: MouseEvent) {
     // prevent the grid from cancelling drag'n'drop by default
     e.stopImmediatePropagation();
   }
@@ -208,7 +208,7 @@ export class SlickRowMoveManager {
     }
   }
 
-  protected handleDragEnd(e: SlickEventData_, dd: DragRowMove) {
+  protected handleDragEnd(e: MouseEvent, dd: DragRowMove) {
     if (!this._dragging) {
       return;
     }

src/slick.core.ts

@@ -204,17 +204,17 @@ export class SlickEvent<ArgType = any> {
   }
 }
 
-export class SlickEventHandler<ArgType = any> {
-  protected handlers: Array<{ event: SlickEvent; handler: Handler<ArgType>; }> = [];
+export class SlickEventHandler {
+  protected handlers: Array<{ event: SlickEvent; handler: Handler<any>; }> = [];
 
-  subscribe(event: SlickEvent, handler: Handler<ArgType>) {
+  subscribe<T = any>(event: SlickEvent<T>, handler: Handler<T>) {
     this.handlers.push({ event, handler });
     event.subscribe(handler);
 
-    return this;  // allow chaining
+    return this as SlickEventHandler;  // allow chaining
   }
 
-  unsubscribe(event: SlickEvent, handler: Handler<ArgType>) {
+  unsubscribe<T = any>(event: SlickEvent<T>, handler: Handler<T>) {
     let i = this.handlers.length;
     while (i--) {
       if (this.handlers[i].event === event &&
@@ -225,7 +225,7 @@ export class SlickEventHandler<ArgType = any> {
       }
     }
 
-    return this;  // allow chaining
+    return this as SlickEventHandler;  // allow chaining
   }
 
   unsubscribeAll() {
@@ -235,7 +235,7 @@ export class SlickEventHandler<ArgType = any> {
     }
     this.handlers = [];
 
-    return this;  // allow chaining
+    return this as SlickEventHandler;  // allow chaining
   }
 }
 

src/slick.grid.ts

@@ -42,7 +42,6 @@ import type {
   OnColumnsResizedEventArgs,
   OnColumnsResizeDblClickEventArgs,
   OnCompositeEditorChangeEventArgs,
-  OnClickEventArgs,
   OnDblClickEventArgs,
   OnFooterContextMenuEventArgs,
   OnFooterRowCellRenderedEventArgs,
@@ -66,6 +65,8 @@ import type {
   SlickGridEventData,
   SlickGridModel,
   SlickPlugin,
+  MenuCommandItemCallbackArgs,
+  OnClickEventArgs,
 } from './models/index';
 import {
   type BasePubSub,
@@ -164,7 +165,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   onColumnsResized: SlickEvent_<OnColumnsResizedEventArgs>;
   onColumnsResizeDblClick: SlickEvent_<OnColumnsResizeDblClickEventArgs>;
   onCompositeEditorChange: SlickEvent_<OnCompositeEditorChangeEventArgs>;
-  onContextMenu: SlickEvent_<SlickGridEventData>;
+  onContextMenu: SlickEvent_<MenuCommandItemCallbackArgs>;
   onDrag: SlickEvent_<DragRowMove>;
   onDblClick: SlickEvent_<OnDblClickEventArgs>;
   onDragInit: SlickEvent_<DragRowMove>;
@@ -539,7 +540,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.onColumnsResized = new SlickEvent<OnColumnsResizedEventArgs>('onColumnsResized', externalPubSub);
     this.onColumnsResizeDblClick = new SlickEvent<OnColumnsResizeDblClickEventArgs>('onColumnsResizeDblClick', externalPubSub);
     this.onCompositeEditorChange = new SlickEvent<OnCompositeEditorChangeEventArgs>('onCompositeEditorChange', externalPubSub);
-    this.onContextMenu = new SlickEvent<SlickGridEventData>('onContextMenu', externalPubSub);
+    this.onContextMenu = new SlickEvent<MenuCommandItemCallbackArgs>('onContextMenu', externalPubSub);
     this.onDrag = new SlickEvent<DragRowMove>('onDrag', externalPubSub);
     this.onDblClick = new SlickEvent<OnDblClickEventArgs>('onDblClick', externalPubSub);
     this.onDragInit = new SlickEvent<DragRowMove>('onDragInit', externalPubSub);