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.

Sign up for GitHub

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

Jump to bottom

Add persistentDeviceId to PointerEvent #495

Merged
merged 17 commits into from
Aug 14, 2024
Merged

Add persistentDeviceId to PointerEvent #495

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
53aa55e
Add deviceId to PointerEvent spec
sahirv Jan 11, 2024
abe761f
Specify value of 1 for mouse events
sahirv Jan 19, 2024
55a1acc
Switch to deviceProperties
sahirv Mar 5, 2024
bcd5db0
Fix example numbering
sahirv Mar 5, 2024
06be8e0
Add some more details to uniqueId decription
sahirv Mar 5, 2024
fe6a97d
Add constructor
sahirv Mar 6, 2024
dd4ea5a
Address feedback
sahirv Mar 11, 2024
453da9f
Address feedback, add init dict
sahirv Mar 21, 2024
b2d7e83
Fix example
sahirv Mar 26, 2024
eefea6e
Fix default value in dict
sahirv Mar 26, 2024
4d14be1
Remove mouse clause, add missing uniqueId note
sahirv Apr 16, 2024
7744cb4
Merge branch 'patch-1' of https://github.com/sahirv/pointerevents int…
sahirv Apr 16, 2024
60bf3dc
Change caps on must
sahirv Apr 18, 2024
0282bae
Change invalid id from -1 to 0
sahirv Apr 18, 2024
b485c11
deviceProperties null in init
sahirv May 8, 2024
cc41fc6
Merge branch 'gh-pages' into patch-1
sahirv May 16, 2024
8853ccf
Switch to persistentDeviceId
sahirv Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 43 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,34 @@ <h1>Examples</h1>
pointerEventInitDict.coalescedEvents = [p1, p2];
const event2 = new PointerEvent("pointermove", pointerEventInitDict);
eventTarget.dispatchEvent(event2);</code>
</pre>
<pre id="example_5" class="example" title="Assigning a pen color on PointerDown">
<code>&lt;div style="position:absolute; top:0px; left:0px; width:100px;height:100px;"&gt;&lt;/div&gt;
&lt;script&gt;
window.addEventListener("pointerdown", assignPenColor);
window.addEventListener("pointermove", assignPenColor);
const colorMap = new Map();

function assignPenColor(event) {
const uniqueId = event.persistentDeviceId;
// Check if a unique Id exists.
if (uniqueId == 0) {
return;
}
// Check if a color has been assigned to the device.
if (map.has(uniqueId)) {
return;
}
// Assign a color to the device.
let newColor = getNewColor();
map.set(uniqueId, newColor);
return newColor;
}

function getNewColor() {
/* return some color value */
}
&lt;/script&gt;</code>
</pre>
</section>

Expand All @@ -214,6 +242,7 @@ <h2><code>PointerEvent</code> interface</h2>
double azimuthAngle;
DOMString pointerType = "";
boolean isPrimary = false;
long persistentDeviceId = 0;
sequence&lt;PointerEvent&gt; coalescedEvents = [];
sequence&lt;PointerEvent&gt; predictedEvents = [];
};
Expand All @@ -233,6 +262,7 @@ <h2><code>PointerEvent</code> interface</h2>
readonly attribute double azimuthAngle;
readonly attribute DOMString pointerType;
readonly attribute boolean isPrimary;
readonly attribute long persistentDeviceId;
[SecureContext] sequence&lt;PointerEvent&gt; getCoalescedEvents();
sequence&lt;PointerEvent&gt; getPredictedEvents();
};
Expand Down Expand Up @@ -325,6 +355,11 @@ <h2><code>PointerEvent</code> interface</h2>
<dd>
<p>Indicates if the pointer represents the <a>primary pointer</a> of this pointer type.</p>
</dd>
<dt><dfn>persistentDeviceId</dfn></dt>
<dd>
<p>A unique identifier for the pointing device. If the hardware supports multiple pointers, pointer events generated from pointing devices MUST only get a <code>persistentDeviceId</code> if those pointers are uniquely identifiable over the session. If the pointer is uniquely identifiable, the assigned <code>persistentDeviceId</code> to that pointing device will remain constant for the remainder of the session. The <code>persistentDeviceId</code> value of <code>0</code> MUST be reserved and used to indicate events whose generating device could not be identified. Like <a href="#dom-pointerevent-pointerid">pointerId</a>, to minimize the chance of fingerprinting and tracking across different pages or domains, the <code>persistentDeviceId</code> MUST only be associated explicitly with that particular pointing device for the lifetime of the page / session, and a new randomized <code>persistentDeviceId</code> MUST be chosen the next time that particular pointing device is used again in a new session.</p>
<div class="note">Due to digitizer and pointing device hardware constraints, a <code>persistentDeviceId</code> is not guaranteed to be available for all pointer events from a pointing device. For example, the device may not report its hardware id to the digitizer in time for <code>pointerdown</code> to have a <code>persistentDeviceId</code>. In such a case, the <code>persistentDeviceId</code> may initially be <code>0</code> and change to a valid value.</div>
</dd>
<dt><dfn>getCoalescedEvents()</dfn></dt>
<dd>
<p>A method that returns the list of <a>coalesced events</a>.</p>
Expand Down Expand Up @@ -578,7 +613,7 @@ <h3>Converting between <code>tiltX</code> / <code>tiltY</code> and <code>altitud
<p>Pointer Events include two complementary sets of attributes to express the orientation of a transducer relative to the X-Y plane: <code>tiltX</code> / <code>tiltY</code> (introduced in the original Pointer Events specification), and <code>azimuthAngle</code> / <code>altitudeAngle</code> (adopted from the <a href="https://w3c.github.io/touch-events/">Touch Events - Level 2</a> specification).</p>
<p>Depending on the specific hardware and platform, user agents will likely only receive one set of values for the transducer orientation relative to the screen plane — either <code>tiltX</code> / <code>tiltY</code> or <code>altitudeAngle</code> / <code>azimuthAngle</code>. User agents MUST use the following algorithm for converting these values.</p>
<p>When the user agent calculates <code>tiltX</code> / <code>tiltY</code> from <code>azimuthAngle</code> / <code>altitudeAngle</code> it SHOULD round the final integer values using <a data-cite="ECMASCRIPT#sec-math.round">Math.round</a> [[ECMASCRIPT]] rules.</p>
<pre id="example_12" class="example" title="Converting between tiltX/tiltY and altitudeAngle/azimuthAngle"><code>/* Converting between tiltX/tiltY and altitudeAngle/azimuthAngle */
<pre id="example_6" class="example" title="Converting between tiltX/tiltY and altitudeAngle/azimuthAngle"><code>/* Converting between tiltX/tiltY and altitudeAngle/azimuthAngle */

