feat(lib): add option to control starting drag select over items (#117)

d3lm · Feb 8, 2021 · 868a117 · 868a117
1 parent a718c96
commit 868a117
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -250,6 +250,7 @@ shortcuts: {
 | --------------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------------------- |
 | selectedItems         | Array<any> | /       | Collection of items that are currently selected                                                               |
 | selectOnDrag          | Boolean    | `true`  | Whether items should be selected while dragging                                                               |
+| dragOverItems         | Boolean    | `true`  | Whether drag selection is allowed to start from inside an item                                                |
 | 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.                                       |

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
@@ -100,6 +100,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   @Input() selectOnDrag = true;
   @Input() disabled = false;
   @Input() disableDrag = false;
+  @Input() dragOverItems = true;
   @Input() disableRangeSelection = false;
   @Input() selectMode = false;
   @Input() selectWithShortcut = false;
@@ -168,6 +169,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
         filter((event) => !this.shortcuts.disableSelection(event)),
         filter(() => !this.selectMode),
         filter(() => !this.disableDrag),
+        filter((event) => this.dragOverItems || event.target === this.host),
         switchMap(() => mousemove$.pipe(takeUntil(mouseup$))),
         share()
       );

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -20,6 +20,7 @@ <h3>
     </h3>
 
     <mat-checkbox data-cy="selectOnDrag" [(ngModel)]="selectOnDrag">Select on Drag</mat-checkbox>
+    <mat-checkbox data-cy="dragOverItems" [(ngModel)]="dragOverItems">Drag Over Items</mat-checkbox>
     <mat-checkbox data-cy="disable" [(ngModel)]="disable">Disable</mat-checkbox>
     <mat-checkbox data-cy="disableRangeSelection" [(ngModel)]="disableRangeSelection"
       >Disable Range Selection</mat-checkbox
@@ -44,6 +45,7 @@ <h3>
         [disableRangeSelection]="disableRangeSelection"
         [selectOnDrag]="selectOnDrag"
         [selectWithShortcut]="selectWithShortcut"
+        [dragOverItems]="dragOverItems"
       >
         <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;
+  dragOverItems = true;
 
   constructor(
     private titleService: Title,