search

davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Double click issue #99

Closed hpretel closed 5 years ago

hpretel commented 5 years ago

After two o more clicks in the same point of the viewport, i can't drag the viewport freely and the pointer looks locked. The issue appears too in https://davidfig.github.io/pixi-viewport/

davidfig commented 5 years ago

Hmm . . . I've seen it happen sometimes when I click like crazy. Is it common? It may be related to dragging (the cursor turns into a not permitted sign). How are you replicating it?

hpretel commented 5 years ago

I just double click, move the mouse and I can't do the drag in the viewport (the cursor turns into a not permitted sign). It happens always in that condition.

davidfig commented 5 years ago

What browser/OS are you using?

hpretel commented 5 years ago

OS: Windows 8.1 Browser: Google Chrome

davidfig commented 5 years ago

And this happens in the example code as well? I'm trying to replicate but it works fine on my Win10/Chrome setup. Are you using a mouse or touchscreen?

hpretel commented 5 years ago

I use a laptop touchpad

davidfig commented 5 years ago

I think I found it:

  1. double click on the viewport and then release mouse button
  2. try to drag the viewport (nothing happens after an initial jerk)
  3. single click on the viewport and it returns to normal

Is that your experience?

hpretel commented 5 years ago

Yes. It's true. After a single click it returns to normal.

davidfig commented 5 years ago

Okay. I think I figured it out. When you double click on the screen, the browser is selecting elements (e.g., text nodes) that are on the browser page. When you then click and drag, it ends up dragging the selected element instead of the viewport. You can see this when after you click for the third time, you drag the cursor over to the debug pane and drop it in the console. It'll likely be a piece of text.

I played around with a few workarounds to add to pixi-viewport but couldn't find anything that consistently worked.

An easy fix is to remove or set user-select: none to any draggable elements on the HTML page. Then when you double click there will be nothing selectable.

There's probably a better solution (I played with preventDefault), but I couldn't get it to work properly. Let me know if you come up with a better solution.

hpretel commented 5 years ago

Okay. I understand. Thanks :)