images-viewer-vue3
Version:
A lightweight image viewer for Vue3
2 lines (1 loc) • 4.25 kB
JavaScript
"use strict";var m=Object.defineProperty;var g=(c,t,e)=>t in c?m(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e;var n=(c,t,e)=>g(c,typeof t!="symbol"?t+"":t,e);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=class l{constructor(){n(this,"currentImage",null);n(this,"totalRotate",0);n(this,"isMouseDown",!1);n(this,"config",{scaleRatio:1,rotateRatio:90,isEnableDrag:!0,isEnableWheel:!0,zIndex:2e3,language:"zh",playSpeed:2e3,isDownLoad:!0});n(this,"transforms",{scale:1,rotate:"0deg",scaleY:"",scaleX:""})}static getInStance(){return!this.viewer&&(this.viewer=new l),this.viewer.initialize(),this.viewer}initialize(){}setImageTransform(){if(!this.currentImage)return;let t="";Object.keys(this.transforms).forEach(e=>{const s=e;switch(s){case"scaleX":case"scaleY":case"scale":case"rotate":this.transforms[s]&&(t+=`${e}(${this.transforms[s]}) `);break}}),this.currentImage.style.transform=t}onWheel(t){t.deltaY<0&&this.zoomIn(),t.deltaY>=0&&this.zoomOut()}setConfigOptions(t){this.config=Object.assign(this.config,t)}getConfigOptions(){return this.config}horizontalInvert(){this.setInvert("scaleY")}verticalInvert(){this.setInvert("scaleX")}setInvert(t="scaleX"){if(!t||!this.currentImage)return;let e=this.currentImage.style.transform;const s=new RegExp(`${t}\\(([^)]+)\\)`);if(s.test(e)){const r=e.match(s),o=(r&&parseInt(r[1]))===1?-1:1;t==="scaleX"&&(this.transforms.scaleX=`${o}`),t==="scaleY"&&(this.transforms.scaleY=`${o}`)}else t==="scaleX"&&(this.transforms.scaleX="-1"),t==="scaleY"&&(this.transforms.scaleY="-1");this.setImageTransform()}zoomIn(){this.setZoom("+")}zoomOut(){this.setZoom("-")}rotate(t="+"){this.currentImage&&(t==="+"?this.totalRotate+=this.config.rotateRatio:this.totalRotate-=this.config.rotateRatio,this.transforms.rotate=`${this.totalRotate}deg`,this.setImageTransform())}setZoom(t="+"){this.currentImage&&(t==="+"?this.config.scaleRatio+=.1:this.config.scaleRatio>=.3&&(this.config.scaleRatio-=.1),this.transforms.scale=this.config.scaleRatio,this.setImageTransform())}setImage(t){this.currentImage=t,this.currentImage&&this.config.isEnableDrag&&(this.currentImage.onmousedown=this.onMouseMove.bind(this))}onMouseMove(t){if(!this.currentImage)return;const e=this;this.isMouseDown=!0,this.currentImage.style.position="absolute";const s=t.clientX-this.currentImage.offsetLeft,r=t.clientY-this.currentImage.offsetTop;return document.onmousemove=function(i){if(i=i||window.event,e.isMouseDown){let o=i.clientX-s,a=i.clientY-r;e.currentImage&&(e.currentImage.style.left=`${o}px`),e.currentImage&&(e.currentImage.style.top=`${a}px`)}},document.onmouseup=function(){e.isMouseDown=!1,document.onmousemove=null,document.onmouseup=null},!1}onTouchstart(t){if(!this.currentImage)return;const e=this;this.isMouseDown=!0;const s=t.touches[0];this.currentImage.style.position="absolute";const r=s.clientX-this.currentImage.offsetLeft,i=s.clientY-this.currentImage.offsetTop;t.touches.length===2&&(this.config.scaleRatio=this.getDistance(t.touches[0],t.touches[1])),document.ontouchmove=function(o){if(e.isMouseDown){const a=o.touches[0];let u=a.clientX-r,h=a.clientY-i;e.currentImage&&(e.currentImage.style.left=`${u}px`),e.currentImage&&(e.currentImage.style.top=`${h}px`)}if(o.touches.length===2&&e.config.scaleRatio){const a=e.getDistance(o.touches[0],o.touches[1]),u=a/e.config.scaleRatio;a>e.config.scaleRatio,e.setMobileZoom(u),o.preventDefault()}},document.ontouchend=function(){e.isMouseDown=!1},document.ontouchcancel=function(){e.isMouseDown=!1}}setMobileZoom(t=0){if(!this.currentImage)return;let e=this.currentImage.style.transform;const s=new RegExp("scale\\(([^)]+)\\)","i");s.test(e)?e=e.replace(s,`scale(${t})`):e+=` scale(${t})`,this.currentImage.style.transform=e}getDistance(t,e){const s=e.clientX-t.clientX,r=e.clientY-t.clientY;return Math.sqrt(s*s+r*r)}static addTotal(){this.total+=3}removeStyleProperty(){this.currentImage&&(this.currentImage.style.removeProperty("top"),this.currentImage.style.removeProperty("left"),this.currentImage.style.removeProperty("position"),this.currentImage.style.removeProperty("transform"))}destroyed(){this.removeStyleProperty(),this.currentImage=null}};n(l,"viewer"),n(l,"total",0);let f=l;exports.default=f;