feat(lib): use inject to pass container reference to selectableItem

README.md

@@ -553,6 +553,28 @@ Here we listen for `scroll` on the `div` and call `container.update()` in case t
 
 In order not to kill the performance, because the `scroll` event is called many many times, you may want to **throttle** it to only call `update` every 16ms or so.
 
+### Does the `dtsSelectItem` directive need to be a direct child of the `dts-select-container`?
+
+As of version `4.1.0`, an injection token is used to pass the `SelectContainerComponent` parent to the directive. You can use this in any component nested within the `dts-select-container`.
+
+```ts
+import { DTS_SELECT_CONTAINER } from 'ngx-drag-to-select';
+
+@Component({...})
+export class TaskListComponent {
+  constructor(
+    @Inject(DTS_SELECT_CONTAINER) @Optional()
+    public container: SelectContainerComponent
+  ) {}
+}
+```
+
+You can find an example of this in the [drag and drop example](https://github.com/d3lm/ngx-drag-to-select/blob/master/src/app/dragndrop).
+
+### Why is my `dtsSelectItem` directive not selecting when I click on it?
+
+If you are using the `dtsSelectItem` within a nested component then your mousedown/up events might being captured by another directive or component in your code. For example if you are using this libary with Angular CDK's DragDropModule, the mouse events are captured by the `cdkDrag` directive, [see here](https://github.com/angular/components/pull/19674).
+
 ## Want to contribute?
 
 If you want to file a bug, contribute some code, or improve our documentation, read up on our [contributing guidelines](CONTRIBUTING.md) and [code of conduct](CODE_OF_CONDUCT.md), and check out [open issues](/issues).

cypress/integration/drag-and-drop.spec.ts

@@ -0,0 +1,68 @@
+import { DEFAULT_CONFIG } from '../../projects/ngx-drag-to-select/src/lib/config';
+
+import { getDoingList, getDragAndDropExample, getTodoList } from '../support/utils';
+
+const SELECTED_CLASS = DEFAULT_CONFIG.selectedClass;
+
+describe('Drag And Drop', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  describe('Select on Drag', () => {
+    it('should start new selection', () => {
+      getDragAndDropExample().within(() => {
+        getTodoList()
+          .dispatch('mousedown', 'topLeft', { button: 0 })
+          .getSelectItem(2)
+          .dispatch('mousemove')
+          .dispatch('mouseup');
+
+        cy.get('.selected').should('have.length', 3);
+      });
+    });
+
+    it('should drag to new list', () => {
+      getDragAndDropExample().within(() => {
+        getTodoList()
+          // select first 3 items in list
+          .dispatch('mousedown', 'topLeft', { button: 0 })
+          .getSelectItem(2)
+          .dispatch('mousemove')
+          .dispatch('mouseup')
+          // click on second item
+          .getSelectItem(1)
+          .dispatch('mousedown', { button: 0 })
+          // drag to SelectItem in other list
+          .getSelectItem(5)
+          .wait(16)
+          .dispatch('mousemove', { force: true })
+          .dispatch('mousemove', { force: true })
+          .dispatch('mouseup');
+
+        getDoingList().within(() => {
+          cy.get('app-task').should('have.length', 5);
+        });
+      });
+    });
+
+    it('should reorder within list', () => {
+      getDragAndDropExample().within(() => {
+        getTodoList()
+          .dispatch('mousedown', 'topRight', { button: 0 })
+          .getSelectItem(1)
+          .dispatch('mousemove')
+          .dispatch('mouseup')
+          .getSelectItem(0)
+          .dispatch('mousedown', 'bottom', { button: 0 })
+          .getSelectItem(4)
+          .dispatch('mousemove', { force: true })
+          .dispatch('mousemove', { force: true })
+          .dispatch('mouseup');
+
+        cy.get('app-task').eq(0).should('contain', 'Open Ticket #1');
+        cy.get('app-task').eq(1).should('contain', 'Open Ticket #2');
+      });
+    });
+  });
+});

cypress/integration/dragging.spec.ts

