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