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