@expofp/floorplan/dist/esm/ui/Draggable/Draggable.js

Interactive floor plan library for expos and events

import{jsx as R}from"react/jsx-runtime";import{useEffect as H,useRef as P,useState as d}from"react";import{isInteractiveTarget as p}from"../shared/interactive";const W=({children:y,className:w,style:E})=>{const[n,c]=d({x:0,y:0}),[o,a]=d(!1),[r,h]=d({x:0,y:0}),u=P(null),M=t=>{p(t.target)||(a(!0),h({x:t.clientX-n.x,y:t.clientY-n.y}),t.preventDefault())},m=t=>{if(!o)return;const e=t.clientX-r.x,s=t.clientY-r.y;c({x:e,y:s})},l=()=>{f()},L=t=>{if(p(t.target))return;const e=t.touches[0];a(!0),h({x:e.clientX-n.x,y:e.clientY-n.y})},g=t=>{if(!o)return;const e=t.touches[0],s=e.clientX-r.x,i=e.clientY-r.y;c({x:s,y:i})},v=()=>{f()},f=()=>{if(!u.current)return;const t=u.current.getBoundingClientRect(),e=window.innerWidth,s=window.innerHeight,i=t.width/4,x=t.height/4,D=Math.max(0,0-t.left),X=Math.max(0,t.right-e),Y=Math.max(0,0-t.top),b=Math.max(0,t.bottom-s),T=D>i||X>i,S=Y>x||b>x;(T||S)&&c({x:0,y:0}),a(!1)};return H(()=>{if(o)return document.addEventListener("mousemove",m),document.addEventListener("mouseup",l),document.addEventListener("touchmove",g,{passive:!1}),document.addEventListener("touchend",v),()=>{document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",l),document.removeEventListener("touchmove",g),document.removeEventListener("touchend",v)}},[o,r]),R("div",{ref:u,className:w,style:{...E,transform:`translate(${n.x}px, ${n.y}px)`,cursor:o?"grabbing":"grab"},onMouseDown:M,onTouchStart:L,children:y})};export default W;