UNPKG

vue-select-avatar

Version:
2 lines (1 loc) 23.6 kB
"use strict";var ue=Object.defineProperty;var me=(n,e,t)=>e in n?ue(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var J=(n,e,t)=>me(n,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),ee="image/jpeg, image/png, image/webp, image/bmp, image/svg+xml, image/avif, image/tiff",H=()=>({viewportWidth:0,viewportHeight:0,viewX:0,viewY:0,viewSize:0,imageX:0,imageY:0,imageWidth:0,imageHeight:0,imageScale:1});class k extends Error{constructor(t){super(t);J(this,"code");this.name="SelectAvatarError",this.code=t}}const te={UNKNOWN:"未知错误",CANCEL:"取消",NOT_IMAGE_FILE:"非图片文件",IMAGE_FILE_TOO_LARGE:"图片文件过大",IMAGE_TOO_SMALL:"图片尺寸过小",IMAGE_TOO_LARGE:"图片尺寸过大",IMAGE_LOAD_FAILED:"图片加载失败",CANVAS_TO_BLOB_FAILED:"canvas 转 blob 失败",BLOB_TO_BASE64_FAILED:"blob 转 base64 失败",CANVAS_CONTEXT_NOT_DEFINED:"canvas context 未定义",NO_IMAGE_SELECTED:"未选择图片"},we=n=>n instanceof k&&n.code==="CANCEL",ge=(n,e=te)=>n instanceof k?e[n.code]:n instanceof Error?n.message:e.UNKNOWN,ie=n=>new Promise((e,t)=>{const{accept:i,multiple:s}=n||{},r=document.createElement("input");r.type="file",i&&(r.accept=i),s&&(r.multiple=s),r.onchange=()=>{const v=Array.from(r.files||[]);v.length>0?e(v):t(new k("CANCEL"))},r.oncancel=()=>t(new k("CANCEL")),r.onerror=(v,d,m,c,o)=>t(o||new k("UNKNOWN")),r.click()}),ae=async n=>{const{accept:e=ee,maxFileSize:t=2*1024*1024,minSize:i,maxSize:s=5e3,resizeToMax:r=!1,compress:v=!1,quality:d=.8,minVectorSize:m=1024}=n||{};let[c]=await ie({accept:e});if(!c.type.startsWith("image/"))throw new k("NOT_IMAGE_FILE");if(c.size>t)throw new k("IMAGE_FILE_TOO_LARGE");let o=await ne(c);if(se(c)){if(Math.min(o.width,o.height)<m){const u=m/Math.min(o.width,o.height);o={width:Math.floor(o.width*u),height:Math.floor(o.height*u)}}}else{if(typeof i=="number"&&Math.min(o.width,o.height)<i)throw new k("IMAGE_TOO_SMALL");if(Math.max(o.width,o.height)>s){if(!r)throw new k("IMAGE_TOO_LARGE");const u=s/Math.max(o.width,o.height);o={width:Math.floor(o.width*u),height:Math.floor(o.height*u)}}}return de(c,v)?c=await R(c,o,"image/png",d):r?c=await R(c,o,"image/png"):c.type!=="image/png"&&(c=await R(c,o,"image/png")),{file:c,...o}},ne=async n=>{const e=await N(URL.createObjectURL(n),!0);return{width:e.width,height:e.height}},de=(n,e)=>typeof e=="number"?n.size>e:!!e,R=async(n,e,t,i)=>{const s=await N(URL.createObjectURL(n),!0),r=document.createElement("canvas");r.width=e.width,r.height=e.height;const v=r.getContext("2d");if(!v)throw new k("CANVAS_CONTEXT_NOT_DEFINED");v.drawImage(s,0,0,e.width,e.height);const d=await F(r,t||n.type,i);return new File([d],n.name,{type:t||n.type})},N=async(n,e=!1)=>new Promise((t,i)=>{const s=new Image;s.onload=()=>{e&&URL.revokeObjectURL(s.src),t(s)},s.onerror=()=>{e&&URL.revokeObjectURL(s.src),i(new k("IMAGE_LOAD_FAILED"))},s.src=n}),F=(n,e,t)=>new Promise((i,s)=>{n.toBlob(r=>{r?i(r):s(new k("CANVAS_TO_BLOB_FAILED"))},e,t)}),oe=n=>new Promise((e,t)=>{const i=new FileReader;i.onload=()=>{typeof i.result=="string"?e(i.result):t(new k("BLOB_TO_BASE64_FAILED"))},i.onerror=s=>{t(s)},i.readAsDataURL(n)}),se=n=>n.type.startsWith("image/svg"),le=async(n,e,t)=>{const{format:i="file",size:s,type:r="image/png",quality:v=1,filename:d,maxSize:m,useOriginSize:c=!0,backgroundColor:o="#ffffff"}=t||{};let u=n.url,p=!1;u||(u=URL.createObjectURL(n.file),p=!0);const h=await N(u);p&&URL.revokeObjectURL(u);const X=document.createElement("canvas"),S=X.getContext("2d");if(!S)throw new k("CANVAS_CONTEXT_NOT_DEFINED");let w=e.viewSize/e.imageScale;const b=(e.viewX-e.imageX)/e.imageScale,L=(e.viewY-e.imageY)/e.imageScale,z=e.viewSize/e.imageScale;typeof s=="number"?(w>s||!c)&&(w=s):typeof m=="number"&&w>m&&(w=m),X.width=w,X.height=w,r==="image/jpeg"&&o&&(S.fillStyle=o,S.fillRect(0,0,w,w)),S.drawImage(h,b,L,z,z,0,0,w,w);const M=await F(X,r,v);return i==="file"?new File([M],d||n.file.name,{type:r}):await oe(M)},ce=()=>"clipPath"in document.createElement("div").style,K=(n,e,t)=>{const i={x:0,y:0};switch(t){case"top-left":i.x+=n.x-e.viewX,i.y+=n.y-e.viewY;break;case"top-right":i.x+=n.x-(e.viewX+e.viewSize),i.y+=n.y-e.viewY;break;case"bottom-left":i.x+=n.x-e.viewX,i.y+=n.y-(e.viewY+e.viewSize);break;case"bottom-right":i.x+=n.x-(e.viewX+e.viewSize),i.y+=n.y-(e.viewY+e.viewSize);break}return i},he=["src"],fe=a.defineComponent({__name:"Preview",props:{size:{default:180},viewportRef:{},round:{type:Boolean},bg:{}},setup(n){const e=n,t=a.reactive(H()),i=a.ref(),s=a.computed(()=>{var o;return(o=e.viewportRef)==null?void 0:o.backing}),r=a.computed(()=>({width:`${e.size}px`,height:`${e.size}px`,"--bg":e.bg})),v=a.computed(()=>{const o=e.size/(t.viewSize/t.imageScale),u=(t.imageX-t.viewX)/t.imageScale*o,p=(t.imageY-t.viewY)/t.imageScale*o;return{watch:`${t.imageWidth}px`,height:`${t.imageHeight}px`,transform:`translate3d(${u}px, ${p}px, 0px) scale(${o})`}}),d=o=>{i.value=o.detail},m=o=>{Object.assign(t,o.detail)};let c=()=>{};return a.watch(()=>e.viewportRef,o=>{o&&(o.elEmitter.addEventListener("broadcast:info",d),o.elEmitter.addEventListener("broadcast:pos",m),c=()=>{o.elEmitter.removeEventListener("broadcast:info",d),o.elEmitter.removeEventListener("broadcast:pos",m)})}),a.onUnmounted(c),(o,u)=>{var p;return a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(["preview",{backing:s.value,round:o.round}]),style:a.normalizeStyle(r.value)},[(p=i.value)!=null&&p.url?(a.openBlock(),a.createElementBlock("img",{key:0,class:"image",src:i.value.url,alt:"image",style:a.normalizeStyle(v.value)},null,12,he)):a.createCommentVNode("",!0)],6)}}}),re=(n,e)=>{const t=n.__vccOpts||n;for(const[i,s]of e)t[i]=s;return t},pe=re(fe,[["__scopeId","data-v-ea39dbca"]]),W=n=>{const{props:e,info:t,pos:i,backing:s}=n;return{checkImageBack:(v=!0)=>{if(!t.value||e.fixedImage)return;const d=i.imageWidth*i.imageScale,m=i.imageHeight*i.imageScale;let c=i.imageX;c>i.viewX?c=i.viewX:c<i.viewX+i.viewSize-d&&(c=i.viewX+i.viewSize-d);let o=i.imageY;o>i.viewY?o=i.viewY:o<i.viewY+i.viewSize-m&&(o=i.viewY+i.viewSize-m),(c!==i.imageX||o!==i.imageY)&&(i.imageX=c,i.imageY=o,s.value=v)}}},G=n=>{const{pos:e,info:t}=n;return{checkViewPosition:()=>{t.value&&(e.viewX<e.imageX&&(e.viewX=e.imageX),e.viewY<e.imageY&&(e.viewY=e.imageY),e.viewX+e.viewSize>e.imageX+e.imageWidth*e.imageScale&&(e.viewX=e.imageX+e.imageWidth*e.imageScale-e.viewSize),e.viewY+e.viewSize>e.imageY+e.imageHeight*e.imageScale&&(e.viewY=e.imageY+e.imageHeight*e.imageScale-e.viewSize))}}},Se=n=>{const{imageMoving:e}=n,t=a.ref(!1),i=()=>{t.value=!1};return a.watch(e,s=>{s&&(t.value=!1)}),{backing:t,handleTransitionEnd:i}},Q=n=>{const e=a.ref(!1),t=s=>{s.key===n&&(e.value=!0)},i=s=>{s.key===n&&(e.value=!1)};return a.onMounted(()=>{window.addEventListener("keydown",t),window.addEventListener("keyup",i)}),a.onUnmounted(()=>{window.removeEventListener("keydown",t),window.removeEventListener("keyup",i)}),e},ye=()=>{const n=a.ref();let e;return a.onUnmounted(()=>{var t;(t=n.value)!=null&&t.url&&URL.revokeObjectURL(n.value.url)}),a.watchEffect(()=>{var t,i;e&&e!==((t=n.value)==null?void 0:t.url)&&URL.revokeObjectURL(e),e=(i=n.value)==null?void 0:i.url}),n},xe=n=>{const{props:e,pos:t,info:i}=n,{checkImageBack:s}=W(n),{checkViewPosition:r}=G(n),v=m=>{if(e.fixedImage){if(e.directionKey)switch(m.key){case"ArrowUp":t.viewY-=1;break;case"ArrowRight":t.viewX+=1;break;case"ArrowDown":t.viewY+=1;break;case"ArrowLeft":t.viewX-=1;break}if(e.wasdKey)switch(m.key){case"w":t.viewY-=1;break;case"d":t.viewX+=1;break;case"s":t.viewY+=1;break;case"a":t.viewX-=1;break}r()}else{if(!i.value)return;if(e.directionKey)switch(m.key){case"ArrowUp":t.imageY-=1;break;case"ArrowRight":t.imageX+=1;break;case"ArrowDown":t.imageY+=1;break;case"ArrowLeft":t.imageX-=1;break}if(e.wasdKey)switch(m.key){case"w":t.imageY-=1;break;case"d":t.imageX+=1;break;case"s":t.imageY+=1;break;case"a":t.imageX-=1;break}s()}};let d;a.watch([()=>e.wasdKey,()=>e.directionKey],()=>{const m=e.wasdKey||e.directionKey;m!==d&&(d=m,m?document.addEventListener("keydown",v):document.removeEventListener("keydown",v))},{immediate:!0}),a.onUnmounted(()=>{document.removeEventListener("keydown",v)})},ve=n=>{const{pos:e,pointPosition:t,props:i,info:s}=n;return{resizeView:v=>{switch(t.value){case"top-left":const d=v.x-e.viewX,m=v.y-e.viewY;let c=d;v.x>=e.viewX+m&&v.x<=e.viewX+e.viewSize+m&&(c=m),e.viewX+=c,e.viewY+=c,e.viewSize-=c,e.viewSize<i.minViewSize&&(e.viewX+=e.viewSize-i.minViewSize,e.viewY+=e.viewSize-i.minViewSize,e.viewSize=i.minViewSize),s.value&&e.viewX<e.imageX&&(e.viewSize-=e.imageX-e.viewX,e.viewY+=e.imageX-e.viewX,e.viewX=e.imageX),s.value&&e.viewY<e.imageY&&(e.viewSize-=e.imageY-e.viewY,e.viewX+=e.imageY-e.viewY,e.viewY=e.imageY);break;case"top-right":const o=v.x-(e.viewX+e.viewSize),u=v.y-e.viewY;v.x>=e.viewX&&v.x<=e.viewX+e.viewSize-u?(e.viewY+=u,e.viewSize-=u,e.viewSize<i.minViewSize&&(e.viewY+=e.viewSize-i.minViewSize,e.viewSize=i.minViewSize)):(e.viewY-=o,e.viewSize+=o,e.viewSize<i.minViewSize&&(e.viewY+=e.viewSize-i.minViewSize,e.viewSize=i.minViewSize)),s.value&&e.viewY<e.imageY&&(e.viewSize-=e.imageY-e.viewY,e.viewY=e.imageY),s.value&&e.viewX+e.viewSize>e.imageX+e.imageWidth*e.imageScale&&(e.viewY-=e.imageX+e.imageWidth*e.imageScale-(e.viewX+e.viewSize),e.viewSize=e.imageX+e.imageWidth*e.imageScale-e.viewX);break;case"bottom-left":const p=v.x-e.viewX,h=v.y-(e.viewY+e.viewSize);v.x>=e.viewX-h&&v.x<=e.viewX-h+(e.viewSize+h)?(e.viewX-=h,e.viewSize+=h,e.viewSize<i.minViewSize&&(e.viewX=e.viewX+e.viewSize-i.minViewSize,e.viewSize=i.minViewSize)):(e.viewX+=p,e.viewSize-=p,e.viewSize<i.minViewSize&&(e.viewX=e.viewX+e.viewSize-i.minViewSize,e.viewSize=i.minViewSize)),s.value&&e.viewX<e.imageX&&(e.viewSize-=e.imageX-e.viewX,e.viewX=e.imageX),s.value&&e.viewY+e.viewSize>e.imageY+e.imageHeight*e.imageScale&&(e.viewX-=e.imageY+e.imageHeight*e.imageScale-(e.viewY+e.viewSize),e.viewSize=e.imageY+e.imageHeight*e.imageScale-e.viewY);break;case"bottom-right":const X=v.x-(e.viewX+e.viewSize),S=v.y-(e.viewY+e.viewSize);v.x>=e.viewX&&v.x<=e.viewX+e.viewSize+S?e.viewSize+=S:e.viewSize+=X,e.viewSize<i.minViewSize&&(e.viewSize=i.minViewSize),s.value&&e.viewX+e.viewSize>e.imageX+e.imageWidth*e.imageScale&&(e.viewSize=e.imageX+e.imageWidth*e.imageScale-e.viewX),s.value&&e.viewY+e.viewSize>e.imageY+e.imageHeight*e.imageScale&&(e.viewSize=e.imageY+e.imageHeight*e.imageScale-e.viewY);break}}}},ze=n=>{const{imageMoving:e,viewMoving:t,viewResizing:i,info:s,pos:r,props:v,viewportRef:d,pointPosition:m}=n,c=a.ref({x:0,y:0}),o=a.ref({x:0,y:0}),u=a.ref({x:0,y:0}),p=a.ref({x:0,y:0}),h=a.ref({x:0,y:0}),{checkImageBack:X}=W(n),{resizeView:S}=ve(n),{checkViewPosition:w}=G(n),b=g=>{if(v.fixedImage)return _(g);s.value&&(g.preventDefault(),g.stopPropagation(),c.value.x=g.clientX,c.value.y=g.clientY,e.value=!0,document.addEventListener("mousemove",L),document.addEventListener("mouseup",z))},L=g=>{g.preventDefault(),g.stopPropagation(),r.imageX+=g.clientX-c.value.x,r.imageY+=g.clientY-c.value.y,c.value.x=g.clientX,c.value.y=g.clientY},z=()=>{e.value=!1,document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",z),X()},M=(g,V)=>{if(!d.value)return;g.preventDefault(),g.stopPropagation(),i.value=!0,m.value=V;const{left:D,top:T}=d.value.getBoundingClientRect();p.value.x=D,p.value.y=T,c.value.x=g.clientX-D,c.value.y=g.clientY-T,h.value=K(c.value,r,V),c.value.x-=h.value.x,c.value.y-=h.value.y,document.addEventListener("mousemove",A),document.addEventListener("mouseup",E)},A=g=>{if(!d.value)return;g.preventDefault(),g.stopPropagation();const V={x:g.clientX-p.value.x,y:g.clientY-p.value.y};V.x-=h.value.x,V.y-=h.value.y,S(V),c.value=V},E=()=>{i.value=!1,m.value=void 0,document.removeEventListener("mousemove",A),document.removeEventListener("mouseup",E)},_=g=>{!v.fixedImage||!d.value||(g.preventDefault(),g.stopPropagation(),t.value=!0,o.value.x=g.clientX,o.value.y=g.clientY,u.value.x=r.viewX,u.value.y=r.viewY,document.addEventListener("mousemove",B),document.addEventListener("mouseup",C))},B=g=>{g.preventDefault(),g.stopPropagation(),r.viewX=g.clientX-o.value.x+u.value.x,r.viewY=g.clientY-o.value.y+u.value.y,w()},C=()=>{t.value=!1,document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",C)};return{handleMouseDown:b,handlePointMouseDown:M}},Ee=n=>{const{props:e,imageMoving:t,pos:i,viewportRef:s,info:r,minImageScale:v,pressCtrl:d,pressShift:m,step:c,ctrlStep:o,shiftStep:u}=n,p=(S=-1)=>{let w=c.value;return e.shiftScaleStep>0&&m.value?w=u.value:e.ctrlScaleStep>0&&d.value&&(w=o.value),S>0&&(w=-w),e.wheelReverse&&(w=-w),w},{checkImageBack:h}=W(n);return{handleWheel:S=>{if(!r.value||t.value||e.fixedImage)return;S.preventDefault(),S.stopPropagation();const b=s.value.getBoundingClientRect(),L=S.clientX-b.left,z=S.clientY-b.top,M=i.imageScale,A=p(S.deltaY),E=Math.max(v.value,M+A);i.imageX=L-(L-i.imageX)*(E/M),i.imageY=z-(z-i.imageY)*(E/M),i.imageScale=E,h(!1)}}},Xe=n=>{const{props:e,pos:t,info:i,minImageScale:s,step:r,ctrlStep:v,shiftStep:d,elEmitter:m}=n;let c=!0;a.watch(()=>e,()=>{t.viewportWidth=e.width??e.size??0,t.viewportHeight=e.height??e.size??0,(!e.fixedImage||c)&&(t.viewSize=e.viewSize??0,t.viewX=(t.viewportWidth-t.viewSize)/2,t.viewY=(t.viewportHeight-t.viewSize)/2),c=!1},{deep:!0,immediate:!0}),a.watch(()=>e.fixedImage,()=>{i.value&&o(i.value)});const o=u=>{i.value=u,i.value.url=URL.createObjectURL(u.file),m.dispatchEvent(new CustomEvent("broadcast:info",{detail:{...i.value}})),t.imageWidth=u.width,t.imageHeight=u.height,e.fixedImage?(t.imageScale=Math.abs(u.width-t.viewportWidth)>Math.abs(u.height-t.viewportHeight)?(t.viewportWidth-e.imagePadding*2)/u.width:(t.viewportHeight-e.imagePadding*2)/u.height,t.imageX=(t.viewportWidth-u.width*t.imageScale)/2,t.imageY=(t.viewportHeight-u.height*t.imageScale)/2,t.viewSize=Math.min(t.imageWidth,t.imageHeight)*t.imageScale,t.viewX=(t.viewportWidth-t.viewSize)/2,t.viewY=(t.viewportHeight-t.viewSize)/2):(t.imageScale=Math.max(t.viewSize/u.width,t.viewSize/u.height),t.imageX=(t.viewportWidth-u.width*t.imageScale)/2,t.imageY=(t.viewportHeight-u.height*t.imageScale)/2,s.value=t.imageScale,r.value=s.value*(e.scaleStep/t.viewSize),v.value=s.value*(e.ctrlScaleStep/t.viewSize),d.value=s.value*(e.shiftScaleStep/t.viewSize))};return a.watchEffect(()=>m.dispatchEvent(new CustomEvent("broadcast:pos",{detail:{...t}}))),{initPosition:o}},Ye=n=>{const{pos:e,showViewLayer:t,props:i}=n,s=a.reactive({}),r=a.reactive({}),v=a.reactive({}),d=a.reactive({}),m=a.reactive({}),c=a.reactive({}),o=()=>{if(s.width=`${e.viewportWidth}px`,s.height=`${e.viewportHeight}px`,v.width=`${e.viewSize}px`,v.height=`${e.viewSize}px`,v.transform=`translate3d(${e.viewX}px, ${e.viewY}px, 0px)`,d.width=`${e.imageWidth}px`,d.height=`${e.imageHeight}px`,d.transform=`translate3d(${e.imageX}px, ${e.imageY}px, 0px) scale(${e.imageScale})`,c.width=`${e.viewSize+2}px`,c.height=`${e.viewSize+2}px`,c.transform=`translate3d(${e.viewX-1}px, ${e.viewY-1}px, 0px)`,i.forceDoubleLayer||i.shadowMask)r.clipPath=void 0;else{const u=e.viewX,p=e.viewY,h=e.viewSize;r.clipPath=`polygon(0% 0%, 0% 100%, ${u}px 100%, ${u}px ${p}px, ${u+h}px ${p}px, ${u+h}px ${p+h}px, ${u}px ${p+h}px, ${u}px 100%, 100% 100%, 100% 0%)`}if(i.shadowMask){const u=(Math.max(e.viewportWidth,e.viewportHeight)-e.viewSize)/2;r.boxShadow=`inset ${e.viewX-u}px ${e.viewY-u}px 0px ${u}px var(--mask-color)`}else r.boxShadow=void 0;t.value&&(m.width=`${e.imageWidth}px`,m.height=`${e.imageHeight}px`,m.transform=`translate3d(${e.imageX-e.viewX}px, ${e.imageY-e.viewY}px, 0px) scale(${e.imageScale})`)};return a.watch([e,t,()=>i.forceDoubleLayer,()=>i.shadowMask],o,{deep:!0,immediate:!0}),{viewportStyle:s,maskStyle:r,viewStyle:v,imageStyle:d,innerImageStyle:m,consolesStyle:c}},ke=n=>{const{info:e,imageMoving:t,pos:i,minImageScale:s,viewportRef:r,pointPosition:v,viewResizing:d,props:m,viewMoving:c}=n,{checkImageBack:o}=W(n),{resizeView:u}=ve(n),{checkViewPosition:p}=G(n),h=a.ref(),X=a.ref(),S=a.ref(!1),w=a.ref({x:0,y:0}),b=a.ref({x:0,y:0}),L=a.ref({x:0,y:0}),z=a.ref({x:0,y:0}),M=l=>{if(m.fixedImage)return D(l);if(e.value){if(l.preventDefault(),l.stopPropagation(),l.touches.length===1){const y=l.touches[0];h.value={x:y.clientX,y:y.clientY},S.value=!1}else l.touches.length>=2&&(S.value=!0,w.value={x:(l.touches[0].clientX+l.touches[1].clientX)/2,y:(l.touches[0].clientY+l.touches[1].clientY)/2},X.value=Math.hypot(l.touches[0].clientX-l.touches[1].clientX,l.touches[0].clientY-l.touches[1].clientY));t.value=!0,document.addEventListener("touchmove",A,{passive:!1}),document.addEventListener("touchend",E),document.addEventListener("touchcancel",E)}},A=l=>{if(!(!e.value||!t.value))if(l.preventDefault(),l.stopPropagation(),S.value){if(l.touches.length>=2){const y=Math.hypot(l.touches[0].clientX-l.touches[1].clientX,l.touches[0].clientY-l.touches[1].clientY),I={x:(l.touches[0].clientX+l.touches[1].clientX)/2,y:(l.touches[0].clientY+l.touches[1].clientY)/2},O=I.x-w.value.x,U=I.y-w.value.y;if(i.imageX+=O,i.imageY+=U,w.value=I,X.value){const Y=y/X.value,f=Math.max(s.value,i.imageScale*Y),j=r.value.getBoundingClientRect(),q=w.value.x-j.left,Z=w.value.y-j.top;i.imageX=q-(q-i.imageX)*(f/i.imageScale),i.imageY=Z-(Z-i.imageY)*(f/i.imageScale),i.imageScale=f,X.value=y}}}else{const y=l.touches[0];if(h.value){const I=y.clientX-h.value.x,O=y.clientY-h.value.y;i.imageX+=I,i.imageY+=O,h.value={x:y.clientX,y:y.clientY}}}},E=l=>{if(t.value){if(l.touches.length===1){const y=l.touches[0];h.value={x:y.clientX,y:y.clientY},S.value=!1}l.touches.length>0||(h.value=void 0,X.value=void 0,S.value=!1,t.value=!1,o(),document.removeEventListener("touchmove",A),document.removeEventListener("touchend",E),document.removeEventListener("touchcancel",_))}},_=l=>{E(l)},B=(l,y)=>{if(!r.value)return;l.preventDefault(),l.stopPropagation(),d.value=!0,v.value=y;const{left:I,top:O}=r.value.getBoundingClientRect();b.value.x=I,b.value.y=O,w.value.x=l.touches[0].clientX-I,w.value.y=l.touches[0].clientY-O,z.value=K(w.value,i,y),w.value.x-=z.value.x,w.value.y-=z.value.y,document.addEventListener("touchmove",C,{passive:!1}),document.addEventListener("touchend",g),document.addEventListener("touchcancel",V)},C=l=>{if(!r.value)return;l.preventDefault(),l.stopPropagation();const y={x:l.touches[0].clientX-b.value.x,y:l.touches[0].clientY-b.value.y};y.x-=z.value.x,y.y-=z.value.y,u(y),w.value=y},g=l=>{l.touches.length>0||(d.value=!1,v.value=void 0,document.removeEventListener("touchmove",C),document.removeEventListener("touchend",g),document.removeEventListener("touchcancel",V))},V=l=>{g(l)},D=l=>{!m.fixedImage||!r.value||(l.preventDefault(),l.stopPropagation(),c.value=!0,w.value.x=l.touches[0].clientX,w.value.y=l.touches[0].clientY,L.value.x=i.viewX,L.value.y=i.viewY,document.addEventListener("touchmove",T,{passive:!1}),document.addEventListener("touchend",$),document.addEventListener("touchcancel",P))},T=l=>{l.preventDefault(),l.stopPropagation(),i.viewX=l.touches[0].clientX-w.value.x+L.value.x,i.viewY=l.touches[0].clientY-w.value.y+L.value.y,p()},$=l=>{l.touches.length>0||(c.value=!1,document.removeEventListener("touchmove",T),document.removeEventListener("touchend",$),document.removeEventListener("touchcancel",P))},P=l=>{$(l)};return{handleTouchStart:M,handlePointTouchStart:B}},Le=["src"],be=["src"],Me=a.defineComponent({__name:"Viewport",props:{size:{default:300},width:{},height:{},info:{},viewSize:{default:180},grid:{type:Boolean,default:!1},scaleStep:{default:10},ctrlScaleStep:{default:5},shiftScaleStep:{default:1},wheelReverse:{type:Boolean,default:!1},fixedImage:{type:Boolean,default:!1},minViewSize:{default:10},imagePadding:{default:10},directionKey:{type:Boolean,default:!0},wasdKey:{type:Boolean,default:!0},forceDoubleLayer:{type:Boolean,default:!1},shadowMask:{type:Boolean,default:!0},showSize:{type:Boolean}},setup(n,{expose:e}){const t=n,i=a.reactive(H()),s=ye(),r=a.computed(()=>{var Y;return(Y=s.value)==null?void 0:Y.url}),v=a.ref(!1),d=a.ref(!1),m=a.ref(!1),c=a.ref(),o=a.ref(0),u=a.ref(0),p=a.ref(0),h=a.ref(0),X=Q("Control"),S=Q("Shift"),w=a.ref(ce()),b=a.ref(),L=a.computed(()=>t.forceDoubleLayer||!!r.value&&!w.value),{backing:z,handleTransitionEnd:M}=Se({imageMoving:v}),A=document.createElement("div"),E={props:t,pos:i,info:s,imageMoving:v,viewMoving:d,viewResizing:m,viewportRef:c,minImageScale:o,step:u,ctrlStep:p,shiftStep:h,pressCtrl:X,pressShift:S,pointPosition:b,backing:z,elEmitter:A,showViewLayer:L},{viewportStyle:_,maskStyle:B,viewStyle:C,imageStyle:g,innerImageStyle:V,consolesStyle:D}=Ye(E),{initPosition:T}=Xe(E),{handleMouseDown:$,handlePointMouseDown:P}=ze(E),{handleWheel:l}=Ee(E),{handleTouchStart:y,handlePointTouchStart:I}=ke(E);xe(E);const O=async Y=>{const f=await ae(Y);T(f)},U=async Y=>{if(!s.value)throw new k("NO_IMAGE_SELECTED");return le(s.value,i,Y)};return a.onMounted(()=>{t.info&&T(t.info)}),e({select:O,cropper:U,initPosition:T,elEmitter:A,backing:z}),(Y,f)=>(a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(["viewport",[{grid:Y.grid,backing:a.unref(z),"image-moving":v.value,"view-moving":d.value,"view-resizing":m.value,"fixed-image":Y.fixedImage,"shadow-mark":Y.shadowMask},b.value]]),style:a.normalizeStyle(a.unref(_)),ref_key:"viewportRef",ref:c,onMousedown:f[9]||(f[9]=(...x)=>a.unref($)&&a.unref($)(...x)),onWheel:f[10]||(f[10]=(...x)=>a.unref(l)&&a.unref(l)(...x)),onTouchstart:f[11]||(f[11]=(...x)=>a.unref(y)&&a.unref(y)(...x))},[r.value?(a.openBlock(),a.createElementBlock("img",{key:0,class:"image",src:r.value,alt:"image",style:a.normalizeStyle(a.unref(g)),onTransitionend:f[0]||(f[0]=(...x)=>a.unref(M)&&a.unref(M)(...x))},null,44,Le)):a.createCommentVNode("",!0),a.createElementVNode("div",{class:"mask",style:a.normalizeStyle(a.unref(B))},null,4),L.value?(a.openBlock(),a.createElementBlock("div",{key:1,class:"view",style:a.normalizeStyle(a.unref(C))},[a.createElementVNode("img",{class:"inner-image",src:r.value,alt:"inner-image",style:a.normalizeStyle(a.unref(V))},null,12,be)],4)):a.createCommentVNode("",!0),Y.fixedImage?(a.openBlock(),a.createElementBlock("div",{key:2,class:"consoles",style:a.normalizeStyle(a.unref(D))},[a.createElementVNode("div",{class:"point top-left",onMousedown:f[1]||(f[1]=x=>a.unref(P)(x,"top-left")),onTouchstart:f[2]||(f[2]=x=>a.unref(I)(x,"top-left"))},[a.renderSlot(Y.$slots,"point-top-left",{},void 0,!0)],32),a.createElementVNode("div",{class:"point top-right",onMousedown:f[3]||(f[3]=x=>a.unref(P)(x,"top-right")),onTouchstart:f[4]||(f[4]=x=>a.unref(I)(x,"top-right"))},[a.renderSlot(Y.$slots,"point-top-right",{},void 0,!0)],32),a.createElementVNode("div",{class:"point bottom-left",onMousedown:f[5]||(f[5]=x=>a.unref(P)(x,"bottom-left")),onTouchstart:f[6]||(f[6]=x=>a.unref(I)(x,"bottom-left"))},[a.renderSlot(Y.$slots,"point-bottom-left",{},void 0,!0)],32),a.createElementVNode("div",{class:"point bottom-right",onMousedown:f[7]||(f[7]=x=>a.unref(P)(x,"bottom-right")),onTouchstart:f[8]||(f[8]=x=>a.unref(I)(x,"bottom-right"))},[a.renderSlot(Y.$slots,"point-bottom-right",{},void 0,!0)],32)],4)):a.createCommentVNode("",!0)],38))}}),Ie=re(Me,[["__scopeId","data-v-01356808"]]);exports.Preview=pe;exports.SelectAvatarError=k;exports.Viewport=Ie;exports.accept=ee;exports.blobToBase64=oe;exports.canvasToBlob=F;exports.cropper=le;exports.errorMessageMap=te;exports.getDefaultPosition=H;exports.getErrorMessage=ge;exports.getImageDimensions=ne;exports.getIsClipPathSupported=ce;exports.getPointOffset=K;exports.isCancelError=we;exports.isVectorImage=se;exports.loadImage=N;exports.resizeImage=R;exports.selectFile=ie;exports.selectImage=ae;