From 89b8484715cbc8924948d87ad31c4c6473848231 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Wed, 28 Dec 2022 15:22:10 -0800
Subject: [PATCH] better GridStackEventHandlerCallback types

* GridStackEventHandlerCallback is not a list of specific callbacks so user can have better method signatures.
---
 demo/events.js   | 10 +++++-----
 doc/CHANGES.md   |  1 +
 src/gridstack.ts |  7 ++++---
 src/types.ts     |  7 ++++++-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/demo/events.js b/demo/events.js
index 6d9d75640..df12780b1 100644
--- a/demo/events.js
+++ b/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);
     }
   });
 
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 21292f289..83748b5d3 100644
--- a/doc/CHANGES.md
+++ b/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)
diff --git a/src/gridstack.ts b/src/gridstack.ts
index d65b1fb73..55f56160e 100644
--- a/src/gridstack.ts
+++ b/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') {
diff --git a/src/types.ts b/src/types.ts
index baff9fa63..ad1518026 100644
--- a/src/types.ts
+++ b/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