@farris/ui-vue 1.2.7 → 1.2.9

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

@@ -1 +1 @@
-(function(F,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es"],i):(F=typeof globalThis<"u"?globalThis:F||self,i(F["image-cropper"]={},F.Vue,F.LodashES))})(this,function(F,i,Ae){"use strict";const ge={},me={};function ie(e){const{properties:n,title:s}=e,M=Object.keys(n).reduce((c,t)=>(c[t]=n[t].type==="object"&&n[t].properties?ie(n[t]):Ae.cloneDeep(n[t].default),c),{});return M.id=`${s}-${Date.now()}`,M}function ne(e,n={}){const s=ge[e];if(s){let M=ie(s);const c=me[e];return M=c?c({getSchemaByType:ne},M,n):M,M}return null}function Ne(e,n){const s=ie(n);return Object.keys(e).reduce((M,c)=>(M[c]=e[c],M),s),s}function Ve(e,n){return Object.keys(e).filter(M=>e[M]!=null).reduce((M,c)=>{if(n.has(c)){const t=n.get(c);if(typeof t=="string")M[t]=e[c];else{const v=t(c,e[c],e);Object.assign(M,v)}}else M[c]=e[c];return M},{})}function Ce(e,n,s=new Map){const M=Ne(e,n);return Ve(M,s)}function Se(e={}){function n(u,p,g,l){if(typeof g=="number")return l[u].length===g;if(typeof g=="object"){const o=Object.keys(g)[0],w=g[o];if(o==="not")return Number(l[u].length)!==Number(w);if(o==="moreThan")return Number(l[u].length)>=Number(w);if(o==="lessThan")return Number(l[u].length)<=Number(w)}return!1}function s(u,p,g,l){return l[u]&&l[u].propertyValue&&String(l[u].propertyValue.value)===String(g)}const M=new Map([["length",n],["getProperty",s]]);Object.keys(e).reduce((u,p)=>(u.set(p,e[p]),u),M);function c(u,p){const g=u;return typeof p=="number"?[{target:g,operator:"length",param:null,value:Number(p)}]:typeof p=="boolean"?[{target:g,operator:"getProperty",param:u,value:!!p}]:typeof p=="object"?Object.keys(p).map(l=>{if(l==="length")return{target:g,operator:"length",param:null,value:p[l]};const o=l,w=p[l];return{target:g,operator:"getProperty",param:o,value:w}}):[]}function t(u){return Object.keys(u).reduce((g,l)=>{const o=c(l,u[l]);return g.push(...o),g},[])}function v(u,p){if(M.has(u.operator)){const g=M.get(u.operator);return g&&g(u.target,u.param,u.value,p)||!1}return!1}function x(u,p){return t(u).reduce((o,w)=>o&&v(w,p),!0)}function T(u,p){const g=Object.keys(u),l=g.includes("allOf"),o=g.includes("anyOf"),w=l||o,k=(w?u[w?l?"allOf":"anyOf":"allOf"]:[u]).map(E=>x(E,p));return l?!k.includes(!1):k.includes(!0)}return{parseValueSchema:T}}const Ee={},ze={};Se();function ke(e,n,s=new Map,M=(v,x,T)=>x,c={},t=v=>v){return ge[n.title]=n,me[n.title]=M,Ee[n.title]=c,ze[n.title]=t,(v={})=>{const x=Ce(v,n,s),T=Object.keys(e).reduce((u,p)=>(u[p]=e[p].default,u),{});return Object.assign(T,x)}}function De(e,n){return{customClass:n.class,customStyle:n.style}}function Be(e,n,s){return n}const $e=new Map([["appearance",De]]),We={$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"]},Le={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}}},le=ke(X,We,$e,Be,Le);var K=(e=>(e.Move="move",e.Resize="resize",e))(K||{});function Pe(){function e(c){switch(typeof c=="string"&&(c=n(c)),c){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 n(c){const t=new DataView(s(c));if(t.getUint16(0,!1)!==65496)return-2;const v=t.byteLength;let x=2;for(;x<v;){if(t.getUint16(x+2,!1)<=8)return-1;const T=t.getUint16(x,!1);if(x+=2,T===65505){if(t.getUint32(x+=2,!1)!==1165519206)return-1;const u=t.getUint16(x+=6,!1)===18761;x+=t.getUint32(x+4,u);const p=t.getUint16(x,u);x+=2;for(let g=0;g<p;g++)if(t.getUint16(x+g*12,u)===274)return t.getUint16(x+g*12+8,u)}else{if((T&65280)!==65280)break;x+=t.getUint16(x,!1)}}return-1}function s(c){c=c.replace(/^data:([^;]+);base64,/gmi,"");const t=atob(c),v=t.length,x=new Uint8Array(v);for(let T=0;T<v;T++)x[T]=t.charCodeAt(T);return x.buffer}function M(c,t,v){const x=c.width,T=c.height;t=Math.round(t),v=Math.round(v);const u=x/t,p=T/v,g=Math.ceil(u/2),l=Math.ceil(p/2),o=c.getContext("2d");if(o){const w=o.getImageData(0,0,x,T),b=o.createImageData(t,v),{data:B}=w,k=b.data;for(let $=0;$<v;$++)for(let E=0;E<t;E++){const I=(E+$*t)*4,S=$*p;let m=0,h=0,d=0,P=0,O=0,A=0,N=0;const _=Math.floor(E*u),z=Math.floor($*p);let q=Math.ceil((E+1)*u),J=Math.ceil(($+1)*p);q=Math.min(q,x),J=Math.min(J,T);for(let D=z;D<J;D++){const V=Math.abs(S-D)/l,re=E*u,te=V*V;for(let R=_;R<q;R++){const H=Math.abs(re-R)/g,W=Math.sqrt(te+H*H);if(W>=1)continue;m=2*W*W*W-3*W*W+1;const U=4*(R+D*x);N+=m*B[U+3],d+=m,B[U+3]<255&&(m=m*B[U+3]/250),P+=m*B[U],O+=m*B[U+1],A+=m*B[U+2],h+=m}}k[I]=P/h,k[I+1]=O/h,k[I+2]=A/h,k[I+3]=N/d}c.width=t,c.height=v,o.putImageData(b,0,0)}}return{resizeCanvas:M,getTransformationsFromExifData:e}}function _e(e,n,s,M){function c(l,o){e.value.x2=e.value.x1+(e.value.y2-e.value.y1)*s.value,l=Math.max(e.value.x2-n.value.width,0),o=Math.max(0-e.value.y1,0),(l>0||o>0)&&(e.value.x2-=o*s.value>l?o*s.value:l,e.value.y1+=o*s.value>l?o:l/s.value)}function t(l,o){e.value.x2=e.value.x1+(e.value.y2-e.value.y1)*s.value,l=Math.max(e.value.x2-n.value.width,0),o=Math.max(e.value.y2-n.value.height,0),(l>0||o>0)&&(e.value.x2-=o*s.value>l?o*s.value:l,e.value.y2-=o*s.value>l?o:l/s.value)}function v(l,o){e.value.y1=e.value.y2-(e.value.x2-e.value.x1)/s.value,l=Math.max(0-e.value.x1,0),o=Math.max(0-e.value.y1,0),(l>0||o>0)&&(e.value.x1+=o*s.value>l?o*s.value:l,e.value.y1+=o*s.value>l?o:l/s.value)}function x(l,o){e.value.y1=e.value.y2-(e.value.x2-e.value.x1)/s.value,l=Math.max(e.value.x2-n.value.width,0),o=Math.max(0-e.value.y1,0),(l>0||o>0)&&(e.value.x2-=o*s.value>l?o*s.value:l,e.value.y1+=o*s.value>l?o:l/s.value)}function T(l,o){e.value.y2=e.value.y1+(e.value.x2-e.value.x1)/s.value,l=Math.max(e.value.x2-n.value.width,0),o=Math.max(e.value.y2-n.value.height,0),(l>0||o>0)&&(e.value.x2-=o*s.value>l?o*s.value:l,e.value.y2-=o*s.value>l?o:l/s.value)}function u(l,o){e.value.y2=e.value.y1+(e.value.x2-e.value.x1)/s.value,l=Math.max(0-e.value.x1,0),o=Math.max(e.value.y2-n.value.height,0),(l>0||o>0)&&(e.value.x1+=o*s.value>l?o*s.value:l,e.value.y2-=o*s.value>l?o:l/s.value)}function p(){e.value.x2=e.value.x1+(e.value.y2-e.value.y1)*s.value,e.value.y2=e.value.y1+(e.value.x2-e.value.x1)/s.value;const l=Math.max(0-e.value.x1,0),o=Math.max(e.value.x2-n.value.width,0),w=Math.max(e.value.y2-n.value.height,0),b=Math.max(0-e.value.y1,0);(l>0||o>0||w>0||b>0)&&(e.value.x1+=w*s.value>l?w*s.value:l,e.value.x2-=b*s.value>o?b*s.value:o,e.value.y1+=b*s.value>o?b:o/s.value,e.value.y2-=w*s.value>l?w:l/s.value)}function g(){if(n.value.width&&n.value.height)switch(M.position){case"top":c(0,0);break;case"bottom":t(0,0);break;case"topleft":v(0,0);break;case"topright":x(0,0);break;case"right":case"bottomright":T(0,0);break;case"left":case"bottomleft":u(0,0);break;case"center":p();break}}return{checkAspectRatio:g}}function ve(e,n){const{resizeCanvas:s,getTransformationsFromExifData:M}=Pe(),c=i.inject("NotifyService"),t=i.ref(e.cropper),v=i.ref(e.transform),x=i.ref(e.cropperMinWidth),T=i.ref(e.maintainAspectRatio),u=i.ref(e.aspectRatio),p=i.ref(e.autoCrop),g=i.ref(e.backgroundColor),l=i.ref(e.resizeToWidth),o=i.ref(e.onlyScaleDown),w=i.ref(e.containWithinAspectRatio),b=i.ref(e.canvasRotation),B=i.ref(e.format),k=i.ref(e.imageQuality),$=i.ref(e.resizeToHeight),E=i.ref(e.cropperMinHeight),I=i.ref(""),S=i.ref(!0),m=i.ref(!0);let h,d,P=0,O,A,N;const _=i.ref(null),z=i.ref(""),q=i.ref(""),J=i.ref("0px"),D=i.ref(),V=i.ref({width:100,height:100}),re=K;let te,R=20,H=20,W=!1,U={rotate:0,flip:!1},y={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0};const pe=i.ref(e.imageChangedEvent),oe=i.ref(e.imageURL),Ue=i.ref(e.imageBase64),je=i.ref(e.imageFile);function Oe(){q.value="scaleX("+(v.value.scale||1)*(v.value.flipH?-1:1)+")scaleY("+(v.value.scale||1)*(v.value.flipV?-1:1)+")rotate("+(v.value.rotate||0)+"deg)"}function Z(){m.value=!1,D.value=null,I.value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=",y={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},d={width:0,height:0},t.value.x1=-100,t.value.y1=-100,t.value.x2=1e4,t.value.y2=1e4}function Fe(a){return/image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(a)}function qe(){if(b.value+=U.rotate,w.value&&h.width&&h.height){if(b.value%2){const f=h.width*u.value,C=h.height/u.value;return{width:Math.max(h.height,f),height:Math.max(h.width,C)}}const a=h.height*u.value,r=h.width/u.value;return{width:Math.max(h.width,a),height:Math.max(h.height,r)}}return b.value%2?{height:h.width,width:h.height}:{width:h.width,height:h.height}}function Qe(){b.value+=U.rotate;const a=qe(),r=document.createElement("canvas");a.width&&a.height&&(r.width=a.width,r.height=a.height);const f=r.getContext("2d");return h.width&&h.height&&N&&(f==null||f.setTransform(U.flip?-1:1,0,0,1,r.width/2,r.height/2),f==null||f.rotate(Math.PI*(b.value/2)),f==null||f.drawImage(N,-h.width/2,-h.height/2)),r.toDataURL()}function Je(a){return new Promise(r=>{te=a,I.value=a,D.value=new Image,D.value.onload=()=>{var f,C;d.width=(f=D.value)==null?void 0:f.naturalWidth,d.height=(C=D.value)==null?void 0:C.naturalHeight,r()},D.value.src=te})}function ye(){if(!N||!N.complete||!U)return Promise.reject(new Error("No image loaded"));const a=Qe();return Je(a)}function se(a){const r=f=>{c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片上传错误，请重试"}]}),S.value=!1,W=!0,n.emit("loadImageFailed"),N=null,z.value=""};N=new Image,N.onload=()=>{z.value=a,U=M(a),h.width=N==null?void 0:N.naturalWidth,h.height=N==null?void 0:N.naturalHeight,ye().then(()=>{W=!1}).catch(r)},N.onerror=r,N.src=a}function Ge(a,r){Fe(r)?(W=!1,se(a)):(c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片类型不正确,请重试"}]}),S.value=!1,W=!0,n.emit("loadImageFailed"))}function xe(a){const r=new FileReader;r.onload=f=>Ge(f.target.result,a.type),r.readAsDataURL(a)}function Me(a){const r=new Image;r.onerror=()=>{c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载错误，请重试"}]}),S.value=!1,W=!0,n.emit("loadImageFailed")},r.onload=()=>{W=!1;const f=document.createElement("canvas"),C=f.getContext("2d");f.width=r.width,f.height=r.height,C==null||C.drawImage(r,0,0),se(f.toDataURL())},r.crossOrigin="anonymous",r.src=a}function Ze(){return _.value&&_.value&&_.value.offsetWidth>0}function ue(){if(_.value){const a=_.value;V.value.width=a.offsetWidth,V.value.height=a.offsetHeight,J.value="calc(50% - "+V.value.width/2+"px)"}}function Ye(){D.value&&V.value.width&&(R=x.value>0?Math.max(20,x.value/D.value.width*V.value.width):20)}function Xe(){T.value?H=Math.max(20,R/u.value):E.value>0&&D.value&&V.value.height?H=Math.max(20,E.value/D.value.height*V.value.height):H=20}function ce(){D.value?(Ye(),Xe()):(R=20,H=20)}function Ke(){const a=_.value,r=i.ref({x1:0,x2:0,y1:0,y2:0});if(a&&d.width&&d.height){const f=d.width/a.offsetWidth;r.value={x1:Math.round(t.value.x1*f),y1:Math.round(t.value.y1*f),x2:Math.round(t.value.x2*f),y2:Math.round(t.value.y2*f)},w.value||(r.value.x1=Math.max(r.value.x1,0),r.value.y1=Math.max(r.value.y1,0),r.value.x2=Math.min(r.value.x2,d.width),r.value.y2=Math.min(r.value.y2,d.height))}return r.value}function et(){b.value+=U.rotate;const a=_.value,r=i.ref({x1:0,x2:0,y1:0,y2:0});if(a&&d.height&&d.width&&h.height&&h.width){const f=d.width/a.offsetWidth;let C,L;b.value%2?(C=(d.width-h.height)/2,L=(d.height-h.width)/2):(C=(d.width-h.width)/2,L=(d.height-h.height)/2),r.value={x1:Math.round(t.value.x1*f)-C,y1:Math.round(t.value.y1*f)-L,x2:Math.round(t.value.x2*f)-C,y2:Math.round(t.value.y2*f)-L},w.value||(r.value.x1=Math.max(r.value.x1,0),r.value.y1=Math.max(r.value.y1,0),r.value.x2=Math.min(r.value.x2,d.width),r.value.y2=Math.min(r.value.y2,d.height))}return r.value}function tt(a,r){if(l.value>0){if(!o.value||a>l.value)return l.value/a}else if($.value>0&&(!o.value||r>$.value))return $.value/r;return 1}function at(){return Math.min(1,Math.max(0,k.value/100))}function it(a){return a.toDataURL("image/"+B.value,at())}function nt(){if(_.value&&_.value&&D.value!=null){const a=Ke(),r=a.x2-a.x1,f=a.y2-a.y1,C=document.createElement("canvas");C.width=r,C.height=f;const L=C.getContext("2d");if(L){g.value!=null&&(L.fillStyle=g.value,L.fillRect(0,0,r,f));const Q=(v.value.scale||1)*(v.value.flipH?-1:1),G=(v.value.scale||1)*(v.value.flipV?-1:1);d.width&&d.height&&(L.setTransform(Q,0,0,G,d.width/2,d.height/2),L.translate(-a.x1/Q,-a.y1/G),L.rotate((v.value.rotate||0)*Math.PI/180),L.drawImage(D.value,-d.width/2,-d.height/2));const j={width:r,height:f,imagePosition:a,cropperPosition:{...t.value}};w.value&&(j.offsetImagePosition=et());const Y=tt(r,f);return Y!==1&&(j.width=Math.round(r*Y),j.height=T.value?Math.round(j.width/u.value):Math.round(f*Y),s(C,j.width,j.height)),j.base64=it(C),n.emit("imageCropped",j),j}}return null}function ae(){p.value&&nt()}function be(){const a=_.value;if(a){if(!T.value)t.value.x1=0,t.value.x2=a.offsetWidth,t.value.y1=0,t.value.y2=a.offsetHeight;else if(a.offsetWidth/u.value<a.offsetHeight){t.value.x1=0,t.value.x2=a.offsetWidth;const r=a.offsetWidth/u.value;t.value.y1=(a.offsetHeight-r)/2,t.value.y2=t.value.y1+r}else{t.value.y1=0,t.value.y2=a.offsetHeight;const r=a.offsetHeight*u.value;t.value.x1=(a.offsetWidth-r)/2,t.value.x2=t.value.x1+r}ae(),m.value=!0}}function we(){P>40?(c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载超时，请重试"}]}),W=!0,S.value=!1,n.emit("loadImageFailed")):Ze()?(W=!1,ue(),ce(),be(),n.emit("cropperReady",{...V.value})):(P++,setTimeout(()=>we(),50))}function lt(){D.value!=null&&(S.value=!1,n.emit("imageLoaded"),P=0,setTimeout(()=>we()))}function rt(){const a=_.value;(V.value.width!==(a==null?void 0:a.offsetWidth)||V.value.height!==(a==null?void 0:a.offsetHeight))&&V.value.width&&V.value.height&&a&&(t.value.x1=t.value.x1*a.offsetWidth/V.value.width,t.value.x2=t.value.x2*a.offsetWidth/V.value.width,t.value.y1=t.value.y1*a.offsetHeight/V.value.height,t.value.y2=t.value.y2*a.offsetHeight/V.value.height)}const ot=()=>{rt(),ue(),ce()},Te=()=>{clearTimeout(A),A=setTimeout(ot,300)};i.onMounted(()=>{window.addEventListener("resize",Te),oe.value&&(Z(),S.value=!0,Me(oe.value))}),i.onUnmounted(()=>{window.removeEventListener("resize",Te)});function st(){y.active&&(y.active=!1,ae())}function fe(a){return(a.touches&&a.touches[0]?a.touches[0].clientX:a.clientX)||0}function he(a){return(a.touches&&a.touches[0]?a.touches[0].clientY:a.clientY)||0}function ut(a,r,f=null){y&&y.active||(a.preventDefault&&a.preventDefault(),y={active:!0,type:r,position:f,clientX:fe(a),clientY:he(a),...t.value})}function de(a=!1){t.value.x1<0&&(t.value.x2-=a?t.value.x1:0,t.value.x1=0),t.value.y1<0&&(t.value.y2-=a?t.value.y1:0,t.value.y1=0),t.value.x2>V.value.width&&(t.value.x1-=a?t.value.x2-V.value.width:0,t.value.x2=V.value.width),t.value.y2>V.value.height&&(t.value.y1-=a?t.value.y2-V.value.height:0,t.value.y2=V.value.height)}function ct(a){const r=fe(a)-y.clientX,f=he(a)-y.clientY;t.value.x1=y.x1+r,t.value.y1=y.y1+f,t.value.x2=y.x2+r,t.value.y2=y.y2+f}const{checkAspectRatio:ft}=_e(t,V,u,y);function ht(a){const r=fe(a)-y.clientX,f=he(a)-y.clientY;switch(y.position){case"left":t.value.x1=Math.min(y.x1+r,t.value.x2-R);break;case"topleft":t.value.x1=Math.min(y.x1+r,t.value.x2-R),t.value.y1=Math.min(y.y1+f,t.value.y2-H);break;case"top":t.value.y1=Math.min(y.y1+f,t.value.y2-H);break;case"topright":t.value.x2=Math.max(y.x2+r,t.value.x1+R),t.value.y1=Math.min(y.y1+f,t.value.y2-H);break;case"right":t.value.x2=Math.max(y.x2+r,t.value.x1+R);break;case"bottomright":t.value.x2=Math.max(y.x2+r,t.value.x1+R),t.value.y2=Math.max(y.y2+f,t.value.y1+H);break;case"bottom":t.value.y2=Math.max(y.y2+f,t.value.y1+H);break;case"bottomleft":t.value.x1=Math.min(y.x1+r,t.value.x2-R),t.value.y2=Math.max(y.y2+f,t.value.y1+H);break;case"center":const{scale:C}=a,L=Math.abs(y.x2-y.x1)*C,Q=Math.abs(y.y2-y.y1)*C,{x1:G}=t.value,{y1:j}=t.value;t.value.x1=Math.min(y.clientX-L/2,t.value.x2-R),t.value.y1=Math.min(y.clientY-Q/2,t.value.y2-H),t.value.x2=Math.max(y.clientX+L/2,G+R),t.value.y2=Math.max(y.clientY+Q/2,j+H);break}T.value&&ft()}function dt(a){y&&y.active&&(a.stopPropagation&&a.stopPropagation(),a.preventDefault&&a.preventDefault(),clearTimeout(O),O=setTimeout(()=>{y.type===K.Move?(ct(a),de(!0)):y.type===K.Resize&&(ht(a),de(!1))},300))}return i.watch(pe,a=>{Z(),a&&a.target&&a.target.files&&a.target.files.length>0&&(S.value=!0,xe(a.target.files[0]))}),i.watch(oe,a=>{a?(Z(),S.value=!0,Me(a)):(c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片路径为空"}]}),S.value=!1,W=!0)}),i.watch(Ue,a=>{Z(),S.value=!0,se(a)}),i.watch(je,a=>{Z(),a&&(S.value=!0,xe(a))}),i.watch(()=>[e.containWithinAspectRatio,e.canvasRotation,e.cropper,e.aspectRatio,e.transform,e.imageChangedEvent],([a,r,f,C,L,Q],[G,j,Y,gt,mt,vt])=>{N&&N.complete&&U&&(a!==G||r!==j)&&ye(),f!==Y&&(ue(),ce(),de(!1),ae()),C!==gt&&m.value&&be(),L!==mt&&(Oe(),ae()),Q!==vt&&(pe.value=Q)}),{uploadError:W,imageVisible:m,backgroundColor:g,sourceImage:_,safeImgDataUrl:I,safeTransformStyle:q,maxSize:V,cropper:t,marginLeft:J,moveTypes:re,isLoading:S,startMove:ut,imageLoadedInView:lt,moveStop:st,moveImg:dt}}const ee=i.defineComponent({name:"FImageCropper",props:X,emits:["imageCropped","imageLoaded","cropperReady","loadImageFailed"],setup(e,n){const s=i.ref(e.alignImage),M=i.ref(e.roundCropper),c=i.ref(e.hideResizeSquares),t=i.ref(e.loadImageErrorText),v=i.ref(e.disabled),x=i.ref(null),{uploadError:T,imageVisible:u,backgroundColor:p,sourceImage:g,safeImgDataUrl:l,safeTransformStyle:o,maxSize:w,cropper:b,marginLeft:B,moveTypes:k,isLoading:$,startMove:E,imageLoadedInView:I,moveStop:S,moveImg:m}=ve(e,n);function h(A){return i.createVNode("span",{class:`farris-image-cropper-resize-bar ${A}`,onMousedown:i.withModifiers(N=>E(N,k.Resize,A),["prevent"])},null)}function d(A){return i.createVNode("div",null,[i.createVNode("span",{class:`farris-image-cropper-resize-bar ${A}`,onMousedown:i.withModifiers(N=>E(N,k.Resize,A),["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 P=["top","right","bottom","left"].map(A=>h(A)),O=["topleft","topright","bottomright","bottomleft"].map(A=>d(A));return()=>i.createVNode("div",{class:["farris-image-cropper-frame",{"farris-image-cropper-disabled":v.value}],style:{"text-align":s.value},onMousemove:i.withModifiers(A=>m(A),["prevent"]),onTouchmove:i.withModifiers(A=>m(A),["prevent"]),onMouseup:i.withModifiers(()=>S(),["prevent"]),onTouchend:i.withModifiers(()=>S(),["prevent"])},[!T&&i.createVNode("div",{ref:x,class:"farris-image-cropper",style:[{background:u.value?p.value:""}]},[l.value&&i.createVNode("img",{title:"farris-source-image",ref:g,class:"farris-source-image",style:[{visibility:u.value?"visible":"hidden"},{transform:o.value}],src:l.value,onLoad:()=>I()},null),w.value&&i.createVNode("div",{class:"farris-image-overlay",style:[{width:`${w.value.width||0}px`},{height:`${w.value.height||0}px`},{"margin-left":s.value==="center"?B.value:""}]},null),u.value&&i.createVNode("div",{class:["farris-image-cropper-wrapper",{"farris-image-cropper-rounded":M.value}],style:[{top:`${b.value.y1}px`},{left:`${b.value.x1}px`},{width:`${b.value.x2-b.value.x1}px`},{height:`${b.value.y2-b.value.y1}px`},{visibility:u.value?"visible":"hidden"},{"margin-left":s.value==="center"?B.value:""}],tabindex:"0"},[i.createVNode("div",{class:"farris-image-cropper-move",onMousedown:i.withModifiers(A=>E(A,k.Move,"topleft"),["prevent"])},null),!c.value&&i.createVNode("div",null,[O,P])])]),$.value&&i.createVNode("div",{class:"farris-image-cropper-loading"},[i.createVNode("div",{class:"farris-image-cropper-loading-spinner"},null)]),T&&i.createVNode("div",{class:"farris-image-cropper-error"},[t.value])])}});function Re(e,n,s){var S;function M(){}const c="",t="",v=i.ref();function x(){return(n==null?void 0:n.schema.componentType)!=="frame"}function T(){return!1}function u(){return(n==null?void 0:n.schema.componentType)!=="frame"}function p(){return(n==null?void 0:n.schema.componentType)==="frame"}function g(m){if(!m||!m.value)return null;if(m.value.schema&&m.value.schema.type==="component")return m.value;const h=i.ref(m==null?void 0:m.value.parent),d=g(h);return d||null}function l(m=n){const{componentInstance:h,designerItemElementRef:d}=m;return!h||!h.value?null:h.value.canMove?d:l(m.parent)}function o(m){return!!s}function w(){return(n==null?void 0:n.schema.label)||(n==null?void 0:n.schema.title)||(n==null?void 0:n.schema.name)}function b(){}function B(m,h){}function k(m){const{componentType:h}=m;let d=ne(h,m);const P=h.toLowerCase().replace("-","_");return d&&!d.id&&d.type===h&&(d.id=`${P}_${Math.random().toString().slice(2,6)}`),d}function $(m,h){const d=String(m.getAttribute("data-controltype")),P=m.getAttribute("data-feature"),O=P?JSON.parse(P):{};O.parentComponentInstance=v.value;let A=ne(d,O);const N=d.toLowerCase().replace("-","_");return A&&!A.id&&A.type===d&&(A.id=`${N}_${Math.random().toString().slice(2,6)}`),A}function E(m){}function I(...m){}return v.value={canMove:x(),canSelectParent:T(),canDelete:u(),canNested:!p(),contents:n==null?void 0:n.schema.contents,elementRef:e,parent:(S=n==null?void 0:n.parent)==null?void 0:S.componentInstance,schema:n==null?void 0:n.schema,styles:c,designerClass:t,canAccepts:o,getBelongedComponentInstance:g,getDraggableDesignItemElement:l,getDraggingDisplayText:w,getPropConfig:I,getDragScopeElement:b,onAcceptMovedChildElement:B,onAcceptNewChildElement:$,onChildElementMovedOut:E,addNewChildComponentSchema:k,updateDragAndDropRules:M,triggerBelongedComponentToMoveWhenMoved:i.ref(!1),triggerBelongedComponentToDeleteWhenDeleted:i.ref(!1)},v}const He=i.defineComponent({name:"FImageCropperDesign",props:X,emits:["imageCropped","imageLoaded","cropperReady","loadImageFailed"],setup(e,n){const s=i.ref(e.alignImage),M=i.ref(e.roundCropper),c=i.ref(e.hideResizeSquares),t=i.ref(e.loadImageErrorText),v=i.ref(e.disabled),x=i.ref(null),{uploadError:T,imageVisible:u,backgroundColor:p,sourceImage:g,safeImgDataUrl:l,safeTransformStyle:o,maxSize:w,cropper:b,marginLeft:B,moveTypes:k,isLoading:$,startMove:E,imageLoadedInView:I,moveStop:S,moveImg:m}=ve(e,n),h=i.ref(),d=i.inject("design-item-context"),P=Re(h,d);i.onMounted(()=>{h.value.componentInstance=P}),n.expose(P.value);function O(z){return i.createVNode("span",{class:`farris-image-cropper-resize-bar ${z}`,onMousedown:i.withModifiers(q=>E(q,k.Resize,z),["prevent"])},null)}function A(z){return i.createVNode("div",null,[i.createVNode("span",{class:`farris-image-cropper-resize-bar ${z}`,onMousedown:i.withModifiers(q=>E(q,k.Resize,z),["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 N=["top","right","bottom","left"].map(z=>O(z)),_=["topleft","topright","bottomright","bottomleft"].map(z=>A(z));return()=>i.createVNode("div",{ref:h,class:["farris-image-cropper-frame",{"farris-image-cropper-disabled":v.value}],style:{"text-align":s.value},onMousemove:i.withModifiers(z=>m(z),["prevent"]),onTouchmove:i.withModifiers(z=>m(z),["prevent"]),onMouseup:i.withModifiers(()=>S(),["prevent"]),onTouchend:i.withModifiers(()=>S(),["prevent"])},[!T&&i.createVNode("div",{ref:x,class:"farris-image-cropper",style:[{background:u.value?p.value:""}]},[l.value&&i.createVNode("img",{title:"farris-source-image",ref:g,class:"farris-source-image",style:[{visibility:u.value?"visible":"hidden"},{transform:o.value}],src:l.value,onLoad:()=>I()},null),w.value&&i.createVNode("div",{class:"farris-image-overlay",style:[{width:`${w.value.width||0}px`},{height:`${w.value.height||0}px`},{"margin-left":s.value==="center"?B.value:""}]},null),u.value&&i.createVNode("div",{class:["farris-image-cropper-wrapper",{"farris-image-cropper-rounded":M.value}],style:[{top:`${b.value.y1}px`},{left:`${b.value.x1}px`},{width:`${b.value.x2-b.value.x1}px`},{height:`${b.value.y2-b.value.y1}px`},{visibility:u.value?"visible":"hidden"},{"margin-left":s.value==="center"?B.value:""}],tabindex:"0"},[i.createVNode("div",{class:"farris-image-cropper-move",onMousedown:i.withModifiers(z=>E(z,k.Move,"topleft"),["prevent"])},null),!c.value&&i.createVNode("div",null,[_,N])])]),$.value&&i.createVNode("div",{class:"farris-image-cropper-loading"},[i.createVNode("div",{class:"farris-image-cropper-loading-spinner"},null)]),T&&i.createVNode("div",{class:"farris-image-cropper-error"},[t.value])])}}),Ie={install(e){e.component(ee.name,ee)},register(e,n,s,M){e["image-cropper"]=ee,n["image-cropper"]=le},registerDesigner(e,n,s){e["image-cropper"]=He,n["image-cropper"]=le}};F.ImageCropper=ee,F.default=Ie,F.imageCropperProps=X,F.propsResolver=le,Object.defineProperties(F,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(F,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es"],i):(F=typeof globalThis<"u"?globalThis:F||self,i(F["image-cropper"]={},F.Vue,F.LodashES))})(this,function(F,i,Ae){"use strict";const ge={},me={};function ie(e){const{properties:n,title:s,ignore:y}=e,c=y&&Array.isArray(y),t=Object.keys(n).reduce((d,g)=>((!c||!y.find(w=>w==g))&&(d[g]=n[g].type==="object"&&n[g].properties?ie(n[g]):Ae.cloneDeep(n[g].default)),d),{});return(!c||!y.find(d=>d=="id"))&&(t.id=`${s}-${Date.now()}`),t}function ne(e,n={},s){const y=ge[e];if(y){let c=ie(y);const t=me[e];return c=t?t({getSchemaByType:ne},c,n,s):c,c}return null}function Ne(e,n){const s=ie(n);return Object.keys(e).reduce((y,c)=>(y[c]&&typeof y[c]=="object"?Object.assign(y[c],e[c]):y[c]=e[c],y),s),s}function Ve(e,n){return Object.keys(e).filter(y=>e[y]!=null).reduce((y,c)=>{if(n.has(c)){const t=n.get(c);if(typeof t=="string")y[t]=e[c];else{const d=t(c,e[c],e);Object.assign(y,d)}}else y[c]=e[c];return y},{})}function Ce(e,n,s=new Map){const y=Ne(e,n);return Ve(y,s)}function Se(e={}){function n(u,x,v,r){if(typeof v=="number")return r[u].length===v;if(typeof v=="object"){const o=Object.keys(v)[0],T=v[o];if(o==="not")return Number(r[u].length)!==Number(T);if(o==="moreThan")return Number(r[u].length)>=Number(T);if(o==="lessThan")return Number(r[u].length)<=Number(T)}return!1}function s(u,x,v,r){return r[u]&&r[u].propertyValue&&String(r[u].propertyValue.value)===String(v)}const y=new Map([["length",n],["getProperty",s]]);Object.keys(e).reduce((u,x)=>(u.set(x,e[x]),u),y);function c(u,x){const v=u;return typeof x=="number"?[{target:v,operator:"length",param:null,value:Number(x)}]:typeof x=="boolean"?[{target:v,operator:"getProperty",param:u,value:!!x}]:typeof x=="object"?Object.keys(x).map(r=>{if(r==="length")return{target:v,operator:"length",param:null,value:x[r]};const o=r,T=x[r];return{target:v,operator:"getProperty",param:o,value:T}}):[]}function t(u){return Object.keys(u).reduce((v,r)=>{const o=c(r,u[r]);return v.push(...o),v},[])}function d(u,x){if(y.has(u.operator)){const v=y.get(u.operator);return v&&v(u.target,u.param,u.value,x)||!1}return!1}function g(u,x){return t(u).reduce((o,T)=>o&&d(T,x),!0)}function w(u,x){const v=Object.keys(u),r=v.includes("allOf"),o=v.includes("anyOf"),T=r||o,D=(T?u[T?r?"allOf":"anyOf":"allOf"]:[u]).map(E=>g(E,x));return r?!D.includes(!1):D.includes(!0)}return{parseValueSchema:w}}const Ee={},ze={};Se();function ke(e,n,s=new Map,y=(d,g,w)=>g,c={},t=d=>d){return ge[n.title]=n,me[n.title]=y,Ee[n.title]=c,ze[n.title]=t,(d={})=>{const g=Ce(d,n,s),w=Object.keys(e).reduce((u,x)=>(u[x]=e[x].default,u),{});return Object.assign(w,g)}}function De(e,n){return{customClass:n.class,customStyle:n.style}}function Be(e,n,s){return n}const $e=new Map([["appearance",De]]),Le={$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"]},We={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}}},re=ke(X,Le,$e,Be,We);var K=(e=>(e.Move="move",e.Resize="resize",e))(K||{});function Pe(){function e(c){switch(typeof c=="string"&&(c=n(c)),c){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 n(c){const t=new DataView(s(c));if(t.getUint16(0,!1)!==65496)return-2;const d=t.byteLength;let g=2;for(;g<d;){if(t.getUint16(g+2,!1)<=8)return-1;const w=t.getUint16(g,!1);if(g+=2,w===65505){if(t.getUint32(g+=2,!1)!==1165519206)return-1;const u=t.getUint16(g+=6,!1)===18761;g+=t.getUint32(g+4,u);const x=t.getUint16(g,u);g+=2;for(let v=0;v<x;v++)if(t.getUint16(g+v*12,u)===274)return t.getUint16(g+v*12+8,u)}else{if((w&65280)!==65280)break;g+=t.getUint16(g,!1)}}return-1}function s(c){c=c.replace(/^data:([^;]+);base64,/gmi,"");const t=atob(c),d=t.length,g=new Uint8Array(d);for(let w=0;w<d;w++)g[w]=t.charCodeAt(w);return g.buffer}function y(c,t,d){const g=c.width,w=c.height;t=Math.round(t),d=Math.round(d);const u=g/t,x=w/d,v=Math.ceil(u/2),r=Math.ceil(x/2),o=c.getContext("2d");if(o){const T=o.getImageData(0,0,g,w),b=o.createImageData(t,d),{data:$}=T,D=b.data;for(let L=0;L<d;L++)for(let E=0;E<t;E++){const H=(E+L*t)*4,S=L*x;let p=0,h=0,m=0,z=0,I=0,A=0,N=0;const _=Math.floor(E*u),k=Math.floor(L*x);let q=Math.ceil((E+1)*u),J=Math.ceil((L+1)*x);q=Math.min(q,g),J=Math.min(J,w);for(let B=k;B<J;B++){const V=Math.abs(S-B)/r,le=E*u,te=V*V;for(let R=_;R<q;R++){const j=Math.abs(le-R)/v,W=Math.sqrt(te+j*j);if(W>=1)continue;p=2*W*W*W-3*W*W+1;const U=4*(R+B*g);N+=p*$[U+3],m+=p,$[U+3]<255&&(p=p*$[U+3]/250),z+=p*$[U],I+=p*$[U+1],A+=p*$[U+2],h+=p}}D[H]=z/h,D[H+1]=I/h,D[H+2]=A/h,D[H+3]=N/m}c.width=t,c.height=d,o.putImageData(b,0,0)}}return{resizeCanvas:y,getTransformationsFromExifData:e}}function _e(e,n,s,y){function c(r,o){e.value.x2=e.value.x1+(e.value.y2-e.value.y1)*s.value,r=Math.max(e.value.x2-n.value.width,0),o=Math.max(0-e.value.y1,0),(r>0||o>0)&&(e.value.x2-=o*s.value>r?o*s.value:r,e.value.y1+=o*s.value>r?o:r/s.value)}function t(r,o){e.value.x2=e.value.x1+(e.value.y2-e.value.y1)*s.value,r=Math.max(e.value.x2-n.value.width,0),o=Math.max(e.value.y2-n.value.height,0),(r>0||o>0)&&(e.value.x2-=o*s.value>r?o*s.value:r,e.value.y2-=o*s.value>r?o:r/s.value)}function d(r,o){e.value.y1=e.value.y2-(e.value.x2-e.value.x1)/s.value,r=Math.max(0-e.value.x1,0),o=Math.max(0-e.value.y1,0),(r>0||o>0)&&(e.value.x1+=o*s.value>r?o*s.value:r,e.value.y1+=o*s.value>r?o:r/s.value)}function g(r,o){e.value.y1=e.value.y2-(e.value.x2-e.value.x1)/s.value,r=Math.max(e.value.x2-n.value.width,0),o=Math.max(0-e.value.y1,0),(r>0||o>0)&&(e.value.x2-=o*s.value>r?o*s.value:r,e.value.y1+=o*s.value>r?o:r/s.value)}function w(r,o){e.value.y2=e.value.y1+(e.value.x2-e.value.x1)/s.value,r=Math.max(e.value.x2-n.value.width,0),o=Math.max(e.value.y2-n.value.height,0),(r>0||o>0)&&(e.value.x2-=o*s.value>r?o*s.value:r,e.value.y2-=o*s.value>r?o:r/s.value)}function u(r,o){e.value.y2=e.value.y1+(e.value.x2-e.value.x1)/s.value,r=Math.max(0-e.value.x1,0),o=Math.max(e.value.y2-n.value.height,0),(r>0||o>0)&&(e.value.x1+=o*s.value>r?o*s.value:r,e.value.y2-=o*s.value>r?o:r/s.value)}function x(){e.value.x2=e.value.x1+(e.value.y2-e.value.y1)*s.value,e.value.y2=e.value.y1+(e.value.x2-e.value.x1)/s.value;const r=Math.max(0-e.value.x1,0),o=Math.max(e.value.x2-n.value.width,0),T=Math.max(e.value.y2-n.value.height,0),b=Math.max(0-e.value.y1,0);(r>0||o>0||T>0||b>0)&&(e.value.x1+=T*s.value>r?T*s.value:r,e.value.x2-=b*s.value>o?b*s.value:o,e.value.y1+=b*s.value>o?b:o/s.value,e.value.y2-=T*s.value>r?T:r/s.value)}function v(){if(n.value.width&&n.value.height)switch(y.position){case"top":c(0,0);break;case"bottom":t(0,0);break;case"topleft":d(0,0);break;case"topright":g(0,0);break;case"right":case"bottomright":w(0,0);break;case"left":case"bottomleft":u(0,0);break;case"center":x();break}}return{checkAspectRatio:v}}function ve(e,n){const{resizeCanvas:s,getTransformationsFromExifData:y}=Pe(),c=i.inject("NotifyService"),t=i.ref(e.cropper),d=i.ref(e.transform),g=i.ref(e.cropperMinWidth),w=i.ref(e.maintainAspectRatio),u=i.ref(e.aspectRatio),x=i.ref(e.autoCrop),v=i.ref(e.backgroundColor),r=i.ref(e.resizeToWidth),o=i.ref(e.onlyScaleDown),T=i.ref(e.containWithinAspectRatio),b=i.ref(e.canvasRotation),$=i.ref(e.format),D=i.ref(e.imageQuality),L=i.ref(e.resizeToHeight),E=i.ref(e.cropperMinHeight),H=i.ref(""),S=i.ref(!0),p=i.ref(!0);let h,m,z=0,I,A,N;const _=i.ref(null),k=i.ref(""),q=i.ref(""),J=i.ref("0px"),B=i.ref(),V=i.ref({width:100,height:100}),le=K;let te,R=20,j=20,W=!1,U={rotate:0,flip:!1},M={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0};const pe=i.ref(e.imageChangedEvent),oe=i.ref(e.imageURL),Ie=i.ref(e.imageBase64),Ue=i.ref(e.imageFile);function Oe(){q.value="scaleX("+(d.value.scale||1)*(d.value.flipH?-1:1)+")scaleY("+(d.value.scale||1)*(d.value.flipV?-1:1)+")rotate("+(d.value.rotate||0)+"deg)"}function Z(){p.value=!1,B.value=null,H.value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=",M={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},m={width:0,height:0},t.value.x1=-100,t.value.y1=-100,t.value.x2=1e4,t.value.y2=1e4}function Fe(a){return/image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(a)}function qe(){if(b.value+=U.rotate,T.value&&h.width&&h.height){if(b.value%2){const f=h.width*u.value,C=h.height/u.value;return{width:Math.max(h.height,f),height:Math.max(h.width,C)}}const a=h.height*u.value,l=h.width/u.value;return{width:Math.max(h.width,a),height:Math.max(h.height,l)}}return b.value%2?{height:h.width,width:h.height}:{width:h.width,height:h.height}}function Qe(){b.value+=U.rotate;const a=qe(),l=document.createElement("canvas");a.width&&a.height&&(l.width=a.width,l.height=a.height);const f=l.getContext("2d");return h.width&&h.height&&N&&(f==null||f.setTransform(U.flip?-1:1,0,0,1,l.width/2,l.height/2),f==null||f.rotate(Math.PI*(b.value/2)),f==null||f.drawImage(N,-h.width/2,-h.height/2)),l.toDataURL()}function Je(a){return new Promise(l=>{te=a,H.value=a,B.value=new Image,B.value.onload=()=>{var f,C;m.width=(f=B.value)==null?void 0:f.naturalWidth,m.height=(C=B.value)==null?void 0:C.naturalHeight,l()},B.value.src=te})}function ye(){if(!N||!N.complete||!U)return Promise.reject(new Error("No image loaded"));const a=Qe();return Je(a)}function se(a){const l=f=>{c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片上传错误，请重试"}]}),S.value=!1,W=!0,n.emit("loadImageFailed"),N=null,k.value=""};N=new Image,N.onload=()=>{k.value=a,U=y(a),h.width=N==null?void 0:N.naturalWidth,h.height=N==null?void 0:N.naturalHeight,ye().then(()=>{W=!1}).catch(l)},N.onerror=l,N.src=a}function Ge(a,l){Fe(l)?(W=!1,se(a)):(c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片类型不正确,请重试"}]}),S.value=!1,W=!0,n.emit("loadImageFailed"))}function xe(a){const l=new FileReader;l.onload=f=>Ge(f.target.result,a.type),l.readAsDataURL(a)}function Me(a){const l=new Image;l.onerror=()=>{c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载错误，请重试"}]}),S.value=!1,W=!0,n.emit("loadImageFailed")},l.onload=()=>{W=!1;const f=document.createElement("canvas"),C=f.getContext("2d");f.width=l.width,f.height=l.height,C==null||C.drawImage(l,0,0),se(f.toDataURL())},l.crossOrigin="anonymous",l.src=a}function Ze(){return _.value&&_.value&&_.value.offsetWidth>0}function ue(){if(_.value){const a=_.value;V.value.width=a.offsetWidth,V.value.height=a.offsetHeight,J.value="calc(50% - "+V.value.width/2+"px)"}}function Ye(){B.value&&V.value.width&&(R=g.value>0?Math.max(20,g.value/B.value.width*V.value.width):20)}function Xe(){w.value?j=Math.max(20,R/u.value):E.value>0&&B.value&&V.value.height?j=Math.max(20,E.value/B.value.height*V.value.height):j=20}function ce(){B.value?(Ye(),Xe()):(R=20,j=20)}function Ke(){const a=_.value,l=i.ref({x1:0,x2:0,y1:0,y2:0});if(a&&m.width&&m.height){const f=m.width/a.offsetWidth;l.value={x1:Math.round(t.value.x1*f),y1:Math.round(t.value.y1*f),x2:Math.round(t.value.x2*f),y2:Math.round(t.value.y2*f)},T.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,m.width),l.value.y2=Math.min(l.value.y2,m.height))}return l.value}function et(){b.value+=U.rotate;const a=_.value,l=i.ref({x1:0,x2:0,y1:0,y2:0});if(a&&m.height&&m.width&&h.height&&h.width){const f=m.width/a.offsetWidth;let C,P;b.value%2?(C=(m.width-h.height)/2,P=(m.height-h.width)/2):(C=(m.width-h.width)/2,P=(m.height-h.height)/2),l.value={x1:Math.round(t.value.x1*f)-C,y1:Math.round(t.value.y1*f)-P,x2:Math.round(t.value.x2*f)-C,y2:Math.round(t.value.y2*f)-P},T.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,m.width),l.value.y2=Math.min(l.value.y2,m.height))}return l.value}function tt(a,l){if(r.value>0){if(!o.value||a>r.value)return r.value/a}else if(L.value>0&&(!o.value||l>L.value))return L.value/l;return 1}function at(){return Math.min(1,Math.max(0,D.value/100))}function it(a){return a.toDataURL("image/"+$.value,at())}function nt(){if(_.value&&_.value&&B.value!=null){const a=Ke(),l=a.x2-a.x1,f=a.y2-a.y1,C=document.createElement("canvas");C.width=l,C.height=f;const P=C.getContext("2d");if(P){v.value!=null&&(P.fillStyle=v.value,P.fillRect(0,0,l,f));const Q=(d.value.scale||1)*(d.value.flipH?-1:1),G=(d.value.scale||1)*(d.value.flipV?-1:1);m.width&&m.height&&(P.setTransform(Q,0,0,G,m.width/2,m.height/2),P.translate(-a.x1/Q,-a.y1/G),P.rotate((d.value.rotate||0)*Math.PI/180),P.drawImage(B.value,-m.width/2,-m.height/2));const O={width:l,height:f,imagePosition:a,cropperPosition:{...t.value}};T.value&&(O.offsetImagePosition=et());const Y=tt(l,f);return Y!==1&&(O.width=Math.round(l*Y),O.height=w.value?Math.round(O.width/u.value):Math.round(f*Y),s(C,O.width,O.height)),O.base64=it(C),n.emit("imageCropped",O),O}}return null}function ae(){x.value&&nt()}function be(){const a=_.value;if(a){if(!w.value)t.value.x1=0,t.value.x2=a.offsetWidth,t.value.y1=0,t.value.y2=a.offsetHeight;else if(a.offsetWidth/u.value<a.offsetHeight){t.value.x1=0,t.value.x2=a.offsetWidth;const l=a.offsetWidth/u.value;t.value.y1=(a.offsetHeight-l)/2,t.value.y2=t.value.y1+l}else{t.value.y1=0,t.value.y2=a.offsetHeight;const l=a.offsetHeight*u.value;t.value.x1=(a.offsetWidth-l)/2,t.value.x2=t.value.x1+l}ae(),p.value=!0}}function we(){z>40?(c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载超时，请重试"}]}),W=!0,S.value=!1,n.emit("loadImageFailed")):Ze()?(W=!1,ue(),ce(),be(),n.emit("cropperReady",{...V.value})):(z++,setTimeout(()=>we(),50))}function rt(){B.value!=null&&(S.value=!1,n.emit("imageLoaded"),z=0,setTimeout(()=>we()))}function lt(){const a=_.value;(V.value.width!==(a==null?void 0:a.offsetWidth)||V.value.height!==(a==null?void 0:a.offsetHeight))&&V.value.width&&V.value.height&&a&&(t.value.x1=t.value.x1*a.offsetWidth/V.value.width,t.value.x2=t.value.x2*a.offsetWidth/V.value.width,t.value.y1=t.value.y1*a.offsetHeight/V.value.height,t.value.y2=t.value.y2*a.offsetHeight/V.value.height)}const ot=()=>{lt(),ue(),ce()},Te=()=>{clearTimeout(A),A=setTimeout(ot,300)};i.onMounted(()=>{window.addEventListener("resize",Te),oe.value&&(Z(),S.value=!0,Me(oe.value))}),i.onUnmounted(()=>{window.removeEventListener("resize",Te)});function st(){M.active&&(M.active=!1,ae())}function fe(a){return(a.touches&&a.touches[0]?a.touches[0].clientX:a.clientX)||0}function he(a){return(a.touches&&a.touches[0]?a.touches[0].clientY:a.clientY)||0}function ut(a,l,f=null){M&&M.active||(a.preventDefault&&a.preventDefault(),M={active:!0,type:l,position:f,clientX:fe(a),clientY:he(a),...t.value})}function de(a=!1){t.value.x1<0&&(t.value.x2-=a?t.value.x1:0,t.value.x1=0),t.value.y1<0&&(t.value.y2-=a?t.value.y1:0,t.value.y1=0),t.value.x2>V.value.width&&(t.value.x1-=a?t.value.x2-V.value.width:0,t.value.x2=V.value.width),t.value.y2>V.value.height&&(t.value.y1-=a?t.value.y2-V.value.height:0,t.value.y2=V.value.height)}function ct(a){const l=fe(a)-M.clientX,f=he(a)-M.clientY;t.value.x1=M.x1+l,t.value.y1=M.y1+f,t.value.x2=M.x2+l,t.value.y2=M.y2+f}const{checkAspectRatio:ft}=_e(t,V,u,M);function ht(a){const l=fe(a)-M.clientX,f=he(a)-M.clientY;switch(M.position){case"left":t.value.x1=Math.min(M.x1+l,t.value.x2-R);break;case"topleft":t.value.x1=Math.min(M.x1+l,t.value.x2-R),t.value.y1=Math.min(M.y1+f,t.value.y2-j);break;case"top":t.value.y1=Math.min(M.y1+f,t.value.y2-j);break;case"topright":t.value.x2=Math.max(M.x2+l,t.value.x1+R),t.value.y1=Math.min(M.y1+f,t.value.y2-j);break;case"right":t.value.x2=Math.max(M.x2+l,t.value.x1+R);break;case"bottomright":t.value.x2=Math.max(M.x2+l,t.value.x1+R),t.value.y2=Math.max(M.y2+f,t.value.y1+j);break;case"bottom":t.value.y2=Math.max(M.y2+f,t.value.y1+j);break;case"bottomleft":t.value.x1=Math.min(M.x1+l,t.value.x2-R),t.value.y2=Math.max(M.y2+f,t.value.y1+j);break;case"center":const{scale:C}=a,P=Math.abs(M.x2-M.x1)*C,Q=Math.abs(M.y2-M.y1)*C,{x1:G}=t.value,{y1:O}=t.value;t.value.x1=Math.min(M.clientX-P/2,t.value.x2-R),t.value.y1=Math.min(M.clientY-Q/2,t.value.y2-j),t.value.x2=Math.max(M.clientX+P/2,G+R),t.value.y2=Math.max(M.clientY+Q/2,O+j);break}w.value&&ft()}function dt(a){M&&M.active&&(a.stopPropagation&&a.stopPropagation(),a.preventDefault&&a.preventDefault(),clearTimeout(I),I=setTimeout(()=>{M.type===K.Move?(ct(a),de(!0)):M.type===K.Resize&&(ht(a),de(!1))},300))}return i.watch(pe,a=>{Z(),a&&a.target&&a.target.files&&a.target.files.length>0&&(S.value=!0,xe(a.target.files[0]))}),i.watch(oe,a=>{a?(Z(),S.value=!0,Me(a)):(c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片路径为空"}]}),S.value=!1,W=!0)}),i.watch(Ie,a=>{Z(),S.value=!0,se(a)}),i.watch(Ue,a=>{Z(),a&&(S.value=!0,xe(a))}),i.watch(()=>[e.containWithinAspectRatio,e.canvasRotation,e.cropper,e.aspectRatio,e.transform,e.imageChangedEvent],([a,l,f,C,P,Q],[G,O,Y,gt,mt,vt])=>{N&&N.complete&&U&&(a!==G||l!==O)&&ye(),f!==Y&&(ue(),ce(),de(!1),ae()),C!==gt&&p.value&&be(),P!==mt&&(Oe(),ae()),Q!==vt&&(pe.value=Q)}),{uploadError:W,imageVisible:p,backgroundColor:v,sourceImage:_,safeImgDataUrl:H,safeTransformStyle:q,maxSize:V,cropper:t,marginLeft:J,moveTypes:le,isLoading:S,startMove:ut,imageLoadedInView:rt,moveStop:st,moveImg:dt}}const ee=i.defineComponent({name:"FImageCropper",props:X,emits:["imageCropped","imageLoaded","cropperReady","loadImageFailed"],setup(e,n){const s=i.ref(e.alignImage),y=i.ref(e.roundCropper),c=i.ref(e.hideResizeSquares),t=i.ref(e.loadImageErrorText),d=i.ref(e.disabled),g=i.ref(null),{uploadError:w,imageVisible:u,backgroundColor:x,sourceImage:v,safeImgDataUrl:r,safeTransformStyle:o,maxSize:T,cropper:b,marginLeft:$,moveTypes:D,isLoading:L,startMove:E,imageLoadedInView:H,moveStop:S,moveImg:p}=ve(e,n);function h(A){return i.createVNode("span",{class:`farris-image-cropper-resize-bar ${A}`,onMousedown:i.withModifiers(N=>E(N,D.Resize,A),["prevent"])},null)}function m(A){return i.createVNode("div",null,[i.createVNode("span",{class:`farris-image-cropper-resize-bar ${A}`,onMousedown:i.withModifiers(N=>E(N,D.Resize,A),["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 z=["top","right","bottom","left"].map(A=>h(A)),I=["topleft","topright","bottomright","bottomleft"].map(A=>m(A));return()=>i.createVNode("div",{class:["farris-image-cropper-frame",{"farris-image-cropper-disabled":d.value}],style:{"text-align":s.value},onMousemove:i.withModifiers(A=>p(A),["prevent"]),onTouchmove:i.withModifiers(A=>p(A),["prevent"]),onMouseup:i.withModifiers(()=>S(),["prevent"]),onTouchend:i.withModifiers(()=>S(),["prevent"])},[!w&&i.createVNode("div",{ref:g,class:"farris-image-cropper",style:[{background:u.value?x.value:""}]},[r.value&&i.createVNode("img",{title:"farris-source-image",ref:v,class:"farris-source-image",style:[{visibility:u.value?"visible":"hidden"},{transform:o.value}],src:r.value,onLoad:()=>H()},null),T.value&&i.createVNode("div",{class:"farris-image-overlay",style:[{width:`${T.value.width||0}px`},{height:`${T.value.height||0}px`},{"margin-left":s.value==="center"?$.value:""}]},null),u.value&&i.createVNode("div",{class:["farris-image-cropper-wrapper",{"farris-image-cropper-rounded":y.value}],style:[{top:`${b.value.y1}px`},{left:`${b.value.x1}px`},{width:`${b.value.x2-b.value.x1}px`},{height:`${b.value.y2-b.value.y1}px`},{visibility:u.value?"visible":"hidden"},{"margin-left":s.value==="center"?$.value:""}],tabindex:"0"},[i.createVNode("div",{class:"farris-image-cropper-move",onMousedown:i.withModifiers(A=>E(A,D.Move,"topleft"),["prevent"])},null),!c.value&&i.createVNode("div",null,[I,z])])]),L.value&&i.createVNode("div",{class:"farris-image-cropper-loading"},[i.createVNode("div",{class:"farris-image-cropper-loading-spinner"},null)]),w&&i.createVNode("div",{class:"farris-image-cropper-error"},[t.value])])}});function Re(e,n,s){var S;function y(){}const c="",t="",d=i.ref();function g(){return(n==null?void 0:n.schema.componentType)!=="frame"}function w(){return!1}function u(){return(n==null?void 0:n.schema.componentType)!=="frame"}function x(){return(n==null?void 0:n.schema.componentType)==="frame"}function v(p){if(!p||!p.value)return null;if(p.value.schema&&p.value.schema.type==="component")return p.value;const h=i.ref(p==null?void 0:p.value.parent),m=v(h);return m||null}function r(p=n){const{componentInstance:h,designerItemElementRef:m}=p;return!h||!h.value?null:h.value.canMove?m:r(p.parent)}function o(p){return!!s}function T(){return(n==null?void 0:n.schema.label)||(n==null?void 0:n.schema.title)||(n==null?void 0:n.schema.name)}function b(){}function $(p,h){}function D(p,h){const{componentType:m}=p;let z=ne(m,p,h);const I=m.toLowerCase().replace("-","_");return z&&!z.id&&z.type===m&&(z.id=`${I}_${Math.random().toString().slice(2,6)}`),z}function L(p,h){const m=String(p.getAttribute("data-controltype")),z=p.getAttribute("data-feature"),I=z?JSON.parse(z):{};I.parentComponentInstance=d.value;let A=ne(m,I);const N=m.toLowerCase().replace("-","_");return A&&!A.id&&A.type===m&&(A.id=`${N}_${Math.random().toString().slice(2,6)}`),A}function E(p){}function H(...p){}return d.value={canMove:g(),canSelectParent:w(),canDelete:u(),canNested:!x(),contents:n==null?void 0:n.schema.contents,elementRef:e,parent:(S=n==null?void 0:n.parent)==null?void 0:S.componentInstance,schema:n==null?void 0:n.schema,styles:c,designerClass:t,canAccepts:o,getBelongedComponentInstance:v,getDraggableDesignItemElement:r,getDraggingDisplayText:T,getPropConfig:H,getDragScopeElement:b,onAcceptMovedChildElement:$,onAcceptNewChildElement:L,onChildElementMovedOut:E,addNewChildComponentSchema:D,updateDragAndDropRules:y,triggerBelongedComponentToMoveWhenMoved:i.ref(!1),triggerBelongedComponentToDeleteWhenDeleted:i.ref(!1)},d}const je=i.defineComponent({name:"FImageCropperDesign",props:X,emits:["imageCropped","imageLoaded","cropperReady","loadImageFailed"],setup(e,n){const s=i.ref(e.alignImage),y=i.ref(e.roundCropper),c=i.ref(e.hideResizeSquares),t=i.ref(e.loadImageErrorText),d=i.ref(e.disabled),g=i.ref(null),{uploadError:w,imageVisible:u,backgroundColor:x,sourceImage:v,safeImgDataUrl:r,safeTransformStyle:o,maxSize:T,cropper:b,marginLeft:$,moveTypes:D,isLoading:L,startMove:E,imageLoadedInView:H,moveStop:S,moveImg:p}=ve(e,n),h=i.ref(),m=i.inject("design-item-context"),z=Re(h,m);i.onMounted(()=>{h.value.componentInstance=z}),n.expose(z.value);function I(k){return i.createVNode("span",{class:`farris-image-cropper-resize-bar ${k}`,onMousedown:i.withModifiers(q=>E(q,D.Resize,k),["prevent"])},null)}function A(k){return i.createVNode("div",null,[i.createVNode("span",{class:`farris-image-cropper-resize-bar ${k}`,onMousedown:i.withModifiers(q=>E(q,D.Resize,k),["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 N=["top","right","bottom","left"].map(k=>I(k)),_=["topleft","topright","bottomright","bottomleft"].map(k=>A(k));return()=>i.createVNode("div",{ref:h,class:["farris-image-cropper-frame",{"farris-image-cropper-disabled":d.value}],style:{"text-align":s.value},onMousemove:i.withModifiers(k=>p(k),["prevent"]),onTouchmove:i.withModifiers(k=>p(k),["prevent"]),onMouseup:i.withModifiers(()=>S(),["prevent"]),onTouchend:i.withModifiers(()=>S(),["prevent"])},[!w&&i.createVNode("div",{ref:g,class:"farris-image-cropper",style:[{background:u.value?x.value:""}]},[r.value&&i.createVNode("img",{title:"farris-source-image",ref:v,class:"farris-source-image",style:[{visibility:u.value?"visible":"hidden"},{transform:o.value}],src:r.value,onLoad:()=>H()},null),T.value&&i.createVNode("div",{class:"farris-image-overlay",style:[{width:`${T.value.width||0}px`},{height:`${T.value.height||0}px`},{"margin-left":s.value==="center"?$.value:""}]},null),u.value&&i.createVNode("div",{class:["farris-image-cropper-wrapper",{"farris-image-cropper-rounded":y.value}],style:[{top:`${b.value.y1}px`},{left:`${b.value.x1}px`},{width:`${b.value.x2-b.value.x1}px`},{height:`${b.value.y2-b.value.y1}px`},{visibility:u.value?"visible":"hidden"},{"margin-left":s.value==="center"?$.value:""}],tabindex:"0"},[i.createVNode("div",{class:"farris-image-cropper-move",onMousedown:i.withModifiers(k=>E(k,D.Move,"topleft"),["prevent"])},null),!c.value&&i.createVNode("div",null,[_,N])])]),L.value&&i.createVNode("div",{class:"farris-image-cropper-loading"},[i.createVNode("div",{class:"farris-image-cropper-loading-spinner"},null)]),w&&i.createVNode("div",{class:"farris-image-cropper-error"},[t.value])])}}),He={install(e){e.component(ee.name,ee)},register(e,n,s,y){e["image-cropper"]=ee,n["image-cropper"]=re},registerDesigner(e,n,s){e["image-cropper"]=je,n["image-cropper"]=re}};F.ImageCropper=ee,F.default=He,F.imageCropperProps=X,F.propsResolver=re,Object.defineProperties(F,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});