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

)

packages/common/src/core/slickGrid.ts

@@ -26,7 +26,6 @@ import type {
   CssStyleHash,
   CustomDataView,
   DOMEvent,
-  DOMMouseOrTouchEvent,
   DragPosition,
   DragRowMove,
   EditController,
@@ -1877,12 +1876,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;
@@ -1943,11 +1942,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;
@@ -2124,7 +2123,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, '');

packages/common/src/core/slickInteractions.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import type { DOMMouseOrTouchEvent, DragPosition, DraggableOption, MouseWheelOption, ResizableOption } from '../interfaces/index';
+import type { DragItem, DragPosition, DraggableOption, MouseWheelOption, ResizableOption } from '../interfaces/index';
 import { windowScrollPosition } from '../services/domUtilities';
 
 /***
@@ -40,19 +40,21 @@ export function Draggable(options: DraggableOption) {
     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?: (e: DragEvent, dd: DragPosition) => boolean | void, evt?: MouseEvent | Touch | TouchEvent, dd?: any) {
+  function executeDragCallbackWhenDefined(callback?: (e: DragEvent, dd: DragPosition) => boolean | void, evt?: MouseEvent | Touch | TouchEvent, dd?: DragItem) {
     if (typeof callback === 'function') {
-      callback(evt as DragEvent, dd);
+      callback(evt as DragEvent, dd as DragItem);
     }
   }
 
@@ -76,7 +78,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 (e: DragEvent, dd: DragPosition) => boolean | void, 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 +96,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 +116,9 @@ export function Draggable(options: DraggableOption) {
     dragStarted = false;
   }
 
+  // initialize Slick.MouseWheel by attaching mousewheel event
+  init();
+
   // public API
   return { destroy };
 }
@@ -218,7 +223,7 @@ export function Resizable(options: ResizableOption) {
     }
   }
 
-  function executeResizeCallbackWhenDefined(callback?: (e: DOMMouseOrTouchEvent<HTMLDivElement>, resizeElms: { resizeableElement: HTMLElement; resizeableHandleElement: HTMLElement; }) => boolean | void, e?: MouseEvent | TouchEvent | Touch) {
+  function executeResizeCallbackWhenDefined(callback?: (e: MouseEvent | TouchEvent, resizeElms: { resizeableElement: HTMLElement; resizeableHandleElement: HTMLElement; }) => boolean | void, e?: MouseEvent | TouchEvent | Touch) {
     if (typeof callback === 'function') {
       callback(e as any, { resizeableElement, resizeableHandleElement });
     }
@@ -238,7 +243,7 @@ export function Resizable(options: ResizableOption) {
     if (e.preventDefault && e.type !== 'touchmove') {
       e.preventDefault();
     }
-    const event = ((e as TouchEvent).touches ? (e as TouchEvent).changedTouches[0] : e) as DOMMouseOrTouchEvent<HTMLDivElement>;
+    const event = ((e as TouchEvent).touches ? (e as TouchEvent).changedTouches[0] : e) as MouseEvent | TouchEvent;
     if (typeof onResize === 'function') {
       onResize(event, { resizeableElement, resizeableHandleElement });
     }

packages/common/src/interfaces/drag.interface.ts

@@ -1,5 +1,16 @@
 import type { SlickGrid } from '../core/index';
 
+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;

packages/common/src/interfaces/interactions.interface.ts

@@ -2,7 +2,6 @@
 // --
 // Slick Interactions
 
-import { DOMMouseOrTouchEvent } from './domEvent.interface';
 import { DragPosition } from './drag.interface';
 
 export interface InteractionBase {
@@ -48,11 +47,11 @@ export interface ResizableOption {
   resizeableHandleElement: HTMLElement;
 
   /** resize start callback */
-  onResizeStart?: (e: DOMMouseOrTouchEvent<HTMLDivElement>, resizeElms: { resizeableElement: HTMLElement; }) => boolean | void;
+  onResizeStart?: (e: MouseEvent | Touch | TouchEvent, resizeElms: { resizeableElement: HTMLElement; }) => boolean | void;
 
   /** resizing callback */
-  onResize?: (e: DOMMouseOrTouchEvent<HTMLDivElement>, resizeElms: { resizeableElement: HTMLElement; resizeableHandleElement: HTMLElement; }) => boolean | void;
+  onResize?: (e: MouseEvent | Touch | TouchEvent, resizeElms: { resizeableElement: HTMLElement; resizeableHandleElement: HTMLElement; }) => boolean | void;
 
   /** resize ended callback */
-  onResizeEnd?: (e: DOMMouseOrTouchEvent<HTMLDivElement>, resizeElms: { resizeableElement: HTMLElement; }) => boolean | void;
+  onResizeEnd?: (e: MouseEvent | Touch | TouchEvent, resizeElms: { resizeableElement: HTMLElement; }) => boolean | void;
 }