@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 23.7 kB
JavaScript
(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"}})});