d3lm / ngx-drag-to-select

A lightweight, fast, configurable and reactive drag-to-select component for Angular 10 and beyond
https://www.npmjs.com/package/ngx-drag-to-select
MIT License
293 stars 65 forks source link

[Question] Selecting interactive elements #95

Open andrzejkala opened 4 years ago

andrzejkala commented 4 years ago

Is there an option/param to disable the propagation of the click event while selecting interactive elements while the option [selectWithShortcut] is set to true?

e.g. when in "select mode" (holding down the meta key) the openDocument() event would never be fired (just the element would be selected.

<dts-select-container 
  [(selectedItems)]="selected"
  [selectWithShortcut]="true"
>
   <div class="col-4" *ngFor="let document of group.groupItems">
        <div class="card mt-3" 
          [dtsSelectItem]="document"
          (click)="openDocument(document)"
        >
          {{ document.name }}
        </div>
    </div>
</dts-select-container>

I can detect the meta key on my side and just enable/disable the openDocument() functionality, but maybe there's some simple "out of the box" way that I'm not seeing?

d3lm commented 4 years ago

Hey there! Thanks for opening this issue 🙏

That's a really good point you're bringing up there, and it totally makes sense in your use case to stop the event propagation if selectWithShortcut is enabled. However, I am not sure if this should be the default. What I can imagine though is maybe an option to disable the event propagation on the dtsSelectItem for when one of the meta keys is pressed? Would that make sense? Or do you have some solution in mind that would help you and not break others?

I'd love to bake this somehow into the library because I think this is a pretty common cause, but again, it shouldn't be the default because then we would break people.

And to answer your, no there is currently no other way, and your solution of listening for the meta key is currently the right way to achieve what you wanted to do.

Another thing is that we could add an event listener for the meta key on the container itself? So that people at least don't have to add this event themselves and they can disable for instance the click when the lib fires the metaKeyPressed event. How does that sound?

I am open to any suggestions 👍

johny-gog commented 4 years ago

Hi there. :) Collegue of @andrzejkala here.

IMHO workaround with meta click is kind of OK, but on the longer run it's hacky. It would be cool to add something built-in.

My propositions:

It would be perfect if you could do it, but if you don't have time, you could point us places to edit or guide on what to remember when changing it, we could post a PR.

d3lm commented 4 years ago

Yep, I like your suggestion! I see if I can get that in ASAP 👍

ghost commented 4 years ago

Hi there, yet another colleague of both @andrzejkala and @johny-gog. Have you made any progress on this? I ask because if not, I think we could post a PR for it relatively soon.

d3lm commented 4 years ago

Trying to work on it this weekend.