feat(lib): add input for intersection mode

cypress/integration/dragging.spec.ts

@@ -5,6 +5,7 @@ import {
   disableSelectOnDrag,
   enableSelectMode,
   getDesktopExample,
+  setDragIntersectionMode,
   shouldBeInvisible,
   shouldBeVisible,
   toggleItem,
@@ -460,4 +461,25 @@ describe('Dragging', () => {
       });
     });
   });
+
+  describe('intersection mode "included"', () => {
+    beforeEach(() => {
+      setDragIntersectionMode('included');
+    });
+
+    it('should only select items that have their bounding box fully included in the select box', () => {
+      getDesktopExample().within(() => {
+        cy.getSelectItem(0)
+          .dispatch('mousedown', { button: 0 })
+          .getSelectItem(11)
+          .dispatch('mousemove')
+          .as('end')
+          .getSelectBox()
+          .then(shouldBeVisible)
+          .shouldSelect([6, 7])
+          .get('@end')
+          .dispatch('mouseup');
+      });
+    });
+  });
 });

cypress/support/utils.ts

@@ -76,6 +76,15 @@ export const enableSelectWithShortcut = () => {
   return cy.get('[data-cy="selectWithShortcut"]').click();
 };
 
+export const setDragIntersectionMode = (mode: 'intersection' | 'included') => {
+  return cy
+    .get('[data-cy="intersectionMode"]')
+    .click()
+    .then(() => {
+      cy.get(`.cdk-overlay-container .mat-select-panel-wrap .mat-option-text:contains("${mode}")`).click();
+    });
+};
+
 export const selectAll = () => {
   return getSelectAllButton().click();
 };

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

@@ -65,6 +65,7 @@ import {
   getRelativeMousePosition,
   getMousePosition,
   hasMinimumSize,
+  boxIncluded,
 } from './utils';
 import { KeyboardEventsService } from './keyboard-events.service';
 
@@ -102,6 +103,10 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   @Input() disableRangeSelection = false;
   @Input() selectMode = false;
   @Input() selectWithShortcut = false;
+  /**
+   * Configure if an items' bounding box needs to intersect or to be fully included in the select box.
+   */
+  @Input() intersectionMode: 'intersection' | 'included' = 'intersection';
 
   @Input()
   @HostBinding('class.dts-custom')
@@ -538,7 +543,10 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   }
 
   private _normalSelectionMode(selectBox: BoundingBox, item: SelectItemDirective, event: Event) {
-    const inSelection = boxIntersects(selectBox, item.getBoundingClientRect());
+    const inSelection =
+      this.intersectionMode === 'intersection'
+        ? boxIntersects(selectBox, item.getBoundingClientRect())
+        : boxIncluded(selectBox, item.getBoundingClientRect());
 
     const shouldAdd = inSelection && !item.selected && !this.shortcuts.removeFromSelection(event);
 
@@ -554,7 +562,10 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   }
 
   private _extendedSelectionMode(selectBox, item: SelectItemDirective, event: Event) {
-    const inSelection = boxIntersects(selectBox, item.getBoundingClientRect());
+    const inSelection =
+      this.intersectionMode === 'intersection'
+        ? boxIntersects(selectBox, item.getBoundingClientRect())
+        : boxIncluded(selectBox, item.getBoundingClientRect());
 
     const shoudlAdd =
       (inSelection && !item.selected && !this.shortcuts.removeFromSelection(event) && !this._tmpItems.has(item)) ||

projects/ngx-drag-to-select/src/lib/utils.ts

@@ -55,6 +55,15 @@ export const boxIntersects = (boxA: BoundingBox, boxB: BoundingBox) => {
   );
 };
 
+export const boxIncluded = (boxA: BoundingBox, boxB: BoundingBox) => {
+  return (
+    boxA.left <= boxB.left &&
+    boxA.left + boxA.width >= boxB.left + boxB.width &&
+    boxA.top <= boxB.top &&
+    boxA.top + boxA.height >= boxB.top + boxB.height
+  );
+};
+
 export const calculateBoundingClientRect = (element: HTMLElement): BoundingBox => {
   return element.getBoundingClientRect();
 };

src/app/app.component.html

@@ -30,6 +30,14 @@ <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-form-field>
+      <mat-label>Intersection Mode</mat-label>
+      <mat-select data-cy="intersectionMode" [(ngModel)]="intersectionMode">
+        <mat-option value="intersection">intersection</mat-option>
+        <mat-option value="included">included</mat-option>
+      </mat-select>
+    </mat-form-field>
+
     <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()">
@@ -49,12 +57,14 @@ <h3>
         [selectOnDrag]="selectOnDrag"
         [selectWithShortcut]="selectWithShortcut"
         [dragOverItems]="dragOverItems"
+        [intersectionMode]="intersectionMode"
       >
         <mat-grid-list cols="4" rowHeight="200px" gutterSize="20px">
           <mat-grid-tile
-              [dtsSelectItem]="document"
-              [dtsDisabled]="disableEvenItems && document.disabled"
-              *ngFor="let document of documents">
+            [dtsSelectItem]="document"
+            [dtsDisabled]="disableEvenItems && document.disabled"
+            *ngFor="let document of documents"
+          >
             {{ document.name }}
           </mat-grid-tile>
         </mat-grid-list>

src/app/app.component.ts

@@ -22,6 +22,7 @@ export class AppComponent implements OnInit {
   selectWithShortcut = false;
   dragOverItems = true;
   disableEvenItems = false;
+  intersectionMode: 'intersection' | 'full' = 'intersection';
 
   constructor(
     private titleService: Title,

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
 
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -36,6 +37,7 @@ const MATERIAL_MODULES = [
   MatTabsModule,
   MatIconModule,
   MatButtonModule,
+  MatSelectModule,
 ];
 
 @NgModule({