@farris/ui-vue 1.7.3 → 1.7.5

package/components/image-cropper/index.umd.cjs

@@ -1 +1 @@
-(function(D,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../common/index.umd.js"],l):(D=typeof globalThis<"u"?globalThis:D||self,l(D["image-cropper"]={},D.Vue,D.common))})(this,function(D,l,xe){"use strict";const he={format:{type:String,default:"png"},maintainAspectRatio:{type:Boolean,default:!0},transform:{type:Object,default:{scale:0,rotate:0,flipH:!1,flipV:!1}},aspectRatio:{type:Number,default:1},resizeToWidth:{type:Number,default:0},resizeToHeight:{type:Number,default:0},cropperMinWidth:{type:Number,default:0},cropperMinHeight:{type:Number,default:0},canvasRotation:{type:Number,default:0},roundCropper:{type:Boolean,default:!0},onlyScaleDown:{type:Boolean,default:!1},imageQuality:{type:Number,default:92},autoCrop:{type:Boolean,default:!0},backgroundColor:{type:String,default:""},containWithinAspectRatio:{type:Boolean,default:!1},hideResizeSquares:{type:Boolean,default:!1},loadImageErrorText:{type:String,default:"图片加载错误"},alignImage:{type:String,default:"center"},disabled:{type:Boolean,default:!1},imageURL:{type:String,default:"./src/assets/image01.png"},imageChangedEvent:{type:Object,default:null},imageBase64:{type:String,default:""},imageFile:{type:Object,default:null},cropper:{type:Object,default:{x1:-100,y1:-100,x2:1e4,y2:1e4}}};var Y=(a=>(a.Move="move",a.Resize="resize",a))(Y||{});function Me(){function a(g){switch(typeof g=="string"&&(g=M(g)),g){case 2:return{rotate:0,flip:!0};case 3:return{rotate:2,flip:!1};case 4:return{rotate:2,flip:!0};case 5:return{rotate:1,flip:!0};case 6:return{rotate:1,flip:!1};case 7:return{rotate:3,flip:!0};case 8:return{rotate:3,flip:!1};default:return{rotate:0,flip:!1}}}function M(g){const t=new DataView(o(g));if(t.getUint16(0,!1)!==65496)return-2;const m=t.byteLength;let f=2;for(;f<m;){if(t.getUint16(f+2,!1)<=8)return-1;const b=t.getUint16(f,!1);if(f+=2,b===65505){if(t.getUint32(f+=2,!1)!==1165519206)return-1;const d=t.getUint16(f+=6,!1)===18761;f+=t.getUint32(f+4,d);const B=t.getUint16(f,d);f+=2;for(let N=0;N<B;N++)if(t.getUint16(f+N*12,d)===274)return t.getUint16(f+N*12+8,d)}else{if((b&65280)!==65280)break;f+=t.getUint16(f,!1)}}return-1}function o(g){g=g.replace(/^data:([^;]+);base64,/gmi,"");const t=atob(g),m=t.length,f=new Uint8Array(m);for(let b=0;b<m;b++)f[b]=t.charCodeAt(b);return f.buffer}function q(g,t,m){const f=g.width,b=g.height;t=Math.round(t),m=Math.round(m);const d=f/t,B=b/m,N=Math.ceil(d/2),u=Math.ceil(B/2),n=g.getContext("2d");if(n){const W=n.getImageData(0,0,f,b),w=n.createImageData(t,m),{data:L}=W,P=w.data;for(let E=0;E<m;E++)for(let _=0;_<t;_++){const F=(_+E*t)*4,A=E*B;let T=0,h=0,c=0,j=0,$=0,C=0,y=0;const S=Math.floor(_*d),X=Math.floor(E*B);let O=Math.ceil((_+1)*d),Q=Math.ceil((E+1)*B);O=Math.min(O,f),Q=Math.min(Q,b);for(let I=X;I<Q;I++){const v=Math.abs(A-I)/u,ae=_*d,ee=v*v;for(let k=S;k<O;k++){const z=Math.abs(ae-k)/N,p=Math.sqrt(ee+z*z);if(p>=1)continue;T=2*p*p*p-3*p*p+1;const H=4*(k+I*f);y+=T*L[H+3],c+=T,L[H+3]<255&&(T=T*L[H+3]/250),j+=T*L[H],$+=T*L[H+1],C+=T*L[H+2],h+=T}}P[F]=j/h,P[F+1]=$/h,P[F+2]=C/h,P[F+3]=y/c}g.width=t,g.height=m,n.putImageData(w,0,0)}}return{resizeCanvas:q,getTransformationsFromExifData:a}}function we(a,M,o,q){function g(u,n){a.value.x2=a.value.x1+(a.value.y2-a.value.y1)*o.value,u=Math.max(a.value.x2-M.value.width,0),n=Math.max(0-a.value.y1,0),(u>0||n>0)&&(a.value.x2-=n*o.value>u?n*o.value:u,a.value.y1+=n*o.value>u?n:u/o.value)}function t(u,n){a.value.x2=a.value.x1+(a.value.y2-a.value.y1)*o.value,u=Math.max(a.value.x2-M.value.width,0),n=Math.max(a.value.y2-M.value.height,0),(u>0||n>0)&&(a.value.x2-=n*o.value>u?n*o.value:u,a.value.y2-=n*o.value>u?n:u/o.value)}function m(u,n){a.value.y1=a.value.y2-(a.value.x2-a.value.x1)/o.value,u=Math.max(0-a.value.x1,0),n=Math.max(0-a.value.y1,0),(u>0||n>0)&&(a.value.x1+=n*o.value>u?n*o.value:u,a.value.y1+=n*o.value>u?n:u/o.value)}function f(u,n){a.value.y1=a.value.y2-(a.value.x2-a.value.x1)/o.value,u=Math.max(a.value.x2-M.value.width,0),n=Math.max(0-a.value.y1,0),(u>0||n>0)&&(a.value.x2-=n*o.value>u?n*o.value:u,a.value.y1+=n*o.value>u?n:u/o.value)}function b(u,n){a.value.y2=a.value.y1+(a.value.x2-a.value.x1)/o.value,u=Math.max(a.value.x2-M.value.width,0),n=Math.max(a.value.y2-M.value.height,0),(u>0||n>0)&&(a.value.x2-=n*o.value>u?n*o.value:u,a.value.y2-=n*o.value>u?n:u/o.value)}function d(u,n){a.value.y2=a.value.y1+(a.value.x2-a.value.x1)/o.value,u=Math.max(0-a.value.x1,0),n=Math.max(a.value.y2-M.value.height,0),(u>0||n>0)&&(a.value.x1+=n*o.value>u?n*o.value:u,a.value.y2-=n*o.value>u?n:u/o.value)}function B(){a.value.x2=a.value.x1+(a.value.y2-a.value.y1)*o.value,a.value.y2=a.value.y1+(a.value.x2-a.value.x1)/o.value;const u=Math.max(0-a.value.x1,0),n=Math.max(a.value.x2-M.value.width,0),W=Math.max(a.value.y2-M.value.height,0),w=Math.max(0-a.value.y1,0);(u>0||n>0||W>0||w>0)&&(a.value.x1+=W*o.value>u?W*o.value:u,a.value.x2-=w*o.value>n?w*o.value:n,a.value.y1+=w*o.value>n?w:n/o.value,a.value.y2-=W*o.value>u?W:u/o.value)}function N(){if(M.value.width&&M.value.height)switch(q.position){case"top":g(0,0);break;case"bottom":t(0,0);break;case"topleft":m(0,0);break;case"topright":f(0,0);break;case"right":case"bottomright":b(0,0);break;case"left":case"bottomleft":d(0,0);break;case"center":B();break}}return{checkAspectRatio:N}}function be(a,M){const{resizeCanvas:o,getTransformationsFromExifData:q}=Me(),g=l.inject("NotifyService"),t=l.ref(a.cropper),m=l.ref(a.transform),f=l.ref(a.cropperMinWidth),b=l.ref(a.maintainAspectRatio),d=l.ref(a.aspectRatio),B=l.ref(a.autoCrop),N=l.ref(a.backgroundColor),u=l.ref(a.resizeToWidth),n=l.ref(a.onlyScaleDown),W=l.ref(a.containWithinAspectRatio),w=l.ref(a.canvasRotation),L=l.ref(a.format),P=l.ref(a.imageQuality),E=l.ref(a.resizeToHeight),_=l.ref(a.cropperMinHeight),F=l.ref(""),A=l.ref(!0),T=l.ref(!0);let h,c,j=0,$,C,y;const S=l.ref(null),X=l.ref(""),O=l.ref(""),Q=l.ref("0px"),I=l.ref(),v=l.ref({width:100,height:100}),ae=Y;let ee,k=20,z=20,p=!1,H={rotate:0,flip:!1},r={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0};const fe=l.ref(a.imageChangedEvent),ie=l.ref(a.imageURL),Ie=l.ref(a.imageBase64),Ae=l.ref(a.imageFile);function Te(){O.value="scaleX("+(m.value.scale||1)*(m.value.flipH?-1:1)+")scaleY("+(m.value.scale||1)*(m.value.flipV?-1:1)+")rotate("+(m.value.rotate||0)+"deg)"}function J(){T.value=!1,I.value=null,F.value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=",r={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0},v.value={width:0,height:0},h={width:0,height:0},c={width:0,height:0},t.value.x1=-100,t.value.y1=-100,t.value.x2=1e4,t.value.y2=1e4}function pe(e){return/image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(e)}function Ve(){if(w.value+=H.rotate,W.value&&h.width&&h.height){if(w.value%2){const s=h.width*d.value,x=h.height/d.value;return{width:Math.max(h.height,s),height:Math.max(h.width,x)}}const e=h.height*d.value,i=h.width/d.value;return{width:Math.max(h.width,e),height:Math.max(h.height,i)}}return w.value%2?{height:h.width,width:h.height}:{width:h.width,height:h.height}}function We(){w.value+=H.rotate;const e=Ve(),i=document.createElement("canvas");e.width&&e.height&&(i.width=e.width,i.height=e.height);const s=i.getContext("2d");return h.width&&h.height&&y&&(s==null||s.setTransform(H.flip?-1:1,0,0,1,i.width/2,i.height/2),s==null||s.rotate(Math.PI*(w.value/2)),s==null||s.drawImage(y,-h.width/2,-h.height/2)),i.toDataURL()}function ke(e){return new Promise(i=>{ee=e,F.value=e,I.value=new Image,I.value.onload=()=>{var s,x;c.width=(s=I.value)==null?void 0:s.naturalWidth,c.height=(x=I.value)==null?void 0:x.naturalHeight,i()},I.value.src=ee})}function ce(){if(!y||!y.complete||!H)return Promise.reject(new Error("No image loaded"));const e=We();return ke(e)}function le(e){const i=s=>{g.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片上传错误，请重试"}]}),A.value=!1,p=!0,M.emit("loadImageFailed"),y=null,X.value=""};y=new Image,y.onload=()=>{X.value=e,H=q(e),h.width=y==null?void 0:y.naturalWidth,h.height=y==null?void 0:y.naturalHeight,ce().then(()=>{p=!1}).catch(i)},y.onerror=i,y.src=e}function ze(e,i){pe(i)?(p=!1,le(e)):(g.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片类型不正确,请重试"}]}),A.value=!1,p=!0,M.emit("loadImageFailed"))}function ve(e){const i=new FileReader;i.onload=s=>ze(s.target.result,e.type),i.readAsDataURL(e)}function de(e){const i=new Image;i.onerror=()=>{g.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载错误，请重试"}]}),A.value=!1,p=!0,M.emit("loadImageFailed")},i.onload=()=>{p=!1;const s=document.createElement("canvas"),x=s.getContext("2d");s.width=i.width,s.height=i.height,x==null||x.drawImage(i,0,0),le(s.toDataURL())},i.crossOrigin="anonymous",i.src=e}function Ne(){return S.value&&S.value&&S.value.offsetWidth>0}function ne(){if(S.value){const e=S.value;v.value.width=e.offsetWidth,v.value.height=e.offsetHeight,Q.value="calc(50% - "+v.value.width/2+"px)"}}function Se(){I.value&&v.value.width&&(k=f.value>0?Math.max(20,f.value/I.value.width*v.value.width):20)}function He(){b.value?z=Math.max(20,k/d.value):_.value>0&&I.value&&v.value.height?z=Math.max(20,_.value/I.value.height*v.value.height):z=20}function ue(){I.value?(Se(),He()):(k=20,z=20)}function _e(){const e=S.value,i=l.ref({x1:0,x2:0,y1:0,y2:0});if(e&&c.width&&c.height){const s=c.width/e.offsetWidth;i.value={x1:Math.round(t.value.x1*s),y1:Math.round(t.value.y1*s),x2:Math.round(t.value.x2*s),y2:Math.round(t.value.y2*s)},W.value||(i.value.x1=Math.max(i.value.x1,0),i.value.y1=Math.max(i.value.y1,0),i.value.x2=Math.min(i.value.x2,c.width),i.value.y2=Math.min(i.value.y2,c.height))}return i.value}function Ue(){w.value+=H.rotate;const e=S.value,i=l.ref({x1:0,x2:0,y1:0,y2:0});if(e&&c.height&&c.width&&h.height&&h.width){const s=c.width/e.offsetWidth;let x,V;w.value%2?(x=(c.width-h.height)/2,V=(c.height-h.width)/2):(x=(c.width-h.width)/2,V=(c.height-h.height)/2),i.value={x1:Math.round(t.value.x1*s)-x,y1:Math.round(t.value.y1*s)-V,x2:Math.round(t.value.x2*s)-x,y2:Math.round(t.value.y2*s)-V},W.value||(i.value.x1=Math.max(i.value.x1,0),i.value.y1=Math.max(i.value.y1,0),i.value.x2=Math.min(i.value.x2,c.width),i.value.y2=Math.min(i.value.y2,c.height))}return i.value}function Be(e,i){if(u.value>0){if(!n.value||e>u.value)return u.value/e}else if(E.value>0&&(!n.value||i>E.value))return E.value/i;return 1}function Ee(){return Math.min(1,Math.max(0,P.value/100))}function Le(e){return e.toDataURL("image/"+L.value,Ee())}function De(){if(S.value&&S.value&&I.value!=null){const e=_e(),i=e.x2-e.x1,s=e.y2-e.y1,x=document.createElement("canvas");x.width=i,x.height=s;const V=x.getContext("2d");if(V){N.value!=null&&(V.fillStyle=N.value,V.fillRect(0,0,i,s));const R=(m.value.scale||1)*(m.value.flipH?-1:1),K=(m.value.scale||1)*(m.value.flipV?-1:1);c.width&&c.height&&(V.setTransform(R,0,0,K,c.width/2,c.height/2),V.translate(-e.x1/R,-e.y1/K),V.rotate((m.value.rotate||0)*Math.PI/180),V.drawImage(I.value,-c.width/2,-c.height/2));const U={width:i,height:s,imagePosition:e,cropperPosition:{...t.value}};W.value&&(U.offsetImagePosition=Ue());const Z=Be(i,s);return Z!==1&&(U.width=Math.round(i*Z),U.height=b.value?Math.round(U.width/d.value):Math.round(s*Z),o(x,U.width,U.height)),U.base64=Le(x),M.emit("imageCropped",U),U}}return null}function te(){B.value&&De()}function ge(){const e=S.value;if(e){if(!b.value)t.value.x1=0,t.value.x2=e.offsetWidth,t.value.y1=0,t.value.y2=e.offsetHeight;else if(e.offsetWidth/d.value<e.offsetHeight){t.value.x1=0,t.value.x2=e.offsetWidth;const i=e.offsetWidth/d.value;t.value.y1=(e.offsetHeight-i)/2,t.value.y2=t.value.y1+i}else{t.value.y1=0,t.value.y2=e.offsetHeight;const i=e.offsetHeight*d.value;t.value.x1=(e.offsetWidth-i)/2,t.value.x2=t.value.x1+i}te(),T.value=!0}}function me(){j>40?(g.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载超时，请重试"}]}),p=!0,A.value=!1,M.emit("loadImageFailed")):Ne()?(p=!1,ne(),ue(),ge(),M.emit("cropperReady",{...v.value})):(j++,setTimeout(()=>me(),50))}function Pe(){I.value!=null&&(A.value=!1,M.emit("imageLoaded"),j=0,setTimeout(()=>me()))}function Fe(){const e=S.value;(v.value.width!==(e==null?void 0:e.offsetWidth)||v.value.height!==(e==null?void 0:e.offsetHeight))&&v.value.width&&v.value.height&&e&&(t.value.x1=t.value.x1*e.offsetWidth/v.value.width,t.value.x2=t.value.x2*e.offsetWidth/v.value.width,t.value.y1=t.value.y1*e.offsetHeight/v.value.height,t.value.y2=t.value.y2*e.offsetHeight/v.value.height)}const je=()=>{Fe(),ne(),ue()},ye=()=>{clearTimeout(C),C=setTimeout(je,300)};l.onMounted(()=>{window.addEventListener("resize",ye),ie.value&&(J(),A.value=!0,de(ie.value))}),l.onUnmounted(()=>{window.removeEventListener("resize",ye)});function Re(){r.active&&(r.active=!1,te())}function se(e){return(e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX)||0}function oe(e){return(e.touches&&e.touches[0]?e.touches[0].clientY:e.clientY)||0}function qe(e,i,s=null){r&&r.active||(e.preventDefault&&e.preventDefault(),r={active:!0,type:i,position:s,clientX:se(e),clientY:oe(e),...t.value})}function re(e=!1){t.value.x1<0&&(t.value.x2-=e?t.value.x1:0,t.value.x1=0),t.value.y1<0&&(t.value.y2-=e?t.value.y1:0,t.value.y1=0),t.value.x2>v.value.width&&(t.value.x1-=e?t.value.x2-v.value.width:0,t.value.x2=v.value.width),t.value.y2>v.value.height&&(t.value.y1-=e?t.value.y2-v.value.height:0,t.value.y2=v.value.height)}function $e(e){const i=se(e)-r.clientX,s=oe(e)-r.clientY;t.value.x1=r.x1+i,t.value.y1=r.y1+s,t.value.x2=r.x2+i,t.value.y2=r.y2+s}const{checkAspectRatio:Oe}=we(t,v,d,r);function Qe(e){const i=se(e)-r.clientX,s=oe(e)-r.clientY;switch(r.position){case"left":t.value.x1=Math.min(r.x1+i,t.value.x2-k);break;case"topleft":t.value.x1=Math.min(r.x1+i,t.value.x2-k),t.value.y1=Math.min(r.y1+s,t.value.y2-z);break;case"top":t.value.y1=Math.min(r.y1+s,t.value.y2-z);break;case"topright":t.value.x2=Math.max(r.x2+i,t.value.x1+k),t.value.y1=Math.min(r.y1+s,t.value.y2-z);break;case"right":t.value.x2=Math.max(r.x2+i,t.value.x1+k);break;case"bottomright":t.value.x2=Math.max(r.x2+i,t.value.x1+k),t.value.y2=Math.max(r.y2+s,t.value.y1+z);break;case"bottom":t.value.y2=Math.max(r.y2+s,t.value.y1+z);break;case"bottomleft":t.value.x1=Math.min(r.x1+i,t.value.x2-k),t.value.y2=Math.max(r.y2+s,t.value.y1+z);break;case"center":const{scale:x}=e,V=Math.abs(r.x2-r.x1)*x,R=Math.abs(r.y2-r.y1)*x,{x1:K}=t.value,{y1:U}=t.value;t.value.x1=Math.min(r.clientX-V/2,t.value.x2-k),t.value.y1=Math.min(r.clientY-R/2,t.value.y2-z),t.value.x2=Math.max(r.clientX+V/2,K+k),t.value.y2=Math.max(r.clientY+R/2,U+z);break}b.value&&Oe()}function Ke(e){r&&r.active&&(e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),clearTimeout($),$=setTimeout(()=>{r.type===Y.Move?($e(e),re(!0)):r.type===Y.Resize&&(Qe(e),re(!1))},300))}return l.watch(fe,e=>{J(),e&&e.target&&e.target.files&&e.target.files.length>0&&(A.value=!0,ve(e.target.files[0]))}),l.watch(ie,e=>{e?(J(),A.value=!0,de(e)):(g.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片路径为空"}]}),A.value=!1,p=!0)}),l.watch(Ie,e=>{J(),A.value=!0,le(e)}),l.watch(Ae,e=>{J(),e&&(A.value=!0,ve(e))}),l.watch(()=>[a.containWithinAspectRatio,a.canvasRotation,a.cropper,a.aspectRatio,a.transform,a.imageChangedEvent],([e,i,s,x,V,R],[K,U,Z,Ge,Je,Ze])=>{y&&y.complete&&H&&(e!==K||i!==U)&&ce(),s!==Z&&(ne(),ue(),re(!1),te()),x!==Ge&&T.value&&ge(),V!==Je&&(Te(),te()),R!==Ze&&(fe.value=R)}),{uploadError:p,imageVisible:T,backgroundColor:N,sourceImage:S,safeImgDataUrl:F,safeTransformStyle:O,maxSize:v,cropper:t,marginLeft:Q,moveTypes:ae,isLoading:A,startMove:qe,imageLoadedInView:Pe,moveStop:Re,moveImg:Ke}}const G=l.defineComponent({name:"FImageCropper",props:he,emits:["imageCropped","imageLoaded","cropperReady","loadImageFailed"],setup(a,M){const o=l.ref(a.alignImage),q=l.ref(a.roundCropper),g=l.ref(a.hideResizeSquares),t=l.ref(a.loadImageErrorText),m=l.ref(a.disabled),f=l.ref(null),{uploadError:b,imageVisible:d,backgroundColor:B,sourceImage:N,safeImgDataUrl:u,safeTransformStyle:n,maxSize:W,cropper:w,marginLeft:L,moveTypes:P,isLoading:E,startMove:_,imageLoadedInView:F,moveStop:A,moveImg:T}=be(a,M);function h(C){return l.createVNode("span",{class:`farris-image-cropper-resize-bar ${C}`,onMousedown:l.withModifiers(y=>_(y,P.Resize,C),["prevent"])},null)}function c(C){return l.createVNode("div",null,[l.createVNode("span",{class:`farris-image-cropper-resize-bar ${C}`,onMousedown:l.withModifiers(y=>_(y,P.Resize,C),["prevent"])},[l.createVNode("span",{class:"farris-image-cropper-square"},null)]),l.createVNode("span",{class:"farris-image-cropper-resize top"},[l.createVNode("span",{class:"farris-image-cropper-square"},null)])])}const j=["top","right","bottom","left"].map(C=>h(C)),$=["topleft","topright","bottomright","bottomleft"].map(C=>c(C));return()=>l.createVNode("div",{class:["farris-image-cropper-frame",{"farris-image-cropper-disabled":m.value}],style:{"text-align":o.value},onMousemove:l.withModifiers(C=>T(C),["prevent"]),onTouchmove:l.withModifiers(C=>T(C),["prevent"]),onMouseup:l.withModifiers(()=>A(),["prevent"]),onTouchend:l.withModifiers(()=>A(),["prevent"])},[!b&&l.createVNode("div",{ref:f,class:"farris-image-cropper",style:[{background:d.value?B.value:""}]},[u.value&&l.createVNode("img",{title:"farris-source-image",ref:N,class:"farris-source-image",style:[{visibility:d.value?"visible":"hidden"},{transform:n.value}],src:u.value,onLoad:()=>F()},null),W.value&&l.createVNode("div",{class:"farris-image-overlay",style:[{width:`${W.value.width||0}px`},{height:`${W.value.height||0}px`},{"margin-left":o.value==="center"?L.value:""}]},null),d.value&&l.createVNode("div",{class:["farris-image-cropper-wrapper",{"farris-image-cropper-rounded":q.value}],style:[{top:`${w.value.y1}px`},{left:`${w.value.x1}px`},{width:`${w.value.x2-w.value.x1}px`},{height:`${w.value.y2-w.value.y1}px`},{visibility:d.value?"visible":"hidden"},{"margin-left":o.value==="center"?L.value:""}],tabindex:"0"},[l.createVNode("div",{class:"farris-image-cropper-move",onMousedown:l.withModifiers(C=>_(C,P.Move,"topleft"),["prevent"])},null),!g.value&&l.createVNode("div",null,[$,j])])]),E.value&&l.createVNode("div",{class:"farris-image-cropper-loading"},[l.createVNode("div",{class:"farris-image-cropper-loading-spinner"},null)]),b&&l.createVNode("div",{class:"farris-image-cropper-error"},[t.value])])}});G.install=a=>{a.component(G.name,G)};const Ce=xe.withInstall(G);D.ImageCropper=G,D.default=Ce,D.imageCropperProps=he,Object.defineProperties(D,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(R,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js"],i):(R=typeof globalThis<"u"?globalThis:R||self,i(R["image-cropper"]={},R.Vue,R.dynamicResolver,R.designerCanvas))})(this,function(R,i,de,be){"use strict";function we(a,f,o){return f}const Ce=new Map([["appearance",de.resolveAppearance]]),Ie={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/image-cropper.schema.json",title:"image-cropper",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for image-cropper",type:"string"},type:{description:"The type string of image-cropper",type:"string",default:"image-cropper"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},disable:{type:"string",default:!1},editable:{description:"",type:"boolean",default:!0},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},require:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},visible:{description:"",type:"boolean",default:!0}},required:["id","type"]},Ae={title:"image-cropper",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}},behavior:{description:"Basic Infomation",title:"行为",properties:{readonly:{description:"",title:"只读",type:"string"},required:{description:"",title:"必填",type:"boolean"},visible:{description:"",title:"可见",type:"boolean"},placeholder:{description:"",title:"提示文本",type:"string"},tabindex:{description:"",title:"tab索引",type:"number"}}}}},X={format:{type:String,default:"png"},maintainAspectRatio:{type:Boolean,default:!0},transform:{type:Object,default:{scale:0,rotate:0,flipH:!1,flipV:!1}},aspectRatio:{type:Number,default:1},resizeToWidth:{type:Number,default:0},resizeToHeight:{type:Number,default:0},cropperMinWidth:{type:Number,default:0},cropperMinHeight:{type:Number,default:0},canvasRotation:{type:Number,default:0},roundCropper:{type:Boolean,default:!0},onlyScaleDown:{type:Boolean,default:!1},imageQuality:{type:Number,default:92},autoCrop:{type:Boolean,default:!0},backgroundColor:{type:String,default:""},containWithinAspectRatio:{type:Boolean,default:!1},hideResizeSquares:{type:Boolean,default:!1},loadImageErrorText:{type:String,default:"图片加载错误"},alignImage:{type:String,default:"center"},disabled:{type:Boolean,default:!1},imageURL:{type:String,default:"./src/assets/image01.png"},imageChangedEvent:{type:Object,default:null},imageBase64:{type:String,default:""},imageFile:{type:Object,default:null},cropper:{type:Object,default:{x1:-100,y1:-100,x2:1e4,y2:1e4}}},ie=de.createPropsResolver(X,Ie,Ce,we,Ae);var ee=(a=>(a.Move="move",a.Resize="resize",a))(ee||{});function Te(){function a(m){switch(typeof m=="string"&&(m=f(m)),m){case 2:return{rotate:0,flip:!0};case 3:return{rotate:2,flip:!1};case 4:return{rotate:2,flip:!0};case 5:return{rotate:1,flip:!0};case 6:return{rotate:1,flip:!1};case 7:return{rotate:3,flip:!0};case 8:return{rotate:3,flip:!1};default:return{rotate:0,flip:!1}}}function f(m){const t=new DataView(o(m));if(t.getUint16(0,!1)!==65496)return-2;const y=t.byteLength;let h=2;for(;h<y;){if(t.getUint16(h+2,!1)<=8)return-1;const M=t.getUint16(h,!1);if(h+=2,M===65505){if(t.getUint32(h+=2,!1)!==1165519206)return-1;const d=t.getUint16(h+=6,!1)===18761;h+=t.getUint32(h+4,d);const H=t.getUint16(h,d);h+=2;for(let k=0;k<H;k++)if(t.getUint16(h+k*12,d)===274)return t.getUint16(h+k*12+8,d)}else{if((M&65280)!==65280)break;h+=t.getUint16(h,!1)}}return-1}function o(m){m=m.replace(/^data:([^;]+);base64,/gmi,"");const t=atob(m),y=t.length,h=new Uint8Array(y);for(let M=0;M<y;M++)h[M]=t.charCodeAt(M);return h.buffer}function q(m,t,y){const h=m.width,M=m.height;t=Math.round(t),y=Math.round(y);const d=h/t,H=M/y,k=Math.ceil(d/2),n=Math.ceil(H/2),r=m.getContext("2d");if(r){const C=r.getImageData(0,0,h,M),g=r.createImageData(t,y),{data:L}=C,E=g.data;for(let U=0;U<y;U++)for(let N=0;N<t;N++){const j=(N+U*t)*4,I=U*H;let A=0,c=0,v=0,F=0,O=0,w=0,x=0;const W=Math.floor(N*d),T=Math.floor(U*H);let P=Math.ceil((N+1)*d),G=Math.ceil((U+1)*H);P=Math.min(P,h),G=Math.min(G,M);for(let V=T;V<G;V++){const p=Math.abs(I-V)/n,le=N*d,te=p*p;for(let B=W;B<P;B++){const $=Math.abs(le-B)/k,z=Math.sqrt(te+$*$);if(z>=1)continue;A=2*z*z*z-3*z*z+1;const _=4*(B+V*h);x+=A*L[_+3],v+=A,L[_+3]<255&&(A=A*L[_+3]/250),F+=A*L[_],O+=A*L[_+1],w+=A*L[_+2],c+=A}}E[j]=F/c,E[j+1]=O/c,E[j+2]=w/c,E[j+3]=x/v}m.width=t,m.height=y,r.putImageData(g,0,0)}}return{resizeCanvas:q,getTransformationsFromExifData:a}}function Ve(a,f,o,q){function m(n,r){a.value.x2=a.value.x1+(a.value.y2-a.value.y1)*o.value,n=Math.max(a.value.x2-f.value.width,0),r=Math.max(0-a.value.y1,0),(n>0||r>0)&&(a.value.x2-=r*o.value>n?r*o.value:n,a.value.y1+=r*o.value>n?r:n/o.value)}function t(n,r){a.value.x2=a.value.x1+(a.value.y2-a.value.y1)*o.value,n=Math.max(a.value.x2-f.value.width,0),r=Math.max(a.value.y2-f.value.height,0),(n>0||r>0)&&(a.value.x2-=r*o.value>n?r*o.value:n,a.value.y2-=r*o.value>n?r:n/o.value)}function y(n,r){a.value.y1=a.value.y2-(a.value.x2-a.value.x1)/o.value,n=Math.max(0-a.value.x1,0),r=Math.max(0-a.value.y1,0),(n>0||r>0)&&(a.value.x1+=r*o.value>n?r*o.value:n,a.value.y1+=r*o.value>n?r:n/o.value)}function h(n,r){a.value.y1=a.value.y2-(a.value.x2-a.value.x1)/o.value,n=Math.max(a.value.x2-f.value.width,0),r=Math.max(0-a.value.y1,0),(n>0||r>0)&&(a.value.x2-=r*o.value>n?r*o.value:n,a.value.y1+=r*o.value>n?r:n/o.value)}function M(n,r){a.value.y2=a.value.y1+(a.value.x2-a.value.x1)/o.value,n=Math.max(a.value.x2-f.value.width,0),r=Math.max(a.value.y2-f.value.height,0),(n>0||r>0)&&(a.value.x2-=r*o.value>n?r*o.value:n,a.value.y2-=r*o.value>n?r:n/o.value)}function d(n,r){a.value.y2=a.value.y1+(a.value.x2-a.value.x1)/o.value,n=Math.max(0-a.value.x1,0),r=Math.max(a.value.y2-f.value.height,0),(n>0||r>0)&&(a.value.x1+=r*o.value>n?r*o.value:n,a.value.y2-=r*o.value>n?r:n/o.value)}function H(){a.value.x2=a.value.x1+(a.value.y2-a.value.y1)*o.value,a.value.y2=a.value.y1+(a.value.x2-a.value.x1)/o.value;const n=Math.max(0-a.value.x1,0),r=Math.max(a.value.x2-f.value.width,0),C=Math.max(a.value.y2-f.value.height,0),g=Math.max(0-a.value.y1,0);(n>0||r>0||C>0||g>0)&&(a.value.x1+=C*o.value>n?C*o.value:n,a.value.x2-=g*o.value>r?g*o.value:r,a.value.y1+=g*o.value>r?g:r/o.value,a.value.y2-=C*o.value>n?C:n/o.value)}function k(){if(f.value.width&&f.value.height)switch(q.position){case"top":m(0,0);break;case"bottom":t(0,0);break;case"topleft":y(0,0);break;case"topright":h(0,0);break;case"right":case"bottomright":M(0,0);break;case"left":case"bottomleft":d(0,0);break;case"center":H();break}}return{checkAspectRatio:k}}function he(a,f){const{resizeCanvas:o,getTransformationsFromExifData:q}=Te(),m=i.inject("NotifyService"),t=i.ref(a.cropper),y=i.ref(a.transform),h=i.ref(a.cropperMinWidth),M=i.ref(a.maintainAspectRatio),d=i.ref(a.aspectRatio),H=i.ref(a.autoCrop),k=i.ref(a.backgroundColor),n=i.ref(a.resizeToWidth),r=i.ref(a.onlyScaleDown),C=i.ref(a.containWithinAspectRatio),g=i.ref(a.canvasRotation),L=i.ref(a.format),E=i.ref(a.imageQuality),U=i.ref(a.resizeToHeight),N=i.ref(a.cropperMinHeight),j=i.ref(""),I=i.ref(!0),A=i.ref(!0);let c,v,F=0,O,w,x;const W=i.ref(null),T=i.ref(""),P=i.ref(""),G=i.ref("0px"),V=i.ref(),p=i.ref({width:100,height:100}),le=ee;let te,B=20,$=20,z=!1,_={rotate:0,flip:!1},u={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0};const ge=i.ref(a.imageChangedEvent),ne=i.ref(a.imageURL),ze=i.ref(a.imageBase64),Se=i.ref(a.imageFile);function ke(){P.value="scaleX("+(y.value.scale||1)*(y.value.flipH?-1:1)+")scaleY("+(y.value.scale||1)*(y.value.flipV?-1:1)+")rotate("+(y.value.rotate||0)+"deg)"}function Z(){A.value=!1,V.value=null,j.value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=",u={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0},p.value={width:0,height:0},c={width:0,height:0},v={width:0,height:0},t.value.x1=-100,t.value.y1=-100,t.value.x2=1e4,t.value.y2=1e4}function We(e){return/image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(e)}function Be(){if(g.value+=_.rotate,C.value&&c.width&&c.height){if(g.value%2){const s=c.width*d.value,b=c.height/d.value;return{width:Math.max(c.height,s),height:Math.max(c.width,b)}}const e=c.height*d.value,l=c.width/d.value;return{width:Math.max(c.width,e),height:Math.max(c.height,l)}}return g.value%2?{height:c.width,width:c.height}:{width:c.width,height:c.height}}function $e(){g.value+=_.rotate;const e=Be(),l=document.createElement("canvas");e.width&&e.height&&(l.width=e.width,l.height=e.height);const s=l.getContext("2d");return c.width&&c.height&&x&&(s==null||s.setTransform(_.flip?-1:1,0,0,1,l.width/2,l.height/2),s==null||s.rotate(Math.PI*(g.value/2)),s==null||s.drawImage(x,-c.width/2,-c.height/2)),l.toDataURL()}function He(e){return new Promise(l=>{te=e,j.value=e,V.value=new Image,V.value.onload=()=>{var s,b;v.width=(s=V.value)==null?void 0:s.naturalWidth,v.height=(b=V.value)==null?void 0:b.naturalHeight,l()},V.value.src=te})}function ve(){if(!x||!x.complete||!_)return Promise.reject(new Error("No image loaded"));const e=$e();return He(e)}function re(e){const l=s=>{m.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片上传错误，请重试"}]}),I.value=!1,z=!0,f.emit("loadImageFailed"),x=null,T.value=""};x=new Image,x.onload=()=>{T.value=e,_=q(e),c.width=x==null?void 0:x.naturalWidth,c.height=x==null?void 0:x.naturalHeight,ve().then(()=>{z=!1}).catch(l)},x.onerror=l,x.src=e}function Le(e,l){We(l)?(z=!1,re(e)):(m.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片类型不正确,请重试"}]}),I.value=!1,z=!0,f.emit("loadImageFailed"))}function me(e){const l=new FileReader;l.onload=s=>Le(s.target.result,e.type),l.readAsDataURL(e)}function ye(e){const l=new Image;l.onerror=()=>{m.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载错误，请重试"}]}),I.value=!1,z=!0,f.emit("loadImageFailed")},l.onload=()=>{z=!1;const s=document.createElement("canvas"),b=s.getContext("2d");s.width=l.width,s.height=l.height,b==null||b.drawImage(l,0,0),re(s.toDataURL())},l.crossOrigin="anonymous",l.src=e}function Ee(){return W.value&&W.value&&W.value.offsetWidth>0}function oe(){if(W.value){const e=W.value;p.value.width=e.offsetWidth,p.value.height=e.offsetHeight,G.value="calc(50% - "+p.value.width/2+"px)"}}function Ue(){V.value&&p.value.width&&(B=h.value>0?Math.max(20,h.value/V.value.width*p.value.width):20)}function _e(){M.value?$=Math.max(20,B/d.value):N.value>0&&V.value&&p.value.height?$=Math.max(20,N.value/V.value.height*p.value.height):$=20}function se(){V.value?(Ue(),_e()):(B=20,$=20)}function De(){const e=W.value,l=i.ref({x1:0,x2:0,y1:0,y2:0});if(e&&v.width&&v.height){const s=v.width/e.offsetWidth;l.value={x1:Math.round(t.value.x1*s),y1:Math.round(t.value.y1*s),x2:Math.round(t.value.x2*s),y2:Math.round(t.value.y2*s)},C.value||(l.value.x1=Math.max(l.value.x1,0),l.value.y1=Math.max(l.value.y1,0),l.value.x2=Math.min(l.value.x2,v.width),l.value.y2=Math.min(l.value.y2,v.height))}return l.value}function Re(){g.value+=_.rotate;const e=W.value,l=i.ref({x1:0,x2:0,y1:0,y2:0});if(e&&v.height&&v.width&&c.height&&c.width){const s=v.width/e.offsetWidth;let b,S;g.value%2?(b=(v.width-c.height)/2,S=(v.height-c.width)/2):(b=(v.width-c.width)/2,S=(v.height-c.height)/2),l.value={x1:Math.round(t.value.x1*s)-b,y1:Math.round(t.value.y1*s)-S,x2:Math.round(t.value.x2*s)-b,y2:Math.round(t.value.y2*s)-S},C.value||(l.value.x1=Math.max(l.value.x1,0),l.value.y1=Math.max(l.value.y1,0),l.value.x2=Math.min(l.value.x2,v.width),l.value.y2=Math.min(l.value.y2,v.height))}return l.value}function je(e,l){if(n.value>0){if(!r.value||e>n.value)return n.value/e}else if(U.value>0&&(!r.value||l>U.value))return U.value/l;return 1}function Fe(){return Math.min(1,Math.max(0,E.value/100))}function qe(e){return e.toDataURL("image/"+L.value,Fe())}function Pe(){if(W.value&&W.value&&V.value!=null){const e=De(),l=e.x2-e.x1,s=e.y2-e.y1,b=document.createElement("canvas");b.width=l,b.height=s;const S=b.getContext("2d");if(S){k.value!=null&&(S.fillStyle=k.value,S.fillRect(0,0,l,s));const K=(y.value.scale||1)*(y.value.flipH?-1:1),J=(y.value.scale||1)*(y.value.flipV?-1:1);v.width&&v.height&&(S.setTransform(K,0,0,J,v.width/2,v.height/2),S.translate(-e.x1/K,-e.y1/J),S.rotate((y.value.rotate||0)*Math.PI/180),S.drawImage(V.value,-v.width/2,-v.height/2));const D={width:l,height:s,imagePosition:e,cropperPosition:{...t.value}};C.value&&(D.offsetImagePosition=Re());const Y=je(l,s);return Y!==1&&(D.width=Math.round(l*Y),D.height=M.value?Math.round(D.width/d.value):Math.round(s*Y),o(b,D.width,D.height)),D.base64=qe(b),f.emit("imageCropped",D),D}}return null}function ae(){H.value&&Pe()}function pe(){const e=W.value;if(e){if(!M.value)t.value.x1=0,t.value.x2=e.offsetWidth,t.value.y1=0,t.value.y2=e.offsetHeight;else if(e.offsetWidth/d.value<e.offsetHeight){t.value.x1=0,t.value.x2=e.offsetWidth;const l=e.offsetWidth/d.value;t.value.y1=(e.offsetHeight-l)/2,t.value.y2=t.value.y1+l}else{t.value.y1=0,t.value.y2=e.offsetHeight;const l=e.offsetHeight*d.value;t.value.x1=(e.offsetWidth-l)/2,t.value.x2=t.value.x1+l}ae(),A.value=!0}}function xe(){F>40?(m.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载超时，请重试"}]}),z=!0,I.value=!1,f.emit("loadImageFailed")):Ee()?(z=!1,oe(),se(),pe(),f.emit("cropperReady",{...p.value})):(F++,setTimeout(()=>xe(),50))}function Oe(){V.value!=null&&(I.value=!1,f.emit("imageLoaded"),F=0,setTimeout(()=>xe()))}function Qe(){const e=W.value;(p.value.width!==(e==null?void 0:e.offsetWidth)||p.value.height!==(e==null?void 0:e.offsetHeight))&&p.value.width&&p.value.height&&e&&(t.value.x1=t.value.x1*e.offsetWidth/p.value.width,t.value.x2=t.value.x2*e.offsetWidth/p.value.width,t.value.y1=t.value.y1*e.offsetHeight/p.value.height,t.value.y2=t.value.y2*e.offsetHeight/p.value.height)}const Ke=()=>{Qe(),oe(),se()},Me=()=>{clearTimeout(w),w=setTimeout(Ke,300)};i.onMounted(()=>{window.addEventListener("resize",Me),ne.value&&(Z(),I.value=!0,ye(ne.value))}),i.onUnmounted(()=>{window.removeEventListener("resize",Me)});function Ge(){u.active&&(u.active=!1,ae())}function ue(e){return(e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX)||0}function ce(e){return(e.touches&&e.touches[0]?e.touches[0].clientY:e.clientY)||0}function Je(e,l,s=null){u&&u.active||(e.preventDefault&&e.preventDefault(),u={active:!0,type:l,position:s,clientX:ue(e),clientY:ce(e),...t.value})}function fe(e=!1){t.value.x1<0&&(t.value.x2-=e?t.value.x1:0,t.value.x1=0),t.value.y1<0&&(t.value.y2-=e?t.value.y1:0,t.value.y1=0),t.value.x2>p.value.width&&(t.value.x1-=e?t.value.x2-p.value.width:0,t.value.x2=p.value.width),t.value.y2>p.value.height&&(t.value.y1-=e?t.value.y2-p.value.height:0,t.value.y2=p.value.height)}function Ze(e){const l=ue(e)-u.clientX,s=ce(e)-u.clientY;t.value.x1=u.x1+l,t.value.y1=u.y1+s,t.value.x2=u.x2+l,t.value.y2=u.y2+s}const{checkAspectRatio:Ye}=Ve(t,p,d,u);function Xe(e){const l=ue(e)-u.clientX,s=ce(e)-u.clientY;switch(u.position){case"left":t.value.x1=Math.min(u.x1+l,t.value.x2-B);break;case"topleft":t.value.x1=Math.min(u.x1+l,t.value.x2-B),t.value.y1=Math.min(u.y1+s,t.value.y2-$);break;case"top":t.value.y1=Math.min(u.y1+s,t.value.y2-$);break;case"topright":t.value.x2=Math.max(u.x2+l,t.value.x1+B),t.value.y1=Math.min(u.y1+s,t.value.y2-$);break;case"right":t.value.x2=Math.max(u.x2+l,t.value.x1+B);break;case"bottomright":t.value.x2=Math.max(u.x2+l,t.value.x1+B),t.value.y2=Math.max(u.y2+s,t.value.y1+$);break;case"bottom":t.value.y2=Math.max(u.y2+s,t.value.y1+$);break;case"bottomleft":t.value.x1=Math.min(u.x1+l,t.value.x2-B),t.value.y2=Math.max(u.y2+s,t.value.y1+$);break;case"center":const{scale:b}=e,S=Math.abs(u.x2-u.x1)*b,K=Math.abs(u.y2-u.y1)*b,{x1:J}=t.value,{y1:D}=t.value;t.value.x1=Math.min(u.clientX-S/2,t.value.x2-B),t.value.y1=Math.min(u.clientY-K/2,t.value.y2-$),t.value.x2=Math.max(u.clientX+S/2,J+B),t.value.y2=Math.max(u.clientY+K/2,D+$);break}M.value&&Ye()}function et(e){u&&u.active&&(e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),clearTimeout(O),O=setTimeout(()=>{u.type===ee.Move?(Ze(e),fe(!0)):u.type===ee.Resize&&(Xe(e),fe(!1))},300))}return i.watch(ge,e=>{Z(),e&&e.target&&e.target.files&&e.target.files.length>0&&(I.value=!0,me(e.target.files[0]))}),i.watch(ne,e=>{e?(Z(),I.value=!0,ye(e)):(m.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片路径为空"}]}),I.value=!1,z=!0)}),i.watch(ze,e=>{Z(),I.value=!0,re(e)}),i.watch(Se,e=>{Z(),e&&(I.value=!0,me(e))}),i.watch(()=>[a.containWithinAspectRatio,a.canvasRotation,a.cropper,a.aspectRatio,a.transform,a.imageChangedEvent],([e,l,s,b,S,K],[J,D,Y,tt,at,it])=>{x&&x.complete&&_&&(e!==J||l!==D)&&ve(),s!==Y&&(oe(),se(),fe(!1),ae()),b!==tt&&A.value&&pe(),S!==at&&(ke(),ae()),K!==it&&(ge.value=K)}),{uploadError:z,imageVisible:A,backgroundColor:k,sourceImage:W,safeImgDataUrl:j,safeTransformStyle:P,maxSize:p,cropper:t,marginLeft:G,moveTypes:le,isLoading:I,startMove:Je,imageLoadedInView:Oe,moveStop:Ge,moveImg:et}}const Q=i.defineComponent({name:"FImageCropper",props:X,emits:["imageCropped","imageLoaded","cropperReady","loadImageFailed"],setup(a,f){const o=i.ref(a.alignImage),q=i.ref(a.roundCropper),m=i.ref(a.hideResizeSquares),t=i.ref(a.loadImageErrorText),y=i.ref(a.disabled),h=i.ref(null),{uploadError:M,imageVisible:d,backgroundColor:H,sourceImage:k,safeImgDataUrl:n,safeTransformStyle:r,maxSize:C,cropper:g,marginLeft:L,moveTypes:E,isLoading:U,startMove:N,imageLoadedInView:j,moveStop:I,moveImg:A}=he(a,f);function c(w){return i.createVNode("span",{class:`farris-image-cropper-resize-bar ${w}`,onMousedown:i.withModifiers(x=>N(x,E.Resize,w),["prevent"])},null)}function v(w){return i.createVNode("div",null,[i.createVNode("span",{class:`farris-image-cropper-resize-bar ${w}`,onMousedown:i.withModifiers(x=>N(x,E.Resize,w),["prevent"])},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize top"},[i.createVNode("span",{class:"farris-image-cropper-square"},null)])])}const F=["top","right","bottom","left"].map(w=>c(w)),O=["topleft","topright","bottomright","bottomleft"].map(w=>v(w));return()=>i.createVNode("div",{class:["farris-image-cropper-frame",{"farris-image-cropper-disabled":y.value}],style:{"text-align":o.value},onMousemove:i.withModifiers(w=>A(w),["prevent"]),onTouchmove:i.withModifiers(w=>A(w),["prevent"]),onMouseup:i.withModifiers(()=>I(),["prevent"]),onTouchend:i.withModifiers(()=>I(),["prevent"])},[!M&&i.createVNode("div",{ref:h,class:"farris-image-cropper",style:[{background:d.value?H.value:""}]},[n.value&&i.createVNode("img",{title:"farris-source-image",ref:k,class:"farris-source-image",style:[{visibility:d.value?"visible":"hidden"},{transform:r.value}],src:n.value,onLoad:()=>j()},null),C.value&&i.createVNode("div",{class:"farris-image-overlay",style:[{width:`${C.value.width||0}px`},{height:`${C.value.height||0}px`},{"margin-left":o.value==="center"?L.value:""}]},null),d.value&&i.createVNode("div",{class:["farris-image-cropper-wrapper",{"farris-image-cropper-rounded":q.value}],style:[{top:`${g.value.y1}px`},{left:`${g.value.x1}px`},{width:`${g.value.x2-g.value.x1}px`},{height:`${g.value.y2-g.value.y1}px`},{visibility:d.value?"visible":"hidden"},{"margin-left":o.value==="center"?L.value:""}],tabindex:"0"},[i.createVNode("div",{class:"farris-image-cropper-move",onMousedown:i.withModifiers(w=>N(w,E.Move,"topleft"),["prevent"])},null),!m.value&&i.createVNode("div",null,[O,F])])]),U.value&&i.createVNode("div",{class:"farris-image-cropper-loading"},[i.createVNode("div",{class:"farris-image-cropper-loading-spinner"},null)]),M&&i.createVNode("div",{class:"farris-image-cropper-error"},[t.value])])}}),Ne=i.defineComponent({name:"FImageCropperDesign",props:X,emits:["imageCropped","imageLoaded","cropperReady","loadImageFailed"],setup(a,f){const o=i.ref(a.alignImage),q=i.ref(a.roundCropper),m=i.ref(a.hideResizeSquares),t=i.ref(a.loadImageErrorText),y=i.ref(a.disabled),h=i.ref(null),{uploadError:M,imageVisible:d,backgroundColor:H,sourceImage:k,safeImgDataUrl:n,safeTransformStyle:r,maxSize:C,cropper:g,marginLeft:L,moveTypes:E,isLoading:U,startMove:N,imageLoadedInView:j,moveStop:I,moveImg:A}=he(a,f),c=i.ref(),v=i.inject("design-item-context"),F=be.useDesignerComponent(c,v);i.onMounted(()=>{c.value.componentInstance=F}),f.expose(F.value);function O(T){return i.createVNode("span",{class:`farris-image-cropper-resize-bar ${T}`,onMousedown:i.withModifiers(P=>N(P,E.Resize,T),["prevent"])},null)}function w(T){return i.createVNode("div",null,[i.createVNode("span",{class:`farris-image-cropper-resize-bar ${T}`,onMousedown:i.withModifiers(P=>N(P,E.Resize,T),["prevent"])},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize top"},[i.createVNode("span",{class:"farris-image-cropper-square"},null)])])}const x=["top","right","bottom","left"].map(T=>O(T)),W=["topleft","topright","bottomright","bottomleft"].map(T=>w(T));return()=>i.createVNode("div",{ref:c,class:["farris-image-cropper-frame",{"farris-image-cropper-disabled":y.value}],style:{"text-align":o.value},onMousemove:i.withModifiers(T=>A(T),["prevent"]),onTouchmove:i.withModifiers(T=>A(T),["prevent"]),onMouseup:i.withModifiers(()=>I(),["prevent"]),onTouchend:i.withModifiers(()=>I(),["prevent"])},[!M&&i.createVNode("div",{ref:h,class:"farris-image-cropper",style:[{background:d.value?H.value:""}]},[n.value&&i.createVNode("img",{title:"farris-source-image",ref:k,class:"farris-source-image",style:[{visibility:d.value?"visible":"hidden"},{transform:r.value}],src:n.value,onLoad:()=>j()},null),C.value&&i.createVNode("div",{class:"farris-image-overlay",style:[{width:`${C.value.width||0}px`},{height:`${C.value.height||0}px`},{"margin-left":o.value==="center"?L.value:""}]},null),d.value&&i.createVNode("div",{class:["farris-image-cropper-wrapper",{"farris-image-cropper-rounded":q.value}],style:[{top:`${g.value.y1}px`},{left:`${g.value.x1}px`},{width:`${g.value.x2-g.value.x1}px`},{height:`${g.value.y2-g.value.y1}px`},{visibility:d.value?"visible":"hidden"},{"margin-left":o.value==="center"?L.value:""}],tabindex:"0"},[i.createVNode("div",{class:"farris-image-cropper-move",onMousedown:i.withModifiers(T=>N(T,E.Move,"topleft"),["prevent"])},null),!m.value&&i.createVNode("div",null,[W,x])])]),U.value&&i.createVNode("div",{class:"farris-image-cropper-loading"},[i.createVNode("div",{class:"farris-image-cropper-loading-spinner"},null)]),M&&i.createVNode("div",{class:"farris-image-cropper-error"},[t.value])])}});Q.install=a=>{a.component(Q.name,Q)},Q.register=(a,f,o,q)=>{a["image-cropper"]=Q,f["image-cropper"]=ie},Q.registerDesigner=(a,f,o)=>{a["image-cropper"]=Ne,f["image-cropper"]=ie},R.ImageCropper=Q,R.default=Q,R.imageCropperProps=X,R.propsResolver=ie,Object.defineProperties(R,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});