tanuki-ui
Version:
HTML-first React component library with semantic elements, multi-OS themes, and production-ready visual node editor
2 lines (1 loc) • 4.21 kB
JavaScript
"use strict";var p=Object.defineProperty;var u=(r,e,t)=>e in r?p(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var a=(r,e,t)=>u(r,typeof e!="symbol"?e+"":e,t);const l=require("react");function f(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const o=f(l);class g{constructor(){a(this,"rafId",0);a(this,"pointerIds",[]);a(this,"handlers",{});a(this,"targetPointers",{});a(this,"pointers",{});window.addEventListener("pointermove",e=>{this.pointers[e.pointerId]?(this.pointers[e.pointerId].pageX=e.pageX,this.pointers[e.pointerId].pageY=e.pageY):this.pointers[e.pointerId]={pageX:e.pageX,pageY:e.pageY}}),window.addEventListener("pointercancel",e=>this.removeTrackTarget(e)),window.addEventListener("pointerup",e=>this.removeTrackTarget(e)),document.addEventListener("pointerleave",e=>this.removeTrackTarget(e)),this.start()}start(){this.tick()}end(){cancelAnimationFrame(this.rafId)}removeTrackTarget(e){this.emitChange(e.pointerId.toString(),"pointerend"),delete this.pointers[e.pointerId],delete this.targetPointers[e.pointerId],delete this.handlers[e.pointerId];const t=this.pointerIds.indexOf(e.pointerId.toString());this.pointerIds.splice(t,1)}tick(){this.rafId=requestAnimationFrame(()=>this.tick());for(const e of this.pointerIds){const t=this.targetPointers[e],n=this.pointers[e];if(!t||!n)continue;const[i,s]=[t.deltaX,t.deltaY];t.deltaX=n.pageX-t.startX,t.deltaY=n.pageY-t.startY,t.elapsedtime=performance.now()-t.timestamp,!(i===t.deltaX&&s===t.deltaY)&&this.emitChange(e,"pointermove")}}emitChange(e,t){if(!this.handlers[e])return;const n=this.targetPointers[e],i=this.pointers[e];this.handlers[e]({pointerId:e.toString(),timestamp:n.timestamp,elapsedtime:n.elapsedtime,type:t,pageX:i.pageX,pageY:i.pageY,deltaX:n.deltaX,deltaY:n.deltaY,startX:n.startX,startY:n.startY,clientX:n.clientX,clientY:n.clientY,offsetX:n.offsetX,offsetY:n.offsetY,button:n.button,isFinal:t==="pointerend",target:n.target,ZIndexList:n.ZIndexList,defaultPrevented:n.defaultPrevented})}addTrackTarget(e,t){e.target instanceof HTMLElement&&(this.pointerIds.push(e.pointerId.toString()),this.targetPointers[e.pointerId]={timestamp:performance.now(),elapsedtime:0,deltaX:0,deltaY:0,startX:e.pageX,startY:e.pageY,button:e.button,target:e.target,clientX:e.clientX,clientY:e.clientY,offsetX:e.offsetX,offsetY:e.offsetY,ZIndexList:m(e.target),defaultPrevented:e.defaultPrevented},this.pointerIds=this.pointerIds.sort((n,i)=>{var s,d;return h(((s=this.targetPointers[n])==null?void 0:s.ZIndexList)??[],((d=this.targetPointers[i])==null?void 0:d.ZIndexList)??[])}),this.pointers[e.pointerId]={pageX:e.pageX,pageY:e.pageY},this.handlers[e.pointerId]=t,this.emitChange(e.pointerId,"pointerdown"))}}const h=(r,e)=>{const t=Math.max(r.length,e.length);if(t<=0)return 0;for(let n=0;n<t;n++){const i=r[n],s=e[n];if(typeof i>"u")return-1;if(typeof s>"u")return 1;if(i!==s)return i>s?-1:1}return 0},m=r=>{const e=[],t=n=>{const s=+window.getComputedStyle(n).getPropertyValue("z-index");Number.isNaN(s)||e.push(s),n.parentElement&&t(n.parentElement)};return t(r),e.reverse()};let c;const v=(r,e)=>{c||(c=new g);const t=o.useRef(e);t.current=e,o.useEffect(()=>{if(!r.current)return;const n=r.current,i=s=>{s.defaultPrevented||(s.preventDefault(),c.addTrackTarget(s,d=>{t.current&&t.current(d)}))};return n.addEventListener("pointerdown",i),()=>{n.removeEventListener("pointerdown",i)}},[])},I=r=>{const[e,t]=o.useState(),n=o.useDeferredValue(e),i=o.useCallback(()=>{if(!r.current)return;const s=r.current.getBoundingClientRect();t({x:s.x,y:s.y,width:s.width,height:s.height})},[t]);return o.useEffect(()=>(window.addEventListener("scroll",i),()=>{window.removeEventListener("scroll",i)}),[]),o.useEffect(()=>(window.addEventListener("resize",i,!1),i(),()=>{window.removeEventListener("resize",i,!1)}),[i]),o.useEffect(()=>{const s=new ResizeObserver(d=>{i()});return r.current&&s.observe(r.current),()=>{r.current&&s.unobserve(r.current),s.disconnect()}},[i]),[n,i]};exports.useMeasure=I;exports.useObservePointer=v;