use-transformable/dist/index.js

A React library for creating transformable, draggable, resizable, and rotatable elements with multi-selection support

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");var Q={exports:{}},G={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var U;function ot(){if(U)return G;U=1;var R=Symbol.for("react.transitional.element"),v=Symbol.for("react.fragment");function S(b,y,d){var h=null;if(d!==void 0&&(h=""+d),y.key!==void 0&&(h=""+y.key),"key"in y){d={};for(var k in y)k!=="key"&&(d[k]=y[k])}else d=y;return y=d.ref,{$$typeof:R,type:b,key:h,ref:y!==void 0?y:null,props:d}}return G.Fragment=v,G.jsx=S,G.jsxs=S,G}var Z={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var tt;function it(){return tt||(tt=1,process.env.NODE_ENV!=="production"&&(function(){function R(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===M?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case t:return"Fragment";case E:return"Profiler";case g:return"StrictMode";case j:return"Suspense";case i:return"SuspenseList";case w:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case I:return"Portal";case H:return(e.displayName||"Context")+".Provider";case C:return(e._context.displayName||"Context")+".Consumer";case D:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case r:return n=e.displayName||null,n!==null?n:R(e.type)||"Memo";case c:n=e._payload,e=e._init;try{return R(e(n))}catch{}}return null}function v(e){return""+e}function S(e){try{v(e);var n=!1}catch{n=!0}if(n){n=console;var u=n.error,x=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",x),v(e)}}function b(e){if(e===t)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===c)return"<...>";try{var n=R(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function y(){var e=P.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function h(e){if(X.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function k(e,n){function u(){F||(F=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function N(){var e=R(this.type);return o[e]||(o[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function p(e,n,u,x,O,_,q,V){return u=_.ref,e={$$typeof:Y,type:e,key:n,props:_,_owner:O},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:N}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function $(e,n,u,x,O,_,q,V){var z=n.children;if(z!==void 0)if(x)if(W(z)){for(x=0;x<z.length;x++)A(z[x]);Object.freeze&&Object.freeze(z)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else A(z);if(X.call(n,"key")){z=R(e);var J=Object.keys(n).filter(function(nt){return nt!=="key"});x=0<J.length?"{key: someKey, "+J.join(": ..., ")+": ...}":"{key: someKey}",f[z+x]||(J=0<J.length?"{"+J.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,x,z,J,z),f[z+x]=!0)}if(z=null,u!==void 0&&(S(u),z=""+u),h(n)&&(S(n.key),z=""+n.key),"key"in n){u={};for(var K in n)K!=="key"&&(u[K]=n[K])}else u=n;return z&&k(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),p(e,z,_,O,y(),u,q,V)}function A(e){typeof e=="object"&&e!==null&&e.$$typeof===Y&&e._store&&(e._store.validated=1)}var m=s,Y=Symbol.for("react.transitional.element"),I=Symbol.for("react.portal"),t=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),C=Symbol.for("react.consumer"),H=Symbol.for("react.context"),D=Symbol.for("react.forward_ref"),j=Symbol.for("react.suspense"),i=Symbol.for("react.suspense_list"),r=Symbol.for("react.memo"),c=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),P=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,W=Array.isArray,L=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var F,o={},l=m.react_stack_bottom_frame.bind(m,d)(),a=L(b(d)),f={};Z.Fragment=t,Z.jsx=function(e,n,u,x,O){var _=1e4>P.recentlyCreatedOwnerStacks++;return $(e,n,u,!1,x,O,_?Error("react-stack-top-frame"):l,_?L(b(e)):a)},Z.jsxs=function(e,n,u,x,O){var _=1e4>P.recentlyCreatedOwnerStacks++;return $(e,n,u,!0,x,O,_?Error("react-stack-top-frame"):l,_?L(b(e)):a)}})()),Z}var et;function st(){return et||(et=1,process.env.NODE_ENV==="production"?Q.exports=ot():Q.exports=it()),Q.exports}var T=st();const B={element:{outline:"1px solid #007bff",borderRadius:"0px",backgroundColor:"#007bff20"},resizeHandlers:{base:{backgroundColor:"white",outline:"1px solid #007bff",borderRadius:0,width:8,height:8},topLeft:{},top:{},topRight:{},right:{},bottomRight:{},bottom:{},bottomLeft:{},left:{}},rotationHandler:{base:{backgroundColor:"transparent",border:"none",borderRadius:0,width:8,height:8},topLeft:{},topRight:{},bottomRight:{},bottomLeft:{}},origin:{position:"absolute",width:"5px",height:"5px",backgroundColor:"#007bff",outline:"1px solid #fff",borderRadius:"50%",pointerEvents:"none",zIndex:10001}},rt=s.createContext(null),at=({children:R,selected:v,setSelected:S,gridSize:b,snapToGrid:y,elements:d,handleUpdate:h,theme:k,showOrigin:N})=>{const p=s.useCallback(i=>y?Math.round(i/b)*b:i,[y,b]),$=s.useCallback(()=>k?{element:{...B.element,...k.element},resizeHandlers:{...B.resizeHandlers,...k.resizeHandlers},rotationHandler:{...B.rotationHandler,...k.rotationHandler},origin:{...B.origin,...k.origin}}:B,[k])(),A=s.useCallback(i=>{h(i.id,{x:i.x,y:i.y})},[h]),m=s.useCallback(i=>{i.forEach(r=>{if(r.deltaX!==void 0&&r.deltaY!==void 0){const c=d.find(w=>w.id===r.id);if(c){const w=p(c.x+r.deltaX),M=p(c.y+r.deltaY);h(r.id,{x:w,y:M})}}})},[d,p,h]),Y=s.useCallback((i,r)=>{v.forEach(c=>{const w=d.find(M=>M.id===c);if(w){const M=p(w.x+i),P=p(w.y+r);h(c,{x:M,y:P})}})},[v,d,p,h]),I=s.useCallback((i,r,c,w)=>{v.forEach(M=>{const P=d.find(X=>X.id===M);if(P){const X=p(P.x+i),W=p(P.y+r),L=Math.max(50,p(P.width+c)),F=Math.max(50,p(P.height+w));h(M,{x:X,y:W,width:L,height:F})}})},[v,d,p,h]),t=s.useCallback(i=>{i.forEach(r=>{if(r.deltaX!==void 0&&r.deltaY!==void 0&&r.deltaWidth!==void 0&&r.deltaHeight!==void 0){const c=d.find(w=>w.id===r.id);if(c){const w=p(c.x+r.deltaX),M=p(c.y+r.deltaY),P=Math.max(50,p(c.width+r.deltaWidth)),X=Math.max(50,p(c.height+r.deltaHeight));h(r.id,{x:w,y:M,width:P,height:X})}}})},[d,p,h]),g=s.useCallback(i=>{v.forEach(r=>{const c=d.find(w=>w.id===r);if(c){const w=c.rotation+i;h(r,{rotation:w})}})},[v,d,h]),E=s.useCallback(i=>{i.forEach(r=>{if(r.deltaRotation!==void 0){const c=d.find(w=>w.id===r.id);if(c){const w=c.rotation+r.deltaRotation;h(r.id,{rotation:w})}}})},[d,h]),C=s.useCallback(i=>{h(i.id,{x:i.x,y:i.y,width:i.width,height:i.height})},[h]),H=s.useCallback(i=>{h(i.id,{rotation:i.rotation})},[h]),D=s.useCallback((i,r)=>{if(r){const c=new Set(v);c.has(i)?c.delete(i):c.add(i),S(c)}else v.has(i)||S(new Set([i]))},[v,S]),j={selected:v,setSelected:S,gridSize:b,snapToGrid:y,elements:d,onDragEnd:A,onMultiDragEnd:m,onMultiDragMove:Y,onMultiResizeMove:I,onMultiResizeEnd:t,onMultiRotateMove:g,onMultiRotateEnd:E,onResizeEnd:C,onRotateEnd:H,onSelect:D,snapValue:p,theme:$,showOrigin:N};return T.jsx(rt.Provider,{value:j,children:R})},lt=()=>{const R=s.useContext(rt);if(!R)throw new Error("useTransformable must be used within a TransformableProvider");return R},ct=({id:R,children:v})=>{const{elements:S,selected:b,onDragEnd:y,onMultiDragEnd:d,onMultiDragMove:h,onMultiResizeMove:k,onMultiRotateMove:N,onResizeEnd:p,onRotateEnd:$,onSelect:A,snapValue:m,theme:Y,showOrigin:I}=lt(),t=S.find(o=>o.id===R);if(!t)return console.warn(`TransformableItem: Element with id "${R}" not found`),null;const g=b.has(t.id),E=(o,l)=>l?{...o,...l}:o,C=(o,l)=>{const a=Y.resizeHandlers.base||{},f=Y.resizeHandlers[o]||{};return{...l,...a,...f}},H=(o,l)=>{const a=Y.rotationHandler.base||{},f=Y.rotationHandler[o]||{};return{...l,...a,...f}},D=s.useRef(null),j=s.useRef(null),i=s.useRef({isDragging:!1,startX:0,startY:0,offsetX:0,offsetY:0,isMultiDrag:!1,isDraggingThis:!1}),r=s.useRef({isResizing:!1,handle:"",startWidth:0,startHeight:0,startX:0,startY:0}),c=s.useRef({isRotating:!1,startAngle:0,centerX:0,centerY:0}),w=s.useRef({x:0,y:0}),M=s.useCallback(o=>{const l=document.querySelector("[data-canvas]");if(!l)return{x:0,y:0};const a=l.getBoundingClientRect();return{x:o.clientX-a.left,y:o.clientY-a.top}},[]),P=s.useCallback(o=>{if(o.button!==0)return;const l=M(o),a=o.target;if(a.classList.contains("resize-handle")){const f=a.getAttribute("data-element-id"),e=a.getAttribute("data-handle");f&&e&&(r.current={isResizing:!0,handle:e,startWidth:t.width,startHeight:t.height,startX:l.x,startY:l.y},A(t.id,!1));return}if(a.classList.contains("rotate-handle")){const f=a.getAttribute("data-element-id"),e=a.getAttribute("data-handle");if(f&&e){const n=t.x+t.origin[0]*t.width,u=t.y+t.origin[1]*t.height,O=Math.atan2(l.y-u,l.x-n)*180/Math.PI-t.rotation;c.current={isRotating:!0,startAngle:O,centerX:n,centerY:u},A(t.id,!1)}return}if(a.classList.contains("element")){const f=a.getAttribute("data-element-id");if(f){A(f,o.shiftKey);const e=b.size>1&&b.has(t.id),n=!0;i.current={isDragging:!0,startX:l.x,startY:l.y,offsetX:l.x-t.x,offsetY:l.y-t.y,isMultiDrag:e,isDraggingThis:n}}return}},[t,b,M,A]),X=s.useCallback((o,l)=>{if(o.button!==0)return;o.stopPropagation();const a=M(o);r.current={isResizing:!0,handle:l,startWidth:t.width,startHeight:t.height,startX:a.x,startY:a.y},A(t.id,!1)},[t,b,M,A]),W=s.useCallback(o=>{if(o.button!==0)return;o.stopPropagation();const l=M(o),a=t.x+t.origin[0]*t.width,f=t.y+t.origin[1]*t.height,n=Math.atan2(l.y-f,l.x-a)*180/Math.PI-t.rotation;c.current={isRotating:!0,startAngle:n,centerX:a,centerY:f},A(t.id,!1)},[t,b,M,A]),L=s.useCallback(o=>{const l=M(o);if(w.current=l,i.current.isDragging){const a=m(l.x-i.current.offsetX),f=m(l.y-i.current.offsetY);if(i.current.isMultiDrag&&i.current.isDraggingThis){const e=a-t.x,n=f-t.y;h(e,n)}if(D.current&&(D.current.style.left=`${a}px`,D.current.style.top=`${f}px`),j.current&&(j.current.style.left=`${a}px`,j.current.style.top=`${f}px`),I){const e=document.querySelector(`[data-origin-id="${t.id}"]`);if(e){const n=a+t.origin[0]*t.width-3,u=f+t.origin[1]*t.height-3;e.style.left=`${n}px`,e.style.top=`${u}px`}}}if(r.current.isResizing){const a=l.x-r.current.startX,f=l.y-r.current.startY;let e=t.width,n=t.height,u=t.x,x=t.y;if((r.current.handle.includes("right")||r.current.handle==="right")&&(e=Math.max(50,m(r.current.startWidth+a))),(r.current.handle.includes("left")||r.current.handle==="left")&&(e=Math.max(50,m(r.current.startWidth-a)),u=m(t.x+a)),(r.current.handle.includes("bottom")||r.current.handle==="bottom")&&(n=Math.max(50,m(r.current.startHeight+f))),(r.current.handle.includes("top")||r.current.handle==="top")&&(n=Math.max(50,m(r.current.startHeight-f)),x=m(t.y+f)),b.size>1&&b.has(t.id)){const _=e-t.width,q=n-t.height,V=u-t.x,z=x-t.y;k(V,z,_,q)}if(D.current&&(D.current.style.left=`${u}px`,D.current.style.top=`${x}px`,D.current.style.width=`${e}px`,D.current.style.height=`${n}px`),j.current&&(j.current.style.left=`${u}px`,j.current.style.top=`${x}px`,j.current.style.width=`${e}px`,j.current.style.height=`${n}px`),I){const _=document.querySelector(`[data-origin-id="${t.id}"]`);if(_){const q=u+t.origin[0]*e-3,V=x+t.origin[1]*n-3;_.style.left=`${q}px`,_.style.top=`${V}px`}}}if(c.current.isRotating){const a=l.x-c.current.centerX,f=l.y-c.current.centerY,n=Math.atan2(f,a)*180/Math.PI-c.current.startAngle;if(b.size>1&&b.has(t.id)){const x=n-t.rotation;N(x)}if(D.current&&(D.current.style.transform=`rotate(${n}deg)`),j.current&&(j.current.style.transform=`rotate(${n}deg)`),I){const x=document.querySelector(`[data-origin-id="${t.id}"]`);if(x){const O=t.x+t.origin[0]*t.width-3,_=t.y+t.origin[1]*t.height-3;x.style.left=`${O}px`,x.style.top=`${_}px`,x.style.transform="none"}}}},[t,M,m,h]);s.useEffect(()=>{if(I){const o=document.querySelector(`[data-origin-id="${t.id}"]`);if(o){const l=t.x+t.origin[0]*t.width-3,a=t.y+t.origin[1]*t.height-3;o.style.left=`${l}px`,o.style.top=`${a}px`,o.style.transform="none",o.style.transformOrigin="center"}}},[t.x,t.y,t.width,t.height,t.rotation,t.origin,I]);const F=s.useCallback(()=>{if(i.current.isDragging){const o=w.current,l=m(o.x-i.current.offsetX),a=m(o.y-i.current.offsetY);if(i.current.isMultiDrag){const f=l-t.x,e=a-t.y,n=[];b.forEach(u=>{n.push({id:u,x:void 0,y:void 0,deltaX:f,deltaY:e})}),d(n)}else y({id:t.id,x:l,y:a});i.current={isDragging:!1,startX:0,startY:0,offsetX:0,offsetY:0,isMultiDrag:!1,isDraggingThis:!1}}if(r.current.isResizing){const o=w.current,l=o.x-r.current.startX,a=o.y-r.current.startY;let f=t.width,e=t.height,n=t.x,u=t.y;(r.current.handle.includes("right")||r.current.handle==="right")&&(f=Math.max(50,m(r.current.startWidth+l))),(r.current.handle.includes("left")||r.current.handle==="left")&&(f=Math.max(50,m(r.current.startWidth-l)),n=m(t.x+l)),(r.current.handle.includes("bottom")||r.current.handle==="bottom")&&(e=Math.max(50,m(r.current.startHeight+a))),(r.current.handle.includes("top")||r.current.handle==="top")&&(e=Math.max(50,m(r.current.startHeight-a)),u=m(t.y+a)),p({id:t.id,x:n,y:u,width:f,height:e}),r.current={isResizing:!1,handle:"",startWidth:0,startHeight:0,startX:0,startY:0}}if(c.current.isRotating){const o=w.current,l=o.x-c.current.centerX,a=o.y-c.current.centerY,e=Math.atan2(a,l)*180/Math.PI-c.current.startAngle;$({id:t.id,rotation:e}),c.current={isRotating:!1,startAngle:0,centerX:0,centerY:0}}},[t,b,m,y,d,p,$]);return s.useEffect(()=>(document.addEventListener("mousemove",L),document.addEventListener("mouseup",F),()=>{document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",F)}),[L,F]),T.jsxs(T.Fragment,{children:[T.jsx("div",{ref:D,className:"element","data-element-id":t.id,style:E({position:"absolute",left:t.x,top:t.y,width:t.width,height:t.height,borderRadius:"0px",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"14px",cursor:"move",transform:`rotate(${t.rotation}deg)`,transformOrigin:`${t.origin[0]*100}% ${t.origin[1]*100}%`,userSelect:"none",zIndex:t.zIndex},g?Y.element:void 0),onMouseDown:P,children:v}),g&&I&&T.jsx("div",{"data-origin-id":t.id,style:{...Y.origin,left:t.x+t.origin[0]*t.width-3,top:t.y+t.origin[1]*t.height-3,transform:"none",transformOrigin:"center"}}),g&&T.jsxs("div",{ref:j,style:E({position:"absolute",left:t.x,top:t.y,width:t.width,height:t.height,outline:"1px solid #007bff",borderRadius:"0px",transform:`rotate(${t.rotation}deg)`,transformOrigin:`${t.origin[0]*100}% ${t.origin[1]*100}%`,pointerEvents:"none",zIndex:9999},Y.element),children:[T.jsx("div",{className:"resize-handle","data-element-id":t.id,"data-handle":"top-left",style:C("topLeft",{position:"absolute",left:-4.5,top:-4.5,width:8,height:8,backgroundColor:"white",outline:"1px solid #007bff",borderRadius:0,cursor:"nw-resize",pointerEvents:"auto",zIndex:1e4}),onMouseDown:o=>X(o,"top-left")}),T.jsx("div",{className:"resize-handle","data-element-id":t.id,"data-handle":"top",style:C("top",{position:"absolute",left:"50%",top:-4.5,width:8,height:8,backgroundColor:"white",outline:"1px solid #007bff",borderRadius:0,cursor:"n-resize",transform:"translateX(-50%)",pointerEvents:"auto",zIndex:1e4}),onMouseDown:o=>X(o,"top")}),T.jsx("div",{className:"resize-handle","data-element-id":t.id,"data-handle":"top-right",style:C("topRight",{position:"absolute",right:-4.5,top:-4.5,width:8,height:8,backgroundColor:"white",outline:"1px solid #007bff",borderRadius:0,cursor:"ne-resize",pointerEvents:"auto",zIndex:1e4}),onMouseDown:o=>X(o,"top-right")}),T.jsx("div",{className:"resize-handle","data-element-id":t.id,"data-handle":"right",style:C("right",{position:"absolute",right:-4.5,top:"50%",width:8,height:8,backgroundColor:"white",outline:"1px solid #007bff",borderRadius:0,cursor:"e-resize",transform:"translateY(-50%)",pointerEvents:"auto",zIndex:1e4}),onMouseDown:o=>X(o,"right")}),T.jsx("div",{className:"resize-handle","data-element-id":t.id,"data-handle":"bottom-right",style:C("bottomRight",{position:"absolute",right:-4.5,bottom:-4,width:8,height:8,backgroundColor:"white",outline:"1px solid #007bff",borderRadius:0,cursor:"se-resize",pointerEvents:"auto",zIndex:1e4}),onMouseDown:o=>X(o,"bottom-right")}),T.jsx("div",{className:"resize-handle","data-element-id":t.id,"data-handle":"bottom",style:C("bottom",{position:"absolute",left:"50%",bottom:-4.5,width:8,height:8,backgroundColor:"white",outline:"1px solid #007bff",borderRadius:0,cursor:"s-resize",transform:"translateX(-50%)",pointerEvents:"auto",zIndex:1e4}),onMouseDown:o=>X(o,"bottom")}),T.jsx("div",{className:"resize-handle","data-element-id":t.id,"data-handle":"bottom-left",style:C("bottomLeft",{position:"absolute",left:-4.5,bottom:-4,width:8,height:8,backgroundColor:"white",outline:"1px solid #007bff",borderRadius:0,cursor:"sw-resize",pointerEvents:"auto",zIndex:1e4}),onMouseDown:o=>X(o,"bottom-left")}),T.jsx("div",{className:"resize-handle","data-element-id":t.id,"data-handle":"left",style:C("left",{position:"absolute",left:-4.5,top:"50%",width:8,height:8,backgroundColor:"white",outline:"1px solid #007bff",borderRadius:0,cursor:"w-resize",transform:"translateY(-50%)",pointerEvents:"auto",zIndex:1e4}),onMouseDown:o=>X(o,"left")}),T.jsx("div",{className:"rotate-handle","data-element-id":t.id,"data-handle":"rotate-top-left",style:H("topLeft",{position:"absolute",left:-12,top:-12,width:8,height:8,backgroundColor:"transparent",border:"none",borderRadius:0,cursor:"grab",pointerEvents:"auto",zIndex:1e4}),onMouseDown:W}),T.jsx("div",{className:"rotate-handle","data-element-id":t.id,"data-handle":"rotate-top-right",style:H("topRight",{position:"absolute",right:-12,top:-12,width:8,height:8,backgroundColor:"transparent",border:"none",borderRadius:0,cursor:"grab",pointerEvents:"auto",zIndex:1e4}),onMouseDown:W}),T.jsx("div",{className:"rotate-handle","data-element-id":t.id,"data-handle":"rotate-bottom-right",style:H("bottomRight",{position:"absolute",right:-12,bottom:-12,width:8,height:8,backgroundColor:"transparent",border:"none",borderRadius:0,cursor:"grab",pointerEvents:"auto",zIndex:1e4}),onMouseDown:W}),T.jsx("div",{className:"rotate-handle","data-element-id":t.id,"data-handle":"rotate-bottom-left",style:H("bottomLeft",{position:"absolute",left:-12,bottom:-12,width:8,height:8,backgroundColor:"transparent",border:"none",borderRadius:0,cursor:"grab",pointerEvents:"auto",zIndex:1e4}),onMouseDown:W})]})]})},ut=({selection:R})=>R?T.jsx("div",{style:{position:"absolute",left:R.x,top:R.y,width:R.width,height:R.height,border:"1px dashed #007bff",backgroundColor:"rgba(0, 123, 255, 0.1)",pointerEvents:"none"}}):null,dt=()=>{const[R,v]=s.useState(new Set),[S,b]=s.useState({isDragging:!1,elementId:null,startX:0,startY:0,offsetX:0,offsetY:0}),[y,d]=s.useState({isResizing:!1,elementId:null,handle:"",startWidth:0,startHeight:0,startX:0,startY:0}),[h,k]=s.useState({isRotating:!1,elementId:null,startAngle:0,centerX:0,centerY:0}),[N,p]=s.useState(!1),[$,A]=s.useState(null),[m,Y]=s.useState(null);return{selected:R,setSelected:v,dragState:S,resizeState:y,rotateState:h,selecting:N,selection:$,selectionStart:m,setDragState:b,setResizeState:d,setRotateState:k,setSelecting:p,setSelection:A,setSelectionStart:Y}},ft=({elements:R,selected:v,setSelected:S})=>{const[b,y]=s.useState(!1),[d,h]=s.useState(null),k=s.useRef(null),N=s.useRef(null),p=s.useCallback(t=>{if(!N.current)return{x:0,y:0};const g=N.current.getBoundingClientRect();return{x:t.clientX-g.left,y:t.clientY-g.top}},[]),$=s.useCallback((t,g,E,C,H,D)=>t>=E&&t<=E+H&&g>=C&&g<=C+D,[]),A=s.useCallback(t=>{if(t.button!==0)return;const g=t.target;if(g.classList.contains("element")||g.classList.contains("resize-handle")||g.classList.contains("rotate-handle"))return;const E=p(t);t.shiftKey||S(new Set),y(!0),k.current=E,h({x:E.x,y:E.y,width:0,height:0})},[p,S]),m=s.useCallback(t=>{if(!b||!k.current)return;const g=p(t),E=k.current,C={x:Math.min(E.x,g.x),y:Math.min(E.y,g.y),width:Math.abs(g.x-E.x),height:Math.abs(g.y-E.y)};h(C)},[b,p]),Y=s.useCallback(()=>{if(!b||!d)return;const t=R.filter(g=>{const E=g.x+g.origin[0]*g.width,C=g.y+g.origin[1]*g.height;return $(E,C,d.x,d.y,d.width,d.height)});if(t.length>0){const g=new Set(v);t.forEach(E=>g.add(E.id)),S(g)}y(!1),h(null),k.current=null},[b,d,R,v,S,$]),I=s.useCallback(t=>{N.current=t},[]);return s.useEffect(()=>(document.addEventListener("mousemove",m),document.addEventListener("mouseup",Y),()=>{document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",Y)}),[m,Y]),{selecting:b,selection:d,setCanvasRef:I,handleCanvasMouseDown:A}};exports.SelectionBox=ut;exports.TransformableItem=ct;exports.TransformableProvider=at;exports.defaultTheme=B;exports.useSelectionTool=ft;exports.useTransformable=dt;
//# sourceMappingURL=index.js.map