@farris/ui-vue 1.3.0 → 1.3.3

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,ie){"use strict";const me={},ve={};function ne(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?ne(n[g]):ie.cloneDeep(n[g].default)),d),{});return(!c||!y.find(d=>d=="id"))&&(t.id=`${s}-${Date.now()}`),t}function re(e,n={},s){const y=me[e];if(y){let c=ne(y);const t=ve[e];return c=t?t({getSchemaByType:re},c,n,s):c,c}return null}function Ne(e,n){const s=ne(n);return Object.keys(e).reduce((y,c)=>(y[c]&&ie.isPlainObject(y[c])&&ie.isPlainObject(e[c])?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(z=>g(z,x));return r?!D.includes(!1):D.includes(!0)}return{parseValueSchema:w}}const ze={},Ee={};Se();function ke(e,n,s=new Map,y=(d,g,w)=>g,c={},t=d=>d){return me[n.title]=n,ve[n.title]=y,ze[n.title]=c,Ee[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]]),Pe={$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,Pe,$e,Be,Le);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 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 P=0;P<d;P++)for(let z=0;z<t;z++){const H=(z+P*t)*4,S=P*x;let p=0,h=0,m=0,E=0,I=0,A=0,N=0;const _=Math.floor(z*u),k=Math.floor(P*x);let q=Math.ceil((z+1)*u),J=Math.ceil((P+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,oe=z*u,te=V*V;for(let R=_;R<q;R++){const j=Math.abs(oe-R)/v,L=Math.sqrt(te+j*j);if(L>=1)continue;p=2*L*L*L-3*L*L+1;const U=4*(R+B*g);N+=p*$[U+3],m+=p,$[U+3]<255&&(p=p*$[U+3]/250),E+=p*$[U],I+=p*$[U+1],A+=p*$[U+2],h+=p}}D[H]=E/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 pe(e,n){const{resizeCanvas:s,getTransformationsFromExifData:y}=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),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),P=i.ref(e.resizeToHeight),z=i.ref(e.cropperMinHeight),H=i.ref(""),S=i.ref(!0),p=i.ref(!0);let h,m,E=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}),oe=K;let te,R=20,j=20,L=!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 ye=i.ref(e.imageChangedEvent),se=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 xe(){if(!N||!N.complete||!U)return Promise.reject(new Error("No image loaded"));const a=Qe();return Je(a)}function ue(a){const l=f=>{c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片上传错误，请重试"}]}),S.value=!1,L=!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,xe().then(()=>{L=!1}).catch(l)},N.onerror=l,N.src=a}function Ge(a,l){Fe(l)?(L=!1,ue(a)):(c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片类型不正确,请重试"}]}),S.value=!1,L=!0,n.emit("loadImageFailed"))}function Me(a){const l=new FileReader;l.onload=f=>Ge(f.target.result,a.type),l.readAsDataURL(a)}function be(a){const l=new Image;l.onerror=()=>{c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载错误，请重试"}]}),S.value=!1,L=!0,n.emit("loadImageFailed")},l.onload=()=>{L=!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),ue(f.toDataURL())},l.crossOrigin="anonymous",l.src=a}function Ze(){return _.value&&_.value&&_.value.offsetWidth>0}function ce(){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):z.value>0&&B.value&&V.value.height?j=Math.max(20,z.value/B.value.height*V.value.height):j=20}function fe(){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,W;b.value%2?(C=(m.width-h.height)/2,W=(m.height-h.width)/2):(C=(m.width-h.width)/2,W=(m.height-h.height)/2),l.value={x1:Math.round(t.value.x1*f)-C,y1:Math.round(t.value.y1*f)-W,x2:Math.round(t.value.x2*f)-C,y2:Math.round(t.value.y2*f)-W},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(P.value>0&&(!o.value||l>P.value))return P.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 W=C.getContext("2d");if(W){v.value!=null&&(W.fillStyle=v.value,W.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&&(W.setTransform(Q,0,0,G,m.width/2,m.height/2),W.translate(-a.x1/Q,-a.y1/G),W.rotate((d.value.rotate||0)*Math.PI/180),W.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 we(){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 Te(){E>40?(c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载超时，请重试"}]}),L=!0,S.value=!1,n.emit("loadImageFailed")):Ze()?(L=!1,ce(),fe(),we(),n.emit("cropperReady",{...V.value})):(E++,setTimeout(()=>Te(),50))}function rt(){B.value!=null&&(S.value=!1,n.emit("imageLoaded"),E=0,setTimeout(()=>Te()))}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(),ce(),fe()},Ae=()=>{clearTimeout(A),A=setTimeout(ot,300)};i.onMounted(()=>{window.addEventListener("resize",Ae),se.value&&(Z(),S.value=!0,be(se.value))}),i.onUnmounted(()=>{window.removeEventListener("resize",Ae)});function st(){M.active&&(M.active=!1,ae())}function he(a){return(a.touches&&a.touches[0]?a.touches[0].clientX:a.clientX)||0}function de(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:he(a),clientY:de(a),...t.value})}function ge(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=he(a)-M.clientX,f=de(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=he(a)-M.clientX,f=de(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,W=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-W/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+W/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),ge(!0)):M.type===K.Resize&&(ht(a),ge(!1))},300))}return i.watch(ye,a=>{Z(),a&&a.target&&a.target.files&&a.target.files.length>0&&(S.value=!0,Me(a.target.files[0]))}),i.watch(se,a=>{a?(Z(),S.value=!0,be(a)):(c.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片路径为空"}]}),S.value=!1,L=!0)}),i.watch(Ie,a=>{Z(),S.value=!0,ue(a)}),i.watch(Ue,a=>{Z(),a&&(S.value=!0,Me(a))}),i.watch(()=>[e.containWithinAspectRatio,e.canvasRotation,e.cropper,e.aspectRatio,e.transform,e.imageChangedEvent],([a,l,f,C,W,Q],[G,O,Y,gt,mt,vt])=>{N&&N.complete&&U&&(a!==G||l!==O)&&xe(),f!==Y&&(ce(),fe(),ge(!1),ae()),C!==gt&&p.value&&we(),W!==mt&&(Oe(),ae()),Q!==vt&&(ye.value=Q)}),{uploadError:L,imageVisible:p,backgroundColor:v,sourceImage:_,safeImgDataUrl:H,safeTransformStyle:q,maxSize:V,cropper:t,marginLeft:J,moveTypes:oe,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:P,startMove:z,imageLoadedInView:H,moveStop:S,moveImg:p}=pe(e,n);function h(A){return i.createVNode("span",{class:`farris-image-cropper-resize-bar ${A}`,onMousedown:i.withModifiers(N=>z(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=>z(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 E=["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=>z(A,D.Move,"topleft"),["prevent"])},null),!c.value&&i.createVNode("div",null,[I,E])])]),P.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 E=re(m,p,h);const I=m.toLowerCase().replace("-","_");return E&&!E.id&&E.type===m&&(E.id=`${I}_${Math.random().toString().slice(2,6)}`),E}function P(p,h){const m=String(p.getAttribute("data-controltype")),E=p.getAttribute("data-feature"),I=E?JSON.parse(E):{};I.parentComponentInstance=d.value;let A=re(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 z(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:P,onChildElementMovedOut:z,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:P,startMove:z,imageLoadedInView:H,moveStop:S,moveImg:p}=pe(e,n),h=i.ref(),m=i.inject("design-item-context"),E=Re(h,m);i.onMounted(()=>{h.value.componentInstance=E}),n.expose(E.value);function I(k){return i.createVNode("span",{class:`farris-image-cropper-resize-bar ${k}`,onMousedown:i.withModifiers(q=>z(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=>z(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=>z(k,D.Move,"topleft"),["prevent"])},null),!c.value&&i.createVNode("div",null,[_,N])])]),P.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"]=le},registerDesigner(e,n,s){e["image-cropper"]=je,n["image-cropper"]=le}};F.ImageCropper=ee,F.default=He,F.imageCropperProps=X,F.propsResolver=le,Object.defineProperties(F,{__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"}})});