@cs-open/react-fabric/dist/esm/hooks/useDraggable.mjs

React Fabric

"use client";import{shallow as p}from"zustand/shallow";import{useRef as a,useEffect as d}from"react";import{useStoreApi as v,useStore as b}from"./useStore.mjs";const h=r=>({canvas:r.canvas,draggable:r.draggable}),w=r=>{const e=r.get("selectable");return r.set("selectable",!1),()=>{r.set("selectable",e)}},X=r=>{if(!r)return()=>{};const e=r.getObjects().map(n=>w(n));return()=>{e.forEach(n=>n())}},Y=()=>{const r=v(),{canvas:e,draggable:n}=b(h,p),s=a(0),u=a(0),l=a(!1);return d(()=>{if(!n)return;const g=X(e),i=({e:t})=>{const c=t.changedTouches?.[0];l.current=!0,s.current=t.clientX??c?.clientX,u.current=t.clientY??c?.clientY},f=({e:t})=>{if(l.current&&e){var c=e.viewportTransform;const o=t.changedTouches?.[0];c[4]+=(t.clientX??o?.clientX)-s.current,c[5]+=(t.clientY??o?.clientY)-u.current,e.requestRenderAll(),s.current=t.clientX??o?.clientX,u.current=t.clientY??o?.clientY}},m=t=>{e&&(e.setViewportTransform(e.viewportTransform),l.current=!1)};return e?.on("mouse:down",i),e?.on("mouse:move",f),e?.on("mouse:up",m),()=>{g(),e?.off("mouse:down",i),e?.off("mouse:move",f),e?.off("mouse:up",m)}},[e,n,r]),null};export{Y as default};
//# sourceMappingURL=useDraggable.mjs.map