feat(lib): allow to disable range selection

README.md

@@ -238,15 +238,16 @@ shortcuts: {
 
 **Inputs**
 
-| Input              | Type       | Default | Description                                                                                                   |
-| ------------------ | ---------- | ------- | ------------------------------------------------------------------------------------------------------------- |
-| selectedItems      | Array<any> | /       | Collection of items that are currently selected                                                               |
-| selectOnDrag       | Boolean    | `true`  | Whether items should be selected while dragging                                                               |
-| disabled           | Boolean    | `false` | Disable selection                                                                                             |
-| disableDrag        | Boolean    | `false` | Disable selection by dragging with the mouse. May be useful for mobile.                                       |
-| selectMode         | Boolean    | `false` | If set to `true`, a _toggle_ mode is activated similar to the `toggleSingleItem` shortcut. Useful for mobile. |
-| custom             | Boolean    | `false` | If set to `true`, all default styles for selected items will not be applied.                                  |
-| selectWithShortcut | Boolean    | `false` | If set to `true`, items can only be selected when single clicking and applying a keyboard shortcut            |
+| Input                 | Type       | Default | Description                                                                                                   |
+| --------------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------------------- |
+| selectedItems         | Array<any> | /       | Collection of items that are currently selected                                                               |
+| selectOnDrag          | Boolean    | `true`  | Whether items should be selected while dragging                                                               |
+| disabled              | Boolean    | `false` | Disable selection                                                                                             |
+| disableRangeSelection | Boolean    | `false` | Disable range selection                                                                                       |
+| disableDrag           | Boolean    | `false` | Disable selection by dragging with the mouse. May be useful for mobile.                                       |
+| selectMode            | Boolean    | `false` | If set to `true`, a _toggle_ mode is activated similar to the `toggleSingleItem` shortcut. Useful for mobile. |
+| custom                | Boolean    | `false` | If set to `true`, all default styles for selected items will not be applied.                                  |
+| selectWithShortcut    | Boolean    | `false` | If set to `true`, items can only be selected when single clicking and applying a keyboard shortcut            |
 
 Here's an example of all inputs in action:
 

cypress/integration/clicking.spec.ts

@@ -1,5 +1,12 @@
 import { DEFAULT_CONFIG } from '../../projects/ngx-drag-to-select/src/lib/config';
-import { disableSelectOnDrag, enableSelectWithShortcut, getDesktopExample, toggleItem } from '../support/utils';
+
+import {
+  disableRangeSelection,
+  disableSelectOnDrag,
+  enableSelectWithShortcut,
+  getDesktopExample,
+  toggleItem
+} from '../support/utils';
 
 const SELECTED_CLASS = DEFAULT_CONFIG.selectedClass;
 
@@ -8,7 +15,43 @@ describe('Clicking', () => {
     cy.visit('/');
   });
 
-  describe('Range', () => {
+  describe('Range Selection', () => {
+    describe('Disabled', () => {
+      it('should reset range selection after disabling this feature', () => {
+        getDesktopExample().within(() => {
+          cy.getSelectItem(0)
+            .dispatch('mousedown', { button: 0 })
+            .dispatch('mouseup')
+            .should('have.class', 'dts-range-start');
+
+          disableRangeSelection();
+
+          cy.getSelectItem(2)
+            .dispatch('mousedown', { button: 0 })
+            .dispatch('mouseup')
+            .should('not.have.class', 'dts-range-start');
+
+          cy.getSelectItem(0).should('not.have.class', 'dts-range-start');
+        });
+      });
+
+      it('should disable range selection', () => {
+        getDesktopExample().within(() => {
+          disableRangeSelection();
+
+          cy.getSelectItem(2)
+            .dispatch('mousedown', { button: 0 })
+            .dispatch('mouseup')
+            .getSelectItem(6)
+            .dispatch('mousedown', { button: 0, shiftKey: true })
+            .dispatch('mouseup')
+            .shouldSelect([3])
+            .get(`.${SELECTED_CLASS}`)
+            .should('have.length', 1);
+        });
+      });
+    });
+
     it('should select items in a row if shift is pressed', () => {
       getDesktopExample().within(() => {
         cy.getSelectItem(0)

cypress/support/utils.ts

@@ -52,6 +52,10 @@ export const disableSelectOnDrag = () => {
   return cy.get('[data-cy="selectOnDrag"]').click();
 };
 
+export const disableRangeSelection = () => {
+  return cy.get('[data-cy="disableRangeSelection"]').click();
+};
+
 export const enableSelectMode = () => {
   return cy.get('[data-cy="selectMode"]').click();
 };

projects/ngx-drag-to-select/src/lib/select-container.component.ts

@@ -100,6 +100,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   @Input() selectOnDrag = true;
   @Input() disabled = false;
   @Input() disableDrag = false;
+  @Input() disableRangeSelection = false;
   @Input() selectMode = false;
   @Input() selectWithShortcut = false;
 
@@ -431,14 +432,15 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
 
     const isMoveRangeStart = this.shortcuts.moveRangeStart(event);
 
-    if (!this.shortcuts.extendedSelectionShortcut(event) || isMoveRangeStart) {
-      this._resetRange();
+    const shouldResetRangeSelection =
+      !this.shortcuts.extendedSelectionShortcut(event) || isMoveRangeStart || this.disableRangeSelection;
 
-      if (this._lastStartIndex >= 0) {
-        const lastRangeStart = this._selectableItems[this._lastStartIndex];
-        lastRangeStart.toggleRangeStart();
-      }
+    if (shouldResetRangeSelection) {
+      this._resetRangeStart();
+    }
 
+    // move range start
+    if (shouldResetRangeSelection && !this.disableRangeSelection) {
       if (currentIndex > -1) {
         this._newRangeStart = true;
         this._lastStartIndex = currentIndex;
@@ -464,6 +466,10 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
       const itemRect = item.getBoundingClientRect();
       const withinBoundingBox = inBoundingBox(mousePoint, itemRect);
 
+      if (this.shortcuts.extendedSelectionShortcut(event) && this.disableRangeSelection) {
+        return;
+      }
+
       const withinRange =
         this.shortcuts.extendedSelectionShortcut(event) &&
         startIndex > -1 &&
@@ -655,7 +661,20 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
     return [index, targetItem];
   }
 
-  private _resetRange() {
+  private _resetRangeStart() {
     this._lastRange = [-1, -1];
+    const lastRangeStart = this._getLastRangeSelection();
+
+    if (lastRangeStart && lastRangeStart.rangeStart) {
+      lastRangeStart.toggleRangeStart();
+    }
+  }
+
+  private _getLastRangeSelection(): SelectItemDirective | null {
+    if (this._lastStartIndex >= 0) {
+      return this._selectableItems[this._lastStartIndex];
+    }
+
+    return null;
   }
 }

src/app/app.component.html

@@ -21,13 +21,18 @@ <h3>
 
     <mat-checkbox data-cy="selectOnDrag" [(ngModel)]="selectOnDrag">Select on Drag</mat-checkbox>
     <mat-checkbox data-cy="disable" [(ngModel)]="disable">Disable</mat-checkbox>
+    <mat-checkbox data-cy="disableRangeSelection" [(ngModel)]="disableRangeSelection"
+      >Disable Range Selection</mat-checkbox
+    >
     <mat-checkbox data-cy="selectMode" [(ngModel)]="selectMode">Select Mode</mat-checkbox>
     <mat-checkbox data-cy="selectWithShortcut" [(ngModel)]="selectWithShortcut">Select with Shortcut</mat-checkbox>
 
-    <button data-cy="selectAll" mat-raised-button (click)="selectContainer.selectAll()">Select All</button>
-    <button data-cy="clearSelection" mat-raised-button (click)="selectContainer.clearSelection()">
-      Clear Selection
-    </button>
+    <div class="action-buttons">
+      <button data-cy="selectAll" mat-raised-button (click)="selectContainer.selectAll()">Select All</button>
+      <button data-cy="clearSelection" mat-raised-button (click)="selectContainer.clearSelection()">
+        Clear Selection
+      </button>
+    </div>
 
     <div class="drag-area">
       <dts-select-container
@@ -36,6 +41,7 @@ <h3>
         [selectMode]="selectMode"
         [(selectedItems)]="selectedDocuments"
         [disabled]="disable"
+        [disableRangeSelection]="disableRangeSelection"
         [selectOnDrag]="selectOnDrag"
         [selectWithShortcut]="selectWithShortcut"
       >

src/app/app.component.scss

@@ -78,8 +78,11 @@ mat-checkbox {
   }
 }
 
+.action-buttons {
+  margin: 1rem 0;
+}
+
 button {
-  &:first-of-type,
   & + & {
     margin-left: 1rem;
   }

src/app/app.component.ts

@@ -16,6 +16,7 @@ export class AppComponent implements OnInit {
   selectOnDrag = true;
   selectMode = false;
   disable = false;
+  disableRangeSelection = false;
   isDesktop = false;
   selectWithShortcut = false;