feat(lib): add additive behavior

README.md

@@ -250,6 +250,7 @@ shortcuts: {
 | 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            |
+| additive              | Boolean    | `false` | If set to `true`, will add items to selection when clicking and dragging.                                     |
 
 Here's an example of all inputs in action:
 
@@ -261,7 +262,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>
 ```

cypress/integration/clicking.spec.ts

@@ -3,6 +3,7 @@ import { DEFAULT_CONFIG } from '../../projects/ngx-drag-to-select/src/lib/config
 import {
   disableRangeSelection,
   disableSelectOnDrag,
+  enableAdditive,
   enableSelectWithShortcut,
   getDesktopExample,
   toggleItem
@@ -233,4 +234,38 @@ describe('Clicking', () => {
       });
     });
   });
+
+  describe('Select with Additive', () => {
+    beforeEach(() => {
+      enableAdditive();
+    });
+
+    it('should add item to selection if clicked', () => {
+      getDesktopExample().within(() => {
+        cy.getSelectItem(0)
+          .dispatch('mousedown', { button: 0 })
+          .dispatch('mouseup')
+          .getSelectItem(1)
+          .dispatch('mousedown', { button: 0 })
+          .dispatch('mouseup')
+          .shouldSelect([1, 2]);
+      });
+    });
+
+    it('should remove the item if clicked', () => {
+      getDesktopExample().within(() => {
+        cy.getSelectItem(0)
+          .dispatch('mousedown', { button: 0 })
+          .dispatch('mouseup')
+          .getSelectItem(1)
+          .dispatch('mousedown', { button: 0 })
+          .dispatch('mouseup')
+          .shouldSelect([1, 2])
+          .getSelectItem(0)
+          .dispatch('mousedown', { button: 0 })
+          .dispatch('mouseup')
+          .shouldSelect([2]);
+      });
+    });
+  });
 });

cypress/integration/dragging.spec.ts

@@ -4,6 +4,7 @@ import {
   disableSelection,
   disableSelectOnDrag,
   enableSelectMode,
+  enableAdditive,
   getDesktopExample,
   shouldBeInvisible,
   shouldBeVisible,
@@ -372,6 +373,31 @@ 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)
+          .dispatch('mousemove')
+          .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(() => {

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();
 };

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')
@@ -482,25 +483,27 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
         (withinBoundingBox &&
           !this.shortcuts.toggleSingleItem(event) &&
           !this.selectMode &&
+          !this.additive &&
           !this.selectWithShortcut) ||
         (this.shortcuts.extendedSelectionShortcut(event) && item.selected && !this._lastRangeSelection.get(item)) ||
         withinRange ||
         (withinBoundingBox && this.shortcuts.toggleSingleItem(event) && !item.selected) ||
         (!withinBoundingBox && this.shortcuts.toggleSingleItem(event) && item.selected) ||
-        (withinBoundingBox && !item.selected && this.selectMode) ||
-        (!withinBoundingBox && item.selected && this.selectMode);
+        (withinBoundingBox && !item.selected && (this.selectMode || this.additive)) ||
+        (!withinBoundingBox && item.selected && (this.selectMode || this.additive));
 
       const shouldRemove =
         (!withinBoundingBox &&
           !this.shortcuts.toggleSingleItem(event) &&
           !this.selectMode &&
+          !this.additive &&
           !this.shortcuts.extendedSelectionShortcut(event) &&
           !this.selectWithShortcut) ||
         (this.shortcuts.extendedSelectionShortcut(event) && currentIndex > -1) ||
         (!withinBoundingBox && this.shortcuts.toggleSingleItem(event) && !item.selected) ||
         (withinBoundingBox && this.shortcuts.toggleSingleItem(event) && item.selected) ||
-        (!withinBoundingBox && !item.selected && this.selectMode) ||
-        (withinBoundingBox && item.selected && this.selectMode);
+        (!withinBoundingBox && !item.selected && (this.selectMode || this.additive)) ||
+        (withinBoundingBox && item.selected && (this.selectMode || this.additive));
 
       if (shouldAdd) {
         this._selectItem(item);
@@ -546,11 +549,14 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   private _normalSelectionMode(selectBox: BoundingBox, item: SelectItemDirective, event: Event) {
     const inSelection = boxIntersects(selectBox, item.getBoundingClientRect());
 
-    const shouldAdd = inSelection && !item.selected && !this.shortcuts.removeFromSelection(event);
+    const shouldAdd =
+      (inSelection && !item.selected && !this.shortcuts.removeFromSelection(event)) ||
+      (this.additive && ((inSelection && !item.selected) || (!inSelection && item.selected)));
 
     const shouldRemove =
       (!inSelection && item.selected && !this.shortcuts.addToSelection(event)) ||
-      (inSelection && item.selected && this.shortcuts.removeFromSelection(event));
+      (inSelection && item.selected && this.shortcuts.removeFromSelection(event)) ||
+      (this.additive && !inSelection && !item.selected);
 
     if (shouldAdd) {
       this._selectItem(item);
@@ -562,20 +568,20 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   private _extendedSelectionMode(selectBox, item: SelectItemDirective, event: Event) {
     const inSelection = boxIntersects(selectBox, item.getBoundingClientRect());
 
-    const shoudlAdd =
+    const shouldAdd =
       (inSelection && !item.selected && !this.shortcuts.removeFromSelection(event) && !this._tmpItems.has(item)) ||
       (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.removeFromSelection(event) && this._tmpItems.has(item));
 
-    if (shoudlAdd) {
+    if (shouldAdd) {
       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;
 

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">

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,