feat(lib): add additive behavior

This commit adds additive behavior, mimicking the behavior when holding the Shift key. Updated app to be able to select addictive behavior. Updated Cypress tests. Updated documentation.
d3lm · Oct 28, 2019 · 8c8398b · 8c8398b
1 parent a0d0d54
commit 8c8398b
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -238,6 +238,7 @@ shortcuts: {
 
 **Inputs**
 
+<<<<<<< HEAD
 | Input                 | Type       | Default | Description                                                                                                   |
 | --------------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------------------- |
 | selectedItems         | Array<any> | /       | Collection of items that are currently selected                                                               |
@@ -247,7 +248,8 @@ shortcuts: {
 | 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            |
+| selectWithShortcut    | Boolean    | `false` | If set to `true`, items can only be selected when single clicking and applying a keyboard shortcut            |          |
+| additive           | Boolean    | `false` | If set to `true`, will add items to selection the same way as holding the `shift` key.                        |
 
 Here's an example of all inputs in action:
 
@@ -259,7 +261,8 @@ Here's an example of all inputs in action:
   [disableDrag]="true"
   [selectMode]="true"
   [custom]="true"
-  [selectWithShortcut]="false">
+  [selectWithShortcut]="false"
+  [additive]="true">
   ...
 </dts-select-container>
 ```

diff --git a/cypress/integration/dragging.spec.ts b/cypress/integration/dragging.spec.ts
@@ -4,6 +4,7 @@ import {
   disableSelection,
   disableSelectOnDrag,
   enableSelectMode,
+  enableAdditive,
   getDesktopExample,
   shouldBeInvisible,
   shouldBeVisible,
@@ -372,6 +373,36 @@ describe('Dragging', () => {
     });
   });
 
+  describe('Additive', () => {
+    beforeEach(() => {
+      enableAdditive();
+    });
+
+    it('should extend selection after mouseup', () => {
+      getDesktopExample().within(() => {
+        cy.getSelectItem(0)
+          .dispatch('mousedown', { button: 0 })
+          .getSelectItem(5)
+          .dispatch('mousemove')
+          .dispatch('mouseup')
+          .shouldSelect([1, 2, 5, 6])
+          .getSelectItem(2)
+          .dispatch('mousedown', { button: 0 })
+          .getSelectItem(7)
+          .as('end')
+          .dispatch('mousemove')
+          .shouldSelect([1, 2, 5, 6])
+          .get(`.${SELECTED_CLASS}`)
+          .should('have.length', 8)
+          .get('@end')
+          .dispatch('mouseup')
+          .shouldSelect([1, 2, 3, 4, 5, 6, 7, 8])
+          .get(`.${SELECTED_CLASS}`)
+          .should('have.length', 8);
+      });
+    });
+  });
+
   describe('Shortcuts', () => {
     it('should toggle single items', () => {
       getDesktopExample().within(() => {

diff --git a/cypress/support/utils.ts b/cypress/support/utils.ts
@@ -68,6 +68,10 @@ export const enableSelectWithShortcut = () => {
   return cy.get('[data-cy="selectWithShortcut"]').click();
 };
 
+export const enableAdditive = () => {
+  return cy.get('[data-cy="additive"]').click();
+};
+
 export const selectAll = () => {
   return getSelectAllButton().click();
 };

diff --git a/projects/ngx-drag-to-select/src/lib/select-container.component.ts b/projects/ngx-drag-to-select/src/lib/select-container.component.ts
@@ -103,6 +103,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   @Input() disableRangeSelection = false;
   @Input() selectMode = false;
   @Input() selectWithShortcut = false;
+  @Input() additive = false;
 
   @Input()
   @HostBinding('class.dts-custom')
@@ -466,7 +467,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
       const itemRect = item.getBoundingClientRect();
       const withinBoundingBox = inBoundingBox(mousePoint, itemRect);
 
-      if (this.shortcuts.extendedSelectionShortcut(event) && this.disableRangeSelection) {
+      if (this.shortcuts.extendedSelectionShortcut(event) && this.disableRangeSelection || this.additive) {
         return;
       }
 
@@ -540,7 +541,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   }
 
   private _isExtendedSelection(event: Event) {
-    return this.shortcuts.extendedSelectionShortcut(event) && this.selectOnDrag;
+    return (this.shortcuts.extendedSelectionShortcut(event) || this.additive) && this.selectOnDrag;
   }
 
   private _normalSelectionMode(selectBox: BoundingBox, item: SelectItemDirective, event: Event) {
@@ -567,15 +568,18 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
       (inSelection && item.selected && this.shortcuts.removeFromSelection(event) && !this._tmpItems.has(item));
 
     const shouldRemove =
-      (!inSelection && item.selected && this.shortcuts.addToSelection(event) && this._tmpItems.has(item)) ||
+      (!inSelection &&
+        item.selected &&
+        (this.shortcuts.addToSelection(event) || this.additive) &&
+        this._tmpItems.has(item)) ||
       (!inSelection && !item.selected && this.shortcuts.removeFromSelection(event) && this._tmpItems.has(item));
 
     if (shoudlAdd) {
       item.selected ? item._deselect() : item._select();
 
       const action = this.shortcuts.removeFromSelection(event)
         ? Action.Delete
-        : this.shortcuts.addToSelection(event)
+        : this.shortcuts.addToSelection(event) || this.additive
         ? Action.Add
         : Action.None;
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -26,6 +26,7 @@ <h3>
     >
     <mat-checkbox data-cy="selectMode" [(ngModel)]="selectMode">Select Mode</mat-checkbox>
     <mat-checkbox data-cy="selectWithShortcut" [(ngModel)]="selectWithShortcut">Select with Shortcut</mat-checkbox>
+    <mat-checkbox data-cy="additive" [(ngModel)]="additive">Additive</mat-checkbox>
 
     <div class="action-buttons">
       <button data-cy="selectAll" mat-raised-button (click)="selectContainer.selectAll()">Select All</button>
@@ -44,6 +45,7 @@ <h3>
         [disableRangeSelection]="disableRangeSelection"
         [selectOnDrag]="selectOnDrag"
         [selectWithShortcut]="selectWithShortcut"
+        [additive]="additive"
       >
         <mat-grid-list cols="4" rowHeight="200px" gutterSize="20px">
           <mat-grid-tile [dtsSelectItem]="document" *ngFor="let document of documents">

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -19,6 +19,7 @@ export class AppComponent implements OnInit {
   disableRangeSelection = false;
   isDesktop = false;
   selectWithShortcut = false;
+  additive = false;
 
   constructor(
     private titleService: Title,