Comments (14)
+1
Click, shift + click is the one thing I'm missing in this module.
from ngx-drag-to-select.
I created my own implementation for this.
Add a click listener on the list item:
<li *ngFor="let item of items" [dtsSelectItem]="item" (click)="handleClick($event, item)">
...
</li>
Add clickhandler to component class:
@ViewChild(SelectContainerComponent, { static: true }) selectContainer: SelectContainerComponent;
private shiftClickStartIndex: number;
public handleClick(event, item): void {
// Register index of latest item clicked before pressing shift
if (!event.shiftKey) {
this.shiftStartIndex = item.index;
}
// Select all items with who have an index between start and clicked index
if (event.shiftKey) {
const shiftHighIndex = this.shiftClickStartIndex > item.index ? this.shiftClickStartIndex : item.index;
const shiftLowIndex = shiftHighIndex === this.shiftClickStartIndex ? item.index : this.shiftClickStartIndex;
this.selectContainer.clearSelection();
this.selectContainer.selectItems(({ index }) => index >= shiftLowIndex && index <= shiftHighIndex);
}
}
I've taken my Ubuntu "Files" app as an example. When you click an item and shift + click later, all items in between are selected. But when you shift + click again, notice that the first item you clicked is memorized. The selection always starts with the item you clicked without shift last.
In my example, the item object has the index as a property. But you could also pass handleClick the index from the ngFor loop.
I've tried performing a deselectItems for all indexes outside the range, but for some reason I need to perform clearSelection. But it works.
This works together with the shift + drag as well.
from ngx-drag-to-select.
Sounds good. Please consider how Windows / Ubuntu implement this:
When you click an item and shift + click later, all items in between are selected. But when you shift + click again, notice that the first item you clicked is memorized. The selection always starts with the item you clicked without shift last.
from ngx-drag-to-select.
This is now implemented in latest master. I ll cut a release soon. I am awaiting one outstanding PR and then I ll publish a new version. You can already check it out on https://d3lm.github.io/ngx-drag-to-select/.
from ngx-drag-to-select.
Yep, great feature. The shift
button is however taken already. We would have to find another key for this. Also, do you want to give it a try and send a PR? I am happy to review your code.
from ngx-drag-to-select.
Shift button globally (excel, other apps) is being utilized to multi select items. So may be we can think about incorporating it for selecting all items in between.
from ngx-drag-to-select.
Yea I know. But this library works a little bit different. I mean how would that work if you keep the extended selection mode (currently shift) where items are not selected right away but only selected when you release the mouse button. I find this actually pretty useful. The problem is that, you don't want all items selected in between when you want to use this extended mode. So how would you differentiate between those two selections?
I think if we want this, then we have to fundamentally re-work the selection modes and how this lib works. The way it is currently implemented, it would clash with the feature you suggested.
But I totally agree, that this is a useful feature. Maybe I should streamline the behavior with how OS's do this, or other tools like Excel.
from ngx-drag-to-select.
Also, on a Mac you cannot select one, press shift, select another item and all items in between are selected, at least if you are not in the list view. I am not sure how Windows does this. I'd say this is not really common to have both behaviors on shift.
@timdeschryver What do you think?
from ngx-drag-to-select.
Yea I know. But this library works a little bit different. I mean how would that work if you keep the extended selection mode (currently shift) where items are not selected right away but only selected when you release the mouse button. I find this actually pretty useful. The problem is that, you don't want all items selected in between when you want to use this extended mode. So how would you differentiate between those two selections?
I find shift
to select all items in-between more useful.
from ngx-drag-to-select.
Well I think that really depends on the use case and might also be a personal preference. I am not sure if this should be the default though. Asking for input from @timdeschryver on this one.
One solution could be to have both but one of the behaviors is hidden behind a flag. So the way the lib handles selection right now would be the default and you could enable the proposed feature with a flag called disableExtendedSelection
or something like that. This is one idea.
Any other ideas?
from ngx-drag-to-select.
Or maybe not a flag but specify the behavior in the config that is passed to the DragToSelectModule
.
from ngx-drag-to-select.
So there was another request (#87) for this feature and I think we should really go forward with this and add it to the library.
Is anyone willing to work on this and send a PR? That'd be awesome, because right now I am quite busy, but I can try to find some time for it. This shouldn't be too difficult and I would go for a solution similar to how this works on Windows. Basically overload the shift
key so that you can select one item and if the user doesn't drag and clicks on another item, we select all items in between those.
Sounds good?
from ngx-drag-to-select.
Yep, makes sense. Thanks!
from ngx-drag-to-select.
I have just pushed a PR that introduces the range selection via shift
. @user23022 @shyamal890 Would you mind checking out the PR to verify if the behavior is what you are expecting? You can clone the repo, check out the PR locally, then install the dependency and serve the app. Would be great to get feedback on this before I merge this.
from ngx-drag-to-select.
Related Issues (20)
- Selection is not working when combined with virtual scrolling HOT 3
- Property dragOverItems is not released? HOT 1
- [Question] Trigger drag selection based on pressed key HOT 2
- [Dependencies] Replace node-sass by dart-sass HOT 1
- Selection lost on update if dtsSelectItem is assigned a value HOT 1
- Select box does not update when scrolling, until mouse is moved HOT 2
- [selectOnClick]="false" option prevents initiating a drag box between items HOT 5
- Angular 13 doesn't work with version 5 HOT 4
- How to select specific tiles by default? HOT 3
- Once user reset selection after selecting the cell then he is not able to select same cell again with selecting any other cell or without refreshing the page HOT 1
- In container-grid, selected cell data is not getting updated if there are 2 different grids but sharing single method to update HOT 1
- Button inside selected element not working HOT 3
- Second drag selection when ctrl key is pressed, keeping the First selection
- SelectItemDirective.value unexpectedly returns this instead of dtsSelectItem when dtsSelectItem is falsy HOT 2
- Mobile support like for desktop HOT 1
- When dts container is destroyed, items are unselected HOT 2
- Cannot disable ctrl and shift keys to prevent select? HOT 5
- Dragging inside a dialog is not working correctly HOT 5
- Setting value for [selectedItems] automatically triggers (select) event
- Make parts of vega embed selectable with querry selector?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-drag-to-select.