better GridStackEventHandlerCallback types (#2128)

* GridStackEventHandlerCallback is not a list of specific callbacks so user can have better method signatures.

demo/events.js

@@ -38,12 +38,12 @@ function addEvents(grid, id) {
     console.log(g + 'dragstop ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
   });
 
-  grid.on('dropped', function(event, previousWidget, newWidget) {
-    if (previousWidget) {
-      console.log(g + 'dropped - Removed widget from grid:', previousWidget);
+  grid.on('dropped', function(event, previousNode, newNode) {
+    if (previousNode) {
+      console.log(g + 'dropped - Removed widget from grid:', previousNode);
     }
-    if (newWidget) {
-      console.log(g + 'dropped - Added widget in grid:', newWidget);
+    if (newNode) {
+      console.log(g + 'dropped - Added widget in grid:', newNode);
     }
   });
 

doc/CHANGES.md

@@ -80,6 +80,7 @@ Change log
 ## 7.1.1-dev (TBD)
 * fix [#939](https://github.com/gridstack/gridstack.js/issues/2039) 'prototype' undefined error for dd-gridstack.js
 * add [#939](https://github.com/gridstack/gridstack.js/issues/2105) disable/enable are methods now recursive by default
+* add better GridStackEventHandlerCallback spelled out types
 
 ## 7.1.1 (2022-11-13)
 * fix [#939](https://github.com/gridstack/gridstack.js/issues/939) editable elements focus (regression in v6). Thank you [@Gezdy](https://github.com/Gezdy)

src/gridstack.ts

@@ -8,7 +8,8 @@
 import { GridStackEngine } from './gridstack-engine';
 import { Utils, HeightData, obsolete } from './utils';
 import { gridDefaults, ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,
-  GridStackNode, GridStackWidget, numberOrString, DDUIData, DDDragInOpt, GridStackPosition, GridStackOptions, dragInDefaultOptions } from './types';
+  GridStackNode, GridStackWidget, numberOrString, DDUIData, DDDragInOpt, GridStackPosition, GridStackOptions,
+  dragInDefaultOptions, GridStackEventHandler, GridStackNodesHandler } from './types';
 
 /*
  * and include D&D by default
@@ -984,9 +985,9 @@ export class GridStack {
       // native CustomEvent handlers - cash the generic handlers so we can easily remove
       let noData = (name === 'enable' || name === 'disable');
       if (noData) {
-        this._gsEventHandler[name] = (event: Event) => callback(event);
+        this._gsEventHandler[name] = (event: Event) => (callback as GridStackEventHandler)(event);
       } else {
-        this._gsEventHandler[name] = (event: CustomEvent) => callback(event, event.detail);
+        this._gsEventHandler[name] = (event: CustomEvent) => (callback as GridStackNodesHandler)(event, event.detail);
       }
       this.el.addEventListener(name, this._gsEventHandler[name]);
     } else if (name === 'drag' || name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resize' || name === 'resizestop' || name === 'dropped') {

src/types.ts

@@ -66,7 +66,12 @@ export interface GridItemHTMLElement extends HTMLElement {
 
 export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
 
-export type GridStackEventHandlerCallback = (event: Event, arg2?: GridItemHTMLElement | GridStackNode | GridStackNode[], newNode?: GridStackNode) => void;
+/** specific and general event handlers for the .on() method */
+export type GridStackEventHandler = (event: Event) => void;
+export type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;
+export type GridStackNodesHandler = (event: Event, node: GridStackNode[]) => void;
+export type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;
+export type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;
 
 /**
  * Defines the options for a Grid