function spherical2tilt(altitudeAngle, azimuthAngle) {
const radToDeg = 180/Math.PI;
Expand Down Expand Up @@ -683,7 +718,6 @@ <h3>Converting between <code>tiltX</code> / <code>tiltY</code> and <code>altitud
</pre>
</section>
</section>

<section>
<h2><dfn>Pointer Event types</dfn></h2>
<p>Below are the event types defined in this specification.</p>
Expand Down Expand Up @@ -1028,17 +1062,17 @@ <h2><dfn data-lt="touch-action values">Details of <code>touch-action</code> valu
</div>
<div class="note">Disabling some default direct manipulation behaviors for panning and zooming may allow user agents to respond to other behaviors more quickly. For example, with <code>auto</code> user agents typically add 300ms of delay before <code>click</code> to allow for double-tap gestures to be handled. In these cases, explicitly setting <code>touch-action: none</code> or <code>touch-action: manipulation</code> will remove this delay. Note that the methods for determining a tap or double-tap gesture are out of scope for this specification.</div>
</section>
<pre id="example_5" class="example" title="Disallowing all direct manipulation behaviors">
<pre id="example_7" class="example" title="Disallowing all direct manipulation behaviors">
<code>&lt;div style=&quot;touch-action: none;&quot;&gt;
This element receives pointer events for all direct manipulation interactions that otherwise lead to panning or zooming.
&lt;/div&gt;</code>
</pre>
<pre id="example_6" class="example" title="Allowing horizontal panning only">
<pre id="example_8" class="example" title="Allowing horizontal panning only">
<code>&lt;div style=&quot;touch-action: pan-x;&quot;&gt;
This element receives pointer events when not panning in the horizontal direction.
&lt;/div&gt;</code>
</pre>
<pre id="example_7" class="example" title="Child regions that disallow direct manipulation behaviors for panning and zooming">
<pre id="example_9" class="example" title="Child regions that disallow direct manipulation behaviors for panning and zooming">
<code>&lt;div style=&quot;overflow: auto;&quot;&gt;
&lt;div style=&quot;touch-action: none;&quot;&gt;
This element receives pointer events for all direct manipulation interactions that otherwise lead to panning or zooming.
Expand All @@ -1048,7 +1082,7 @@ <h2><dfn data-lt="touch-action values">Details of <code>touch-action</code> valu
&lt;/div&gt;
&lt;/div&gt;</code>
</pre>
<pre id="example_8" class="example" title="Intermediate parent that disallows direct manipulation behaviors for panning and zooming">
<pre id="example_10" class="example" title="Intermediate parent that disallows direct manipulation behaviors for panning and zooming">
<code>&lt;div style=&quot;overflow: auto;&quot;&gt;
&lt;div style=&quot;touch-action: pan-y;&quot;&gt;
&lt;div style=&quot;touch-action: pan-x;&quot;&gt;
Expand All @@ -1061,7 +1095,7 @@ <h2><dfn data-lt="touch-action values">Details of <code>touch-action</code> valu
&lt;/div&gt;
&lt;/div&gt;</code>
</pre>
<pre id="example_9" class="example" title="Intermediate parent that restricts allowed direct manipulation behaviors for panning and zooming">
<pre id="example_11" class="example" title="Intermediate parent that restricts allowed direct manipulation behaviors for panning and zooming">
&lt;div style=&quot;overflow: auto;&quot;&gt;
&lt;div style=&quot;touch-action: pan-y pan-left;&quot;&gt;
&lt;div style=&quot;touch-action: pan-x;&quot;&gt;
Expand Down Expand Up @@ -1191,7 +1225,7 @@ <h2><dfn>Coalesced events</dfn></h2>
<li>Empty <a>coalesced events list</a> and <a>predicted events list</a> of their own.</li>
</ul>

<pre id="example_10" class="example" title="Basic canvas drawing application using the coalesced events list">
<pre id="example_12" class="example" title="Basic canvas drawing application using the coalesced events list">
<code>&lt;style&gt;
/* Disable intrinsic user agent direct manipulation behaviors (such as panning or zooming)
so that all events on the canvas element are given to the application instead. */
Expand Down Expand Up @@ -1307,7 +1341,7 @@ <h2><dfn>Predicted events</dfn></h2>
pointer events are dispatched earlier than the timestamp of one or more of the predicted events.</p>
</div>

<pre id="example_11" class="example" title="Conceptual approach to drawing using coalesced events and predicted events">
<pre id="example_13" class="example" title="Conceptual approach to drawing using coalesced events and predicted events">
<code>
let predicted_points = [];
window.addEventListener("pointermove", function(event) {
Expand Down
Loading