text: import{u as e,c as t,a as n,b as i,t as o,d as r,o as s,i as a,e as l,f as d,m as c,r as u}from"./vendor.741935e8.js";!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver((e=>{for(const n of e)if("childList"===n.type)for(const e of n.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)})).observe(document,{childList:!0,subtree:!0})}function t(e){if(e.ep)return;e.ep=!0;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?t.credentials="include":"anonymous"===e.crossorigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}();const p=o("<br>"),h=o("<span>&nbsp;</span>"),v=o('<div class="app"><h1>PointerEvents playground</h1><label><input type="checkbox"> remove touch and pen log entry on pointerleave (<!>)</label><label><input type="checkbox"> setPointerCapture on clicking down release on up (<!>)</label><label><input type="checkbox"> handle pointerevents (<!>)</label><label><input type="checkbox"> handle touchstart (<!>)</label><pre>Legacy TouchEvent touches.length = </pre><div class="test-area"><div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tincidunt erat in purus ullamcorper ultricies. Duis lacinia aliquet dolor. Maecenas velit enim, eleifend a, tempor eu, mattis in, nisl. Maecenas ut orci. Sed egestas auctor sem. Curabitur vitae pede vel nisl tristique commodo. Phasellus ut nisl. Cras massa. Suspendisse potenti. Vestibulum vitae augue.</div></div><h2>Notes</h2><p>1. Handling <code>touchstart</code> prevents iOS from triggering "text selection" when hold pressing. It\'s notable that iOS selects the text <em>below</em> the element. In this test it\'s the title "Notes" and <b>not</b> the text underneath your finger. <a target="_blank" href="https://www.youtube.com/watch?v=cYzfboD5PaE">See this video about the issue.</a> Notice that CSS properties <code>touch-action: none</code>, <code>user-select: none</code> or <code>-webkit-user-select: none</code> did NOT work. It also required the touchstart handling.</p><p>2. Set capture seems rather meaningless on touch inputs of iOS and Android. However on iPad pencil and desktop mouse it is necessity if you want to be able to pan a view or drag a slider naturally.</p><p>3. iOS has rather annoying bug: when using the four finger gesture to switch application, <a target="_blank" href="https://www.youtube.com/watch?v=pDGB4Hr9tKI">the pointerup or pointerleave is never triggered</a>.</p><p>4. iPad Pencil reports a buttons value of 1, constant width 0.5, tilt is between -90 and 90 where (0, 0) means the pencil is at orthogonal angle. Natural angle for right handed person like mee seems to be about (50, 27). Pressure is between 0 and 1, on comfortable pressure it was 0.09 and 0.12, but values above 0.25 felt way too heavy for me. Notabily in order to register values outside the area you also need to <code>setPointerCapture</code>, unlike with touch inputs. Constant values in fields: tangential 0, and twist 0. Tested on 2021-09-19 with Safari 14.8, on iPad.</p><p>5. iPad with finger reports a buttons value of 1, width seems to go in steps: 41.68, 62.53, 83.42, 104.23, 125.10, 145.95, 166.83, 250.25. Where last values in the list was basically my entire palm and difficult to reproduce. Natural width seemed to be 62.53. Constant values in fields: tilt (90, 0), pressure 0, tangential 0 and twist 0. Tested on 2021-09-19 with Safari 14.8, on iPad.</p><p>6. Android 10 with finger reports a buttons value of 1. Constant value in all the fields: width 0.3636, tilt (0, 0), pressure 1, tangential 0 and twist 0. Practically this means on my Android phone the only useful value is the coordinates of the finger. Tested on 2021-09-19 with Xiaomi Mi 9.</p><p>7. On Google Chrome with mouse the surprise to me was a pressure, which seems to go from 0 to 0.5 when clicking a mouse button! Constant fields are: width 1, tilt (0,0), tangential 0, twist 0. Tested on Chrome 93.0.4577.63.</p><p><em>TODO: Convert these value findings to a table...</em></p></div>'),f=o('<div class="pointer"></div>'),g=e=>["ID: ",c((()=>e.id)),p.cloneNode(!0),"Type: ",c((()=>e.type)),p.cloneNode(!0),c((()=>e.events.slice(-20).reverse().map((e=>(()=>{const t=h.cloneNode(!0),n=t.firstChild;return a(t,e,n),t})()))))," ",p.cloneNode(!0),"Buttons: ",c((()=>e.buttons)),p.cloneNode(!0),"Width: ",c((()=>e.width)),p.cloneNode(!0),"Tilt: (",c((()=>e.tilt.x)),", ",c((()=>e.tilt.y)),") ",p.cloneNode(!0),"Pressure: ",c((()=>e.pressure.toFixed(4))),", tangential: ",c((()=>e.tangentialPressure.toFixed(4)))," ",p.cloneNode(!0),"Twist: ",c((()=>e.twist)),p.cloneNode(!0),"Page: (",c((()=>e.page.x.toFixed(2))),", ",c((()=>e.page.y.toFixed(2))),") ",p.cloneNode(!0),"Offset: (",c((()=>e.offset.x.toFixed(2))),", ",c((()=>e.offset.y.toFixed(2))),") ",p.cloneNode(!0),p.cloneNode(!0)],b=()=>{let o,r=function(e){const t=null!=e?e:new Map,[o,r]=i(!1),[s,a]=i(!1),[l,d]=i(!1),[c,u]=i(!0),[p,h]=i(0),v=e=>e.preventDefault(),f=e=>{h(e.touches.length)};return{touchPoints:p,handlePointerEvents:s,setHandlePointerEvents:a,removeOnLeave:c,setRemoveOnLeave:u,captureOnDown:l,setCaptureOnDown:d,handleTouchStart:o,setHandleTouchStart:r,list:()=>[...t.entries()],object:()=>Object.fromEntries(t.entries()),pointer:e=>t.get(""+e),get size(){return t.size},handle(e){var n,i;if(!(e.currentTarget instanceof HTMLElement))throw new Error("This experiment works only with elements");const o=""+e.pointerId;if(c()&&"pointerleave"===e.type&&("touch"===e.pointerType||"pen"===e.pointerType))return void t.delete(o);l()&&("pointerdown"===e.type&&e.currentTarget.setPointerCapture(e.pointerId),"pointerup"===e.type&&e.currentTarget.releasePointerCapture(e.pointerId)),s()&&e.preventDefault();let r=null!=(i=null==(n=t.get(o))?void 0:n.events)?i:[];t.set(o,{id:o,buttons:e.buttons,type:e.pointerType,pressure:e.pressure,tangentialPressure:e.tangentialPressure,tilt:{x:e.tiltX,y:e.tiltY},page:{x:e.pageX,y:e.pageY},twist:e.twist,width:e.width,offset:{x:e.offsetX,y:e.offsetY},events:"pointermove"!==e.type?[...r,e.type]:r})},listen(e){e.addEventListener("pointerenter",this.handle),e.addEventListener("pointerleave",this.handle),e.addEventListener("pointerdown",this.handle),e.addEventListener("pointerup",this.handle),e.addEventListener("pointermove",this.handle),e.addEventListener("touchstart",f),e.addEventListener("touchcancel",f),e.addEventListener("touchend",f),e.addEventListener("touchmove",f),n((()=>{c()&&t.clear()})),n((()=>{o()?e.addEventListener("touchstart",v):e.removeEventListener("touchstart",v)}))}}}(function(){const[n,i]=t({});return{delete(e){const t=e in n;return i(e,void 0),t},set(e,t){return i(e,t),this},get:e=>n[e],clear(){const t=e((()=>this.keys()));for(const e of t)i(e,void 0)},forEach(e){for(const t in n)Object.prototype.hasOwnProperty.call(n,t)&&e(n[t],t,this)},has:e=>e in n,get size(){return Object.keys(n).length},entries(){const e=n;return Object.entries(e)[Symbol.iterator]()},keys:()=>Object.keys(n)[Symbol.iterator](),values:()=>Object.values(n)[Symbol.iterator](),[Symbol.iterator](){return this.entries()},[Symbol.toStringTag]:"ObservableMap"}}());return s((()=>{o&&r.listen(o)})),(()=>{const e=v.cloneNode(!0),t=e.firstChild.nextSibling,n=t.firstChild,i=n.nextSibling.nextSibling;i.nextSibling;const s=t.nextSibling,c=s.firstChild,u=c.nextSibling.nextSibling;u.nextSibling;const p=s.nextSibling,h=p.firstChild,b=h.nextSibling.nextSibling;b.nextSibling;const m=p.nextSibling,y=m.firstChild,w=y.nextSibling.nextSibling;w.nextSibling;const x=m.nextSibling,S=x.firstChild,O=x.nextSibling;O.firstChild,n.$$input=e=>r.setRemoveOnLeave(e.target.checked),a(t,(()=>r.removeOnLeave()?"On":"Off"),i),c.$$input=e=>r.setCaptureOnDown(e.target.checked),a(s,(()=>r.captureOnDown()?"On":"Off"),u),h.$$input=e=>r.setHandlePointerEvents(e.target.checked),a(p,(()=>r.handlePointerEvents()?"On":"Off"),b),y.$$input=e=>r.setHandleTouchStart(e.target.checked),a(m,(()=>r.handleTouchStart()?"On":"Off"),w),a(x,(()=>r.list().map((([e,t])=>l(g,t)))),S),a(x,(()=>r.touchPoints()),null);return"function"==typeof o?o(O):o=O,a(O,(()=>r.list().map((([e,t])=>(()=>{const e=f.cloneNode(!0);return d((n=>{const i=t.offset.y+"px",o=t.offset.x+"px";return i!==n._v$5&&e.style.setProperty("top",n._v$5=i),o!==n._v$6&&e.style.setProperty("left",n._v$6=o),n}),{_v$5:void 0,_v$6:void 0}),e})()))),null),d((e=>{const t=r.removeOnLeave(),i=r.captureOnDown(),o=r.handlePointerEvents(),s=r.handleTouchStart();return t!==e._v$&&(n.checked=e._v$=t),i!==e._v$2&&(c.checked=e._v$2=i),o!==e._v$3&&(h.checked=e._v$3=o),s!==e._v$4&&(y.checked=e._v$4=s),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),e})()};r(["input"]),u((()=>l(b,{})),document.getElementById("root"));
  