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