fix: only assign CellRangeSelector when Hybrid has dragToSelect set (#1174)

Author: ghiscoding

examples/example-master-detail-esm.html

@@ -214,8 +214,7 @@ <h2>View Source:</h2>
     data1 = mockMasterData();
     grid1 = new SlickGrid("#myGrid1", data1, columns1, gridOptions1);
     const selectionModel = new SlickHybridSelectionModel({
-      selectionType: 'row-click',
-      selectActiveRow: false
+      selectionType: 'row',
     });
     grid1.setSelectionModel(selectionModel);
     grid1.init();

src/models/interactions.interface.ts

@@ -5,7 +5,6 @@ import type { DragPosition } from './drag.interface.js';
 
 export interface InteractionBase {
   destroy: () => void;
-  pause?: () => void;
 }
 export interface ClassDetectElement {
   /** tag to be returned on match */

src/models/selectionModelOption.interface.ts

@@ -8,8 +8,6 @@ export type SelectionType =
   | 'cell'
   /** multiple row selection */
   | 'row'
-  /** single row selection through row click */
-  | 'row-click'
   /** mixed cell/row selection */
   | 'mixed';
 

src/plugins/slick.hybridselectionmodel.ts

@@ -44,7 +44,7 @@ export class SlickHybridSelectionModel implements SelectionModel {
   protected _prevSelectedRow?: number;
   protected _prevKeyDown = '';
   protected _ranges: SlickRange_[] = [];
-  protected _selector: SlickCellRangeSelector_;
+  protected _selector?: SlickCellRangeSelector_;
   protected _isRowMoveManagerHandler: any;
   protected _activeSelectionIsRow = false;
   protected _options: HybridSelectionModelOption;
@@ -62,15 +62,6 @@ export class SlickHybridSelectionModel implements SelectionModel {
 
   constructor(options?: HybridSelectionModelOption) {
     this._options = Utils.extend(true, {}, this._defaults, options);
-
-    if (options === undefined || options.cellRangeSelector === undefined) {
-      this._selector = new SlickCellRangeSelector({
-        selectionCss: { border: '2px solid black' } as CSSStyleDeclaration,
-        copyToSelectionCss: { border: '2px solid purple' } as CSSStyleDeclaration
-      });
-    } else {
-      this._selector = options.cellRangeSelector;
-    }
   }
 
   // Region: Setup
@@ -90,14 +81,22 @@ export class SlickHybridSelectionModel implements SelectionModel {
       this._activeSelectionIsRow = true;
     }
 
-    if (!this._selector && this._options?.dragToSelect) {
+    if (!this._selector && (!this._activeSelectionIsRow || (this._activeSelectionIsRow && this._options.dragToSelect))) {
       if (!SlickCellRangeDecorator) {
         throw new Error('Slick.CellRangeDecorator is required when option dragToSelect set to true');
       }
-      this._selector = new SlickCellRangeSelector({
-        selectionCss: { border: 'none' } as CSSStyleDeclaration,
-        autoScroll: this._options?.autoScrollWhenDrag
-      });
+      this._selector = new SlickCellRangeSelector(
+        this._options?.dragToSelect
+          ? {
+            selectionCss: { border: 'none' } as CSSStyleDeclaration,
+            autoScroll: this._options?.autoScrollWhenDrag,
+          }
+          : {
+            selectionCss: { border: '2px solid gray' } as CSSStyleDeclaration,
+            copyToSelectionCss: { border: '2px solid purple' } as CSSStyleDeclaration,
+          }
+      );
+      this._options.cellRangeSelector = this._selector;
     }
 
     if (grid.hasDataView()) {
@@ -473,7 +472,7 @@ export class SlickHybridSelectionModel implements SelectionModel {
         if (active >= 0 && active < this._grid.getDataLength()) {
           this._grid.scrollRowIntoView(active);
           const tempRanges = this.rowsToRanges(this.getRowsRange(top, bottom));
-          this.setSelectedRanges(tempRanges, undefined, '');
+          this.setSelectedRanges(tempRanges);
         }
 
         e.preventDefault();
@@ -519,7 +518,7 @@ export class SlickHybridSelectionModel implements SelectionModel {
     }
 
     const tempRanges = this.rowsToRanges(selection);
-    this.setSelectedRanges(tempRanges, undefined, '');
+    this.setSelectedRanges(tempRanges);
     e.stopImmediatePropagation();
 
     return true;

src/slick.grid.ts

@@ -978,8 +978,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         this._bindingEventService.bind(element, 'mouseout', this.handleCellMouseOut.bind(this) as EventListener);
       });
 
-      const isDraggable = this.selectionModel?.getOptions()?.selectionType !== 'row-click';
-      if (Draggable && isDraggable) {
+      if (Draggable) {
         this.slickDraggableInstance = Draggable({
           containerElement: this._container,
           allowDragFrom: `div.slick-cell, div.slick-cell *, div.${this.dragReplaceEl.cssClass}`,
@@ -1436,16 +1435,13 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   setSelectionModel(model: SelectionModel) {
     if (this.selectionModel) {
       this.selectionModel.onSelectedRangesChanged.unsubscribe(this.handleSelectedRangesChanged.bind(this));
-      this.selectionModel?.destroy();
+      this.selectionModel.destroy?.();
     }
 
     this.selectionModel = model;
     if (this.selectionModel) {
       this.selectionModel.init(this as unknown as SlickGridModel);
       this.selectionModel.onSelectedRangesChanged.subscribe(this.handleSelectedRangesChanged.bind(this));
-      if (this.selectionModel.getOptions()?.selectionType === 'row-click' && this.slickDraggableInstance?.pause) {
-        this.slickDraggableInstance.pause(); // don't allow dragging (cell selection) when using row-click
-      }
     }
   }
 

src/slick.interactions.ts

@@ -31,7 +31,6 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  * @class Draggable
  */
 export function Draggable(options: DraggableOption) {
-  let isPaused = false;
   let { containerElement } = options;
   const { onDragInit, onDragStart, onDrag, onDragEnd, preventDragFromKeys } = options;
   let element: HTMLElement | null;
@@ -73,7 +72,7 @@ export function Draggable(options: DraggableOption) {
 
   /** Do we want to prevent Drag events from happening (for example prevent onDrag when Ctrl key is pressed while dragging) */
   function preventDrag(event: MouseEvent | TouchEvent | KeyboardEvent) {
-    let eventPrevented = isPaused;
+    let eventPrevented = false;
     if (preventDragFromKeys) {
       preventDragFromKeys.forEach(key => {
         if ((event as KeyboardEvent)[key]) {
@@ -159,16 +158,11 @@ export function Draggable(options: DraggableOption) {
     }
   }
 
-  /** pause or stop the service */
-  function pause() {
-    isPaused = true;
-  }
-
-  // initialize Slick.MouseWheel by attaching mousewheel event
+  // initialize Draggable service by attaching mouse/touch events
   init();
 
   // public API
-  return { destroy, pause };
+  return { destroy };
 }
 
 /**
@@ -230,7 +224,7 @@ export function MouseWheel(options: MouseWheelOption) {
     }
   }
 
-  // initialize Slick.MouseWheel by attaching mousewheel event
+  // initialize MouseWheel service by attaching mousewheel events
   init();
 
   // public API
@@ -309,6 +303,7 @@ export function Resizable(options: ResizableOption) {
     document.body.removeEventListener('touchend', resizeEndHandler);
   }
 
+  // initialize Resizable service by attaching mouse/touch events
   init();
 
   // public API