feat: migrate all Decorator & Selection Plugins to TypeScript (#812)

examples/example-grouping-esm.html

@@ -97,16 +97,16 @@ <h2>View Source:</h2>
 <script type="module">
   import {
     Aggregators,
-    CellSelectionModel,
     Editors,
     Formatters,
-    GlobalEditorLock,
-    RowSelectionModel,
+    SlickGlobalEditorLock,
+    SlickCellSelectionModel,
     SlickColumnPicker,
     SlickDataView,
     SlickGrid,
     SlickGroup,
     SlickGroupItemMetadataProvider,
+    SlickRowSelectionModel,
     Utils,
   } from '../dist/esm/index.js';
 
@@ -322,7 +322,7 @@ <h2>View Source:</h2>
 
   // register the group item metadata provider to add expand/collapse group handlers
   grid.registerPlugin(groupItemMetadataProvider);
-  grid.setSelectionModel(new CellSelectionModel());
+  grid.setSelectionModel(new SlickCellSelectionModel());
 
   var columnpicker = new SlickColumnPicker(columns, grid, options);
 

examples/example4-model-esm.html

@@ -138,8 +138,8 @@ <h2>View Source:</h2>
 import {
   Editors,
   Formatters,
-  GlobalEditorLock,
-  RowSelectionModel,
+  SlickGlobalEditorLock,
+  SlickRowSelectionModel,
   SlickColumnPicker,
   SlickDataView,
   SlickGridPager,
@@ -260,7 +260,7 @@ <h2>View Source:</h2>
 
   dataView = new SlickDataView({ inlineFilters: true });
   grid = new SlickGrid("#myGrid", dataView, columns, options);
-  grid.setSelectionModel(new RowSelectionModel());
+  grid.setSelectionModel(new SlickRowSelectionModel());
 
   var pager = new SlickGridPager(dataView, grid, "#pager");
   var columnpicker = new SlickColumnPicker(columns, grid, options);
@@ -337,7 +337,7 @@ <h2>View Source:</h2>
   var slider = document.getElementById("pcSlider");
   var slider2 = document.getElementById("pcSlider2");
   var sliderCallback = function() {
-    GlobalEditorLock.cancelCurrentEdit();
+    SlickGlobalEditorLock.cancelCurrentEdit();
 
     if (percentCompleteThreshold != this.value) {
       window.clearTimeout(h_runfilters);

src/controls/slick.columnmenu.ts

@@ -1,5 +1,5 @@
 import { BindingEventService as BindingEventService_, Event as SlickEvent_, Utils as Utils_ } from '../slick.core';
-import type { Column, ColumnPickerOption, DOMMouseOrTouchEvent, GridOption } from '../models/index';
+import type { Column, ColumnPickerOption, DOMMouseOrTouchEvent, GridOption, OnColumnsChangedArgs } from '../models/index';
 import type { SlickGrid } from '../slick.grid';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
@@ -33,6 +33,12 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  */
 
 export class SlickColumnMenu {
+  // --
+  // public API
+  onColumnsChanged = new SlickEvent<OnColumnsChangedArgs>();
+
+  // --
+  // protected props
   protected _gridUid: string;
   protected _columnTitleElm!: HTMLElement;
   protected _listElm!: HTMLElement;
@@ -51,9 +57,6 @@ export class SlickColumnMenu {
     headerColumnValueExtractor: (columnDef: Column) => columnDef.name || ''
   };
 
-  // public events
-  onColumnsChanged = new SlickEvent<{ columnId: number | string; showing: boolean; allColumns: Column[]; columns: Column[]; grid: SlickGrid; }>();
-
   constructor(protected columns: Column[], protected readonly grid: SlickGrid, options: GridOption) {
     this._gridUid = grid.getUID();
     this._options = Utils.extend({}, this._defaults, options);

src/controls/slick.columnpicker.ts

@@ -34,6 +34,12 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  */
 
 export class SlickColumnPicker {
+  // --
+  // public API
+  onColumnsChanged = new SlickEvent<{ columnId: number | string; showing: boolean; allColumns: Column[]; columns: Column[]; grid: SlickGrid; }>();
+
+  // --
+  // protected props
   protected _gridUid: string;
   protected _columnTitleElm!: HTMLElement;
   protected _listElm!: HTMLElement;
@@ -52,9 +58,6 @@ export class SlickColumnPicker {
     headerColumnValueExtractor: (columnDef: Column) => columnDef.name || ''
   };
 
-  // public events
-  onColumnsChanged = new SlickEvent<{ columnId: number | string; showing: boolean; allColumns: Column[]; columns: Column[]; grid: SlickGrid; }>();
-
   constructor(protected columns: Column[], protected readonly grid: SlickGrid, gridOptions: GridOption) {
     this._gridUid = grid.getUID();
     this._gridOptions = Utils.extend({}, this._defaults, gridOptions);

src/controls/slick.gridmenu.ts

@@ -117,6 +117,17 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  */
 
 export class SlickGridMenu {
+  // --
+  // public API
+  onAfterMenuShow = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
+  onBeforeMenuShow = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
+  onMenuClose = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
+  onCommand = new SlickEvent<GridMenuCommandItemCallbackArgs>();
+  onColumnsChanged = new SlickEvent<onGridMenuColumnsChangedCallbackArgs>();
+
+  // --
+  // protected props
+  protected _bindingEventService: BindingEventService_;
   protected _gridOptions: GridOption;
   protected _gridUid: string;
   protected _isMenuOpen = false;
@@ -128,7 +139,7 @@ export class SlickGridMenu {
   protected _listElm!: HTMLElement;
   protected _buttonElm!: HTMLElement;
   protected _menuElm!: HTMLElement;
-  protected columnCheckboxes: HTMLInputElement[] = [];
+  protected _columnCheckboxes: HTMLInputElement[] = [];
   protected _defaults = {
     showButton: true,
     hideForceFitButton: false,
@@ -140,18 +151,8 @@ export class SlickGridMenu {
     resizeOnShowHeaderRow: false,
     syncResizeTitle: 'Synchronous resize',
     useClickToRepositionMenu: true,
-    headerColumnValueExtractor: function (columnDef) {
-      return columnDef.name;
-    }
+    headerColumnValueExtractor: (columnDef: Column) => columnDef.name,
   };
-  protected _bindingEventService: BindingEventService_;
-
-  // public events
-  onAfterMenuShow = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
-  onBeforeMenuShow = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
-  onMenuClose = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
-  onCommand = new SlickEvent<GridMenuCommandItemCallbackArgs>();
-  onColumnsChanged = new SlickEvent<onGridMenuColumnsChangedCallbackArgs>();
 
   constructor(protected columns: Column[], protected readonly grid: SlickGrid, gridOptions: GridOption) {
     this._gridUid = grid.getUID();
@@ -415,7 +416,7 @@ export class SlickGridMenu {
 
     this.populateCustomMenus(this._gridMenuOptions || {}, this._customMenuElm);
     this.updateColumnOrder();
-    this.columnCheckboxes = [];
+    this._columnCheckboxes = [];
 
     let callbackArgs = {
       grid: this.grid,
@@ -456,7 +457,7 @@ export class SlickGridMenu {
         checkboxElm.checked = true;
       }
 
-      this.columnCheckboxes.push(checkboxElm);
+      this._columnCheckboxes.push(checkboxElm);
 
       // get the column label from the picker value extractor (user can optionally provide a custom extractor)
       if (this._gridMenuOptions?.headerColumnValueExtractor) {
@@ -676,7 +677,7 @@ export class SlickGridMenu {
       const isChecked = e.target.checked;
       const columnId = e.target.dataset.columnid || '';
       let visibleColumns: Column[] = [];
-      this.columnCheckboxes.forEach((columnCheckbox, idx) => {
+      this._columnCheckboxes.forEach((columnCheckbox, idx) => {
         if (columnCheckbox.checked) {
           if (this.columns[idx].hidden) { this.columns[idx].hidden = false; }
           visibleColumns.push(this.columns[idx]);

src/controls/slick.pager.ts

@@ -1,11 +1,11 @@
-import { PagingInfo } from '../models/index';
-import { BindingEventService as BindingEventService_, GlobalEditorLock as GlobalEditorLock_, Utils as Utils_ } from '../slick.core';
-import { SlickDataView } from '../slick.dataview';
-import { SlickGrid } from '../slick.grid';
+import type { PagingInfo } from '../models/index';
+import { BindingEventService as BindingEventService_, SlickGlobalEditorLock as SlickGlobalEditorLock_, Utils as Utils_ } from '../slick.core';
+import type { SlickDataView } from '../slick.dataview';
+import type { SlickGrid } from '../slick.grid';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
 const BindingEventService = IIFE_ONLY ? Slick.BindingEventService : BindingEventService_;
-const GlobalEditorLock = IIFE_ONLY ? Slick.GlobalEditorLock : GlobalEditorLock_;
+const SlickGlobalEditorLock = IIFE_ONLY ? Slick.GlobalEditorLock : SlickGlobalEditorLock_;
 const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
 
 export interface GridPagerOption {
@@ -18,12 +18,16 @@ export interface GridPagerOption {
 }
 
 export class SlickGridPager {
-  // the container might be a string, a jQuery object or a native element
-  protected _container: HTMLElement;
+  // --
+  // public API
+
+  // --
+  // protected props
+  protected _container: HTMLElement; // the container might be a string, a jQuery object or a native element
   protected _statusElm!: HTMLElement;
   protected _bindingEventService: BindingEventService_;
-  protected _options!: GridPagerOption;
-  protected _defaults = {
+  protected _options: GridPagerOption;
+  protected _defaults: GridPagerOption = {
     showAllText: 'Showing all {rowCount} rows',
     showPageText: 'Showing page {pageNum} of {pageCount}',
     showCountText: 'From {countBegin} to {countEnd} of {rowCount} rows',
@@ -61,7 +65,7 @@ export class SlickGridPager {
   }
 
   protected getNavState() {
-    let cannotLeaveEditMode = !GlobalEditorLock.commitCurrentEdit();
+    let cannotLeaveEditMode = !SlickGlobalEditorLock.commitCurrentEdit();
     let pagingInfo = this.dataView.getPagingInfo();
     let lastPage = pagingInfo.totalPages - 1;
 

src/global.d.ts

@@ -3,33 +3,37 @@ import type { Sortable } from 'sortablejs';
 import type {
   BindingEventService,
   ColAutosizeMode,
-  SlickEvent,
-  SlickEventHandler,
-  SlickEventData,
-  GlobalEditorLock,
   GridAutosizeColsMode,
-  SlickGroup,
-  SlickGroupTotals,
   keyCode,
   preClickClassName,
   RowSelectionMode,
+  SlickEvent,
+  SlickEventData,
+  SlickEventHandler,
+  SlickGlobalEditorLock,
+  SlickGroup,
+  SlickGroupTotals,
   SlickRange,
-  ValueFilterMode,
   Utils,
+  ValueFilterMode,
   WidthEvalMode,
 } from './slick.core';
-import type { SlickColumnPicker } from './controls/slick.columnpicker';
 import type { SlickColumnMenu } from './controls/slick.columnmenu';
-import type { SlickGridPager } from './controls/slick.pager';
+import type { SlickColumnPicker } from './controls/slick.columnpicker';
 import type { SlickGridMenu } from './controls/slick.gridmenu';
+import type { SlickGridPager } from './controls/slick.pager';
 import type { SlickAutoTooltip } from './plugins/slick.autotooltips';
 import type { SlickCellCopyManager } from './plugins/slick.cellcopymanager';
 import type { SlickCellMenu } from './plugins/slick.cellmenu';
 import type { SlickContextMenu } from './plugins/slick.contextmenu';
 import type { SlickHeaderButtons } from './plugins/slick.headerbuttons';
 import type { SlickHeaderMenu } from './plugins/slick.headermenu';
-import type { SlickCellExternalCopyManager } from './plugins/slick.cellcopymanager';
-import type { SlickGroupItemMetadataProvider } from './slick.cellexternalcopymanager';
+import type { SlickCellExternalCopyManager } from './plugins/slick.cellexternalcopymanager';
+import type { SlickCellRangeDecorator } from './plugins/slick.cellrangedecorator';
+import type { SlickCellRangeSelector } from './plugins/slick.cellrangeselector';
+import type { SlickCellSelectionModel } from './plugins/slick.cellselectionmodel';
+import type { SlickRowSelectionModel } from './plugins/slick.rowselectionmodel';
+import type { SlickGroupItemMetadataProvider } from './slick.groupitemmetadataprovider';
 import type { Draggable, MouseWheel, Resizable } from './slick.interactions';
 import type { Aggregators } from './slick.dataview';
 import type { Editors } from './slick.editors';
@@ -46,6 +50,9 @@ declare global {
     BindingEventService: typeof BindingEventService,
     CellCopyManager: typeof SlickCellCopyManager,
     CellExternalCopyManager: typeof SlickCellExternalCopyManager,
+    CellRangeDecorator: typeof SlickCellRangeDecorator,
+    CellRangeSelector: typeof SlickCellRangeSelector,
+    CellSelectionModel: typeof SlickCellSelectionModel,
     Draggable: typeof Draggable,
     ColAutosizeMode: typeof ColAutosizeMode,
     Controls: {
@@ -71,15 +78,16 @@ declare global {
     keyCode: typeof keyCode,
     MouseWheel: typeof MouseWheel,
     Plugins: {
-      CellMenu: SlickCellMenu,
-      ContextMenu: SlickContextMenu,
-      HeaderButtons: SlickHeaderButtons,
-      HeaderMenu: SlickHeaderMenu
+      CellMenu: typeof SlickCellMenu,
+      ContextMenu: typeof SlickContextMenu,
+      HeaderButtons: typeof SlickHeaderButtons,
+      HeaderMenu: typeof SlickHeaderMenu
     },
     preClickClassName: typeof preClickClassName,
     Range: typeof SlickRange,
     Resizable: typeof Resizable,
     RowSelectionMode: typeof RowSelectionMode,
+    RowSelectionModel: typeof SlickRowSelectionModel,
     Utils: typeof Utils,
     ValueFilterMode: typeof ValueFilterMode,
     WidthEvalMode: typeof WidthEvalMode,

src/models/cellRange.interface.ts

@@ -1,5 +1,7 @@
 // import type { SlickCellRangeDecorator } from '../plugins/slick.cellrangedecorator';
 
+import type { SlickCellRangeDecorator } from '../plugins/slick.cellrangedecorator';
+
 export interface CellRange {
   /** Selection start from which cell? */
   fromCell: number;
@@ -34,7 +36,7 @@ export interface CellRangeSelectorOption {
   accelerateInterval: number;
 
   /** cell decorator service */
-  // cellDecorator: SlickCellRangeDecorator;
+  cellDecorator: SlickCellRangeDecorator;
 
   /** styling (for example blue background on cell) */
   selectionCss: CSSStyleDeclaration;

src/models/columnPicker.interface.ts

@@ -1,4 +1,13 @@
 import type { Column, GridOption } from './index';
+import type { SlickGrid } from '../slick.grid';
+
+export interface OnColumnsChangedArgs {
+  columnId: number | string;
+  showing: boolean;
+  allColumns: Column[];
+  columns: Column[];
+  grid: SlickGrid;
+}
 
 export interface ColumnPickerOption {
   /** Defaults to "Columns" which is the title that shows up over the columns */

src/models/gridOption.interface.ts

@@ -1,5 +1,5 @@
 import type { Column, ColumnPickerOption, ColumnReorderFunction, EditCommand, Editor, Formatter, GridMenuOption, ItemMetadata, } from './index';
-import type { EditorLock } from '../slick.core';
+import type { SlickEditorLock } from '../slick.core';
 
 export interface CellViewportRange {
   bottom: number;
@@ -101,7 +101,7 @@ export interface GridOption {
   editorFactory?: null | { getEditor: (col: Column) => Editor; };
 
   /** a global singleton editor lock. */
-  editorLock: EditorLock;
+  editorLock: SlickEditorLock;
 
   /** Do we want to emulate paging when we are scrolling? */
   emulatePagingWhenScrolling?: boolean;

src/models/index.ts

@@ -50,9 +50,11 @@ export * from './menuFromCellCallbackArgs.interface';
 export * from './menuItem.interface';
 export * from './menuOptionItem.interface';
 export * from './menuOptionItemCallbackArgs.interface';
+export * from './mouseOffsetViewport.interface';
 export * from './multiColumnSort.interface';
 export * from './pagingInfo.interface';
 export * from './plugin.interface';
 export * from './positionMethod.type';
+export * from './rowSelectionModelOption.interface';
 export * from './singleColumnSort.interface';
 export * from './sortDirectionNumber.enum';

src/models/mouseOffsetViewport.interface.ts

@@ -0,0 +1,25 @@
+import type { DragPosition } from './drag.interface';
+
+export interface MouseOffsetViewport {
+  e: any,
+  dd: DragPosition,
+  viewport: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    offset: {
+      left: number;
+      top: number;
+      right: number;
+      bottom: number;
+    }
+  },
+  // Consider the viewport as the origin, the `offset` is based on the coordinate system:
+  // the cursor is on the viewport's left/bottom when it is less than 0, and on the right/top when greater than 0.
+  offset: {
+    x: number;
+    y: number;
+  },
+  isOutsideViewport?: boolean;
+}