From 24e50c6564967fefda29b25707d29cafa7d6723b Mon Sep 17 00:00:00 2001 From: "vasco.caetano" Date: Tue, 3 Sep 2019 14:00:10 +0100 Subject: [PATCH] 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. --- README.md | 4 ++- cypress/integration/dragging.spec.ts | 31 +++++++++++++++++++ cypress/support/utils.ts | 4 +++ .../src/lib/select-container.component.ts | 12 ++++--- src/app/app.component.html | 2 ++ src/app/app.component.ts | 1 + 6 files changed, 49 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 30b8dc1..99331eb 100644 --- a/README.md +++ b/README.md @@ -240,6 +240,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 the same way as holding the `shift` key. | Here's an example of all inputs in action: @@ -251,7 +252,8 @@ Here's an example of all inputs in action: [disableDrag]="true" [selectMode]="true" [custom]="true" - [selectWithShortcut]="false"> + [selectWithShortcut]="false" + [additive]="true"> ... ``` diff --git a/cypress/integration/dragging.spec.ts b/cypress/integration/dragging.spec.ts index 8b84380..25a1643 100644 --- 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 index 61f5f9f..03afde7 100644 --- a/cypress/support/utils.ts +++ b/cypress/support/utils.ts @@ -64,6 +64,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 index 3d16200..b192d4e 100644 --- a/projects/ngx-drag-to-select/src/lib/select-container.component.ts +++ b/projects/ngx-drag-to-select/src/lib/select-container.component.ts @@ -99,6 +99,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy { @Input() disableDrag = false; @Input() selectMode = false; @Input() selectWithShortcut = false; + @Input() additive = false; @Input() @HostBinding('class.dts-custom') @@ -416,7 +417,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy { const itemRect = item.getBoundingClientRect(); const withinBoundingBox = inBoundingBox(mousePoint, itemRect); - if (this.shortcuts.extendedSelectionShortcut(event)) { + if (this.shortcuts.extendedSelectionShortcut(event) || this.additive) { return; } @@ -461,7 +462,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy { } private _isExtendedSelection(event: Event) { - return this.shortcuts.extendedSelectionShortcut(event) && this.selectOnDrag; + return (this.shortcuts.extendedSelectionShortcut(event) || this.additive) && this.selectOnDrag; } private _normalSelectionMode(selectBox, item: SelectItemDirective, event: Event) { @@ -488,7 +489,10 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy { (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) { @@ -496,7 +500,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy { 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 index a1a90a1..abf5e7d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -23,6 +23,7 @@

Disable Select Mode Select with Shortcut + Additive