es-drager
Version:
A draggable, resizable, rotatable component based on vue3
2 lines (1 loc) • 19.1 kB
JavaScript
(function(z,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(z=typeof globalThis<"u"?globalThis:z||self,s(z.ESDrager={},z.Vue))})(this,function(z,s){"use strict";const W={type:{type:String,default:"rect"},tag:{type:[String,Object],default:"div"},resizable:{type:Boolean,default:!0},rotatable:{type:Boolean,default:!1},skewable:{type:Boolean,default:!1},boundary:{type:Boolean},disabled:Boolean,width:{type:Number,default:0},height:{type:Number,default:0},left:{type:Number,default:0},top:{type:Number,default:0},zIndex:{type:Number,default:0},angle:{type:Number,default:0},skew:{type:Array,default:()=>[0,0]},color:{type:String,default:"#3a7afe"},minWidth:{type:Number,default:-1/0},minHeight:{type:Number,default:-1/0},maxWidth:{type:Number,default:0},maxHeight:{type:Number,default:0},aspectRatio:{type:Number},selected:Boolean,snapToGrid:Boolean,gridX:{type:Number,default:50},gridY:{type:Number,default:50},scaleRatio:{type:Number,default:1},disabledKeyEvent:Boolean,border:{type:Boolean,default:!0},resizeList:{type:Array},equalProportion:{type:Boolean},checkCollision:{type:Boolean},snap:Boolean,snapThreshold:{type:Number,default:10},markline:[Boolean,Function],extraLines:Function};function I(o,n){const e=t=>{n&&n(t),document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",e),document.removeEventListener("mouseleave",e),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",e)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",e),document.addEventListener("mouseleave",e),document.addEventListener("touchmove",o),document.addEventListener("touchend",e)}function $(o){let n=0,e=0;if(de(o)){const t=o.targetTouches[0];n=t.pageX,e=t.pageY}else n=o.clientX,e=o.clientY;return{clientX:n,clientY:e}}function de(o){const n=Object.prototype.toString.call(o);return n.substring(8,n.length-1)==="TouchEvent"}const P=(o=0)=>parseInt(o+"")+"px",O={n:"top",s:"bottom",e:"right",w:"left",ne:"top-right",nw:"top-left",se:"bottom-right",sw:"bottom-left"},U=["n","ne","e","se","s","sw","w","nw"],ue={n:0,ne:1,e:2,se:3,s:4,sw:5,w:6,nw:7},fe={0:0,1:1,2:2,3:2,4:3,5:4,6:4,7:5,8:6,9:6,10:7,11:8},he=(o,n)=>{const e=fe[Math.floor(o/30)],i=(ue[n]+e)%8;return U[i]},ee=(o=0,n)=>{let e=[];for(let t=0;t<U.length;t++){const i=U[t],[c,f]=O[i].split("-"),l=he(o,i),d={[c]:"0%",cursor:l+"-resize",side:O[i]};if(f)d[f]="0%";else{const w=["top","bottom"].includes(c)?"left":"top";d[w]="50%"}n?n.includes(O[i])&&e.push(d):e.push(d)}return e},J=o=>o*Math.PI/180,pe=(o,n)=>Math.sqrt(o*o+n*n),x=o=>Math.cos(J(o)),M=o=>Math.sin(J(o)),me=(o,n,e,t,i,c,f)=>{let{width:l,height:d,centerX:w,centerY:b,rotateAngle:r}=n;const S=l<0?-1:1,p=d<0?-1:1;if(l=Math.abs(l),d=Math.abs(d),["top-left","top-right","bottom-left","bottom-right"].includes(o)){o==="top-right"?t=-t:o==="bottom-left"?e=-e:o==="top-left"&&(e=-e,t=-t);const h=Z(l,e,c);l=h.width,e=h.deltaW;const a=Q(d,t,f);d=a.height,t=a.deltaH,i&&(t=e/i,d=l/i)}switch(o){case"right":{const h=Z(l,e,c);l=h.width,e=h.deltaW,i?(t=e/i,d=l/i,w+=e/2*x(r)-t/2*M(r),b+=e/2*M(r)+t/2*x(r)):(w+=e/2*x(r),b+=e/2*M(r));break}case"top-right":{w+=e/2*x(r)+t/2*M(r),b+=e/2*M(r)-t/2*x(r);break}case"bottom-right":{w+=e/2*x(r)-t/2*M(r),b+=e/2*M(r)+t/2*x(r);break}case"bottom":{const h=Q(d,t,f);d=h.height,t=h.deltaH,i?(e=t*i,l=d*i,w+=e/2*x(r)-t/2*M(r),b+=e/2*M(r)+t/2*x(r)):(w-=t/2*M(r),b+=t/2*x(r));break}case"bottom-left":{w-=e/2*x(r)+t/2*M(r),b-=e/2*M(r)-t/2*x(r);break}case"left":{e=-e;const h=Z(l,e,c);l=h.width,e=h.deltaW,i?(d=l/i,t=e/i,w-=e/2*x(r)+t/2*M(r),b-=e/2*M(r)-t/2*x(r)):(w-=e/2*x(r),b-=e/2*M(r));break}case"top-left":{w-=e/2*x(r)-t/2*M(r),b-=e/2*M(r)+t/2*x(r);break}case"top":{t=-t;const h=Q(d,t,f);d=h.height,t=h.deltaH,i?(l=d*i,e=t*i,w+=e/2*x(r)+t/2*M(r),b+=e/2*M(r)-t/2*x(r)):(w+=t/2*M(r),b-=t/2*x(r));break}}return{position:{centerX:w,centerY:b},size:{width:l*S,height:d*p}}},Q=(o,n,e)=>{const t=o+n;return t>e?o=t:(n=e-o,o=e),{height:o,deltaH:n}},Z=(o,n,e)=>{const t=o+n;return t>e?o=t:(n=e-o,o=e),{width:o,deltaW:n}},we=({centerX:o,centerY:n,width:e,height:t,angle:i})=>({top:n-t/2,left:o-e/2,width:e,height:t,angle:i}),ge=(o,n,e)=>{const{width:t,height:i}=o;return{width:Math.abs(t),height:Math.abs(i),left:n-Math.abs(t)/2,top:e-Math.abs(i)/2}};function K(o,n){const e=Math.abs(o)%n,t=o>0?n:-n;let i=0;return e>n/2?i=t*Math.ceil(Math.abs(o)/n):i=t*Math.floor(Math.abs(o)/n),i}function ye(o,n,e){if(!o||!n)return!1;const t=C(o,e),i=C(n,e);return t.left<i.left+i.width&&t.left+t.width>i.left&&t.top<i.top+i.height&&t.top+t.height>i.top}const C=(o,n)=>{var e=o.getBoundingClientRect();return{...e,left:e.left/n,top:e.top/n,right:e.right/n,bottom:e.bottom/n,width:e.width/n,height:e.height/n}},te=o=>typeof o=="function";function ke(o,n){let e=null,t=null;const i=s.computed(()=>o.value.offsetParent||document.body),c=s.computed(()=>C(i.value,n.scaleRatio)),f=s.ref({x:[],y:[]}),l=()=>{n.markline&&!te(n.markline)&&(e||(e=document.querySelector(".es-drager-markline-x")||ne("x",i.value,n.color)),t||(t=document.querySelector(".es-drager-markline-y")||ne("y",i.value,n.color)))},d=(p={})=>{if(n.markline){if((!e||!t)&&l(),te(n.markline))return n.markline(p);p.left===null?e.style.display="none":(e.style.left=p.left+"px",e.style.backgroundColor=n.color,e.style.display="block"),p.top===null?t.style.display="none":(t.style.top=p.top+"px",t.style.backgroundColor=n.color,t.style.display="block")}},w=()=>{const p=C(o.value,n.scaleRatio),h=Array.from(document.querySelectorAll(".es-drager"));if(n.extraLines){const L=n.extraLines(p)||[];h.push(...L)}const a=[],g=[],y=[];for(let L=0;L<h.length;L++){const v=h[L];v.nodeType===1?v!==o.value&&a.push(C(v,n.scaleRatio)):v.showTop||v.showTop===0?y.push(v):(v.showLeft||v.showLeft===0)&&g.push(v)}f.value=be(a,p),f.value.x.push(...g),f.value.y.push(...y)},b=()=>{const p={top:null,left:null,diffX:0,diffY:0},h=C(o.value,n.scaleRatio);for(let a=0;a<f.value.y.length;a++){const{top:g,showTop:y}=f.value.y[a];if(Math.abs(g-h.top)<n.snapThreshold){p.diffY=g-h.top,p.top=y-c.value.top;break}}for(let a=0;a<f.value.x.length;a++){const{left:g,showLeft:y}=f.value.x[a];if(Math.abs(g-h.left)<n.snapThreshold){p.diffX=g-h.left,p.left=y-c.value.left;break}}return d(p),p},r=()=>{d({left:null,top:null})},S=p=>{if(!(!n.snap&&!n.markline))switch(p){case"drag-start":w();break;case"drag":return b();case"drag-end":r();break}};return s.onMounted(()=>{l()}),{marklineEmit:S}}function ne(o="x",n,e=""){const t=document.createElement("div");return t.classList.add(`es-drager-markline-${o}`),t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.zIndex="9999",t.style.backgroundColor=e,t.style.display="none",o==="x"?(t.style.height="100%",t.style.width="1px"):(t.style.height="1px",t.style.width="100%"),n.appendChild(t),t}function be(o,n){const e={x:[],y:[]},{width:t=0,height:i=0}=n;return o.forEach(c=>{const{top:f,left:l,width:d,height:w}=c;e.y.push({showTop:f,top:f}),e.y.push({showTop:f,top:f-i}),e.y.push({showTop:f+w/2,top:f+w/2-i/2}),e.y.push({showTop:f+w,top:f+w}),e.y.push({showTop:f+w,top:f+w-i}),e.x.push({showLeft:l,left:l}),e.x.push({showLeft:l+d,left:l+d}),e.x.push({showLeft:l+d/2,left:l+d/2-t/2}),e.x.push({showLeft:l+d,left:l+d-t}),e.x.push({showLeft:l,left:l-t})}),e}function ve(o,n,e,{getBoundary:t,fixBoundary:i,checkDragerCollision:c,emit:f}){let l=0,d=0;return{onKeydown:r=>{let{left:S,top:p}=n.value;if(l||(l=S),d||(d=p),["ArrowRight","ArrowLeft"].includes(r.key)){const h=r.key==="ArrowRight";let a=h?1:-1;o.snapToGrid&&(a=h?o.gridX:-o.gridX),S=S+a}else if(["ArrowUp","ArrowDown"].includes(r.key)){const h=r.key==="ArrowDown";let a=h?1:-1;o.snapToGrid&&(a=h?o.gridY:-o.gridY),p=p+a}if(o.boundary){const[h,a,g,y]=t();[S,p]=i(S,p,h,a,g,y)}n.value.left=S,n.value.top=p},onKeyup:r=>{["ArrowRight","ArrowLeft","ArrowUp","ArrowDown"].includes(r.key)&&o.checkCollision&&c()&&(n.value.left=l,n.value.top=d),l=0,d=0}}}function Le(o,n,e){const t=s.ref(!1),i=s.ref(!1),c=s.ref({width:n.width,height:n.height,left:n.left,top:n.top,angle:n.angle,skew:n.skew}),{marklineEmit:f}=ke(o,n),l=new Set;function d(a){if(l.add(a.button),n.disabled)return;t.value=!0,i.value=!0;let{clientX:g,clientY:y}=$(a);const{left:L,top:v}=c.value;let u=0,m=0,k=0,E=0;n.boundary&&([u,m,k,E]=w()),f("drag-start"),e&&e("drag-start",c.value),I(Y=>{if(l.size>1)return;const{clientX:_,clientY:A}=$(Y);let B=(_-g)/n.scaleRatio+L,T=(A-y)/n.scaleRatio+v;if(n.snapToGrid){let{left:N,top:j}=c.value;const V=B-N,R=T-j;B=N+K(V,n.gridX),T=j+K(R,n.gridY)}n.boundary&&([B,T]=b(B,T,u,m,k,E)),c.value.left=B,c.value.top=T,e&&e("drag",c.value),s.nextTick(()=>{const N=f("drag");n.snap&&(N.diffX&&(c.value.left+=N.diffX),N.diffY&&(c.value.top+=N.diffY))})},Y=>{n.checkCollision&&r()&&(c.value.top=v,c.value.left=L),l.clear(),t.value=!1,f("drag-end"),e&&e("drag-end",c.value)})}const w=()=>{let a=0,g=0;const{left:y,top:L,height:v,width:u,angle:m}=c.value,k=o.value.offsetParent||document.body,E=C(k,n.scaleRatio);if(m){const _=C(o.value,n.scaleRatio);a=_.left-Math.floor(y-(_.width-u)+E.left),g=_.top-Math.floor(L-(_.height-v)+E.top)}const X=E.width-u,Y=E.height-v;return[a,X-a,g,Y-g,E.width,E.height]},b=(a,g,y,L,v,u)=>(a=a<y?y:a,a=a>L?L:a,g=g<v?v:g,g=g>u?u:g,[a,g]),r=()=>{const a=o.value.offsetParent||document.body,g=Array.from(a.children).filter(y=>y!==o.value&&y.classList.contains("es-drager"));for(let y=0;y<g.length;y++){const L=g[y];if(ye(o.value,L,n.scaleRatio))return!0}},S=()=>{i.value=!1},{onKeydown:p,onKeyup:h}=ve(n,c,i,{getBoundary:w,fixBoundary:b,checkDragerCollision:r,emit:e});return s.watch(i,a=>{a?(e("focus",a),document.addEventListener("click",S,{once:!0})):e("blur",a),!n.disabledKeyEvent&&(a?(document.addEventListener("keydown",p),document.addEventListener("keyup",h)):(document.removeEventListener("keydown",p),document.removeEventListener("keyup",h)))}),s.onMounted(()=>{if(o.value){if(!c.value.width&&!c.value.height){const{width:a,height:g}=C(o.value,n.scaleRatio);c.value={...c.value,width:a+2,height:g+2}}if(o.value.addEventListener("mousedown",d),o.value.addEventListener("touchstart",d,{passive:!0}),n.type==="text"){const a=window.getComputedStyle(o.value);c.value.height=parseInt(a.fontSize)}}}),s.onBeforeUnmount(()=>{document.removeEventListener("click",S),document.removeEventListener("keydown",p),document.removeEventListener("keyup",h)}),{isMousedown:t,selected:i,dragData:c,getBoundary:w,checkDragerCollision:r}}const xe=(o=>(s.pushScopeId("data-v-1b6d4877"),o=o(),s.popScopeId(),o))(()=>s.createElementVNode("div",{class:"es-drager-rotate-handle"},[s.createElementVNode("svg",{viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},[s.createElementVNode("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"})])],-1)),Me=s.defineComponent({__name:"rotate",props:{modelValue:{type:Number,default:0},element:{type:Object}},emits:["update:modelValue","rotate","rotate-start","rotate-end"],setup(o,{emit:n}){const e=o,t=n,i=s.ref(null),c=s.computed({get:()=>e.modelValue,set:l=>{t("update:modelValue",l)}});function f(l){if(!e.element)return console.warn("[es-drager] rotate component need drag element property");l.stopPropagation();const{width:d,height:w,left:b,top:r}=e.element.getBoundingClientRect(),S=b+d/2,p=r+w/2;t("rotate-start",c.value),I(h=>{const{clientX:a,clientY:g}=$(h),y=S-a,L=p-g,u=Math.atan2(L,y)*180/Math.PI-90;c.value=(u+360)%360,t("rotate",c.value)},()=>{t("rotate-end",c.value)})}return(l,d)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"rotateRef",ref:i,class:"es-drager-rotate",onMousedown:s.withModifiers(f,["stop"]),onTouchstartPassive:f},[s.renderSlot(l.$slots,"default",{},()=>[xe],!0)],544))}}),qe="",oe=(o,n)=>{const e=o.__vccOpts||o;for(const[t,i]of n)e[t]=i;return e},Se=oe(Me,[["__scopeId","data-v-1b6d4877"]]),Ee=(o=>(s.pushScopeId("data-v-68f41cf2"),o=o(),s.popScopeId(),o))(()=>s.createElementVNode("div",{class:"es-drager-skew-handle"},[s.createElementVNode("svg",{viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},[s.createElementVNode("path",{fill:"currentColor",d:"M870.679273 271.378618L520.946036 65.489455a16.384 16.384 0 0 0-16.644654 0L154.568145 271.378618a16.290909 16.290909 0 0 0 0 28.094837l349.733237 205.889163a16.384 16.384 0 0 0 16.644654 0L870.679273 299.473455a16.290909 16.290909 0 0 0 0-28.094837zM512.623709 452.673164L228.528873 285.426036l284.094836-167.247127 284.094836 167.247127z m-22.574545 71.68L135.521745 322.615855a16.346764 16.346764 0 0 0-24.482909 14.270836l2.485528 405.820509a16.309527 16.309527 0 0 0 8.257163 14.075345l354.518109 201.728a16.346764 16.346764 0 0 0 24.482909-14.270836l-2.485527-405.820509a16.300218 16.300218 0 0 0-8.247854-14.093964z m-326.888728 198.842181l-2.020072-328.927418 287.529891 163.607273 2.020072 328.936727z m725.336437-400.607418L533.969455 524.325236a16.300218 16.300218 0 0 0-8.247855 14.066037l-2.485527 405.820509a16.365382 16.365382 0 0 0 24.4736 14.270836l354.546036-201.728a16.309527 16.309527 0 0 0 8.257164-14.075345l2.485527-405.820509a16.374691 16.374691 0 0 0-24.501527-14.270837z m-41.890909 373.462109L605.016436 838.683927v-57.902545l241.626764-142.671127v57.902545z m0-98.434327L605.016436 740.2496v-57.911855l241.626764-142.63389v57.911854z m0-98.443636L605.016436 641.833891v-57.902546l241.626764-142.63389v57.902545z"})])],-1)),_e=s.defineComponent({__name:"skew",props:{modelValue:{type:Array,default:()=>[0,0]},element:{type:Object}},emits:["update:modelValue","skew","skew-start","skew-end"],setup(o,{emit:n}){const e=o,t=n,i=s.ref(null),c=s.computed({get:()=>e.modelValue,set:l=>{t("update:modelValue",l)}});function f(l){if(!e.element)return console.warn("[es-drager] skew component need drag element property");l.stopPropagation();const{width:d,height:w}=e.element.getBoundingClientRect(),{clientX:b,clientY:r}=$(l),[S,p]=c.value;t("skew-start",c.value),I(h=>{const{clientX:a,clientY:g}=$(h),y=b-a,L=r-g,v=S+y/d*45,u=p+L/w*45;c.value=[+v.toFixed(2),+u.toFixed(2)],t("skew",c.value)},()=>{t("skew-end",c.value)})}return(l,d)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"skewRef",ref:i,class:"es-drager-skew",onMousedown:f,onTouchstartPassive:f},[s.renderSlot(l.$slots,"default",{},()=>[Ee],!0)],544))}}),Oe="",Xe=oe(_e,[["__scopeId","data-v-68f41cf2"]]),Ye=["data-side","onMousedown","onTouchstartPassive"],Be=s.createElementVNode("div",{class:"es-drager-dot-handle"},null,-1),F=s.defineComponent({__name:"drager",props:W,emits:["change","drag","drag-start","drag-end","resize","resize-start","resize-end","rotate","rotate-start","rotate-end","skew","skew-start","skew-end","focus","blur"],setup(o,{emit:n}){const e=o,t=n,i=(u,...m)=>{t(u,...m)},c=s.ref(null),{selected:f,dragData:l,isMousedown:d,getBoundary:w,checkDragerCollision:b}=Le(c,e,i),r=s.ref(ee(0,e.resizeList)),S=s.computed(()=>e.resizable&&!e.disabled),p=s.computed(()=>e.rotatable&&!e.disabled&&f.value),h=s.computed(()=>e.skewable&&!e.disabled&&f.value),a=s.computed(()=>e.type!="text"?r.value:r.value.filter(u=>!["top","bottom"].includes(u.side))),g=s.computed(()=>{const{width:u,height:m,left:k,top:E,angle:X,skew:Y}=l.value,_={};u&&(_.width=P(u)),m&&(e.type==="text"?_.fontSize=m+"px":_.height=P(m));let A=[`translateX(${P(k)})`,`translateY(${P(E)})`,`rotate(${X}deg)`];if(Y&&Y.length){let B=`skewX(${Y[0]}deg)`;B+=` skewY(${Y[1]??0}deg)`,A.push(B)}return{..._,zIndex:e.zIndex,transform:A.join(" "),"--es-drager-color":e.color}});function y(u){c.value||(c.value=u.$el||u)}function L(u){r.value=ee(u,e.resizeList),i("rotate-end",l.value)}function v(u,m){if(e.disabled)return;m.stopPropagation();const{clientX:k,clientY:E}=$(m),X=k,Y=E,{width:_,height:A,left:B,top:T}=l.value,N=B+_/2,j=T+A/2,V={width:_,height:A,centerX:N,centerY:j,rotateAngle:l.value.angle},R=u.side;let{minWidth:ze,minHeight:Ae,aspectRatio:H,equalProportion:Te}=e;i("resize-start",l.value,R),e.boundary&&w(),["text","image"].includes(e.type)&&R.includes("-")&&(H=V.width/V.height),I(le=>{const{clientX:Ce,clientY:Ne}=$(le);let q=(Ce-X)/e.scaleRatio,G=(Ne-Y)/e.scaleRatio;e.snapToGrid&&(q=K(q,e.gridX),G=K(G,e.gridY));const Ve=Math.atan2(G,q),ie=pe(q,G),$e=le.shiftKey,re=Ve-J(V.rotateAngle),Re=ie*Math.cos(re),De=ie*Math.sin(re),Ie=(Te||$e)&&!H?V.width/V.height:H,{position:{centerX:ae,centerY:ce},size:{width:Pe,height:Ke}}=me(R,{...V,rotateAngle:V.rotateAngle},Re,De,Ie,ze,Ae),Fe=we({centerX:ae,centerY:ce,width:Pe,height:Ke,angle:l.value.angle});let D={...l.value,...ge(Fe,ae,ce)};e.maxWidth>0&&(D.width=Math.min(D.width,e.maxWidth)),e.maxHeight>0&&(D.height=Math.min(D.height,e.maxHeight)),l.value=D,i("resize",l.value,R)},()=>{e.checkCollision&&b()&&(l.value={...l.value,width:_,height:A,left:B,top:T}),i("resize-end",l.value,R)})}return s.watch(()=>[e.width,e.height,e.left,e.top,e.angle],([u,m,k,E,X],[Y,_,A,B,T])=>{u!==Y&&(l.value.width=u),m!==_&&(l.value.height=m),k!==A&&(l.value.left=k),E!==B&&(l.value.top=E),X!==T&&(l.value.angle=X)}),s.watch(()=>l.value,u=>{t("change",{...u})},{deep:!0}),s.watch(()=>e.skew,(u,m)=>{l.value.skew=u??[]},{deep:!0}),s.watch(()=>e.selected,u=>{f.value=u},{immediate:!0}),(u,m)=>(s.openBlock(),s.createBlock(s.resolveDynamicComponent(u.tag),{ref:y,class:s.normalizeClass(["es-drager",`es-drager-${u.type}`,{disabled:u.disabled,dragging:s.unref(d),selected:s.unref(f),border:u.border}]),style:s.normalizeStyle(g.value),onClick:m[7]||(m[7]=s.withModifiers(()=>{},["stop"])),onMousedown:m[8]||(m[8]=s.withModifiers(()=>{},["stop"]))},{default:s.withCtx(()=>[s.renderSlot(u.$slots,"default"),S.value?(s.openBlock(!0),s.createElementBlock(s.Fragment,{key:0},s.renderList(a.value,(k,E)=>(s.openBlock(),s.createElementBlock("div",{key:E,class:"es-drager-dot","data-side":k.side,style:s.normalizeStyle({...k}),onMousedown:X=>v(k,X),onTouchstartPassive:X=>v(k,X)},[s.renderSlot(u.$slots,"resize",s.normalizeProps(s.guardReactiveProps({side:k.side})),()=>[Be])],44,Ye))),128)):s.createCommentVNode("",!0),p.value?(s.openBlock(),s.createBlock(Se,{key:1,modelValue:s.unref(l).angle,"onUpdate:modelValue":m[0]||(m[0]=k=>s.unref(l).angle=k),element:c.value,onRotate:m[1]||(m[1]=k=>i("rotate",s.unref(l))),onRotateStart:m[2]||(m[2]=k=>i("rotate-start",s.unref(l))),onRotateEnd:L},{default:s.withCtx(()=>[s.renderSlot(u.$slots,"rotate")]),_:3},8,["modelValue","element"])):s.createCommentVNode("",!0),h.value?(s.openBlock(),s.createBlock(Xe,{key:2,modelValue:s.unref(l).skew,"onUpdate:modelValue":m[3]||(m[3]=k=>s.unref(l).skew=k),element:c.value,onSkew:m[4]||(m[4]=k=>i("skew",s.unref(l))),onSkewStart:m[5]||(m[5]=k=>i("skew-start",s.unref(l))),onSkewEnd:m[6]||(m[6]=k=>i("skew-end",s.unref(l)))},{default:s.withCtx(()=>[s.renderSlot(u.$slots,"skew")]),_:3},8,["modelValue","element"])):s.createCommentVNode("",!0)]),_:3},40,["class","style"]))}}),Ue="",se=o=>{o.component("es-drager",F)};F.install=se,z.DragerProps=W,z.ESDrager=F,z.default=F,z.install=se,Object.defineProperties(z,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});