From 8c8398b99064ebffc5d7ae6978dd3926ba74e393 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 | 7 +++-- 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, 51 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 29cfe33..8b05664 100644 --- a/README.md +++ b/README.md @@ -238,6 +238,7 @@ shortcuts: { **Inputs** +<<<<<<< HEAD | Input | Type | Default | Description | | --------------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------------------- | | selectedItems | Array | / | Collection of items that are currently selected | @@ -247,7 +248,8 @@ shortcuts: { | disableDrag | Boolean | `false` | Disable selection by dragging with the mouse. May be useful for mobile. | | 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 | +| 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: @@ -259,7 +261,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 70f1b45..c4bc6cd 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 1b7ee73..a0e6c5b 100644 --- a/cypress/support/utils.ts +++ b/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(); }; 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 7f8ee81..64d7f50 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 @@ -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') @@ -466,7 +467,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After const itemRect = item.getBoundingClientRect(); const withinBoundingBox = inBoundingBox(mousePoint, itemRect); - if (this.shortcuts.extendedSelectionShortcut(event) && this.disableRangeSelection) { + if (this.shortcuts.extendedSelectionShortcut(event) && this.disableRangeSelection || this.additive) { return; } @@ -540,7 +541,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After } private _isExtendedSelection(event: Event) { - return this.shortcuts.extendedSelectionShortcut(event) && this.selectOnDrag; + return (this.shortcuts.extendedSelectionShortcut(event) || this.additive) && this.selectOnDrag; } private _normalSelectionMode(selectBox: BoundingBox, item: SelectItemDirective, event: Event) { @@ -567,7 +568,10 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After (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) { @@ -575,7 +579,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After 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 70c95fe..9f46247 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -26,6 +26,7 @@

> Select Mode Select with Shortcut + Additive
@@ -44,6 +45,7 @@

[disableRangeSelection]="disableRangeSelection" [selectOnDrag]="selectOnDrag" [selectWithShortcut]="selectWithShortcut" + [additive]="additive" > diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1a4ee2f..9b85740 100644 --- 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; + additive = false; constructor( private titleService: Title,