UNPKG

react-es-drager

Version:

A draggable, resizable, rotatable component based on react

github.com/kakajun/react-es-drager

kakajun/react-es-drager

31 lines (28 loc) • 29.2 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(function(x,me){typeof exports=="object"&&typeof module<"u"?module.exports=me(require("react")):typeof define=="function"&&define.amd?define(["react"],me):(x=typeof globalThis<"u"?globalThis:x||self,x.ESDrager=me(x.React))})(this,function(x){"use strict";var me={exports:{}},Me={};/** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */var ot;function pt(){if(ot)return Me;ot=1;var r=x,n=Symbol.for("react.element"),t=Symbol.for("react.fragment"),o=Object.prototype.hasOwnProperty,a=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,_={key:!0,ref:!0,__self:!0,__source:!0};function g(f,u,p){var y,c={},S=null,j=null;p!==void 0&&(S=""+p),u.key!==void 0&&(S=""+u.key),u.ref!==void 0&&(j=u.ref);for(y in u)o.call(u,y)&&!_.hasOwnProperty(y)&&(c[y]=u[y]);if(f&&f.defaultProps)for(y in u=f.defaultProps,u)c[y]===void 0&&(c[y]=u[y]);return{$$typeof:n,type:f,key:S,ref:j,props:c,_owner:a.current}}return Me.Fragment=t,Me.jsx=g,Me.jsxs=g,Me}var Pe={};/** * @license React * react-jsx-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */var it;function yt(){return it||(it=1,process.env.NODE_ENV!=="production"&&function(){var r=x,n=Symbol.for("react.element"),t=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),_=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),f=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),y=Symbol.for("react.suspense_list"),c=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),j=Symbol.for("react.offscreen"),k=Symbol.iterator,w="@@iterator";function T(e){if(e===null||typeof e!="object")return null;var i=k&&e[k]||e[w];return typeof i=="function"?i:null}var M=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function b(e){{for(var i=arguments.length,s=new Array(i>1?i-1:0),h=1;h<i;h++)s[h-1]=arguments[h];O("error",e,s)}}function O(e,i,s){{var h=M.ReactDebugCurrentFrame,R=h.getStackAddendum();R!==""&&(i+="%s",s=s.concat([R]));var P=s.map(function(E){return String(E)});P.unshift("Warning: "+i),Function.prototype.apply.call(console[e],console,P)}}var oe=!1,ee=!1,L=!1,C=!1,V=!1,D;D=Symbol.for("react.module.reference");function ge(e){return!!(typeof e=="string"||typeof e=="function"||e===o||e===_||V||e===a||e===p||e===y||C||e===j||oe||ee||L||typeof e=="object"&&e!==null&&(e.$$typeof===S||e.$$typeof===c||e.$$typeof===g||e.$$typeof===f||e.$$typeof===u||e.$$typeof===D||e.getModuleId!==void 0))}function we(e,i,s){var h=e.displayName;if(h)return h;var R=i.displayName||i.name||"";return R!==""?s+"("+R+")":s}function be(e){return e.displayName||"Context"}function B(e){if(e==null)return null;if(typeof e.tag=="number"&&b("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case o:return"Fragment";case t:return"Portal";case _:return"Profiler";case a:return"StrictMode";case p:return"Suspense";case y:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case f:var i=e;return be(i)+".Consumer";case g:var s=e;return be(s._context)+".Provider";case u:return we(e,e.render,"ForwardRef");case c:var h=e.displayName||null;return h!==null?h:B(e.type)||"Memo";case S:{var R=e,P=R._payload,E=R._init;try{return B(E(P))}catch{return null}}}return null}var ue=Object.assign,le=0,Ee,xe,d,v,q,U,Q;function te(){}te.__reactDisabledLog=!0;function ve(){{if(le===0){Ee=console.log,xe=console.info,d=console.warn,v=console.error,q=console.group,U=console.groupCollapsed,Q=console.groupEnd;var e={configurable:!0,enumerable:!0,value:te,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}le++}}function pe(){{if(le--,le===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:ue({},e,{value:Ee}),info:ue({},e,{value:xe}),warn:ue({},e,{value:d}),error:ue({},e,{value:v}),group:ue({},e,{value:q}),groupCollapsed:ue({},e,{value:U}),groupEnd:ue({},e,{value:Q})})}le<0&&b("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var W=M.ReactCurrentDispatcher,l;function A(e,i,s){{if(l===void 0)try{throw Error()}catch(R){var h=R.stack.trim().match(/\n( *(at )?)/);l=h&&h[1]||""}return` `+l+e}}var Y=!1,N;{var fe=typeof WeakMap=="function"?WeakMap:Map;N=new fe}function K(e,i){if(!e||Y)return"";{var s=N.get(e);if(s!==void 0)return s}var h;Y=!0;var R=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var P;P=W.current,W.current=null,ve();try{if(i){var E=function(){throw Error()};if(Object.defineProperty(E.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(E,[])}catch(ne){h=ne}Reflect.construct(e,[],E)}else{try{E.call()}catch(ne){h=ne}e.call(E.prototype)}}else{try{throw Error()}catch(ne){h=ne}e()}}catch(ne){if(ne&&h&&typeof ne.stack=="string"){for(var m=ne.stack.split(` `),H=h.stack.split(` `),z=m.length-1,$=H.length-1;z>=1&&$>=0&&m[z]!==H[$];)$--;for(;z>=1&&$>=0;z--,$--)if(m[z]!==H[$]){if(z!==1||$!==1)do if(z--,$--,$<0||m[z]!==H[$]){var ae=` `+m[z].replace(" at new "," at ");return e.displayName&&ae.includes("<anonymous>")&&(ae=ae.replace("<anonymous>",e.displayName)),typeof e=="function"&&N.set(e,ae),ae}while(z>=1&&$>=0);break}}}finally{Y=!1,W.current=P,pe(),Error.prepareStackTrace=R}var De=e?e.displayName||e.name:"",Re=De?A(De):"";return typeof e=="function"&&N.set(e,Re),Re}function G(e,i,s){return K(e,!1)}function ie(e){var i=e.prototype;return!!(i&&i.isReactComponent)}function J(e,i,s){if(e==null)return"";if(typeof e=="function")return K(e,ie(e));if(typeof e=="string")return A(e);switch(e){case p:return A("Suspense");case y:return A("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case u:return G(e.render);case c:return J(e.type,i,s);case S:{var h=e,R=h._payload,P=h._init;try{return J(P(R),i,s)}catch{}}}return""}var Z=Object.prototype.hasOwnProperty,re={},de=M.ReactDebugCurrentFrame;function I(e){if(e){var i=e._owner,s=J(e.type,e._source,i?i.type:null);de.setExtraStackFrame(s)}else de.setExtraStackFrame(null)}function ze(e,i,s,h,R){{var P=Function.call.bind(Z);for(var E in e)if(P(e,E)){var m=void 0;try{if(typeof e[E]!="function"){var H=Error((h||"React class")+": "+s+" type `"+E+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[E]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw H.name="Invariant Violation",H}m=e[E](i,E,h,s,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(z){m=z}m&&!(m instanceof Error)&&(I(R),b("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",h||"React class",s,E,typeof m),I(null)),m instanceof Error&&!(m.message in re)&&(re[m.message]=!0,I(R),b("Failed %s type: %s",s,m.message),I(null))}}}var Fe=Array.isArray;function _e(e){return Fe(e)}function se(e){{var i=typeof Symbol=="function"&&Symbol.toStringTag,s=i&&e[Symbol.toStringTag]||e.constructor.name||"Object";return s}}function ut(e){try{return je(e),!1}catch{return!0}}function je(e){return""+e}function Xe(e){if(ut(e))return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",se(e)),je(e)}var Te=M.ReactCurrentOwner,Se={key:!0,ref:!0,__self:!0,__source:!0},ke,Ie,Ce;Ce={};function We(e){if(Z.call(e,"ref")){var i=Object.getOwnPropertyDescriptor(e,"ref").get;if(i&&i.isReactWarning)return!1}return e.ref!==void 0}function $e(e){if(Z.call(e,"key")){var i=Object.getOwnPropertyDescriptor(e,"key").get;if(i&&i.isReactWarning)return!1}return e.key!==void 0}function He(e,i){if(typeof e.ref=="string"&&Te.current&&i&&Te.current.stateNode!==i){var s=B(Te.current.type);Ce[s]||(b('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',B(Te.current.type),e.ref),Ce[s]=!0)}}function et(e,i){{var s=function(){ke||(ke=!0,b("%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://reactjs.org/link/special-props)",i))};s.isReactWarning=!0,Object.defineProperty(e,"key",{get:s,configurable:!0})}}function Ue(e,i){{var s=function(){Ie||(Ie=!0,b("%s: `ref` 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://reactjs.org/link/special-props)",i))};s.isReactWarning=!0,Object.defineProperty(e,"ref",{get:s,configurable:!0})}}var Ne=function(e,i,s,h,R,P,E){var m={$$typeof:n,type:e,key:i,ref:s,props:E,_owner:P};return m._store={},Object.defineProperty(m._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(m,"_self",{configurable:!1,enumerable:!1,writable:!1,value:h}),Object.defineProperty(m,"_source",{configurable:!1,enumerable:!1,writable:!1,value:R}),Object.freeze&&(Object.freeze(m.props),Object.freeze(m)),m};function Be(e,i,s,h,R){{var P,E={},m=null,H=null;s!==void 0&&(Xe(s),m=""+s),$e(i)&&(Xe(i.key),m=""+i.key),We(i)&&(H=i.ref,He(i,R));for(P in i)Z.call(i,P)&&!Se.hasOwnProperty(P)&&(E[P]=i[P]);if(e&&e.defaultProps){var z=e.defaultProps;for(P in z)E[P]===void 0&&(E[P]=z[P])}if(m||H){var $=typeof e=="function"?e.displayName||e.name||"Unknown":e;m&&et(E,$),H&&Ue(E,$)}return Ne(e,m,H,R,h,Te.current,E)}}var Oe=M.ReactCurrentOwner,Ke=M.ReactDebugCurrentFrame;function ye(e){if(e){var i=e._owner,s=J(e.type,e._source,i?i.type:null);Ke.setExtraStackFrame(s)}else Ke.setExtraStackFrame(null)}var tt;tt=!1;function rt(e){return typeof e=="object"&&e!==null&&e.$$typeof===n}function lt(){{if(Oe.current){var e=B(Oe.current.type);if(e)return` Check the render method of \``+e+"`."}return""}}function jt(e){return""}var ft={};function Ot(e){{var i=lt();if(!i){var s=typeof e=="string"?e:e.displayName||e.name;s&&(i=` Check the top-level render call using <`+s+">.")}return i}}function dt(e,i){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var s=Ot(i);if(ft[s])return;ft[s]=!0;var h="";e&&e._owner&&e._owner!==Oe.current&&(h=" It was passed a child from "+B(e._owner.type)+"."),ye(e),b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',s,h),ye(null)}}function ht(e,i){{if(typeof e!="object")return;if(_e(e))for(var s=0;s<e.length;s++){var h=e[s];rt(h)&&dt(h,i)}else if(rt(e))e._store&&(e._store.validated=!0);else if(e){var R=T(e);if(typeof R=="function"&&R!==e.entries)for(var P=R.call(e),E;!(E=P.next()).done;)rt(E.value)&&dt(E.value,i)}}}function Lt(e){{var i=e.type;if(i==null||typeof i=="string")return;var s;if(typeof i=="function")s=i.propTypes;else if(typeof i=="object"&&(i.$$typeof===u||i.$$typeof===c))s=i.propTypes;else return;if(s){var h=B(i);ze(s,e.props,"prop",h,e)}else if(i.PropTypes!==void 0&&!tt){tt=!0;var R=B(i);b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",R||"Unknown")}typeof i.getDefaultProps=="function"&&!i.getDefaultProps.isReactClassApproved&&b("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Yt(e){{for(var i=Object.keys(e.props),s=0;s<i.length;s++){var h=i[s];if(h!=="children"&&h!=="key"){ye(e),b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",h),ye(null);break}}e.ref!==null&&(ye(e),b("Invalid attribute `ref` supplied to `React.Fragment`."),ye(null))}}var gt={};function vt(e,i,s,h,R,P){{var E=ge(e);if(!E){var m="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(m+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var H=jt();H?m+=H:m+=lt();var z;e===null?z="null":_e(e)?z="array":e!==void 0&&e.$$typeof===n?(z="<"+(B(e.type)||"Unknown")+" />",m=" Did you accidentally export a JSX literal instead of a component?"):z=typeof e,b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",z,m)}var $=Be(e,i,s,R,P);if($==null)return $;if(E){var ae=i.children;if(ae!==void 0)if(h)if(_e(ae)){for(var De=0;De<ae.length;De++)ht(ae[De],e);Object.freeze&&Object.freeze(ae)}else b("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 ht(ae,e)}if(Z.call(i,"key")){var Re=B(e),ne=Object.keys(i).filter(function(Ut){return Ut!=="key"}),nt=ne.length>0?"{key: someKey, "+ne.join(": ..., ")+": ...}":"{key: someKey}";if(!gt[Re+nt]){var $t=ne.length>0?"{"+ne.join(": ..., ")+": ...}":"{}";b(`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} />`,nt,Re,$t,Re),gt[Re+nt]=!0}}return e===o?Yt($):Lt($),$}}function zt(e,i,s){return vt(e,i,s,!0)}function Ft(e,i,s){return vt(e,i,s,!1)}var Xt=Ft,It=zt;Pe.Fragment=o,Pe.jsx=Xt,Pe.jsxs=It}()),Pe}process.env.NODE_ENV==="production"?me.exports=pt():me.exports=yt();var ce=me.exports;function Ve(r,n){const t=o=>{n&&n(o),document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",t),document.removeEventListener("mouseleave",t),document.removeEventListener("touchmove",r),document.removeEventListener("touchend",t)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",t),document.addEventListener("mouseleave",t),document.addEventListener("touchmove",r),document.addEventListener("touchend",t)}function Ae(r){let n=0,t=0;if(mt(r)){const o=r.targetTouches[0];n=o.pageX,t=o.pageY}else n=r.clientX,t=r.clientY;return{clientX:n,clientY:t}}function mt(r){const n=Object.prototype.toString.call(r);return n.substring(8,n.length-1)==="TouchEvent"}const Le=(r=0)=>parseInt(r+"")+"px",qe={n:"top",s:"bottom",e:"right",w:"left",ne:"top-right",nw:"top-left",se:"bottom-right",sw:"bottom-left"},Ge=["n","ne","e","se","s","sw","w","nw"],wt={n:0,ne:1,e:2,se:3,s:4,sw:5,w:6,nw:7},bt={0:0,1:1,2:2,3:2,4:3,5:4,6:4,7:5,8:6,9:6,10:7,11:8},Et=(r,n)=>{const t=bt[Math.floor(r/30)],a=(wt[n]+t)%8;return Ge[a]},st=(r=0,n)=>{let t=[];for(let o=0;o<Ge.length;o++){const a=Ge[o],[_,g]=qe[a].split("-"),f=Et(r,a),u={[_]:"0%",cursor:f+"-resize",side:qe[a]};if(g)u[g]="0%";else{const p=["top","bottom"].includes(_)?"left":"top";u[p]="50%"}n?n.includes(qe[a])&&t.push(u):t.push(u)}return t},Je=r=>r*Math.PI/180,xt=(r,n)=>Math.sqrt(r*r+n*n),F=r=>Math.cos(Je(r)),X=r=>Math.sin(Je(r)),_t=(r,n,t,o,a,_,g)=>{let{width:f,height:u,centerX:p,centerY:y,rotateAngle:c}=n;const S=f<0?-1:1,j=u<0?-1:1;if(f=Math.abs(f),u=Math.abs(u),["top-left","top-right","bottom-left","bottom-right"].includes(r)){r==="top-right"?o=-o:r==="bottom-left"?t=-t:r==="top-left"&&(t=-t,o=-o);const k=Qe(f,t,_);f=k.width,t=k.deltaW;const w=Ze(u,o,g);u=w.height,o=w.deltaH,a&&(o=t/a,u=f/a)}switch(r){case"right":{const k=Qe(f,t,_);f=k.width,t=k.deltaW,a?(o=t/a,u=f/a,p+=t/2*F(c)-o/2*X(c),y+=t/2*X(c)+o/2*F(c)):(p+=t/2*F(c),y+=t/2*X(c));break}case"top-right":{p+=t/2*F(c)+o/2*X(c),y+=t/2*X(c)-o/2*F(c);break}case"bottom-right":{p+=t/2*F(c)-o/2*X(c),y+=t/2*X(c)+o/2*F(c);break}case"bottom":{const k=Ze(u,o,g);u=k.height,o=k.deltaH,a?(t=o*a,f=u*a,p+=t/2*F(c)-o/2*X(c),y+=t/2*X(c)+o/2*F(c)):(p-=o/2*X(c),y+=o/2*F(c));break}case"bottom-left":{p-=t/2*F(c)+o/2*X(c),y-=t/2*X(c)-o/2*F(c);break}case"left":{t=-t;const k=Qe(f,t,_);f=k.width,t=k.deltaW,a?(u=f/a,o=t/a,p-=t/2*F(c)+o/2*X(c),y-=t/2*X(c)-o/2*F(c)):(p-=t/2*F(c),y-=t/2*X(c));break}case"top-left":{p-=t/2*F(c)-o/2*X(c),y-=t/2*X(c)+o/2*F(c);break}case"top":{o=-o;const k=Ze(u,o,g);u=k.height,o=k.deltaH,a?(f=u*a,t=o*a,p+=t/2*F(c)+o/2*X(c),y+=t/2*X(c)-o/2*F(c)):(p+=o/2*X(c),y-=o/2*F(c));break}}return{position:{centerX:p,centerY:y},size:{width:f*S,height:u*j}}},Ze=(r,n,t)=>{const o=r+n;return o>t?r=o:(n=t-r,r=t),{height:r,deltaH:n}},Qe=(r,n,t)=>{const o=r+n;return o>t?r=o:(n=t-r,r=t),{width:r,deltaW:n}},Tt=({centerX:r,centerY:n,width:t,height:o,angle:a})=>({top:n-o/2,left:r-t/2,width:t,height:o,angle:a}),kt=(r,n,t)=>{const{width:o,height:a}=r;return{width:Math.abs(o),height:Math.abs(a),left:n-Math.abs(o)/2,top:t-Math.abs(a)/2}};function Ye(r,n){const t=Math.abs(r)%n,o=r>0?n:-n;let a=0;return t>n/2?a=o*Math.ceil(Math.abs(r)/n):a=o*Math.floor(Math.abs(r)/n),a}function Rt(r,n,t){if(!r||!n)return!1;const o=he(r,t),a=he(n,t);return o.left<a.left+a.width&&o.left+o.width>a.left&&o.top<a.top+a.height&&o.top+o.height>a.top}const he=(r,n)=>{var t=r.getBoundingClientRect();return{...t,left:t.left/n,top:t.top/n,right:t.right/n,bottom:t.bottom/n,width:t.width/n,height:t.height/n}},St=({dragData:r,element:n,children:t,onRotate:o,onRotateStart:a,onRotateEnd:_})=>{const g=x.useRef(null),f=u=>{const p=u.nativeEvent;if(!n){console.warn("[es-drager] rotate component needs drag element property");return}p.stopPropagation();const{width:y,height:c,left:S,top:j}=n.getBoundingClientRect(),k=S+y/2,w=j+c/2;a&&a(r);let T=0;Ve(O=>{const{clientX:oe,clientY:ee}=Ae(O),L=k-oe,C=w-ee;T=(Math.atan2(C,L)*180/Math.PI-90+360)%360,o(T)},()=>{_(T)})};return ce.jsx("div",{ref:g,className:"es-drager-rotate",onMouseDown:f,onTouchStart:f,children:t||ce.jsx("div",{className:"es-drager-rotate-handle",children:ce.jsx("svg",{viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",children:ce.jsx("path",{fill:"currentColor",d:"M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"})})})})},at=r=>typeof r=="function";function Ct(r,n){const t=n.color||"#3a7afe",o=n.scaleRatio||1,a=x.useRef(null),_=x.useRef(null),g=x.useRef(null),f=x.useRef(null);x.useEffect(()=>{r.current&&(g.current=r.current.offsetParent||document.body,f.current=he(g.current,o))},[r,n.scaleRatio]);const u=x.useRef({x:null,y:null}),p=()=>{n.markline&&!at(n.markline)&&(a.current||(a.current=document.querySelector(".es-drager-markline-x")||ct("x",g.current,t)),_.current||(_.current=document.querySelector(".es-drager-markline-y")||ct("y",g.current,t)))},y=(w={})=>{if(n.markline){if(at(n.markline))return n.markline(w);w.left===null?a.current&&(a.current.style.display="none"):a.current&&(a.current.style.left=`${w.left}px`,a.current.style.backgroundColor=t,a.current.style.display="block"),w.top===null?_.current&&(_.current.style.display="none"):_.current&&(_.current.style.top=`${w.top}px`,_.current.style.backgroundColor=t,_.current.style.display="block")}},c=()=>{debugger;const w=he(r.current,o),T=Array.from(document.querySelectorAll(".es-drager"));if(n.extraLines){const b=n.extraLines(w)||[];T.push(...b)}const M=[];for(let b=0;b<T.length;b++){const O=T[b];O.nodeType===1?O!==r.current&&M.push(he(O,o)):O.showTop||O.showTop===0||O.showLeft||O.showLeft}u.current=Dt(M,w)},S=()=>{var b,O,oe,ee;const w={top:null,left:null,diffX:0,diffY:0},T=he(r.current,o),M=n.snapThreshold??10;if((b=u.current)!=null&&b.y)for(let L=0;L<u.current.y.length;L++){const{top:C,showTop:V}=u.current.y[L];if(Math.abs(C-T.top)<M){w.diffY=C-T.top,w.top=V-(((O=f.current)==null?void 0:O.top)??0);break}}if((oe=u.current)!=null&&oe.x)for(let L=0;L<u.current.x.length;L++){const{left:C,showLeft:V}=u.current.x[L];if(Math.abs(C-T.left)<M){w.diffX=C-T.left,w.left=V-(((ee=f.current)==null?void 0:ee.left)??0);break}}return y(w),w},j=()=>{y({left:null,top:null})},k=w=>{if(!(!n.snap&&!n.markline))switch(w){case"drag-start":c();break;case"drag":return S();case"drag-end":j();break}};return x.useEffect(()=>{p()},[]),{marklineEmit:k}}function ct(r="x",n,t){const o=document.createElement("div");return o.classList.add(`es-drager-markline-${r}`),o.style.position="absolute",o.style.top="0px",o.style.left="0px",o.style.zIndex="9999",o.style.backgroundColor=t,o.style.display="none",r==="x"?(o.style.height="100%",o.style.width="1px"):(o.style.height="1px",o.style.width="100%"),n&&n.appendChild(o),o}function Dt(r,n){const t={x:[],y:[]},{width:o=0,height:a=0}=n;return r.forEach(_=>{const{top:g,left:f,width:u,height:p}=_;t.y.push({showTop:g,top:g}),t.y.push({showTop:g,top:g-a}),t.y.push({showTop:g+p/2,top:g+p/2-a/2}),t.y.push({showTop:g+p,top:g+p}),t.y.push({showTop:g+p,top:g+p-a}),t.x.push({showLeft:f,left:f}),t.x.push({showLeft:f+u,left:f+u}),t.x.push({showLeft:f+u/2,left:f+u/2-o/2}),t.x.push({showLeft:f+u,left:f+u-o}),t.x.push({showLeft:f,left:f-o})}),t}function Mt(r,n,t,o,{getBoundary:a,fixBoundary:_,checkDragerCollision:g}){let f=0,u=0;return{handleKeyDown:c=>{let{left:S,top:j}=n;f||(f=S),u||(u=j);const k=r.gridX??50,w=r.gridY??50;if(["ArrowRight","ArrowLeft"].includes(c.key)){const T=c.key==="ArrowRight";let M=T?1:-1;r.snapToGrid&&(M=T?k:-k),S=S+M}else if(["ArrowUp","ArrowDown"].includes(c.key)){const T=c.key==="ArrowDown";let M=T?1:-1;r.snapToGrid&&(M=T?w:-w),j=j+M}if(r.boundary){const[T,M,b,O]=a();[S,j]=_(S,j,T,M,b,O)}!r.size&&t(T=>({...T,left:S,top:j})),o("drag",{...n,left:S,top:j})},handleKeyUp:c=>{["ArrowRight","ArrowLeft","ArrowUp","ArrowDown"].includes(c.key)&&r.checkCollision&&g()&&(!r.size&&t(S=>({...S,left:f,top:u})),o("drag-end",{...n,left:f,top:u})),f=0,u=0}}}const Pt={width:100,height:100,left:0,top:0,angle:0};function At(r,n){var xe;const{scaleRatio:t=1,onDragStart:o,onDrag:a,onDragEnd:_,onChange:g,onResize:f,onResizeStart:u,onResizeEnd:p,onRotate:y,onRotateStart:c,onRotateEnd:S,onFocus:j,onBlur:k}=n,w=(d,v)=>{g==null||g(v),d==="drag"&&(a==null||a(v)),d==="drag-start"&&(o==null||o(v)),d==="drag-end"&&(_==null||_(v)),d==="resize"&&(f==null||f(v)),d==="rotate"&&(y==null||y(v)),d==="resize-start"&&(u==null||u(v)),d==="resize-end"&&(p==null||p(v)),d==="rotate-start"&&(c==null||c(v)),d==="rotate-end"&&(S==null||S(v))},T=n.size||n.defaultSize||Pt,[M,b]=x.useState(!1),[O,oe]=x.useState(n.selected||!1);x.useEffect(()=>{oe(n.selected||!1)},[n.selected]);const[ee,L]=x.useState({width:T.width||0,height:T.height||0,left:T.left||0,top:T.top||0,angle:T.angle||0}),C={...n.size||ee,angle:((xe=n.size)==null?void 0:xe.angle)??ee.angle};x.useEffect(()=>{},[M]);const{marklineEmit:V}=Ct(r,n),D=new Set;function ge(d){if(D.add(d.button),n.disabled)return;b(!0),oe(!0);let{clientX:v,clientY:q}=Ae(d);const{left:U,top:Q}=C;let te=0,ve=0,pe=0,W=0;n.boundary&&([te,ve,pe,W]=we()),V("drag-start"),w("drag-start",C);let l=C;Ve(Y=>{if(D.size>1)return;const{clientX:N,clientY:fe}=Ae(Y);let K=(N-v)/t+U,G=(fe-q)/t+Q;if(n.snapToGrid){const{left:ie,top:J}=C,Z=K-ie,re=G-J;K=ie+Ye(Z,n.gridX||50),G=J+Ye(re,n.gridY||50)}n.boundary&&([K,G]=be(K,G,te,ve,pe,W)),l={...C,left:K,top:G},!n.size&&L(l),w("drag",l)},Y=>{n.checkCollision&&B()&&!n.size&&L(fe=>({...fe,top:Q,left:U})),D.clear(),b(!1),V("drag-end")})}x.useEffect(()=>{if(M){const d=V("drag");if(n.snap&&d){if(d.diffX){const v={...C,left:C.left+((d==null?void 0:d.diffX)||0)};!n.size&&L(v),g==null||g(v)}if(d.diffY){const v={...C,top:C.top+((d==null?void 0:d.diffY)||0)};!n.size&&L(v),g==null||g(v)}}}},[n.size,C]);const we=()=>{var Y;let d=0,v=0;const{left:q,top:U,height:Q,width:te,angle:ve}=C,pe=((Y=r.current)==null?void 0:Y.offsetParent)||document.body,W=he(pe,t);if(ve){const N=he(r.current,t);d=N.left-Math.floor(q-(N.width-te)+W.left),v=N.top-Math.floor(U-(N.height-Q)+W.top)}const l=W.width-te,A=W.height-Q;return[d,l-d,v,A-v,W.width,W.height]},be=(d,v,q,U,Q,te)=>(d=d<q?q:d,d=d>U?U:d,v=v<Q?Q:v,v=v>te?te:v,[d,v]),B=()=>{var q;const d=((q=r.current)==null?void 0:q.offsetParent)||document.body,v=Array.from(d.children).filter(U=>U!==r.current&&U.classList.contains("es-drager"));for(let U=0;U<v.length;U++){const Q=v[U];if(Rt(r.current,Q,t))return!0}return!1},ue=()=>{oe(!1)},{handleKeyDown:le,handleKeyUp:Ee}=Mt(n,C,L,w,{getBoundary:we,fixBoundary:be,checkDragerCollision:B});return x.useEffect(()=>{if(r.current){if(!C.width&&!C.height){const{width:d,height:v}=he(r.current,t);!n.size&&L(q=>({...q,width:d||100,height:v||100}))}return r.current.addEventListener("mousedown",ge),r.current.addEventListener("touchstart",ge,{passive:!0}),()=>{var d,v;(d=r.current)==null||d.removeEventListener("mousedown",ge),(v=r.current)==null||v.removeEventListener("touchstart",ge)}}},[ee,n.size]),x.useEffect(()=>(O&&(j&&j(O),document.addEventListener("click",ue,{once:!0}),n.disabledKeyEvent||(document.addEventListener("keydown",le),document.addEventListener("keyup",Ee))),()=>{k&&k(O),n.disabledKeyEvent||(document.removeEventListener("keydown",le),document.removeEventListener("keyup",Ee))}),[O]),{triggerEvent:w,isMousedown:M,selected:O,setSelected:oe,setDragData:L,currentDragData:C,getBoundary:we,checkDragerCollision:B}}return r=>{const{type:n="rect",disabled:t,border:o=!0,resizable:a=!0,rotatable:_,zIndex:g=1,color:f="#3a7afe",scaleRatio:u=1,resizeList:p,minWidth:y=1,minHeight:c=1,equalProportion:S,maxWidth:j=99999,maxHeight:k=9999,snapToGrid:w,gridX:T=50,gridY:M=50,boundary:b,children:O,checkCollision:oe}=r,ee=x.useRef(null),{selected:L,setDragData:C,triggerEvent:V,currentDragData:D,isMousedown:ge,getBoundary:we,checkDragerCollision:be}=At(ee,r),[B,ue]=x.useState(st(0,p)),le=x.useMemo(()=>_&&!t&&L,[a,t,L]),Ee=x.useMemo(()=>a&&!t,[a,t]),xe=x.useMemo(()=>r.type!=="text"?B:B.filter(l=>!["top","bottom"].includes(l.side)),[r.type,B]),d=x.useMemo(()=>{var J,Z,re,de,I;const{width:l,height:A,left:Y,top:N,angle:fe}=D,K={...r.style||{}};K.width=((J=r.size)==null?void 0:J.width)??Le(l);const G=((Z=r.size)==null?void 0:Z.height)??A;G&&(r.type==="text"?K.fontSize=G+"px":K.height=Le(G));let ie=[`translateX(${Le(((re=r.size)==null?void 0:re.left)??Y)})`,`translateY(${Le(((de=r.size)==null?void 0:de.top)??N)})`,`rotate(${((I=r.size)==null?void 0:I.angle)??fe}deg)`];return{...K,zIndex:g,transform:ie.join(" "),"--es-drager-color":f}},[D,r.size]),v=l=>{ue(st(l,p)),V("rotate-end",{...D,angle:l})},q=x.useCallback((l,A)=>{if(t)return;A.stopPropagation();const{clientX:Y,clientY:N}=Ae(A),fe=Y,K=N,{width:G,height:ie,left:J,top:Z}=D,re=J+G/2,de=Z+ie/2,I={width:G,height:ie,centerX:re,centerY:de,rotateAngle:D.angle},ze=l.side;V("resize-start",D);let Fe=[];b&&(Fe=we());let _e=r.aspectRatio;["text","image"].includes(n)&&ze.includes("-")&&(_e=I.width/I.height);let se=null;Ve(je=>{const{clientX:Xe,clientY:Te}=Ae(je);let Se=(Xe-fe)/u,ke=(Te-K)/u;w&&(Se=Ye(Se,T),ke=Ye(ke,M));const Ie=Math.atan2(ke,Se),Ce=xt(Se,ke),We=je.shiftKey,$e=Ie-Je(I.rotateAngle),He=Ce*Math.cos($e),et=Ce*Math.sin($e),Ue=(S||We)&&!_e?I.width/I.height:_e,{position:{centerX:Ne,centerY:Be},size:{width:Oe,height:Ke}}=_t(ze,{...I,rotateAngle:I.rotateAngle},He,et,Ue,y,c),ye=Tt({centerX:Ne,centerY:Be,width:Oe,height:Ke,angle:D.angle});se={...D,...kt(ye,Ne,Be)},j>0&&(se.width=Math.min(se.width,j)),k>0&&(se.height=Math.min(se.height,k)),b&&(se=U(se,Fe,Ue)),!r.size&&C(se),V("resize",se)},()=>{oe&&be()&&!r.size&&C({...D,width:G,height:ie,left:J,top:Z}),se&&V("resize-end",se)})},[D]),U=(l,A,Y)=>{const[N,fe,K,G,ie,J]=A,Z=l.left<N,re=l.left+l.width>ie,de=l.top<K,I=l.top+l.height>J;return Z&&(l.left=N,l.width=D.width),de&&(l.top=K,l.height=D.height),(re||I)&&(re&&(l.left=D.left),I&&(l.top=D.top),I||(l.width=ie-l.left),re||(l.height=J-l.top)),(I||de)&&Y&&(l.width=D.width,l.left=D.left),(re||Z)&&Y&&(l.height=D.height,l.top=D.top),l},[Q,te,ve]=x.Children.toArray(O).reduce((l,A)=>{if(x.isValidElement(A)){const Y=A.props.slot;Y==="rotate"?l[2]=A:Y==="resize"?l[1]=A:l[0].push(A)}else l[0].push(A);return l},[[],null,null]),pe=l=>{!r.size&&C({...D,angle:l}),V("rotate",{...D,angle:l})},W=r.tag||"div";return ce.jsxs(W,{ref:ee,className:[r.className,"es-drager",`es-drager-${n}`,o?"border":"",L?"selected":"",t?"disabled":"",ge?"dragging":""].join(" "),style:d,onClick:l=>l.stopPropagation(),onMouseDown:l=>l.stopPropagation(),children:[Q.map((l,A)=>ce.jsx(x.Fragment,{children:l},A)),Ee&&ce.jsx(ce.Fragment,{children:xe.map((l,A)=>ce.jsx("div",{className:"es-drager-dot","data-side":l.side,style:{...l},onMouseDown:Y=>q(l,Y),onTouchStart:Y=>q(l,Y),children:te||ce.jsx("div",{className:"es-drager-dot-handle"})},A))}),le&&ce.jsx(St,{dragData:D,element:ee.current,onRotate:pe,onRotateStart:l=>V("rotate-start",l),onRotateEnd:v,children:ve})]})}});