@farris/ui-vue 1.1.0 → 1.1.1

package/image-cropper/index.umd.js

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

package/image-cropper/package.json

@@ -1,8 +0,0 @@
-{
-    "name": "image-cropper",
-    "version": "1.1.0",
-    "main": "index.umd.js",
-    "module": "index.esm.js",
-    "style": "style.css",
-    "types": "../types/image-cropper/index.d.ts"
-}