googlechromelabs / pointer-tracker Goto Github PK

Track mouse/touch/pointer events for a given element.

License: Apache License 2.0

TypeScript 91.21% JavaScript 8.79%

pointer-tracker's Issues

setPointerCapture() disables click events in Chrome

This line disables all click events inside the element, but only in Chrome.

I'm really sorry this is such a short ticket but I don't really have the time to create a reproducable case right now because my case is pretty involved, but I wanted to bring it up anyway. Please let me know if you need any additional information.

Using the right mouse button can cause a never-ending pointer

Just noticed this while playing around with the simple painting demo.
It is reproducible on mac OS with Chrome 92 and Firefox 91, but only partially with Safari 14.1.1 (more on that below)

I don't know if this is because of a bug in the implementation of that demo, a bug in the library, or just an unavoidable result of how context menus and mouse/pointer events work in browsers.

The reproduction pattern is as follows:

Press LMB
Then without moving the mouse cursor, press RMB (this opens a context menu)
Release LMB
Move the mouse cursor elsewhere
Then without moving the mouse cursor, press and release LMB to close the context menu

You are now auto-drawing without pressing any buttons!
As bonus features whenever you click LMB the line changes color, and if you click and drag with LMB you're still drawing along the path you take, but when you release LMB and then move the cursor a straight line will be drawn between the starting and ending point of the path (in the same color as the path).

If you move the mouse cursor during steps 2 or 5 this doesn't cause the bug.
Regarding Safari, the reproduction pattern does work to trigger the drawing without any buttons, but as soon as you press LMB it fixes the pointer state.

This doesn't seem too serious to me, but if I managed to encounter this within a few minutes of playing around I figure some unsuspecting user will encounter it in the wild at some point. 🙂
Admittedly, I was purposefully looking for unexpected behaviour with regards to the RMB/context menu since I know it messes with lots of applications.

Firefox bug with SVG Elements and multiple pointers

Put the following /demo/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Firefox bug</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .status {
        position: absolute;
        top: 0;
        left: 0;
      }

      .touchable {
        background-color: green;
        width: 500px;
        height: 500px;
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <div class="status"></div>
    <svg class="touchable"><rect width="300" height="300" fill="red"/></svg>
    <script type="module">
      import PointerTracker from '../dist/PointerTracker.mjs';
      const status = document.querySelector('.status');
      const touchable = document.querySelector('.touchable');
      const updateStatus = () => status.innerHTML = `Pointers: ${tracker.currentPointers.length}`;
      const tracker = new PointerTracker(touchable, {
        start: () => {
          setTimeout(updateStatus);
          return true;
        },
        end: () => setTimeout(updateStatus),
        move: () => setTimeout(updateStatus),
      });
    </script>
  </body>
</html>

You should see the following:

In Chrome, you can put two fingers on either the red or the green area and the number of fingers will be displayed in the top left.

But in Firefox, it only works in the green area. When you put the first finger on red, everything is fine. As soon as you put a second finger down, the number goes to 0.

I've tracked the bug down to Firefox firing the pointercancel event when you put the second finger down. This only seems to occur in SVG elements like rect.

Is this something that should be handled by this library or if this is a bug that should be reported to Mozilla.

Initial canvas scale not correct in the demo

Saw you fixed #12 so I tried reproducing the issue, and ran into the following bug on Chrome and Safari (but not Firefox):

initial-scale-bug.mp4

As you can see the canvas seems to be scaled wrong, causing the lines to not appear under the mouse cursor and the lines to be stretched out.

This is fixed after a resize, which causes the canvas to be measured again.

Just thought I'd mention it since the demo is very valuable in showing an easy implementation of this great lib!

Dragging element

Can this be used to drag an element such as table? No luck in achieving that with native PointerEvents on touch devices as it loses pointer capture after a small distance.

Simple demo: https://cliff-store.glitch.me

Enable pen/stylus erasing events

Currently pointer-tracker only accepts basic contact events for mouse, touch, and pen (button state 0:

(from https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)

The button and buttons state needed to detect pen erasing is 5 and 32 respectively, but pointers with these states are blocked in the _pointerStart function:

Could this function be updated to support other button states or at least the pen erasing combo?

Update types to accept SVGElement | HTMLElement in the constructor

I have been using this lib with SVGElements and it works great, but I always need to cast the element to any because constructor takes in HTMLElement.

Bonus feature: Also perform getScreenCTM inverse calculation when SVG, to create clientX, clientY in SVG viewport's coordinate system. When using scaled SVGs, I often do the following:

const point = svg.createSVGPoint();
point.x = changed[0].clientX;
point.y = changed[0].clientY;
const coords = point.matrixTransform(svg.getScreenCTM().inverse());

triggerPointerEnd method is useful as public method

I forked this repo to make a very minor adjustment. Due to an iOS bug related to missing pointerUp events in some circumstances i needed to call triggerPointerEnd myself. The bug is also visible in this example: https://pinch-zoom-element.glitch.me/
If you move the picture to the very top on an iOS mobile device everything stops working as expected. It is fixable if you observe the pageY coordinates and call triggerPointerEnd like this (dummycode):

currentPointers.forEach((cp: Pointer) => {
            if (cp.pageY < 60 || cp.pageY > 600) {
                pointerTracker.triggerPointerEnd(cp, event);
                return;
            }
        });

CommonJS dist file exports nothing

The CommonJS dist file referenced by "main" declares var PointerTracker, but never exports it.

googlechromelabs / pointer-tracker Goto Github PK

pointer-tracker's Issues

setPointerCapture() disables click events in Chrome

Using the right mouse button can cause a never-ending pointer

Firefox bug with SVG Elements and multiple pointers

Initial canvas scale not correct in the demo

Dragging element

Enable pen/stylus erasing events

Update types to accept SVGElement | HTMLElement in the constructor

triggerPointerEnd method is useful as public method

CommonJS dist file exports nothing

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent