Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selecting does not work after calling .stop() and .start() #209

Open
dbougan opened this issue Oct 14, 2023 · 2 comments
Open

Selecting does not work after calling .stop() and .start() #209

dbougan opened this issue Oct 14, 2023 · 2 comments

Comments

@dbougan
Copy link
Contributor

dbougan commented Oct 14, 2023

Describe the bug
Hi @ThibaultJanBeyer, thank you for maintaining this great library! I recently created a prototype with v3 following the "Custom Drag and Drop" guided example. My use case is to implement a web file system with select/drag/drop functionality, so I need to handle drags outside of DragSelect. The issue is that once I resume DragSelect by calling .start(), I can no longer click/drag to select new items. I created a codepen with the following minor changes:

  1. I subscribe to the 'DS:start:pre' event and call .stop() when dragging begins
  2. I added an event listener for the 'mouseup' event, and call .start() when dragging has ended

To Reproduce
Steps to reproduce the behavior:

  1. Visit the codepen below
  2. Click on the white space and drag to select at least one item
  3. Click on the selected item(s) and attempt to drag (the console will indicate that DragSelect has stopped)
  4. Release the items (the console will indicate that DragSelect has started again)
  5. Try to select new items again, however DragSelect no longer responds

Expected behavior
After dragging and releasing an item, I should be able to drag/select new items

Code Example
https://codepen.io/dbougan/pen/abProMo?editors=1111

Desktop (please complete the following information):

Additional context
I spent a little time studying the code and believe the issue is in the Interaction module and the isInteracting flag. It seems that when the Interaction.stop() method is triggered by DragSelect.stop(), it should explicitly set isInteracting = false. Because when DragSelect.start() is subsequently called and a new selection drag is attempted, the Interaction._start() method can never get past this code: if (!this._canInteract(event)) return; since isInteracting is still true from before DragSelect.stop() was called.

I tested the theory by adding line 173 in the screenshot below, which seems to have resolved the issue for me. However this is probably a naive approach, so I am hoping you can provide feedback. I'd be happy to submit a PR once we get to the root cause.

Thank you for your time!

image

@dbougan
Copy link
Contributor Author

dbougan commented Nov 7, 2023

Hi @ThibaultJanBeyer, have you had a chance to read this one yet? I was hoping for your input before putting forward a PR since I don't understand the internals of DragSelect as well as you.

For what it's worth, I found a workaround. By calling the internal Interaction._reset(event) method immediately before stopping DragSelect, I can effectively set the isInteracting flag to false. However it doesn't feel like a good long-term solution. Thank you for your time!

image

@ThibaultJanBeyer
Copy link
Owner

ThibaultJanBeyer commented Nov 7, 2023

Sorry I did not have the time yet, I'll try to make some time this or next week. In the long run I would love to have a very proper way to integrate 3rd party tools but that's a lot of work maybe we can find a quick fix like what you proposed. Thanks a lot so far for raising this, the workaround and your patience!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants