@farris/ui-vue 1.3.1 → 1.3.3

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

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