vxe-pc-ui/lib/image/src/preview.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeImagePreview",props:{modelValue:Number,urlList:Array,urlField:{type:String,default:()=>(0,_ui.getConfig)().imagePreview.urlField},maskClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().imagePreview.maskClosable},marginSize:{type:String,default:()=>(0,_ui.getConfig)().imagePreview.marginSize},showPrintButton:{type:Boolean,default:()=>(0,_ui.getConfig)().imagePreview.showPrintButton},showDownloadButton:{type:Boolean,default:()=>(0,_ui.getConfig)().imagePreview.showDownloadButton},zIndex:Number,toolbarConfig:Object,beforeDownloadMethod:Function,downloadMethod:Function},emits:["update:modelValue","change","download","download-fail","rotate","close"],setup(u,e){let o=e.emit;var t=_xeUtils.default.uniqueId();let i=(0,_vue.ref)(),a={refElem:i},d=(0,_vue.reactive)({activeIndex:u.modelValue||0,offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0}),r=(0,_vue.computed)(()=>u.urlField||"url"),_=(0,_vue.computed)(()=>_xeUtils.default.toNumber(u.marginSize||0)||16),n=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().imagePreview.toolbarConfig,u.toolbarConfig)),s=(0,_vue.computed)(()=>{var e=d.offsetRotate;return e?e+"°":"0°"}),v=(0,_vue.computed)(()=>{var e=d.offsetScale;return e?_xeUtils.default.ceil(100*(1+e))+"%":"100%"}),c=(0,_vue.computed)(()=>{var e=u.urlList;let t=r.value;return e&&e.length?e.map(e=>_xeUtils.default.isString(e)?e:e[t]||""):[]}),l=(0,_vue.computed)(()=>{var{offsetScale:e,offsetRotate:a,offsetLeft:o,offsetTop:i}=d,r=[];let l=1;if(e&&(l=1+e,r.push(`scale(${l})`)),a&&r.push(`rotate(${a}deg)`),o||i){let e=o/=l,t=i/=l;if(a)switch(a%360){case 90:case-270:e=i,t=-o;break;case 180:case-180:e=-o,t=-i;break;case 270:case-90:e=-i,t=o}r.push(`translate(${e}px, ${t}px)`)}return r.length?r.join(" "):""}),f={computeImgList:c},m={xID:t,props:u,context:e,reactData:d,getRefMaps:()=>a,getComputeMaps:()=>f},p=(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$imagePreview:m},t))};t={dispatchEvent:p};let g=e=>{d.activeIndex=e,o("update:modelValue",e)},E=e=>{p("close",{},e)};let h=()=>{var e=i.value;(0,_dom.removeClass)(e,"is--move"),Object.assign(d,{offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0})},w=()=>{var e=d.offsetScale;let t=.02;return t=-.6<=e&&(t=.04,-.4<=e)&&(t=.07,0<=e)&&(t=.1,3<=e)&&(t=.25,8<=e)&&(t=.4,16<=e)&&(t=.6,24<=e)&&(t=.9,32<=e)&&(t=1.3,39<=e)&&(t=1.9,45<=e)?2.5:t},x=e=>{var t=d.offsetScale,a=w();d.offsetScale=e?Number(Math.min(49,t+a).toFixed(2)):Number(Math.max(-.9,t-a).toFixed(2))},I=(e,t)=>{let a=d.activeIndex||0;var o=c.value,t=(t?a>=o.length-1?a=0:a++:a<=0?a=o.length-1:a--,o[a||0]);d.activeIndex=a,h(),g(a),p("change",{url:t,activeIndex:a},e)},b=(e,t)=>{var a=c.value,o=d.activeIndex,a=a[o||0];let i=d.offsetRotate;t?i+=90:i-=90,d.offsetRotate=i,p("rotate",{url:a,rotateValue:i},e)},P=()=>{h(),d.offsetPct11=!0},R=()=>{var e=d.activeIndex,e=c.value[e||0];_ui.VxeUI.print&&_ui.VxeUI.print({align:"center",pageBreaks:[{bodyHtml:`<img src="${e}" style="max-width:100%;max-height:100%;">`}]})},V=(e,t)=>{p("download",{url:t},e)},L=(t,a)=>{_ui.VxeUI.saveFile&&fetch(a).then(e=>e.blob().then(e=>{_ui.VxeUI.saveFile({filename:a,content:e}),V(t,a)})).catch(()=>{_ui.VxeUI.modal&&_ui.VxeUI.modal.message({content:(0,_ui.getI18n)("vxe.error.downErr"),status:"error"})})},O=t=>{let a=d.activeIndex;var e=n.value.download,e=!_xeUtils.default.isBoolean(e)&&e?Object.assign({},e):{};let o=c.value[a||0];var i=u.beforeDownloadMethod||e.beforeDownloadMethod||(0,_ui.getConfig)().imagePreview.beforeDownloadMethod;let r=u.downloadMethod||e.downloadMethod||(0,_ui.getConfig)().imagePreview.downloadMethod;Promise.resolve(!i||i({$imagePreview:m,url:o,index:a||0})).then(e=>{e&&(r?Promise.resolve(r({$imagePreview:m,url:o,index:a||0})).then(()=>{V(t,o)}).catch(e=>e):L(t,o))})},C=(e,t)=>{var a=d.activeIndex;if(c.value[a||0])switch(t){case"zoomOut":x(!1);break;case"zoomIn":x(!0);break;case"pctFull":h();break;case"pct11":P();break;case"rotateLeft":b(e,!1);break;case"rotateRight":b(e,!0);break;case"print":R();break;case"download":O(e)}},M=e=>{var t=e.deltaY;0<t?(e.preventDefault(),x(!1)):t<0&&(e.preventDefault(),x(!0))},T=e=>{let{offsetTop:r,offsetLeft:l}=d,u=i.value,t=(e.preventDefault(),document.onmousemove),a=document.onmouseup,n=e.pageX,s=e.pageY,v=_.value;document.onmousemove=e=>{var{pageX:t,pageY:a}=e,{visibleHeight:o,visibleWidth:i}=(0,_dom.getDomNode)();e.preventDefault(),(0,_dom.addClass)(u,"is--move"),t>v&&a>v&&t<i-v&&a<o-v&&(d.offsetLeft=l+t-n,d.offsetTop=r+a-s)},document.onmouseup=()=>{document.onmousemove=t,document.onmouseup=a,(0,_dom.removeClass)(u,"is--move")}},y=e=>{var t=(0,_dom.hasControlKey)(e),a=e.shiftKey,o=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.R),n=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.P);o?(e.preventDefault(),a?--d.offsetTop:x(!0)):i?(e.preventDefault(),a?d.offsetTop+=1:x(!1)):r?(e.preventDefault(),a?--d.offsetLeft:I(e,!1)):l?(e.preventDefault(),a?d.offsetLeft+=1:I(e,!0)):u&&t?(e.preventDefault(),a?b(e,!1):b(e,!0)):n&&t&&(e.preventDefault(),R())},A=e=>{u.maskClosable&&e.target===e.currentTarget&&p("close",{},e)},D=(Object.assign(m,t,{}),(t,e)=>{var a=n.value[t],o=!_xeUtils.default.isBoolean(a)&&a?Object.assign({},a):{};return!1!==a?(0,_vue.h)("div",{class:"vxe-image-preview--operation-btn",title:(0,_ui.getI18n)("vxe.imagePreview.operBtn."+t),onClick(e){C(e,t)}},[(0,_vue.h)("i",{class:o.icon||(0,_ui.getIcon)()[e]})]):(0,_ui.renderEmptyElement)(m)});e=()=>{var e=d.offsetPct11;return(0,_vue.h)("div",{ref:i,class:["vxe-image-preview",{"is--pct11":e}]},[(()=>{let a=d.activeIndex;var e=c.value;let o=l.value;return(0,_vue.h)("div",{class:"vxe-image-preview--img-list",onClick:A},e.map((e,t)=>{t=a===t;return(0,_vue.h)("img",{class:["vxe-image-preview--img-item",{"is--active":t}],src:e,style:t?{transform:o}:null,onMousedown(e){T(e)}})}))})(),(()=>{var{showPrintButton:e,showDownloadButton:t}=u,a=d.activeIndex,o=c.value,i=s.value,r=v.value,l=n.value;return(0,_vue.h)("div",{class:"vxe-image-preview--btn-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--close-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--close-btn",onClick:E},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_CLOSE})]),(0,_vue.h)("div",{class:"vxe-image-preview--close-bg"})]),1<o.length?(0,_vue.h)("div",{class:"vxe-image-preview--previous-btn",onClick(e){I(e,!1)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_PREVIOUS})]):(0,_ui.renderEmptyElement)(m),1<o.length?(0,_vue.h)("div",{class:"vxe-image-preview--next-btn",onClick(e){I(e,!0)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_NEXT})]):(0,_ui.renderEmptyElement)(m),(0,_vue.h)("div",{class:"vxe-image-preview--operation-info"},[(0,_vue.h)("div",{class:"vxe-image-preview--operation-deg"},i),(0,_vue.h)("div",{class:"vxe-image-preview--operation-pct"},r)]),(0,_vue.h)("div",{class:"vxe-image-preview--operation-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--operation-active-count"},[(0,_vue.h)("span",{class:"vxe-image-preview--operation-active-current"},""+((a||0)+1)),(0,_vue.h)("span",{class:"vxe-image-preview--operation-active-total"},"/"+o.length)]),D("zoomOut","IMAGE_PREVIEW_ZOOM_OUT"),D("zoomIn","IMAGE_PREVIEW_ZOOM_IN"),D("pctFull","IMAGE_PREVIEW_PCT_FULL"),D("pct11","IMAGE_PREVIEW_PCT_1_1"),D("rotateLeft","IMAGE_PREVIEW_ROTATE_LEFT"),D("rotateRight","IMAGE_PREVIEW_ROTATE_RIGHT"),e||l.print?D("print","IMAGE_PREVIEW_PRINT"):(0,_ui.renderEmptyElement)(m),t||l.download?D("download","IMAGE_PREVIEW_DOWNLOAD"):(0,_ui.renderEmptyElement)(m)])])})()])};return(0,_vue.watch)(()=>u.modelValue,e=>{d.activeIndex=e,h()}),(0,_vue.onMounted)(()=>{var e=i.value;e&&e.addEventListener("wheel",M,{passive:!1}),_ui.globalEvents.on(m,"keydown",y)}),(0,_vue.onBeforeUnmount)(()=>{var e=i.value;e&&(e.removeEventListener("wheel",M),(0,_dom.removeClass)(e,"is--move"))}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(m,"keydown")}),(0,_vue.provide)("$xeImagePreview",m),m.renderVN=e}});