chore: add Draggable init() and add more TS types in interactions (#920)

Author: ghiscoding

src/models/drag.interface.ts

@@ -1,5 +1,16 @@
 import type { SlickGrid } from '../slick.grid';
 
+export interface DragItem {
+  dragSource: HTMLElement | Document | null;
+  dragHandle: HTMLElement | null;
+  deltaX: number;
+  deltaY: number;
+  range: DragRange;
+  target: HTMLElement;
+  startX: number;
+  startY: number;
+}
+
 export interface DragPosition {
   startX: number;
   startY: number;

src/models/interactions.interface.ts

@@ -1,6 +1,8 @@
 // --
 // slick.interactions.ts
 
+import { DragPosition } from './drag.interface';
+
 export interface InteractionBase {
   destroy: () => void;
 }
@@ -15,24 +17,24 @@ export interface DraggableOption {
   allowDragFromClosest?: string;
 
   /** drag initialized callback */
-  onDragInit?: Function;
+  onDragInit?: (e: DragEvent, dd: DragPosition) => boolean | void;
 
   /** drag started callback */
-  onDragStart?: Function;
+  onDragStart?: (e: DragEvent, dd: DragPosition) => boolean | void;
 
   /** drag callback */
-  onDrag?: Function;
+  onDrag?: (e: DragEvent, dd: DragPosition) => boolean | void;
 
   /** drag ended callback */
-  onDragEnd?: Function;
+  onDragEnd?: (e: DragEvent, dd: DragPosition) => boolean | void;
 }
 
 export interface MouseWheelOption {
   /** optional DOM element to attach mousewheel values, if undefined we'll attach it to the "window" object */
   element: HTMLElement | Document;
 
   /** mousewheel callback */
-  onMouseWheel?: Function;
+  onMouseWheel?: (e: MouseEvent, delta: number, deltaX: number, deltaY: number) => boolean | void;
 }
 
 export interface ResizableOption {
@@ -43,11 +45,11 @@ export interface ResizableOption {
   resizeableHandleElement: HTMLElement;
 
   /** resize start callback */
-  onResizeStart?: Function;
+  onResizeStart?: (e: MouseEvent | Touch | TouchEvent, resizeElms: { resizeableElement: HTMLElement; }) => boolean | void;
 
   /** resizing callback */
-  onResize?: Function;
+  onResize?: (e: MouseEvent | Touch | TouchEvent, resizeElms: { resizeableElement: HTMLElement; resizeableHandleElement: HTMLElement; }) => boolean | void;
 
   /** resize ended callback */
-  onResizeEnd?: Function;
+  onResizeEnd?: (e: MouseEvent | Touch | TouchEvent, resizeElms: { resizeableElement: HTMLElement; }) => boolean | void;
 }

src/slick.grid.ts

@@ -10,7 +10,6 @@ import type {
   CSSStyleDeclarationWritable,
   CustomDataView,
   DOMEvent,
-  DOMMouseOrTouchEvent,
   DragPosition,
   DragRowMove,
   Editor,
@@ -1919,12 +1918,12 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         Resizable({
           resizeableElement: colElm as HTMLElement,
           resizeableHandleElement: resizeableHandle,
-          onResizeStart: (e: DOMMouseOrTouchEvent<HTMLDivElement>, resizeElms: { resizeableElement: HTMLElement; }): boolean | void => {
-            const targetEvent = e.touches ? e.touches[0] : e;
+          onResizeStart: (e, resizeElms): boolean | void => {
+            const targetEvent = (e as TouchEvent).touches ? (e as TouchEvent).changedTouches[0] : e;
             if (!this.getEditorLock()?.commitCurrentEdit()) {
               return false;
             }
-            pageX = targetEvent.pageX;
+            pageX = (targetEvent as MouseEvent).pageX;
             frozenLeftColMaxWidth = 0;
             resizeElms.resizeableElement.classList.add('slick-header-column-active');
             let shrinkLeewayOnRight: number | null = null;
@@ -1985,11 +1984,11 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
             maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft);
             minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight);
           },
-          onResize: (e: DOMMouseOrTouchEvent<HTMLDivElement>, resizeElms: { resizeableElement: HTMLElement; resizeableHandleElement: HTMLElement; }) => {
-            const targetEvent = e.touches ? e.touches[0] : e;
+          onResize: (e, resizeElms) => {
+            const targetEvent = (e as TouchEvent).touches ? (e as TouchEvent).changedTouches[0] : e;
             this.columnResizeDragging = true;
             let actualMinWidth;
-            const d = Math.min(maxPageX, Math.max(minPageX, targetEvent.pageX)) - pageX;
+            const d = Math.min(maxPageX, Math.max(minPageX, (targetEvent as MouseEvent).pageX)) - pageX;
             let x;
             let newCanvasWidthL = 0;
             let newCanvasWidthR = 0;
@@ -2166,7 +2165,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
               resizeHandle: resizeElms.resizeableHandleElement
             });
           },
-          onResizeEnd: (_e: Event, resizeElms: { resizeableElement: HTMLElement; }) => {
+          onResizeEnd: (_e, resizeElms) => {
             resizeElms.resizeableElement.classList.remove('slick-header-column-active');
 
             const triggeredByColumn = resizeElms.resizeableElement.id.replace(this.uid, '');
@@ -4566,12 +4565,12 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       this.cleanUpCells(range, row);
       // Render missing cells.
       cellsAdded = 0;
-      
+
       let metadata = (this.data as CustomDataView<TData>)?.getItemMetadata?.(row) ?? {} as ItemMetadata;
       metadata = metadata?.columns as ItemMetadata;
-      
+
       const d = this.getDataItem(row);
-      
+
       // TODO:  shorten this loop (index? heuristics? binary search?)
       for (let i = 0, ii = this.columns.length; i < ii; i++) {
         if (!this.columns[i] || this.columns[i].hidden) { continue; }
@@ -4643,7 +4642,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     const rows: number[] = [];
     let needToReselectCell = false;
     const dataLength = this.getDataLength();
-    
+
     for (let i = range.top as number, ii = range.bottom as number; i <= ii; i++) {
       if (this.rowsCache[i] || (this.hasFrozenRows && this._options.frozenBottom && i === this.getDataLength())) {
         continue;
@@ -4680,7 +4679,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     const x = document.createElement('div');
     const xRight = document.createElement('div');
-    
+
     divArrayL.forEach(elm => x.appendChild(elm as HTMLElement));
     divArrayR.forEach(elm => xRight.appendChild(elm as HTMLElement));
 

src/slick.interactions.ts

@@ -1,4 +1,4 @@
-import type { DraggableOption, MouseWheelOption, ResizableOption } from './models/index';
+import type { DragItem, DragPosition, DraggableOption, MouseWheelOption, ResizableOption } from './models/index';
 import { Utils as Utils_ } from './slick.core';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (esm)
@@ -31,28 +31,32 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
 export function Draggable(options: DraggableOption) {
   let { containerElement } = options;
   const { onDragInit, onDragStart, onDrag, onDragEnd } = options;
-  let element: HTMLElement | null, startX: number, startY: number, deltaX: number, deltaY: number, dragStarted: boolean;
+  let element: HTMLElement | null;
+  let startX: number;
+  let startY: number;
+  let deltaX: number;
+  let deltaY: number;
+  let dragStarted: boolean;
 
   if (!containerElement) {
-    containerElement = document;
-  }
-  if (!containerElement || typeof containerElement.addEventListener !== 'function') {
-    throw new Error('[Slick.Draggable] You did not provide a valid container html element that will be used for dragging.');
+    containerElement = document.body;
   }
 
-  let originaldd: { dragSource: HTMLElement | Document | null, dragHandle: HTMLElement | null } = {
+  let originaldd: Partial<DragItem> = {
     dragSource: containerElement,
     dragHandle: null,
   };
 
-  if (containerElement) {
-    containerElement.addEventListener('mousedown', userPressed as EventListener);
-    containerElement.addEventListener('touchstart', userPressed as EventListener);
+  function init() {
+    if (containerElement) {
+      containerElement.addEventListener('mousedown', userPressed as EventListener);
+      containerElement.addEventListener('touchstart', userPressed as EventListener);
+    }
   }
 
-  function executeDragCallbackWhenDefined(callback?: Function, e?: MouseEvent | Touch | TouchEvent, dd?: any) {
+  function executeDragCallbackWhenDefined(callback?: (e: DragEvent, dd: DragItem) => boolean | void, evt?: MouseEvent | Touch | TouchEvent, dd?: DragItem) {
     if (typeof callback === 'function') {
-      callback(e, dd);
+      callback(evt as DragEvent, dd as DragItem);
     }
   }
 
@@ -76,7 +80,7 @@ export function Draggable(options: DraggableOption) {
       deltaX = targetEvent.clientX - targetEvent.clientX;
       deltaY = targetEvent.clientY - targetEvent.clientY;
       originaldd = Object.assign(originaldd, { deltaX, deltaY, startX, startY, target });
-      executeDragCallbackWhenDefined(onDragInit as Function, event, originaldd);
+      executeDragCallbackWhenDefined(onDragInit as (e: DragEvent, dd: DragPosition) => boolean | void, event, originaldd as DragItem);
 
       document.body.addEventListener('mousemove', userMoved);
       document.body.addEventListener('touchmove', userMoved);
@@ -94,18 +98,18 @@ export function Draggable(options: DraggableOption) {
 
     if (!dragStarted) {
       originaldd = Object.assign(originaldd, { deltaX, deltaY, startX, startY, target });
-      executeDragCallbackWhenDefined(onDragStart, event, originaldd);
+      executeDragCallbackWhenDefined(onDragStart, event, originaldd as DragItem);
       dragStarted = true;
     }
 
     originaldd = Object.assign(originaldd, { deltaX, deltaY, startX, startY, target });
-    executeDragCallbackWhenDefined(onDrag, event, originaldd);
+    executeDragCallbackWhenDefined(onDrag, event, originaldd as DragItem);
   }
 
   function userReleased(event: MouseEvent | TouchEvent) {
     const { target } = event;
     originaldd = Object.assign(originaldd, { target });
-    executeDragCallbackWhenDefined(onDragEnd, event, originaldd);
+    executeDragCallbackWhenDefined(onDragEnd, event, originaldd as DragItem);
     document.body.removeEventListener('mousemove', userMoved);
     document.body.removeEventListener('touchmove', userMoved);
     document.body.removeEventListener('mouseup', userReleased);
@@ -114,6 +118,9 @@ export function Draggable(options: DraggableOption) {
     dragStarted = false;
   }
 
+  // initialize Slick.MouseWheel by attaching mousewheel event
+  init();
+
   // public API
   return { destroy };
 }