@@ -1,7 +1,9 @@
 import { DEFAULT_CONFIG } from '../../projects/ngx-drag-to-select/src/lib/config';
 
 import {
+  disableDragOverItems,
   disableSelection,
+  disableSelectOnClick,
   disableSelectOnDrag,
   enableSelectMode,
   getDesktopExample,
@@ -91,6 +93,82 @@ describe('Dragging', () => {
           .dispatch('mouseup');
       });
     });
+
+    describe('selection with dragOverItems set to false', () => {
+      it('should not start selection over items', () => {
+        disableDragOverItems().then(() => {
+          getDesktopExample().within(() => {
+            cy.getSelectItem(0)
+              .dispatch('mousedown', { button: 0 })
+              .getSelectItem(6, 'end')
+              .dispatch('mousemove')
+              .shouldSelect([1])
+              .getSelectBox()
+              .then(shouldBeInvisible)
+              .get('@end')
+              .dispatch('mouseup');
+          });
+        });
+      });
+
+      it('should start selection in element inbetween SelectContainer and SelectItem', () => {
+        disableDragOverItems().then(() => {
+          getDesktopExample().within(() => {
+            cy.get('mat-grid-list')
+              .as('end')
+              .scrollIntoView()
+              .wait(16)
+              .trigger('mousedown', 210, 50, { button: 0 })
+              .wait(16)
+              .getSelectItem(6)
+              .dispatch('mousemove')
+              .shouldSelect([2, 3, 6, 7])
+              .getSelectBox()
+              .then(shouldBeVisible)
+              .get('@end')
+              .dispatch('mouseup');
+          });
+        });
+      });
+    });
+
+    describe('selection with selectOnClick set to false', () => {
+      it('should not start selection over items', () => {
+        disableSelectOnClick().then(() => {
+          getDesktopExample().within(() => {
+            cy.getSelectItem(0)
+              .dispatch('mousedown', { button: 0 })
+              .getSelectItem(6, 'end')
+              .dispatch('mousemove')
+              .shouldSelect([])
+              .getSelectBox()
+              .then(shouldBeInvisible)
+              .get('@end')
+              .dispatch('mouseup');
+          });
+        });
+      });
+
+      it('should start selection in element inbetween SelectContainer and SelectItem', () => {
+        disableSelectOnClick().then(() => {
+          getDesktopExample().within(() => {
+            cy.get('mat-grid-list')
+              .as('end')
+              .scrollIntoView()
+              .wait(16)
+              .trigger('mousedown', 210, 50, { button: 0 })
+              .wait(16)
+              .getSelectItem(6)
+              .dispatch('mousemove')
+              .shouldSelect([2, 3, 6, 7])
+              .getSelectBox()
+              .then(shouldBeVisible)
+              .get('@end')
+              .dispatch('mouseup');
+          });
+        });
+      });
+    });
   });
 
   describe('Keyboard Events', () => {

cypress/support/utils.ts

@@ -28,6 +28,10 @@ export const getMobileExample = () => {
   return cy.get('[data-cy="mobile"]');
 };
 
+export const getDragAndDropExample = () => {
+  return cy.get('[data-cy="drag-and-drop"]');
+};
+
 export const getSelectCount = () => {
   return cy.get('[data-cy="select-count"]');
 };
@@ -48,10 +52,26 @@ export const getClearButton = () => {
   return cy.get('[data-cy="clearSelection"]');
 };
 
+export const getTodoList = () => {
+  return cy.get('[data-cy="todo-list"]');
+};
+
+export const getDoingList = () => {
+  return cy.get('[data-cy="doing-list"]');
+};
+
+export const getDoneList = () => {
+  return cy.get('[data-cy="done-list"]');
+};
+
 export const disableSelectOnDrag = () => {
   return cy.get('[data-cy="selectOnDrag"]').click();
 };
 
+export const disableDragOverItems = () => {
+  return cy.get('[data-cy="dragOverItems"]').click();
+};
+
 export const disableSelectOnClick = () => {
   return cy.get('[data-cy="selectOnClick"]').click();
 };

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

@@ -62,3 +62,11 @@ export enum Action {
   Delete,
   None,
 }
+
+export interface SelectContainer<T = any> {
+  selectedItems: T[];
+  register(item: T): void;
+  unregister(item: T): void;
+}
+
+export type ComponentType<T> = new (...args: any[]) => T;