@farris/ui-vue 1.2.8 → 1.2.9

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

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