[Question] Select nested elements

[jmacaluso711]

Hi @d3lm ,

I'm working on a project where I want an element and it's child to be separately selectable. Given the structure below, is it possible to select the nestedElement, but not the element.

<div [dtsSelectItem]="element">
    ...
  <div [dtsSelectItem]="nestedElement">
    ...
  </div>
</div>

[d3lm]

Hey @jmacaluso711, thanks for reaching out. This is an interesting use case, but unfortunately this is not yet possible. That's because right now, the container selects all dtsSelectItem instances. But I could maybe image a configuration option that allows you to specify the name that is used to query for the select items, for example:

<dts-select-container ... itemSelector="nestedElement">
  <div [dtsSelectItem]="element">
    ...
    <div #nestedElement [dtsSelectItem]="nestedElement">
      ...
    </div>
  </div>
</dts-select-container>

Notice the new input itemSelector and also the template reference variable on the select item #nestedElement. This would be required for the container to be selective about the items you want to use. But this would also mean that the library would not know about the other select items that you have declared as element. Is this behavior what you were asking for?

But I suppose you still want the "outer" elements are still selectable. This is a bit tricky because you want them to be selected separately. I guess for this we would need another nested select container in combination with the itemSelector proposed above.

[jmacaluso711]

Hi @d3lm , Thanks for getting back. Yeah, seems like this would be pretty tricky because I'd still want the element to be selectable as well. So as you mentioned, maybe a structure like this would be needed:

<dts-select-container ... itemSelector="element">
  <div [dtsSelectItem]="element">
    ...
    <dts-select-container ... itemSelector="nestedElement">
       <div #nestedElement [dtsSelectItem]="nestedElement">
          ...
       </div>
    </dts-select-container>
  </div>
</dts-select-container>

Wondering if the configuration option could stop propagation or if there would be some other tricky logic that needed to be in place to detect which item is being selected at the time.

[d3lm]

Hm yes, I have to think about this but as I said, currently this is not supported. Contributions are always welcome though and I am more than happy to get you up and running if this is something you need in the near-future.

[sumbricht]

Hi @d3lm , I have just started using ngx-drag-to-select for a new project of mine and absolutely love it :-). The only issue I have stumbled over is the same one @jmacaluso711 was facing; I do have nested elements where the parent and its children need to be selectable. Currently, selecting a child always co-selects the parent, which shouldn't happen in my use case. Do you have any news or have you had any new solutions ideas since November? :-) Would be happy to contribute, but haven't been able to dive into the workings of your current code yet...

[d3lm]

Not yet unfortunately. A PR is more than welcome. If you have concrete ideas how to solve this, we can start discussing it here first before you start working on an actual PR.

[sumbricht]

Ok, now I have found some time to play around with the code :-) and I think I have a nice solution approach that doesn't require any significant changes. Essentially, I have adapted the logic in _onMouseDown to not only check which items' bounding boxes overlap the mouse position, but alternatively use document.elementFromPoint to find the inner-most nested item. This of course needs to be configurable with the previous behavior (treat all matching items as clicked) as the default. For this I have added a boolean input selectAllUnderCursor=true to SelectContainerComponent.

Please have a look at the PR #100 and let me know what you think :-)