🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

vue3-image-viewer

Package Overview
Dependencies
Maintainers
1
Versions
74
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-image-viewer - npm Package Compare versions

Comparing version

0.0.4
to
0.0.5

4

dist/build.umd.ts

@@ -1,2 +0,2 @@

(function(S,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(S=typeof globalThis<"u"?globalThis:S||self,r(S["vue3-image-viewer"]={},S.Vue))})(this,function(S,r){"use strict";const F=new IntersectionObserver(e=>{for(const t of e)if(t.isIntersecting){const o=t.target;o&&o.dataset&&(o.src=o.dataset.src||"",o.dispatchEvent(new Event("startLoad")),F.unobserve(o))}},{threshold:[0]}),ee={mounted(e,t){if(!t.value)return;const{src:o,active:s}=t.value;s?(e.dataset.src=o,F.observe(e)):e&&e.dispatchEvent(new Event("startLoad"))}},ht="",_=(e,t)=>{const o=e.__vccOpts||e;for(const[s,i]of t)o[s]=i;return o},te={directives:{lazyLoad:ee},props:{src:{type:String,default:""},aspectRatio:{type:Number,default:0},fit:{type:String,default:""},lazy:{type:Boolean,default:!1},bgColor:{type:String,default:"black"},alt:{type:String,default:""},referrerPolicy:{type:String,default:""}},data(){return{loading:!1,failure:!1,success:!1}},computed:{imgRatioWrapStyle(){const{bgColor:e,aspectRatio:t}=this,o={position:"relative"};return o.backgroundColor=e,t?(o.width="100%",o.paddingBottom=`${t*100}%`):(o.width="100%",o.height="100%"),o}},methods:{onStartLoad(e){this.loading=!0,this.failure=!1,this.$emit("startLoad",e)},onLoaded(e){this.loading=!1,this.failure=!1,this.success=!0,this.$emit("load",e)},onError(e){this.loading=!1,this.failure=!0,this.success=!1,this.$emit("error",e)},handleImageClick(e){this.$emit("click",e)}}},oe={key:0,class:"v3iv-status-slot"},re={key:1,class:"v3iv-status-slot"},ne={class:"v3iv-slot-footer"},ie=["alt","referrer-policy","src"];function se(e,t,o,s,i,n){const a=r.resolveDirective("lazy-load");return r.openBlock(),r.createElementBlock("div",{style:r.normalizeStyle(n.imgRatioWrapStyle),onClick:t[3]||(t[3]=(...l)=>n.handleImageClick&&n.handleImageClick(...l))},[r.createElementVNode("div",{class:r.normalizeClass(["v3iv-img-wrap",{"v3iv-fix-ratio":o.aspectRatio,"v3iv-loading":i.loading,"v3iv-failure":i.failure}])},[i.failure?(r.openBlock(),r.createElementBlock("div",oe,[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u5931\u8D25 ")],!0)])):r.createCommentVNode("",!0),i.loading?(r.openBlock(),r.createElementBlock("div",re,[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u4E2D... ")],!0)])):r.createCommentVNode("",!0),r.createElementVNode("div",ne,[r.renderSlot(e.$slots,"footer",{},void 0,!0)]),r.withDirectives(r.createElementVNode("img",{class:r.normalizeClass(["v3iv-image",{"object-fit-style":!!o.fit}]),style:r.normalizeStyle({objectFit:o.fit}),alt:o.alt,"referrer-policy":o.referrerPolicy,onLoad:t[0]||(t[0]=(...l)=>n.onLoaded&&n.onLoaded(...l)),onError:t[1]||(t[1]=(...l)=>n.onError&&n.onError(...l)),"on:startLoad":t[2]||(t[2]=(...l)=>n.onStartLoad&&n.onStartLoad(...l)),src:o.lazy?"":o.src},null,46,ie),[[a,{src:o.src,active:o.lazy}]])],2)],4)}const ae=_(te,[["render",se],["__scopeId","data-v-7e00ff9d"]]),mt="",le={inject:["jointUrl","closePreview"],props:{preload:{type:Array||Boolean,default(){return[0,2]}},images:{type:Array,default(){return[]}},curIndex:{type:Number,default:0},loop:{type:Boolean,default:!1}},data(){return{loading:!1,failure:!1,success:!1}},watch:{src:{handler(e){this.loading=!0,this.failure=!1,this.success=!1},immediate:!0}},computed:{src(){return this.currentItem.url},currentItem(){const{images:e,curIndex:t}=this;return e[t]||{}},preloadList(){const{images:e,preload:t,curIndex:o}=this;if(!t)return[];const s=e.length,i=o,n=t[0],a=t[1],l=Math.max(i-n,0),c=Math.min(i+a,s-1);return e.slice(l,c+1).map(h=>h.url)}},mounted(){document.addEventListener("keydown",this.onPreviewKeydown)},beforeUnmount(){document.removeEventListener("keydown",this.onPreviewKeydown)},methods:{onPreviewKeydown(e){e.code==="Escape"&&this.closePreview(!0),(e.code==="ArrowLeft"||e.code==="KeyA")&&this.handleSwitch(-1),(e.code==="ArrowRight"||e.code==="KeyD")&&this.handleSwitch(1)},handleSwitch(e){if(!this.switchClickable(e))return;const{loop:t,curIndex:o,images:s}=this;let i=o+e;const n=s.length-1;t?(i<0&&(i=n),i>n&&(i=0)):(i=Math.max(0,i),i=Math.min(n,i)),this.$emit("switch",i)},switchClickable(e){const{loop:t,curIndex:o,images:s}=this;if(t)return!0;if(e==-1&&!o)return!1;const i=s.length-1;return!(e==1&&o==i)},getPreloadKey(e,t){return`${e}-${t}`},onPreviewLoad(){this.loading=!1,this.failure=!1,this.success=!0},onPreviewError(){this.loading=!1,this.failure=!0,this.success=!1}}},T=e=>(r.pushScopeId("data-v-44645504"),e=e(),r.popScopeId(),e),ce={class:"v3iv-image-preview"},de={key:0,class:"v3iv-preview-error"},he={key:1,class:"v3iv-preview-loading"},me=["src"],fe=["src"],ue={class:"v3iv-img-append"},pe={class:"v3iv-title"},ge={class:"v3iv-desc"},ye=[T(()=>r.createElementVNode("i",{class:"iconfont v3iv-icon icon-v3iv-guanbi"},null,-1))],we=[T(()=>r.createElementVNode("i",{class:"iconfont v3iv-icon icon-v3iv-left-arrow"},null,-1))],ve=[T(()=>r.createElementVNode("i",{class:"iconfont v3iv-icon icon-v3iv-right-arrow"},null,-1))];function ke(e,t,o,s,i,n){return r.openBlock(),r.createElementBlock("div",ce,[r.createElementVNode("div",{class:r.normalizeClass(["v3iv-preview-center",{"v3iv-loading":i.loading,"v3iv-failure":i.failure}])},[i.failure?(r.openBlock(),r.createElementBlock("div",de,[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u5931\u8D25 ")],!0)])):r.createCommentVNode("",!0),i.loading?(r.openBlock(),r.createElementBlock("div",he,[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u4E2D... ")],!0)])):r.createCommentVNode("",!0),r.createVNode(r.Transition,{name:"bounce"},{default:r.withCtx(()=>[r.withDirectives(r.createElementVNode("img",{class:"v3iv-preview-img",onLoad:t[0]||(t[0]=(...a)=>n.onPreviewLoad&&n.onPreviewLoad(...a)),onError:t[1]||(t[1]=(...a)=>n.onPreviewError&&n.onPreviewError(...a)),src:n.src},null,40,me),[[r.vShow,!i.loading&&!i.failure]])]),_:1}),(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(n.preloadList,(a,l)=>r.withDirectives((r.openBlock(),r.createElementBlock("div",{key:n.getPreloadKey(a,l)},[r.createElementVNode("img",{src:n.jointUrl(a)},null,8,fe)])),[[r.vShow,!1]])),128)),r.createElementVNode("div",ue,[r.createElementVNode("div",pe,r.toDisplayString(n.currentItem.title),1),r.createElementVNode("div",ge,r.toDisplayString(n.currentItem.desc),1)])],2),r.createElementVNode("div",{class:"v3iv-preview-close",onClick:t[2]||(t[2]=r.withModifiers(a=>n.closePreview(!0),["stop"]))},ye),r.createElementVNode("div",{class:"v3iv-preview-sl",onClick:t[3]||(t[3]=r.withModifiers(a=>n.handleSwitch(-1),["stop"]))},we),r.createElementVNode("div",{class:"v3iv-preview-sr",onClick:t[4]||(t[4]=r.withModifiers(a=>n.handleSwitch(1),["stop"]))},ve)])}const be=_(le,[["render",ke],["__scopeId","data-v-44645504"]]),gt="",xe={emits:["switch","close","load","error"],provide(){return{jointUrl:this.jointUrl,closePreview:this.closePreview}},components:{Image:ae,Preview:be},props:{base:{type:String,default:""},src:{type:String,default:""},token:{type:String,default:""},width:{type:String,default:""},height:{type:String,default:""},fit:{type:String,default:"cover"},aspectRatio:{type:Number},lazy:{type:Boolean},bgColor:{type:String},alt:{type:String},referrerPolicy:{type:String},hideOnClickModal:{type:Boolean,default:!1},images:{type:Array,default(){return[]}},loop:{type:Boolean,default:!1},preload:{type:Array||Boolean,default(){return[0,2]}},initialIndex:{type:Number,default:0},preview:{type:Boolean,default:!1}},data(){return{previewVisible:!1,previewIndex:this.initialIndex}},computed:{wrapStyle(){const{width:e,height:t}=this,o={};return e&&(o.width=e),t&&(o.height=t),o},_src(){const{src:e}=this;return this.jointUrl(e)}},methods:{handleSwitch(e){this.previewIndex=e,this.$emit("switch",e)},closePreview(e){e&&(this.$emit("close"),this.previewVisible=!1)},onLoaded(e){this.$emit("load",e)},onError(e){this.$emit("error",e)},handleImageClick(){!this.preview||(this.previewVisible=!0,this.previewIndex=this.initialIndex)},jointUrl(e){if(!e)return"";const{base:t,token:o}=this,s=o?`?token=${o}`:"";return e.startsWith("data:")||e.startsWith("http:")||e.startsWith("https:")||e.startsWith("blob:")?`${e}${s}`:`${t}${e}${s}`}}};function _e(e,t,o,s,i,n){const a=r.resolveComponent("Image"),l=r.resolveComponent("Preview");return r.openBlock(),r.createElementBlock("div",{style:r.normalizeStyle(n.wrapStyle),class:r.normalizeClass(["v3iv-image-wrap",{"v3iv-preview-active":i.previewVisible}])},[r.createVNode(a,{src:n._src,aspectRatio:o.aspectRatio,fit:o.fit,lazy:o.lazy,bgColor:o.bgColor,alt:o.alt,referrerPolicy:o.referrerPolicy,onClick:n.handleImageClick,onLoad:n.onLoaded,onError:n.onError,style:{"{\r\n cursor":`preview ? 'pointer' : 'default',\r
}`},class:r.normalizeClass({"v3iv-clickable":o.preview})},{loading:r.withCtx(()=>[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u4E2D... ")],!0)]),error:r.withCtx(()=>[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u5931\u8D25 ")],!0)]),footer:r.withCtx(()=>[r.renderSlot(e.$slots,"footer",{},void 0,!0)]),_:3},8,["src","aspectRatio","fit","lazy","bgColor","alt","referrerPolicy","onClick","onLoad","onError","class"]),i.previewVisible?(r.openBlock(),r.createBlock(l,{key:0,class:r.normalizeClass({"v3iv-clickable":o.hideOnClickModal}),onClick:t[0]||(t[0]=c=>n.closePreview(o.hideOnClickModal)),preload:o.preload,images:o.images,curIndex:i.previewIndex,loop:o.loop,onSwitch:n.handleSwitch},{loading:r.withCtx(()=>[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u4E2D... ")],!0)]),error:r.withCtx(()=>[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u5931\u8D25 ")],!0)]),_:3},8,["class","preload","images","curIndex","loop","onSwitch"])):r.createCommentVNode("",!0)],6)}const R=_(xe,[["render",_e],["__scopeId","data-v-7a8ab0c7"]]),yt="",Se={inject:["getMarkStyle"],props:{drawable:{type:Boolean,default:!1},drawMark:{type:Object,default:()=>({})}},computed:{drawStyle(){const{drawable:e,drawMark:t}=this;return!e||!t.active?{display:"none"}:this.getMarkStyle(t,"lightpink")}}};function Me(e,t,o,s,i,n){return r.openBlock(),r.createElementBlock("div",{class:"v3iv-draw-mark",style:r.normalizeStyle(n.drawStyle)},null,4)}const Ee=_(Se,[["render",Me],["__scopeId","data-v-8723b5c7"]]),x={minSize:-1/0,maxSize:1/0,disabled:!1,enabled:!0},u=2;let N=[],W=!1,B=null;class ze{constructor(){}init(t){if(!t.initialized)return this.addAnchors(t)}addAnchors(t){const s=Object.keys(Y).map(i=>{const n=Pe(i);return n.key=i,n});for(const i of s)Ve(i),t.appendChild(i);return t.initialized=!0,s}}const Ie=new ze;let M=null,C=null;const b={startX:0,startY:0,target:null,started:!1},X=5,z="DeepPink",Ce="icondrag1",L=10,V=X/2,Y={lt:{dirX:-1,dirY:-1,fixed:1,style:{left:`-${u}px`,top:`-${u}px`,cursor:"se-resize",zIndex:50}},mt:{dirX:0,dirY:-1,fixed:1,style:{left:"50%",transform:`translateX(-${V}px)`,top:`-${u}px`,cursor:"s-resize",zIndex:50}},rt:{dirX:1,dirY:-1,fixed:1,style:{right:`-${u}px`,top:`-${u}px`,cursor:"sw-resize",zIndex:50}},lm:{dirX:-1,dirY:0,fixed:1,style:{left:`-${u}px`,top:"50%",transform:`translateY(-${V}px)`,cursor:"e-resize",zIndex:50}},rm:{dirX:1,dirY:0,fixed:1,style:{right:`-${u}px`,top:"50%",transform:`translateY(-${V}px)`,cursor:"w-resize",zIndex:50}},lb:{dirX:-1,dirY:1,fixed:1,style:{left:`-${u}px`,bottom:`-${u}px`,cursor:"ne-resize",zIndex:50}},mb:{dirX:0,dirY:1,fixed:1,style:{left:"50%",transform:`translateX(-${V}px)`,bottom:`-${u}px`,cursor:"n-resize",zIndex:50}},rb:{dirX:1,dirY:1,fixed:1,style:{right:`-${u}px`,bottom:`-${u}px`,cursor:"nw-resize",zIndex:50}},mm:{dirX:-1,dirY:-1,fixed:0,style:{left:"50%",top:"50%",transform:`translate(-${L/2}px,-${L/2}px)`,cursor:"move",zIndex:50,backgroundColor:z,borderRadius:"1px"}}},Be=[{height:"100%",width:`${u}px`,left:`-${u}px`,top:0,bottom:0},{height:"100%",width:`${u}px`,right:`-${u}px`,top:0,bottom:0},{width:"100%",height:`${u}px`,left:0,top:`-${u}px`,right:0},{width:"100%",height:`${u}px`,left:0,bottom:`-${u}px`,right:0}],D="gray";function Le(e){const t=e.querySelectorAll(".v3iv-drag-border");for(const s of t)e.initialized=!1,j(s),e.removeChild(s);const o=e.querySelectorAll(".v3iv-drag-anchor");for(const s of o)O(s),e.removeChild(s)}function H(){if(P(),!!N.length){if(W){W=!1;return}N=N.filter(e=>{A(e);const t=e.querySelectorAll(".v3iv-drag-anchor");for(const s of t)O(s),e.removeChild(s);const o=e.querySelector(".v3iv-mark-delete");return o&&(o.style.display="block"),!1})}}function A(e){const t=[];for(const o of Be){const{width:s,height:i,left:n,right:a,top:l,bottom:c}=o,d=document.createElement("DIV");d.style.width=s,d.style.height=i,d.style.opacity=.5,d.style.position="absolute",d.style.cursor="move",d.style.userSelect="none",d.style.touchAction="none",d.style.pointerEvents="auto",d.classList.add("v3iv-drag-border"),n!==void 0&&(d.style.left=n),a!==void 0&&(d.style.right=a),l!==void 0&&(d.style.top=l),c!==void 0&&(d.style.bottom=c),t.push(d)}for(const o of t)De(o),e.appendChild(o)}function Re(){!M||(M.addEventListener("mousewheel",k),M.addEventListener("click",k),document.addEventListener("mousemove",Z,{passive:!1}),document.addEventListener("mouseup",q))}function Ne(){!M||(M.removeEventListener("mousewheel",k),M.removeEventListener("click",k),document.removeEventListener("mousemove",Z),document.removeEventListener("mouseup",q))}function Ve(e){e.addEventListener("mousewheel",k),e.addEventListener("mousedown",k),e.addEventListener("mousedown",K)}function O(e){e.removeEventListener("mousewheel",k),e.removeEventListener("mousedown",k),e.removeEventListener("mousedown",K)}function De(e){e.addEventListener("click",$),e.addEventListener("mousewheel",k),e.addEventListener("mousedown",k)}function j(e){e.removeEventListener("click",$),e.removeEventListener("mousewheel",k),e.removeEventListener("mousedown",k)}function $(e){e.stopPropagation(),e.preventDefault();const t=e.target.parentNode;Ie.init(t);const o=t.querySelectorAll(".v3iv-drag-border");for(const i of o)t.initialized=!1,j(i),t.removeChild(i);const s=t.querySelector(".v3iv-mark-delete");s&&(s.style.display="none"),N.push(t)}function k(e){e.stopPropagation(),e.preventDefault()}function K(e){const{which:t}=e;if(t!=1)return;e.stopPropagation(),e.preventDefault();const o=e.target,s=o.parentNode,i=new CustomEvent("resize-start");s.dispatchEvent(i),M=s.parentNode,Re(),e.preventDefault(),e.stopPropagation(),C&&(C.style.zIndex=30),C=s,C.style.zIndex=40,b.started=!0,b.target=o,b.startX=e.pageX,b.startY=e.pageY}function Z(e){B||(B=setTimeout(()=>{if(!b.started){P();return}e.preventDefault(),e.stopPropagation();const{key:t}=b.target,{dirX:o,dirY:s}=Y[t],i=o*(e.pageX-b.startX),n=s*(e.pageY-b.startY),a=["lt","lm","lb"],l=["lt","mt","rt"],c=["rt","rm","rb"],d=["lb","mb","rb"];let h=0,m=0,f=0,p=0;a.includes(t)&&(h=-i),l.includes(t)&&(m=-n),c.includes(t)&&(f=i),d.includes(t)&&(p=n),t==="mm"&&(h=-i,f=-i,m=-n,p=-n);const v=new CustomEvent("resize-move",{detail:{left:h,top:m,right:f,bottom:p,key:t}});C.dispatchEvent(v),P()},20))}function P(){B&&(clearTimeout(B),B=null)}function q(e){if(e.preventDefault(),e.stopPropagation(),!b.started)return;P(),b.started=!1,b.target=null,W=!0;const t=new CustomEvent("resize-end");C.dispatchEvent(t),Ne(),M=null}function Pe(e){const{style:t,fixed:o}=Y[e],s=document.createElement("DIV");s.style.height=`${X}px`,s.style.width=`${X}px`,s.style.backgroundColor=z,s.style.position="absolute",s.style.userSelect="none",s.style.touchAction="none",s.style.pointerEvents="auto",s.classList.add("v3iv-drag-anchor"),o||(s.classList.add("iconfont",Ce),s.style.height=`${L}px`,s.style.width=`${L}px`,s.style.fontSize=`${L}px`,s.style.color=z,s.style.backgroundColor="transparent");for(const i of Object.keys(t)){const n=t[i];s.style[i]=n}return s}function U(e,t){t?(e.style.pointerEvents="none",e.style.backgroundColor=e.style.backgroundColor==z&&D,e.style.color=e.style.color==z&&D,e.style.display="none"):(e.style.pointerEvents="auto",e.style.backgroundColor=e.style.backgroundColor==D&&z,e.style.color=e.style.color==D&&z,e.style.display="block")}function G(e){const t=e.value||{},{maxSize:o=x.maxSize,minSize:s=x.minSize,disabled:i=x.disabled,enabled:n=x.enabled}=t;x.maxSize=o,x.minSize=s,x.disabled=i,x.enabled=n}const Te={mounted(e,t){if(e){G(t);const{enabled:o}=x;if(!o)return;A(e),document.addEventListener("click",H)}},unmounted(e,t){H(),Le(e),document.removeEventListener("click",H)},updated(e,t){G(t);const{disabled:o,enabled:s}=x;if(!s)return;const i=e.querySelectorAll(".v3iv-drag-anchor"),n=e.querySelectorAll(".v3iv-drag-border");for(const a of i)U(a,o);for(const a of n)U(a,o)}},wt="",We={inject:["getMarkStyle","getMarkLRTBWH"],emits:["resize","delete"],directives:{dragResize:Te},props:{marks:{type:Array,default:()=>[]},drawing:{type:Boolean,default:!1},focus:{type:Boolean,default:!1},deleteable:{type:Boolean,default:!1},location:{type:Object,default:()=>({})},renderRecord:{type:Object,default:()=>({})}},data(){return{}},computed:{},watch:{},created(){},mounted(){},methods:{getMarkKey(e,t){return`${e.id}-${t}`},resizeStart(e){},resizeMove(e,t){let{left:o,top:s,right:i,bottom:n,key:a}=t.detail;const{curScale:l}=this.location,{scale:c}=this.renderRecord;o=o/l/c,s=s/l/c,i=i/l/c,n=n/l/c;const[d,h,m,f]=e.storage,{trueImgW:p,trueImgH:v}=this.renderRecord;let g=d+o,y=h+s,w=m+i,E=f+n;if(a==="mm"){const J=e.right-e.left,Q=e.bottom-e.top;g>0&&w<p?(e.left=g,e.right=w):g<0?(e.left=0,e.right=J):w>p&&(e.left=p-J,e.right=p),y>0&&E<v?(e.top=y,e.bottom=E):y<0?(e.top=0,e.bottom=Q):E>v&&(e.top=v-Q,e.bottom=v);return}g=Math.max(0,g),y=Math.max(0,y),w=Math.max(0,w),E=Math.max(0,E),g=Math.min(p,g),y=Math.min(v,y),w=Math.min(p,w),E=Math.min(v,E),e.left=g,e.top=y,e.right=w,e.bottom=E},resizeEnd(e){const t=this.getMarkLRTBWH(e),{left:o,top:s,right:i,bottom:n}=t,{target:a}=e;e.left=o,e.top=s,e.right=i,e.bottom=n,e.storage=[o,s,i,n],this.$emit("resize",{target:a,detail:t})},deleteMark(e){this.$emit("delete",e)}}},Xe=e=>(r.pushScopeId("data-v-e199aa50"),e=e(),r.popScopeId(),e),Ye=["onResizeStart","onResizeMove","onResizeEnd"],He=["onClick"],Fe=[Xe(()=>r.createElementVNode("svg",{t:"1655567649321",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"17221",width:"16",height:"16"},[r.createElementVNode("path",{d:"M512 1255.489906","p-id":"17222",fill:"#ffffff"}),r.createElementVNode("path",{d:"M718.519288 688.227064 543.827304 513.637418l174.180292-174.180292c8.801119-8.801119 8.801119-23.128523 0-31.827304-8.801119-8.801119-23.128523-8.801119-31.827304 0L512 481.810114 337.819708 307.629822c-8.801119-8.801119-23.230861-8.596442-31.929642 0.102339l0.102339-0.102339c-8.801119 8.801119-8.698781 23.026184 0.102339 31.827304l174.180292 174.180292L305.58305 688.227064c-8.801119 8.801119-8.801119 23.128523 0 31.827304 8.801119 8.801119 23.128523 8.801119 31.827304 0L512 545.464721 686.691985 720.054367c8.801119 8.801119 22.923846 8.903458 31.724965 0.102339l0.102339-0.102339C727.218069 711.355587 727.218069 697.028183 718.519288 688.227064z","p-id":"17223",fill:"#ffffff"})],-1))];function Ae(e,t,o,s,i,n){const a=r.resolveDirective("drag-resize");return r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(o.marks,(l,c)=>r.withDirectives((r.openBlock(),r.createElementBlock("div",{class:"v3iv-mark-item",key:n.getMarkKey(l,c),style:r.normalizeStyle(n.getMarkStyle(l)),onResizeStart:d=>n.resizeStart(l),onResizeMove:d=>{n.resizeMove(l,d)},onResizeEnd:d=>n.resizeEnd(l)},[o.deleteable&&!o.focus?(r.openBlock(),r.createElementBlock("div",{key:0,class:"v3iv-mark-delete",onMousewheel:t[0]||(t[0]=r.withModifiers(()=>{},["stop"])),onMousedown:t[1]||(t[1]=r.withModifiers(()=>{},["stop"])),onClick:d=>n.deleteMark(l)},Fe,40,He)):r.createCommentVNode("",!0)],44,Ye)),[[a,{disabled:o.drawing||o.focus}]])),128)}const Oe=_(We,[["render",Ae],["__scopeId","data-v-e199aa50"]]),kt="",je={components:{Image:R},props:{currentIndex:{type:Number,default:0},images:{type:Array,default:()=>[]},base:{type:String,default:""},token:{type:String,default:""}},data(){return{}},computed:{drawerStyle(){return{"margin-left":`-${this.currentIndex*30+15}px`}}},methods:{switchIndex(e){this.$emit("switch",e)},getKey(e,t){return`${e.thumbnail}-v3iv-thumbnail-${t}`}}},$e=e=>(r.pushScopeId("data-v-8cac745e"),e=e(),r.popScopeId(),e),Ke={class:"v3iv-navigation-bar"},Ze=["onClick"],qe=$e(()=>r.createElementVNode("i",{class:"iconfont icon-v3iv-error"},null,-1));function Ue(e,t,o,s,i,n){const a=r.resolveComponent("Image");return r.openBlock(),r.createElementBlock("div",Ke,[r.createElementVNode("div",{class:"v3iv-navigation-drawer",style:r.normalizeStyle(n.drawerStyle)},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(o.images,(l,c)=>(r.openBlock(),r.createElementBlock("div",{class:r.normalizeClass(["v3iv-navigation-item",{"v3iv-active":c==o.currentIndex}]),key:n.getKey(l,c),onClick:d=>n.switchIndex(c),onMousedown:t[0]||(t[0]=r.withModifiers(()=>{},["stop"])),onMousewheel:t[1]||(t[1]=r.withModifiers(()=>{},["stop"]))},[r.createVNode(a,{height:"100%",width:"100%",base:o.base,src:l.thumbnail,token:o.token,fit:"cover",lazy:""},{loading:r.withCtx(()=>[r.createTextVNode(" ... ")]),error:r.withCtx(()=>[qe]),_:2},1032,["base","src","token"])],42,Ze))),128))],4)])}const Ge=_(je,[["render",Ue],["__scopeId","data-v-8cac745e"]]),bt="",Je={emits:["switchMode","prev","zoomOut","zoomIn","next","reset"],props:{fitMode:{type:Object,default:()=>({})},scaleFit:{type:Number,default:1},imgRecord:{type:Object,default:()=>({})}},methods:{containOrCover(){this.$emit("switchMode")},prev(){this.$emit("prev")},zoomOut(){this.$emit("zoomOut")},zoomIn(){this.$emit("zoomIn")},next(){this.$emit("next")},reset(){this.$emit("reset")},download(){const{trueSrc:e}=this.imgRecord,t=document.createElement("a");t.href=e,name||(name=e.split("/").pop()||"download"),t.setAttribute("target","_blank"),t.setAttribute("download",name),document.body.appendChild(t),t.click(),document.body.removeChild(t)}}},Qe={class:"v3iv-toolbar"},et={key:0,class:"icon-v3iv-quanping"},tt={key:1,class:"icon-v3iv-fullfill"};function ot(e,t,o,s,i,n){return r.openBlock(),r.createElementBlock("div",Qe,[r.renderSlot(e.$slots,"toolbar",{},()=>[r.createElementVNode("div",{onClick:t[0]||(t[0]=(...a)=>n.containOrCover&&n.containOrCover(...a)),class:"iconfont"},[o.scaleFit==o.fitMode.contain?(r.openBlock(),r.createElementBlock("span",et)):(r.openBlock(),r.createElementBlock("span",tt))]),r.createElementVNode("div",{onClick:t[1]||(t[1]=(...a)=>n.prev&&n.prev(...a)),class:"iconfont icon-v3iv-zhixiang-zuo"}),r.createElementVNode("div",{onClick:t[2]||(t[2]=(...a)=>n.zoomOut&&n.zoomOut(...a)),class:"iconfont icon-v3iv-jian"}),r.createElementVNode("div",{onClick:t[3]||(t[3]=(...a)=>n.zoomIn&&n.zoomIn(...a)),class:"iconfont icon-v3iv-jia"}),r.createElementVNode("div",{onClick:t[4]||(t[4]=(...a)=>n.next&&n.next(...a)),class:"iconfont icon-v3iv-zhixiang-you"}),r.createElementVNode("div",{onClick:t[5]||(t[5]=(...a)=>n.reset&&n.reset(...a)),class:"iconfont icon-v3iv-zhongzhi-circle"}),r.createElementVNode("div",{onClick:t[6]||(t[6]=a=>n.download()),class:"iconfont icon-v3iv-xiazai"})],!0)])}const rt=_(Je,[["render",ot],["__scopeId","data-v-88f53f74"]]),nt={components:{Image:R},props:{base:{type:String,default:""},token:{type:String,default:""},preload:{type:Array,default:()=>[0,2]},images:{type:Array,default:()=>[]},currentIndex:{type:Number,default:0}},computed:{preloadList(){const{preload:e,images:t,currentIndex:o}=this;if(!e)return[];const s=t.length,i=e[0],n=e[1],a=Math.max(o-i,0),l=Math.min(o+n,s-1);return t.slice(a,l+1).map(d=>d?d.url:"")}},methods:{getKey(e,t){return`${e}-v3iv-preload-${t}`}}};function it(e,t,o,s,i,n){const a=r.resolveComponent("Image");return r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(n.preloadList,(l,c)=>r.withDirectives((r.openBlock(),r.createElementBlock("div",{key:n.getKey(l,c)},[r.createVNode(a,{base:o.base,src:l,token:o.token},null,8,["base","src","token"])])),[[r.vShow,!1]])),128)}const st=_(nt,[["render",it]]),xt="",I={contain:1,cover:2},at={emits:["resize","delete","load","drawEnd","zoom","error","switch"],provide(){return{getMarkStyle:this.getMarkStyle,getMarkLRTBWH:this.getMarkLRTBWH}},components:{Image:R,DrawRect:Ee,ImgMarks:Oe,Navigation:Ge,ToolBar:rt,Preload:st},props:{base:{type:String,default:""},token:{type:String,default:""},fit:{type:String,default:"contain"},loop:{type:Boolean,default:!1},initialIndex:{type:Number,default:0},preload:{type:Array||Boolean,default:[0,2]},scaleMax:{type:Number,default:15},scaleMin:{type:Number,default:1},scaleStep:{type:Number,default:1.2},initialScale:{type:Number,default:1},imageList:{type:Array,default:null},markList:{type:Array,default:null},navigation:{type:Boolean,default:!1},toolbar:{type:Boolean,default:!1},keyboard:{type:Array,default:["A","D","Space","Esc"]},fixed:{type:Boolean,default:!1},focus:{type:Boolean,default:!1},drawable:{type:Boolean,default:!1},deleteable:{type:Boolean,default:!1},image:{type:Object,default:null},mark:{type:Object,default:null}},data(){return{fitMode:I,loadStatus:{loading:!1,failure:!1,success:!1},currentIndex:this.initialIndex,focusIndex:0,drawing:!1,drag:{dragPreX:0,dragPreY:0,active:!1},location:{translateX:0,translateY:0,curScale:this.initialScale},imgRecord:{wrapW:0,wrapH:0,imgSizeW:0,imgSizeH:0,trueSrc:""},drawMark:{left:0,right:0,top:0,bottom:0,active:!1},scaleFit:I.contain,resizeTimer:null,marksFormat:[]}},computed:{URL(){const{current:e}=this;return e.url},currentMarks(){const{current:e}=this;return e.marks||[]},images(){const{imageList:e,image:t}=this;return e||(t?[t]:[])},marks(){const{markList:e,mark:t,currentMarks:o}=this;return e||(t?[t]:o||[])},wrapStyle(){let{translateX:e,translateY:t,curScale:o}=this.location;return{transform:`translate(${e}px,${t}px) scale(${o})`}},mouseActive(){const{drawing:e}=this,{active:t}=this.drag;return e||t},current(){const{images:e,currentIndex:t}=this;return e[t]||{}},renderRecord(){const{imgSizeW:e,imgSizeH:t,wrapW:o,wrapH:s}=this.imgRecord;if(!e||!t||!o||!s)return null;const{imgW:i,imgH:n}=this.current,a=i||e,l=n||t,c={TDEdge:0,LREdge:0,imgW:0,imgH:0,scale:0,containScale:0,trueImgW:a,trueImgH:l},d=l/a,h=s/o;return d>h?(c.scale=this.toFixed(s/l,5),c.imgH=s,c.imgW=Math.round(c.imgH/d),c.LREdge=(o-c.imgW)/2,c.containScale=this.toFixed(o/(c.imgW-1),5)):(c.scale=this.toFixed(o/a,5),c.imgW=o,c.imgH=Math.round(c.imgW*d),c.TDEdge=(s-c.imgH)/2,c.containScale=this.toFixed(s/(c.imgH-1),5)),c}},watch:{marks:{handler(e){this.marksFormat=e.map(t=>{const{left:o,top:s,width:i,height:n,id:a}=t,l=o,c=s,d=o+i,h=s+n;return{id:a,storage:[l,c,d,h],left:l,top:c,right:d,bottom:h,target:t}})},immediate:!0,deep:!0},URL:{handler(){this.loadStatus={loading:!0,failure:!1,success:!1}},immediate:!0},drawable(){this.drawMark.active=!1,this.drawing=!1},"location.curScale"(e){e!==this.renderRecord.containScale&&(this.scaleFit=I.contain)},currentIndex(){this.onReset()}},mounted(){window.addEventListener("keyup",this.handleKeyboard),window.addEventListener("resize",this.handleResize)},beforeUnmount(){window.removeEventListener("keyup",this.handleKeyboard),window.removeEventListener("resize",this.handleResize)},methods:{zoomOut(){this.onZoomOut()},zoomIn(){this.onZoomIn()},onMarkDelete(e){this.$emit("delete",e)},onMarkResize(e){this.$emit("resize",e)},handleResize(){this.resizeTimer||(this.resizeTimer=setTimeout(()=>{this.freshWrapWH(),this.resizeTimer=null},100))},handleKeyboard(e){const{code:t}=e,{keyboard:o}=this;switch(o.includes("Space")&&t==="Space"&&e.preventDefault(),o.includes("Esc")&&t==="Escape"&&e.preventDefault(),t){case"Space":o.includes("Space")&&this.focusMark();break;case"Escape":o.includes("Esc")&&this.unFocusMark();break;case"KeyA":o.includes("A")&&this.onPrev();break;case"KeyD":o.includes("D")&&this.onNext();break}},getMarkStyle(e,t="lightblue"){this.focus&&this.focusMark();const{width:o,height:s,left:i,top:n}=this.getRenderMark(e);let{translateX:a,translateY:l,curScale:c}=this.location;const{wrapW:d,wrapH:h}=this.imgRecord,m=d/2,f=h/2,p=m-c*m+c*i,v=f-c*f+c*n;return{width:`${o*c}px`,height:`${s*c}px`,border:`2px solid ${t}`,left:`${p}px`,top:`${v}px`,transform:`translate(${a}px,${l}px)`}},getRenderMark(e){let{left:t,top:o,width:s,height:i}=this.getMarkLRTBWH(e);const{scale:n,TDEdge:a,LREdge:l}=this.renderRecord||{};return s=s*n,i=i*n,t=t*n+l,o=o*n+a,{left:t,top:o,width:s,height:i}},toFixed(e,t){const o=Math.pow(10,t);return Math.round(e*o)/o},limitBoundary(e,t){e=this.toFixed(e,2);const{wrapW:o,wrapH:s}=this.imgRecord,{curScale:i}=this.location;let n=0;return t==="horizontal"&&(n=o*(i-1)/2),t==="vertical"&&(n=s*(i-1)/2),n=Math.abs(n),e=Math.max(-n,e),e=Math.min(n,e),e},getMarkLRTBWH(e){const{left:t,right:o,top:s,bottom:i}=e,n=Math.floor(Math.min(t,o)),a=Math.floor(Math.min(s,i)),l=Math.floor(Math.max(t,o)),c=Math.floor(Math.max(s,i)),d=l-n,h=c-a;return{left:n,top:a,right:l,bottom:c,width:d,height:h}},unFocusMark(){this.onReset()},focusMark(e){if(!this.loadStatus.success)return;e!==void 0&&(this.focusIndex=e);const t=this.marksFormat[this.focusIndex]||null;if(!t||!this.renderRecord)return;this.focusIndex>=this.marksFormat.length-1?this.focusIndex=0:this.focusIndex++;const{width:o,height:s,left:i,top:n}=this.getRenderMark(t),{wrapW:a,wrapH:l}=this.imgRecord,{imgW:c,imgH:d,TDEdge:h,LREdge:m}=this.renderRecord,f=l/a;let p=i+o/2,v=n+s/2,g=0;if(s/o<f){let y=i,w=n-(o*f-s)/2;o*1.1<c?(g=a/(o*1.1),y=i-o*.05,w=n-f*o*.05):g=a/o,y<m&&(p=p-y+m),w<h&&(v=v-w+h)}else{let y=i-(s/f-o)/2,w=n;s*1.1<d?(g=l/(s*1.1),y=y-s*.05/f,w=w-s*.05):g=l/s,y<m&&(p=p-y+m),w<h&&(v=v-w+h)}g=Math.min(g,this.scaleMax),this.centerScale(p,v,g)},centerScale(e,t,o){const{wrapW:s,wrapH:i}=this.imgRecord,n=s/2,a=i/2;let l=n-e,c=a-t;l=l*o,c=c*o,this.location.curScale=o,this.location.translateX=this.limitBoundary(l,"horizontal"),this.location.translateY=this.limitBoundary(c,"vertical")},onDrawStart(e){e.preventDefault();const{drawable:t,focus:o}=this,{which:s}=e;if(s!=3||!t||o)return;const{trueImgW:i,trueImgH:n}=this.renderRecord,{layerX:a,layerY:l}=e,{x:c,y:d}=this.convertCoords(a,l);c<0||c>i||d<0||d>n||(this.drawMark={left:c,right:c,top:d,bottom:d,active:!0},this.drawing=!0)},onDrawMove(e){if(!this.drawing)return;const{trueImgW:t,trueImgH:o}=this.renderRecord,{layerX:s,layerY:i}=e,{x:n,y:a}=this.convertCoords(s,i);n<0||n>t||a<0||a>o||(this.drawMark.right=n,this.drawMark.bottom=a)},onDrawEnd(e){if(e.preventDefault(),!this.drawing)return;this.drawing=!1;const t=this.getMarkLRTBWH(this.drawMark);this.$emit("drawEnd",t),this.clearDraw()},clearDraw(){this.drawMark.active=!1,this.drawing=!1},convertCoords(e,t){const{wrapW:o,wrapH:s}=this.imgRecord,{scale:i,TDEdge:n,LREdge:a}=this.renderRecord,{translateX:l,translateY:c,curScale:d}=this.location,h=o*(d-1)/2-l+e-a*d,m=s*(d-1)/2-c+t-n*d,f=h/d/i,p=m/d/i;return{x:f,y:p}},onMousedown(e){if(e.preventDefault(),this.fixed||this.focus)return;const{which:t,layerX:o,layerY:s}=e;t==1&&(this.drag.dragPreX=o,this.drag.dragPreY=s,this.drag.active=!0)},onMousemove(e){const{active:t,dragPreX:o,dragPreY:s}=this.drag;if(!t)return;const{layerX:i,layerY:n}=e,{translateX:a,translateY:l}=this.location;let c=i-o,d=n-s;this.drag.dragPreX=i,this.drag.dragPreY=n,c=a+c,d=l+d,this.location.translateX=this.limitBoundary(c,"horizontal"),this.location.translateY=this.limitBoundary(d,"vertical")},onMouseup(e){this.drag.active=!1},onMouseleave(e){this.drag.active=!1},toggleFit(){this.onSwitchMode()},prev(){this.onPrev()},next(){this.onNext()},reset(){this.onReset()},download(){this.$refs.toolbar.download()},onSwitchMode(){this.location.translateX=0,this.location.translateY=0,this.scaleFit===I.contain?(this.scaleFit=I.cover,this.renderRecord&&(this.location.curScale=this.renderRecord.containScale)):(this.location.curScale=this.initialScale,this.scaleFit=I.contain)},onPrev(){this.switchIndex(this.currentIndex-1)},onNext(){this.switchIndex(this.currentIndex+1)},onZoomIn(){const e=this.handleZoom(1),{wrapW:t,wrapH:o}=this.imgRecord;this.flollowTheMouse(t/2,o/2,e)},onZoomOut(){const e=this.handleZoom(-1),{wrapW:t,wrapH:o}=this.imgRecord;this.flollowTheMouse(t/2,o/2,e)},onReset(){this.location.translateX=0,this.location.translateY=0,this.location.curScale=this.initialScale,this.scaleFit=I.contain,this.focusIndex=0,this.drawMark.active=!1},switchIndex(e){const{images:t}=this,o=t.length-1;this.loop?(e<0&&(e=o),e>o&&(e=0)):(e=Math.max(0,e),e=Math.min(o,e)),this.$emit("switch",e),this.currentIndex=e},flollowTheMouse(e,t,o){const{wrapW:s,wrapH:i}=this.imgRecord,{translateX:n,translateY:a,curScale:l}=this.location,c=s/2+n,d=i/2+a;let h=c-e,m=d-t;h=h/l,m=m/l,h=h*(o-l),m=m*(o-l),h=n+h,m=a+m,this.location.curScale=o,this.location.translateX=this.limitBoundary(h,"horizontal"),this.location.translateY=this.limitBoundary(m,"vertical")},handleZoom(e){const{scaleMax:t,scaleMin:o,scaleStep:s}=this;let i=this.location.curScale;return e>0?i=i*s:i=i/s,i=Math.min(i,t),i=Math.max(i,o),i=this.toFixed(i,3),this.$emit("zoom",i),Number(i)},onWheel(e){if(!this.loadStatus.success||this.fixed||this.focus)return;e.preventDefault(),e.stopPropagation();const{wheelDelta:t,layerX:o,layerY:s}=e;let i=this.location.curScale;t>0?i=this.handleZoom(1):i=this.handleZoom(-1),this.flollowTheMouse(o,s,i)},onLoad(e){const{naturalWidth:t,naturalHeight:o,src:s}=e.target;this.loadStatus={loading:!1,failure:!1,success:!0},this.imgRecord.imgSizeW=t,this.imgRecord.imgSizeH=o,this.imgRecord.trueSrc=s,this.$nextTick(()=>{this.freshWrapWH(),this.imageLoaded()}),this.$emit("load",e)},onError(e){this.loadStatus={loading:!1,failure:!0,success:!1},this.$emit("error",e)},freshWrapWH(){const e=this.$refs.clipper;if(e){const{clientWidth:t,clientHeight:o}=e;this.imgRecord.wrapW=t,this.imgRecord.wrapH=o}else console.error("DOM not found")},imageLoaded(){this.focus&&this.focusMark()}}},lt={class:"v3iv-viewer-clip",ref:"clipper"};function ct(e,t,o,s,i,n){const a=r.resolveComponent("Image"),l=r.resolveComponent("DrawRect"),c=r.resolveComponent("ImgMarks"),d=r.resolveComponent("Navigation"),h=r.resolveComponent("ToolBar"),m=r.resolveComponent("Preload");return r.openBlock(),r.createElementBlock("div",{class:r.normalizeClass(["v3iv-viewer",{"v3iv-has-toolbar":o.toolbar,"v3iv-mousedown":n.mouseActive}]),onMousewheel:t[1]||(t[1]=(...f)=>n.onWheel&&n.onWheel(...f)),onMousedown:t[2]||(t[2]=(...f)=>n.onMousedown&&n.onMousedown(...f)),onMouseup:t[3]||(t[3]=(...f)=>n.onMouseup&&n.onMouseup(...f)),onMousemove:t[4]||(t[4]=(...f)=>n.onMousemove&&n.onMousemove(...f)),onMouseleave:t[5]||(t[5]=(...f)=>n.onMouseleave&&n.onMouseleave(...f)),onContextmenu:t[6]||(t[6]=r.withModifiers(()=>{},["stop","prevent"]))},[r.createElementVNode("div",lt,[r.createElementVNode("div",{class:"v3iv-viewer-img-wrap",style:r.normalizeStyle(n.wrapStyle)},[r.createVNode(a,{height:"100%",width:"100%",base:o.base,src:n.URL,token:o.token,onMousedown:n.onDrawStart,onMouseup:n.onDrawEnd,onMousemove:n.onDrawMove,onMouseleave:n.onDrawEnd,onContextmenu:t[0]||(t[0]=r.withModifiers(()=>{},["stop","prevent"])),onLoad:n.onLoad,onError:n.onError,fit:o.fit},{loading:r.withCtx(()=>[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u4E2D... ")],!0)]),error:r.withCtx(()=>[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" \u52A0\u8F7D\u5931\u8D25 ")],!0)]),_:3},8,["base","src","token","onMousedown","onMouseup","onMousemove","onMouseleave","onLoad","onError","fit"])],4),r.createVNode(l,{drawable:o.drawable,drawMark:i.drawMark},null,8,["drawable","drawMark"]),i.loadStatus.success?(r.openBlock(),r.createBlock(c,{key:0,marks:i.marksFormat,drawing:i.drawing,focus:o.focus,deleteable:o.deleteable,location:i.location,renderRecord:n.renderRecord,onResize:n.onMarkResize,onDelete:n.onMarkDelete},null,8,["marks","drawing","focus","deleteable","location","renderRecord","onResize","onDelete"])):r.createCommentVNode("",!0),o.navigation?(r.openBlock(),r.createBlock(d,{key:1,currentIndex:i.currentIndex,images:n.images,base:o.base,token:o.token,onSwitch:n.switchIndex},null,8,["currentIndex","images","base","token","onSwitch"])):r.createCommentVNode("",!0)],512),o.toolbar?(r.openBlock(),r.createBlock(h,{key:0,fitMode:i.fitMode,scaleFit:i.scaleFit,imgRecord:i.imgRecord,onSwitchMode:n.onSwitchMode,onPrev:n.onPrev,onNext:n.onNext,onZoomOut:n.onZoomOut,onZoomIn:n.onZoomIn,onReset:n.onReset,ref:"toolbar"},null,8,["fitMode","scaleFit","imgRecord","onSwitchMode","onPrev","onNext","onZoomOut","onZoomIn","onReset"])):r.createCommentVNode("",!0),r.createVNode(m,{base:o.base,token:o.token,preload:o.preload,images:n.images,currentIndex:i.currentIndex},null,8,["base","token","preload","images","currentIndex"])],34)}const dt=_(at,[["render",ct],["__scopeId","data-v-628549ba"]]);S.Image=R,S.Viewer=dt,Object.defineProperties(S,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
(function(M,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(M=typeof globalThis<"u"?globalThis:M||self,r(M["vue3-image-viewer"]={},M.Vue))})(this,function(M,r){"use strict";const A=new IntersectionObserver(e=>{for(const t of e)if(t.isIntersecting){const o=t.target;o&&o.dataset&&(o.src=o.dataset.src||"",o.dispatchEvent(new Event("startLoad")),A.unobserve(o))}},{threshold:[0]}),ee={mounted(e,t){if(!t.value)return;const{src:o,active:s}=t.value;s?(e.dataset.src=o,A.observe(e)):e&&e.dispatchEvent(new Event("startLoad"))}},ht="",_=(e,t)=>{const o=e.__vccOpts||e;for(const[s,i]of t)o[s]=i;return o},te={directives:{lazyLoad:ee},props:{src:{type:String,default:""},aspectRatio:{type:Number,default:0},fit:{type:String,default:""},lazy:{type:Boolean,default:!1},bgColor:{type:String,default:"black"},alt:{type:String,default:""},referrerPolicy:{type:String,default:""}},data(){return{loading:!1,failure:!1,success:!1}},computed:{imgRatioWrapStyle(){const{bgColor:e,aspectRatio:t}=this,o={position:"relative"};return o.backgroundColor=e,t?(o.width="100%",o.paddingBottom=`${t*100}%`):(o.width="100%",o.height="100%"),o}},methods:{onStartLoad(e){this.loading=!0,this.failure=!1,this.$emit("startLoad",e)},onLoaded(e){this.loading=!1,this.failure=!1,this.success=!0,this.$emit("load",e)},onError(e){this.loading=!1,this.failure=!0,this.success=!1,this.$emit("error",e)},handleImageClick(e){this.$emit("click",e)}}},oe={key:0,class:"v3iv-status-slot"},re={key:1,class:"v3iv-status-slot"},ne={class:"v3iv-slot-footer"},ie=["alt","referrer-policy","src"];function se(e,t,o,s,i,n){const a=r.resolveDirective("lazy-load");return r.openBlock(),r.createElementBlock("div",{style:r.normalizeStyle(n.imgRatioWrapStyle),onClick:t[3]||(t[3]=(...l)=>n.handleImageClick&&n.handleImageClick(...l))},[r.createElementVNode("div",{class:r.normalizeClass(["v3iv-img-wrap",{"v3iv-fix-ratio":o.aspectRatio,"v3iv-loading":i.loading,"v3iv-failure":i.failure}])},[i.failure?(r.openBlock(),r.createElementBlock("div",oe,[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" 加载失败 ")],!0)])):r.createCommentVNode("",!0),i.loading?(r.openBlock(),r.createElementBlock("div",re,[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" 加载中... ")],!0)])):r.createCommentVNode("",!0),r.createElementVNode("div",ne,[r.renderSlot(e.$slots,"footer",{},void 0,!0)]),r.withDirectives(r.createElementVNode("img",{class:r.normalizeClass(["v3iv-image",{"object-fit-style":!!o.fit}]),style:r.normalizeStyle({objectFit:o.fit}),alt:o.alt,"referrer-policy":o.referrerPolicy,onLoad:t[0]||(t[0]=(...l)=>n.onLoaded&&n.onLoaded(...l)),onError:t[1]||(t[1]=(...l)=>n.onError&&n.onError(...l)),"on:startLoad":t[2]||(t[2]=(...l)=>n.onStartLoad&&n.onStartLoad(...l)),src:o.lazy?"":o.src},null,46,ie),[[a,{src:o.src,active:o.lazy}]])],2)],4)}const ae=_(te,[["render",se],["__scopeId","data-v-7e00ff9d"]]),mt="",le={inject:["jointUrl","closePreview"],props:{preload:{type:Array||Boolean,default(){return[0,2]}},images:{type:Array,default(){return[]}},curIndex:{type:Number,default:0},loop:{type:Boolean,default:!1}},data(){return{loading:!1,failure:!1,success:!1}},watch:{src:{handler(e){this.loading=!0,this.failure=!1,this.success=!1},immediate:!0}},computed:{src(){return this.currentItem.url},currentItem(){const{images:e,curIndex:t}=this;return e[t]||{}},preloadList(){const{images:e,preload:t,curIndex:o}=this;if(!t)return[];const s=e.length,i=o,n=t[0],a=t[1],l=Math.max(i-n,0),c=Math.min(i+a,s-1);return e.slice(l,c+1).map(m=>m.url)}},mounted(){document.addEventListener("keydown",this.onPreviewKeydown)},beforeUnmount(){document.removeEventListener("keydown",this.onPreviewKeydown)},methods:{onPreviewKeydown(e){e.code==="Escape"&&this.closePreview(!0),(e.code==="ArrowLeft"||e.code==="KeyA")&&this.handleSwitch(-1),(e.code==="ArrowRight"||e.code==="KeyD")&&this.handleSwitch(1)},handleSwitch(e){if(!this.switchClickable(e))return;const{loop:t,curIndex:o,images:s}=this;let i=o+e;const n=s.length-1;t?(i<0&&(i=n),i>n&&(i=0)):(i=Math.max(0,i),i=Math.min(n,i)),this.$emit("switch",i)},switchClickable(e){const{loop:t,curIndex:o,images:s}=this;if(t)return!0;if(e==-1&&!o)return!1;const i=s.length-1;return!(e==1&&o==i)},getPreloadKey(e,t){return`${e}-${t}`},onPreviewLoad(){this.loading=!1,this.failure=!1,this.success=!0},onPreviewError(){this.loading=!1,this.failure=!0,this.success=!1}}},T=e=>(r.pushScopeId("data-v-44645504"),e=e(),r.popScopeId(),e),ce={class:"v3iv-image-preview"},de={key:0,class:"v3iv-preview-error"},he={key:1,class:"v3iv-preview-loading"},me=["src"],fe=["src"],ue={class:"v3iv-img-append"},pe={class:"v3iv-title"},ge={class:"v3iv-desc"},ye=[T(()=>r.createElementVNode("i",{class:"iconfont v3iv-icon icon-v3iv-guanbi"},null,-1))],ve=[T(()=>r.createElementVNode("i",{class:"iconfont v3iv-icon icon-v3iv-left-arrow"},null,-1))],we=[T(()=>r.createElementVNode("i",{class:"iconfont v3iv-icon icon-v3iv-right-arrow"},null,-1))];function be(e,t,o,s,i,n){return r.openBlock(),r.createElementBlock("div",ce,[r.createElementVNode("div",{class:r.normalizeClass(["v3iv-preview-center",{"v3iv-loading":i.loading,"v3iv-failure":i.failure}])},[i.failure?(r.openBlock(),r.createElementBlock("div",de,[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" 加载失败 ")],!0)])):r.createCommentVNode("",!0),i.loading?(r.openBlock(),r.createElementBlock("div",he,[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" 加载中... ")],!0)])):r.createCommentVNode("",!0),r.createVNode(r.Transition,{name:"bounce"},{default:r.withCtx(()=>[r.withDirectives(r.createElementVNode("img",{class:"v3iv-preview-img",onLoad:t[0]||(t[0]=(...a)=>n.onPreviewLoad&&n.onPreviewLoad(...a)),onError:t[1]||(t[1]=(...a)=>n.onPreviewError&&n.onPreviewError(...a)),src:n.src},null,40,me),[[r.vShow,!i.loading&&!i.failure]])]),_:1}),(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(n.preloadList,(a,l)=>r.withDirectives((r.openBlock(),r.createElementBlock("div",{key:n.getPreloadKey(a,l)},[r.createElementVNode("img",{src:n.jointUrl(a)},null,8,fe)])),[[r.vShow,!1]])),128)),r.createElementVNode("div",ue,[r.createElementVNode("div",pe,r.toDisplayString(n.currentItem.title),1),r.createElementVNode("div",ge,r.toDisplayString(n.currentItem.desc),1)])],2),r.createElementVNode("div",{class:"v3iv-preview-close",onClick:t[2]||(t[2]=r.withModifiers(a=>n.closePreview(!0),["stop"]))},ye),r.createElementVNode("div",{class:"v3iv-preview-sl",onClick:t[3]||(t[3]=r.withModifiers(a=>n.handleSwitch(-1),["stop"]))},ve),r.createElementVNode("div",{class:"v3iv-preview-sr",onClick:t[4]||(t[4]=r.withModifiers(a=>n.handleSwitch(1),["stop"]))},we)])}const ke=_(le,[["render",be],["__scopeId","data-v-44645504"]]),gt="",xe={emits:["switch","close","load","error"],provide(){return{jointUrl:this.jointUrl,closePreview:this.closePreview}},components:{Image:ae,Preview:ke},props:{base:{type:String,default:""},src:{type:String,default:""},token:{type:String,default:""},width:{type:String,default:""},height:{type:String,default:""},fit:{type:String,default:"cover"},aspectRatio:{type:Number},lazy:{type:Boolean},bgColor:{type:String},alt:{type:String},referrerPolicy:{type:String},hideOnClickModal:{type:Boolean,default:!1},images:{type:Array,default(){return[]}},loop:{type:Boolean,default:!1},preload:{type:Array||Boolean,default(){return[0,2]}},initialIndex:{type:Number,default:0},preview:{type:Boolean,default:!1}},data(){return{previewVisible:!1,previewIndex:this.initialIndex}},computed:{wrapStyle(){const{width:e,height:t}=this,o={};return e&&(o.width=e),t&&(o.height=t),o},_src(){const{src:e}=this;return this.jointUrl(e)}},methods:{handleSwitch(e){this.previewIndex=e,this.$emit("switch",e)},closePreview(e){e&&(this.$emit("close"),this.previewVisible=!1)},onLoaded(e){this.$emit("load",e)},onError(e){this.$emit("error",e)},handleImageClick(){this.preview&&(this.previewVisible=!0,this.previewIndex=this.initialIndex)},jointUrl(e){if(!e)return"";const{base:t,token:o}=this,s=o?`?token=${o}`:"";return e.startsWith("data:")||e.startsWith("http:")||e.startsWith("https:")||e.startsWith("blob:")?`${e}${s}`:`${t}${e}${s}`}}};function _e(e,t,o,s,i,n){const a=r.resolveComponent("Image"),l=r.resolveComponent("Preview");return r.openBlock(),r.createElementBlock("div",{style:r.normalizeStyle(n.wrapStyle),class:r.normalizeClass(["v3iv-image-wrap",{"v3iv-preview-active":i.previewVisible}])},[r.createVNode(a,{src:n._src,aspectRatio:o.aspectRatio,fit:o.fit,lazy:o.lazy,bgColor:o.bgColor,alt:o.alt,referrerPolicy:o.referrerPolicy,onClick:n.handleImageClick,onLoad:n.onLoaded,onError:n.onError,style:{"{\r\n cursor":`preview ? 'pointer' : 'default',\r
}`},class:r.normalizeClass({"v3iv-clickable":o.preview})},{loading:r.withCtx(()=>[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" 加载中... ")],!0)]),error:r.withCtx(()=>[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" 加载失败 ")],!0)]),footer:r.withCtx(()=>[r.renderSlot(e.$slots,"footer",{},void 0,!0)]),_:3},8,["src","aspectRatio","fit","lazy","bgColor","alt","referrerPolicy","onClick","onLoad","onError","class"]),i.previewVisible?(r.openBlock(),r.createBlock(l,{key:0,class:r.normalizeClass({"v3iv-clickable":o.hideOnClickModal}),onClick:t[0]||(t[0]=c=>n.closePreview(o.hideOnClickModal)),preload:o.preload,images:o.images,curIndex:i.previewIndex,loop:o.loop,onSwitch:n.handleSwitch},{loading:r.withCtx(()=>[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" 加载中... ")],!0)]),error:r.withCtx(()=>[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" 加载失败 ")],!0)]),_:3},8,["class","preload","images","curIndex","loop","onSwitch"])):r.createCommentVNode("",!0)],6)}const R=_(xe,[["render",_e],["__scopeId","data-v-7a8ab0c7"]]),yt="",Me={inject:["getMarkStyle"],props:{drawable:{type:Boolean,default:!1},drawMark:{type:Object,default:()=>({})}},computed:{drawStyle(){const{drawable:e,drawMark:t}=this;return!e||!t.active?{display:"none"}:this.getMarkStyle(t,"lightpink")}}};function Se(e,t,o,s,i,n){return r.openBlock(),r.createElementBlock("div",{class:"v3iv-draw-mark",style:r.normalizeStyle(n.drawStyle)},null,4)}const ze=_(Me,[["render",Se],["__scopeId","data-v-8723b5c7"]]),x={minSize:-1/0,maxSize:1/0,disabled:!1,enabled:!0},u=2;let N=[],P=!1,B=null;class Ee{constructor(){}init(t){if(!t.initialized)return this.addAnchors(t)}addAnchors(t){const s=Object.keys(X).map(i=>{const n=De(i);return n.key=i,n});for(const i of s)Ve(i),t.appendChild(i);return t.initialized=!0,s}}const Ce=new Ee;let S=null,I=null;const k={startX:0,startY:0,target:null,started:!1},W=5,E="DeepPink",Ie="icondrag1",L=10,V=W/2,X={lt:{dirX:-1,dirY:-1,fixed:1,style:{left:`-${u}px`,top:`-${u}px`,cursor:"se-resize",zIndex:50}},mt:{dirX:0,dirY:-1,fixed:1,style:{left:"50%",transform:`translateX(-${V}px)`,top:`-${u}px`,cursor:"s-resize",zIndex:50}},rt:{dirX:1,dirY:-1,fixed:1,style:{right:`-${u}px`,top:`-${u}px`,cursor:"sw-resize",zIndex:50}},lm:{dirX:-1,dirY:0,fixed:1,style:{left:`-${u}px`,top:"50%",transform:`translateY(-${V}px)`,cursor:"e-resize",zIndex:50}},rm:{dirX:1,dirY:0,fixed:1,style:{right:`-${u}px`,top:"50%",transform:`translateY(-${V}px)`,cursor:"w-resize",zIndex:50}},lb:{dirX:-1,dirY:1,fixed:1,style:{left:`-${u}px`,bottom:`-${u}px`,cursor:"ne-resize",zIndex:50}},mb:{dirX:0,dirY:1,fixed:1,style:{left:"50%",transform:`translateX(-${V}px)`,bottom:`-${u}px`,cursor:"n-resize",zIndex:50}},rb:{dirX:1,dirY:1,fixed:1,style:{right:`-${u}px`,bottom:`-${u}px`,cursor:"nw-resize",zIndex:50}},mm:{dirX:-1,dirY:-1,fixed:0,style:{left:"50%",top:"50%",transform:`translate(-${L/2}px,-${L/2}px)`,cursor:"move",zIndex:50,backgroundColor:E,borderRadius:"1px"}}},Be=[{height:"100%",width:`${u}px`,left:`-${u}px`,top:0,bottom:0},{height:"100%",width:`${u}px`,right:`-${u}px`,top:0,bottom:0},{width:"100%",height:`${u}px`,left:0,top:`-${u}px`,right:0},{width:"100%",height:`${u}px`,left:0,bottom:`-${u}px`,right:0}],H="gray";function Le(e){const t=e.querySelectorAll(".v3iv-drag-border");for(const s of t)e.initialized=!1,j(s),e.removeChild(s);const o=e.querySelectorAll(".v3iv-drag-anchor");for(const s of o)O(s),e.removeChild(s)}function Y(){if(D(),!!N.length){if(P){P=!1;return}N=N.filter(e=>{F(e);const t=e.querySelectorAll(".v3iv-drag-anchor");for(const s of t)O(s),e.removeChild(s);const o=e.querySelector(".v3iv-mark-delete");return o&&(o.style.display="block"),!1})}}function F(e){const t=[];for(const o of Be){const{width:s,height:i,left:n,right:a,top:l,bottom:c}=o,d=document.createElement("DIV");d.style.width=s,d.style.height=i,d.style.opacity=.5,d.style.position="absolute",d.style.cursor="move",d.style.userSelect="none",d.style.touchAction="none",d.style.pointerEvents="auto",d.classList.add("v3iv-drag-border"),n!==void 0&&(d.style.left=n),a!==void 0&&(d.style.right=a),l!==void 0&&(d.style.top=l),c!==void 0&&(d.style.bottom=c),t.push(d)}for(const o of t)He(o),e.appendChild(o)}function Re(){S&&(S.addEventListener("mousewheel",b),S.addEventListener("click",b),document.addEventListener("mousemove",K,{passive:!1}),document.addEventListener("mouseup",q))}function Ne(){S&&(S.removeEventListener("mousewheel",b),S.removeEventListener("click",b),document.removeEventListener("mousemove",K),document.removeEventListener("mouseup",q))}function Ve(e){e.addEventListener("mousewheel",b),e.addEventListener("mousedown",b),e.addEventListener("mousedown",Z)}function O(e){e.removeEventListener("mousewheel",b),e.removeEventListener("mousedown",b),e.removeEventListener("mousedown",Z)}function He(e){e.addEventListener("click",$),e.addEventListener("mousewheel",b),e.addEventListener("mousedown",b)}function j(e){e.removeEventListener("click",$),e.removeEventListener("mousewheel",b),e.removeEventListener("mousedown",b)}function $(e){e.stopPropagation(),e.preventDefault();const t=e.target.parentNode;Ce.init(t);const o=t.querySelectorAll(".v3iv-drag-border");for(const i of o)t.initialized=!1,j(i),t.removeChild(i);const s=t.querySelector(".v3iv-mark-delete");s&&(s.style.display="none"),N.push(t)}function b(e){e.stopPropagation(),e.preventDefault()}function Z(e){const{which:t}=e;if(t!=1)return;e.stopPropagation(),e.preventDefault();const o=e.target,s=o.parentNode,i=new CustomEvent("resize-start");s.dispatchEvent(i),S=s.parentNode,Re(),e.preventDefault(),e.stopPropagation(),I&&(I.style.zIndex=30),I=s,I.style.zIndex=40,k.started=!0,k.target=o,k.startX=e.pageX,k.startY=e.pageY}function K(e){B||(B=setTimeout(()=>{if(!k.started){D();return}e.preventDefault(),e.stopPropagation();const{key:t}=k.target,{dirX:o,dirY:s}=X[t],i=o*(e.pageX-k.startX),n=s*(e.pageY-k.startY),a=["lt","lm","lb"],l=["lt","mt","rt"],c=["rt","rm","rb"],d=["lb","mb","rb"];let m=0,f=0,h=0,p=0;a.includes(t)&&(m=-i),l.includes(t)&&(f=-n),c.includes(t)&&(h=i),d.includes(t)&&(p=n),t==="mm"&&(m=-i,h=-i,f=-n,p=-n);const w=new CustomEvent("resize-move",{detail:{left:m,top:f,right:h,bottom:p,key:t}});I.dispatchEvent(w),D()},20))}function D(){B&&(clearTimeout(B),B=null)}function q(e){if(e.preventDefault(),e.stopPropagation(),!k.started)return;D(),k.started=!1,k.target=null,P=!0;const t=new CustomEvent("resize-end");I.dispatchEvent(t),Ne(),S=null}function De(e){const{style:t,fixed:o}=X[e],s=document.createElement("DIV");s.style.height=`${W}px`,s.style.width=`${W}px`,s.style.backgroundColor=E,s.style.position="absolute",s.style.userSelect="none",s.style.touchAction="none",s.style.pointerEvents="auto",s.classList.add("v3iv-drag-anchor"),o||(s.classList.add("iconfont",Ie),s.style.height=`${L}px`,s.style.width=`${L}px`,s.style.fontSize=`${L}px`,s.style.color=E,s.style.backgroundColor="transparent");for(const i of Object.keys(t)){const n=t[i];s.style[i]=n}return s}function U(e,t){t?(e.style.pointerEvents="none",e.style.backgroundColor=e.style.backgroundColor==E&&H,e.style.color=e.style.color==E&&H,e.style.display="none"):(e.style.pointerEvents="auto",e.style.backgroundColor=e.style.backgroundColor==H&&E,e.style.color=e.style.color==H&&E,e.style.display="block")}function G(e){const t=e.value||{},{maxSize:o=x.maxSize,minSize:s=x.minSize,disabled:i=x.disabled,enabled:n=x.enabled}=t;x.maxSize=o,x.minSize=s,x.disabled=i,x.enabled=n}const Te={mounted(e,t){if(e){G(t);const{enabled:o}=x;if(!o)return;F(e),document.addEventListener("click",Y)}},unmounted(e,t){Y(),Le(e),document.removeEventListener("click",Y)},updated(e,t){G(t);const{disabled:o,enabled:s}=x;if(!s)return;const i=e.querySelectorAll(".v3iv-drag-anchor"),n=e.querySelectorAll(".v3iv-drag-border");for(const a of i)U(a,o);for(const a of n)U(a,o)}},vt="",Pe={inject:["getMarkStyle","getMarkLRTBWH"],emits:["resize","delete"],directives:{dragResize:Te},props:{marks:{type:Array,default:()=>[]},drawing:{type:Boolean,default:!1},focus:{type:Boolean,default:!1},deleteable:{type:Boolean,default:!1},location:{type:Object,default:()=>({})},renderRecord:{type:Object,default:()=>({})}},data(){return{}},computed:{},watch:{},created(){},mounted(){},methods:{getMarkKey(e,t){return`${e.id}-${t}`},resizeStart(e){},resizeMove(e,t){let{left:o,top:s,right:i,bottom:n,key:a}=t.detail;const{curScale:l}=this.location,{scale:c}=this.renderRecord;o=o/l/c,s=s/l/c,i=i/l/c,n=n/l/c;const[d,m,f,h]=e.storage,{trueImgW:p,trueImgH:w}=this.renderRecord;let g=d+o,y=m+s,v=f+i,z=h+n;if(a==="mm"){const J=e.right-e.left,Q=e.bottom-e.top;g>0&&v<p?(e.left=g,e.right=v):g<0?(e.left=0,e.right=J):v>p&&(e.left=p-J,e.right=p),y>0&&z<w?(e.top=y,e.bottom=z):y<0?(e.top=0,e.bottom=Q):z>w&&(e.top=w-Q,e.bottom=w);return}g=Math.max(0,g),y=Math.max(0,y),v=Math.max(0,v),z=Math.max(0,z),g=Math.min(p,g),y=Math.min(w,y),v=Math.min(p,v),z=Math.min(w,z),e.left=g,e.top=y,e.right=v,e.bottom=z},resizeEnd(e){const t=this.getMarkLRTBWH(e),{left:o,top:s,right:i,bottom:n}=t,{target:a}=e;e.left=o,e.top=s,e.right=i,e.bottom=n,e.storage=[o,s,i,n],this.$emit("resize",{target:a,detail:t})},deleteMark(e){this.$emit("delete",e)}}},We=e=>(r.pushScopeId("data-v-e199aa50"),e=e(),r.popScopeId(),e),Xe=["onResizeStart","onResizeMove","onResizeEnd"],Ye=["onClick"],Ae=[We(()=>r.createElementVNode("svg",{t:"1655567649321",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"17221",width:"16",height:"16"},[r.createElementVNode("path",{d:"M512 1255.489906","p-id":"17222",fill:"#ffffff"}),r.createElementVNode("path",{d:"M718.519288 688.227064 543.827304 513.637418l174.180292-174.180292c8.801119-8.801119 8.801119-23.128523 0-31.827304-8.801119-8.801119-23.128523-8.801119-31.827304 0L512 481.810114 337.819708 307.629822c-8.801119-8.801119-23.230861-8.596442-31.929642 0.102339l0.102339-0.102339c-8.801119 8.801119-8.698781 23.026184 0.102339 31.827304l174.180292 174.180292L305.58305 688.227064c-8.801119 8.801119-8.801119 23.128523 0 31.827304 8.801119 8.801119 23.128523 8.801119 31.827304 0L512 545.464721 686.691985 720.054367c8.801119 8.801119 22.923846 8.903458 31.724965 0.102339l0.102339-0.102339C727.218069 711.355587 727.218069 697.028183 718.519288 688.227064z","p-id":"17223",fill:"#ffffff"})],-1))];function Fe(e,t,o,s,i,n){const a=r.resolveDirective("drag-resize");return r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(o.marks,(l,c)=>r.withDirectives((r.openBlock(),r.createElementBlock("div",{class:"v3iv-mark-item",key:n.getMarkKey(l,c),style:r.normalizeStyle(n.getMarkStyle(l)),onResizeStart:d=>n.resizeStart(l),onResizeMove:d=>{n.resizeMove(l,d)},onResizeEnd:d=>n.resizeEnd(l)},[o.deleteable&&!o.focus?(r.openBlock(),r.createElementBlock("div",{key:0,class:"v3iv-mark-delete",onMousewheel:t[0]||(t[0]=r.withModifiers(()=>{},["stop"])),onMousedown:t[1]||(t[1]=r.withModifiers(()=>{},["stop"])),onClick:d=>n.deleteMark(l)},Ae,40,Ye)):r.createCommentVNode("",!0)],44,Xe)),[[a,{disabled:o.drawing||o.focus}]])),128)}const Oe=_(Pe,[["render",Fe],["__scopeId","data-v-e199aa50"]]),bt="",je={components:{Image:R},props:{currentIndex:{type:Number,default:0},images:{type:Array,default:()=>[]},base:{type:String,default:""},token:{type:String,default:""}},data(){return{}},computed:{drawerStyle(){return{"margin-left":`-${this.currentIndex*30+15}px`}}},methods:{switchIndex(e){this.$emit("switch",e)},getKey(e,t){return`${e.thumbnail}-v3iv-thumbnail-${t}`}}},$e=e=>(r.pushScopeId("data-v-8cac745e"),e=e(),r.popScopeId(),e),Ze={class:"v3iv-navigation-bar"},Ke=["onClick"],qe=$e(()=>r.createElementVNode("i",{class:"iconfont icon-v3iv-error"},null,-1));function Ue(e,t,o,s,i,n){const a=r.resolveComponent("Image");return r.openBlock(),r.createElementBlock("div",Ze,[r.createElementVNode("div",{class:"v3iv-navigation-drawer",style:r.normalizeStyle(n.drawerStyle)},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(o.images,(l,c)=>(r.openBlock(),r.createElementBlock("div",{class:r.normalizeClass(["v3iv-navigation-item",{"v3iv-active":c==o.currentIndex}]),key:n.getKey(l,c),onClick:d=>n.switchIndex(c),onMousedown:t[0]||(t[0]=r.withModifiers(()=>{},["stop"])),onMousewheel:t[1]||(t[1]=r.withModifiers(()=>{},["stop"]))},[r.createVNode(a,{height:"100%",width:"100%",base:o.base,src:l.thumbnail,token:o.token,fit:"cover",lazy:""},{loading:r.withCtx(()=>[r.createTextVNode(" ... ")]),error:r.withCtx(()=>[qe]),_:2},1032,["base","src","token"])],42,Ke))),128))],4)])}const Ge=_(je,[["render",Ue],["__scopeId","data-v-8cac745e"]]),kt="",Je={emits:["switchMode","prev","zoomOut","zoomIn","next","reset"],props:{fitMode:{type:Object,default:()=>({})},scaleFit:{type:Number,default:1},imgRecord:{type:Object,default:()=>({})}},methods:{containOrCover(){this.$emit("switchMode")},prev(){this.$emit("prev")},zoomOut(){this.$emit("zoomOut")},zoomIn(){this.$emit("zoomIn")},next(){this.$emit("next")},reset(){this.$emit("reset")},download(){const{trueSrc:e}=this.imgRecord,t=document.createElement("a");t.href=e,name||(name=e.split("/").pop()||"download"),t.setAttribute("target","_blank"),t.setAttribute("download",name),document.body.appendChild(t),t.click(),document.body.removeChild(t)}}},Qe={class:"v3iv-toolbar"},et={key:0,class:"icon-v3iv-quanping"},tt={key:1,class:"icon-v3iv-fullfill"};function ot(e,t,o,s,i,n){return r.openBlock(),r.createElementBlock("div",Qe,[r.renderSlot(e.$slots,"toolbar",{},()=>[r.createElementVNode("div",{onClick:t[0]||(t[0]=(...a)=>n.containOrCover&&n.containOrCover(...a)),class:"iconfont"},[o.scaleFit==o.fitMode.contain?(r.openBlock(),r.createElementBlock("span",et)):(r.openBlock(),r.createElementBlock("span",tt))]),r.createElementVNode("div",{onClick:t[1]||(t[1]=(...a)=>n.prev&&n.prev(...a)),class:"iconfont icon-v3iv-zhixiang-zuo"}),r.createElementVNode("div",{onClick:t[2]||(t[2]=(...a)=>n.zoomOut&&n.zoomOut(...a)),class:"iconfont icon-v3iv-jian"}),r.createElementVNode("div",{onClick:t[3]||(t[3]=(...a)=>n.zoomIn&&n.zoomIn(...a)),class:"iconfont icon-v3iv-jia"}),r.createElementVNode("div",{onClick:t[4]||(t[4]=(...a)=>n.next&&n.next(...a)),class:"iconfont icon-v3iv-zhixiang-you"}),r.createElementVNode("div",{onClick:t[5]||(t[5]=(...a)=>n.reset&&n.reset(...a)),class:"iconfont icon-v3iv-zhongzhi-circle"}),r.createElementVNode("div",{onClick:t[6]||(t[6]=a=>n.download()),class:"iconfont icon-v3iv-xiazai"})],!0)])}const rt=_(Je,[["render",ot],["__scopeId","data-v-88f53f74"]]),nt={components:{Image:R},props:{base:{type:String,default:""},token:{type:String,default:""},preload:{type:Array,default:()=>[0,2]},images:{type:Array,default:()=>[]},currentIndex:{type:Number,default:0}},computed:{preloadList(){const{preload:e,images:t,currentIndex:o}=this;if(!e)return[];const s=t.length,i=e[0],n=e[1],a=Math.max(o-i,0),l=Math.min(o+n,s-1);return t.slice(a,l+1).map(d=>d?d.url:"")}},methods:{getKey(e,t){return`${e}-v3iv-preload-${t}`}}};function it(e,t,o,s,i,n){const a=r.resolveComponent("Image");return r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(n.preloadList,(l,c)=>r.withDirectives((r.openBlock(),r.createElementBlock("div",{key:n.getKey(l,c)},[r.createVNode(a,{base:o.base,src:l,token:o.token},null,8,["base","src","token"])])),[[r.vShow,!1]])),128)}const st=_(nt,[["render",it]]),xt="",C={contain:1,cover:2},at={emits:["resize","delete","load","drawEnd","zoom","error","switch"],provide(){return{getMarkStyle:this.getMarkStyle,getMarkLRTBWH:this.getMarkLRTBWH}},components:{Image:R,DrawRect:ze,ImgMarks:Oe,Navigation:Ge,ToolBar:rt,Preload:st},props:{base:{type:String,default:""},token:{type:String,default:""},fit:{type:String,default:"contain"},loop:{type:Boolean,default:!1},initialIndex:{type:Number,default:0},preload:{type:Array||Boolean,default:[0,2]},scaleMax:{type:Number,default:15},scaleMin:{type:Number,default:1},scaleStep:{type:Number,default:1.2},initialScale:{type:Number,default:1},imageList:{type:Array,default:null},markList:{type:Array,default:null},navigation:{type:Boolean,default:!1},toolbar:{type:Boolean,default:!1},keyboard:{type:Array,default:["A","D","Space","Esc"]},fixed:{type:Boolean,default:!1},focus:{type:Boolean,default:!1},drawable:{type:Boolean,default:!1},deleteable:{type:Boolean,default:!1},image:{type:Object,default:null},mark:{type:Object,default:null}},data(){return{fitMode:C,loadStatus:{loading:!1,failure:!1,success:!1},currentIndex:this.initialIndex,focusIndex:0,drawing:!1,drag:{dragPreX:0,dragPreY:0,active:!1},location:{translateX:0,translateY:0,curScale:this.initialScale},imgRecord:{wrapW:0,wrapH:0,imgSizeW:0,imgSizeH:0,trueSrc:""},drawMark:{left:0,right:0,top:0,bottom:0,active:!1},scaleFit:C.contain,resizeTimer:null,marksFormat:[]}},computed:{URL(){const{current:e}=this;return e.url},currentMarks(){const{current:e}=this;return e.marks||[]},images(){const{imageList:e,image:t}=this;return e||(t?[t]:[])},marks(){const{markList:e,mark:t,currentMarks:o}=this;return e||(t?[t]:o||[])},wrapStyle(){let{translateX:e,translateY:t,curScale:o}=this.location;return{transform:`translate(${e}px,${t}px) scale(${o})`}},mouseActive(){const{drawing:e}=this,{active:t}=this.drag;return e||t},current(){const{images:e,currentIndex:t}=this;return e[t]||{}},renderRecord(){const{imgSizeW:e,imgSizeH:t,wrapW:o,wrapH:s}=this.imgRecord;if(!e||!t||!o||!s)return null;const{imgW:i,imgH:n}=this.current,a=i||e,l=n||t,c={TDEdge:0,LREdge:0,imgW:0,imgH:0,scale:0,containScale:0,trueImgW:a,trueImgH:l},d=l/a,m=s/o;return d>m?(c.scale=this.toFixed(s/l,5),c.imgH=s,c.imgW=Math.round(c.imgH/d),c.LREdge=(o-c.imgW)/2,c.containScale=this.toFixed(o/(c.imgW-1),5)):(c.scale=this.toFixed(o/a,5),c.imgW=o,c.imgH=Math.round(c.imgW*d),c.TDEdge=(s-c.imgH)/2,c.containScale=this.toFixed(s/(c.imgH-1),5)),c}},watch:{marks:{handler(e){this.marksFormat=e.map(t=>{const{left:o,top:s,width:i,height:n,id:a}=t,l=o,c=s,d=o+i,m=s+n;return{id:a,storage:[l,c,d,m],left:l,top:c,right:d,bottom:m,target:t}})},immediate:!0,deep:!0},URL:{handler(){this.loadStatus={loading:!0,failure:!1,success:!1}},immediate:!0},drawable(){this.drawMark.active=!1,this.drawing=!1},"location.curScale"(e){e!==this.renderRecord.containScale&&(this.scaleFit=C.contain)},currentIndex(){this.onReset()}},mounted(){window.addEventListener("keyup",this.handleKeyboard),window.addEventListener("resize",this.handleResize)},beforeUnmount(){window.removeEventListener("keyup",this.handleKeyboard),window.removeEventListener("resize",this.handleResize)},methods:{zoomOut(){this.onZoomOut()},zoomIn(){this.onZoomIn()},onMarkDelete(e){this.$emit("delete",e)},onMarkResize(e){this.$emit("resize",e)},handleResize(){this.resizeTimer||(this.resizeTimer=setTimeout(()=>{this.freshWrapWH(),this.resizeTimer=null},100))},handleKeyboard(e){const{code:t}=e,{keyboard:o}=this;switch(o.includes("Space")&&t==="Space"&&e.preventDefault(),o.includes("Esc")&&t==="Escape"&&e.preventDefault(),t){case"Space":o.includes("Space")&&this.focusMark();break;case"Escape":o.includes("Esc")&&this.unFocusMark();break;case"KeyA":o.includes("A")&&this.onPrev();break;case"KeyD":o.includes("D")&&this.onNext();break}},getMarkStyle(e,t="lightblue"){this.focus&&this.focusMark();const{width:o,height:s,left:i,top:n}=this.getRenderMark(e);let{translateX:a,translateY:l,curScale:c}=this.location;const{wrapW:d,wrapH:m}=this.imgRecord,f=d/2,h=m/2,p=f-c*f+c*i,w=h-c*h+c*n;return{width:`${o*c}px`,height:`${s*c}px`,border:`2px solid ${t}`,left:`${p}px`,top:`${w}px`,transform:`translate(${a}px,${l}px)`}},getRenderMark(e){let{left:t,top:o,width:s,height:i}=this.getMarkLRTBWH(e);const{scale:n,TDEdge:a,LREdge:l}=this.renderRecord||{};return s=s*n,i=i*n,t=t*n+l,o=o*n+a,{left:t,top:o,width:s,height:i}},toFixed(e,t){const o=Math.pow(10,t);return Math.round(e*o)/o},limitBoundary(e,t){e=this.toFixed(e,2);const{wrapW:o,wrapH:s}=this.imgRecord,{curScale:i}=this.location;let n=0;return t==="horizontal"&&(n=o*(i-1)/2),t==="vertical"&&(n=s*(i-1)/2),n=Math.abs(n),e=Math.max(-n,e),e=Math.min(n,e),e},getMarkLRTBWH(e){const{left:t,right:o,top:s,bottom:i}=e,n=Math.floor(Math.min(t,o)),a=Math.floor(Math.min(s,i)),l=Math.floor(Math.max(t,o)),c=Math.floor(Math.max(s,i)),d=l-n,m=c-a;return{left:n,top:a,right:l,bottom:c,width:d,height:m}},unFocusMark(){this.onReset()},focusMark(e){if(!this.loadStatus.success)return;e!==void 0&&(this.focusIndex=e);const t=this.marksFormat[this.focusIndex]||null;if(!t||!this.renderRecord)return;this.focusIndex>=this.marksFormat.length-1?this.focusIndex=0:this.focusIndex++;const{width:o,height:s,left:i,top:n}=this.getRenderMark(t),{wrapW:a,wrapH:l}=this.imgRecord,{imgW:c,imgH:d,TDEdge:m,LREdge:f}=this.renderRecord,h=l/a;let p=i+o/2,w=n+s/2,g=0;if(s/o<h){let y=i,v=n-(o*h-s)/2;o*1.1<c?(g=a/(o*1.1),y=i-o*.05,v=n-h*o*.05):g=a/o,y<f&&(p=p-y+f),v<m&&(w=w-v+m)}else{let y=i-(s/h-o)/2,v=n;s*1.1<d?(g=l/(s*1.1),y=y-s*.05/h,v=v-s*.05):g=l/s,y<f&&(p=p-y+f),v<m&&(w=w-v+m)}g=Math.min(g,this.scaleMax),this.centerScale(p,w,g)},centerScale(e,t,o){const{wrapW:s,wrapH:i}=this.imgRecord,n=s/2,a=i/2;let l=n-e,c=a-t;l=l*o,c=c*o,this.location.curScale=o,this.location.translateX=this.limitBoundary(l,"horizontal"),this.location.translateY=this.limitBoundary(c,"vertical")},onDrawStart(e){e.preventDefault();const{drawable:t,focus:o}=this,{which:s}=e;if(s!=3||!t||o)return;const{trueImgW:i,trueImgH:n}=this.renderRecord,{layerX:a,layerY:l}=e,{x:c,y:d}=this.convertCoords(a,l);c<0||c>i||d<0||d>n||(this.drawMark={left:c,right:c,top:d,bottom:d,active:!0},this.drawing=!0)},onDrawMove(e){if(!this.drawing)return;const{trueImgW:t,trueImgH:o}=this.renderRecord,{layerX:s,layerY:i}=e,{x:n,y:a}=this.convertCoords(s,i);n<0||n>t||a<0||a>o||(this.drawMark.right=n,this.drawMark.bottom=a)},onDrawEnd(e){if(e.preventDefault(),!this.drawing)return;this.drawing=!1;const t=this.getMarkLRTBWH(this.drawMark);this.$emit("drawEnd",t),this.clearDraw()},clearDraw(){this.drawMark.active=!1,this.drawing=!1},convertCoords(e,t){const{wrapW:o,wrapH:s}=this.imgRecord,{scale:i,TDEdge:n,LREdge:a}=this.renderRecord,{translateX:l,translateY:c,curScale:d}=this.location,m=o*(d-1)/2-l+e-a*d,f=s*(d-1)/2-c+t-n*d,h=m/d/i,p=f/d/i;return{x:h,y:p}},onMousedown(e){if(e.preventDefault(),this.fixed||this.focus)return;const{which:t,layerX:o,layerY:s}=e;t==1&&(this.drag.dragPreX=o,this.drag.dragPreY=s,this.drag.active=!0)},onMousemove(e){const{active:t,dragPreX:o,dragPreY:s}=this.drag;if(!t)return;const{layerX:i,layerY:n}=e,{translateX:a,translateY:l}=this.location;let c=i-o,d=n-s;this.drag.dragPreX=i,this.drag.dragPreY=n,c=a+c,d=l+d,this.location.translateX=this.limitBoundary(c,"horizontal"),this.location.translateY=this.limitBoundary(d,"vertical")},onMouseup(e){this.drag.active=!1},onMouseleave(e){this.drag.active=!1},toggleFit(){this.onSwitchMode()},prev(){this.onPrev()},next(){this.onNext()},reset(){this.onReset()},download(){this.$refs.toolbar.download()},onSwitchMode(){this.location.translateX=0,this.location.translateY=0,this.scaleFit===C.contain?(this.scaleFit=C.cover,this.renderRecord&&(this.location.curScale=this.renderRecord.containScale)):(this.location.curScale=this.initialScale,this.scaleFit=C.contain)},onPrev(){this.switchIndex(this.currentIndex-1)},onNext(){this.switchIndex(this.currentIndex+1)},onZoomIn(){const e=this.handleZoom(1),{wrapW:t,wrapH:o}=this.imgRecord;this.flollowTheMouse(t/2,o/2,e)},onZoomOut(){const e=this.handleZoom(-1),{wrapW:t,wrapH:o}=this.imgRecord;this.flollowTheMouse(t/2,o/2,e)},onReset(){this.location.translateX=0,this.location.translateY=0,this.location.curScale=this.initialScale,this.scaleFit=C.contain,this.focusIndex=0,this.drawMark.active=!1},switchIndex(e){const{images:t}=this,o=t.length-1;this.loop?(e<0&&(e=o),e>o&&(e=0)):(e=Math.max(0,e),e=Math.min(o,e)),this.$emit("switch",e),this.currentIndex=e},flollowTheMouse(e,t,o){const{wrapW:s,wrapH:i}=this.imgRecord,{translateX:n,translateY:a,curScale:l}=this.location,c=s/2+n,d=i/2+a;let m=c-e,f=d-t;m=m/l,f=f/l,m=m*(o-l),f=f*(o-l),m=n+m,f=a+f,this.location.curScale=o,this.location.translateX=this.limitBoundary(m,"horizontal"),this.location.translateY=this.limitBoundary(f,"vertical")},handleZoom(e){const{scaleMax:t,scaleMin:o,scaleStep:s}=this;let i=this.location.curScale;return e>0?i=i*s:i=i/s,i=Math.min(i,t),i=Math.max(i,o),i=this.toFixed(i,3),this.$emit("zoom",i),Number(i)},onWheel(e){if(!this.loadStatus.success||this.fixed||this.focus)return;e.preventDefault(),e.stopPropagation();const{wheelDelta:t,layerX:o,layerY:s}=e;let i=this.location.curScale;t>0?i=this.handleZoom(1):i=this.handleZoom(-1),this.flollowTheMouse(o,s,i)},onLoad(e){const{naturalWidth:t,naturalHeight:o,src:s}=e.target;this.loadStatus={loading:!1,failure:!1,success:!0},this.imgRecord.imgSizeW=t,this.imgRecord.imgSizeH=o,this.imgRecord.trueSrc=s,this.$nextTick(()=>{this.freshWrapWH(),this.imageLoaded()}),this.$emit("load",e)},onError(e){this.loadStatus={loading:!1,failure:!0,success:!1},this.$emit("error",e)},freshWrapWH(){const e=this.$refs.clipper;if(e){const{clientWidth:t,clientHeight:o}=e;this.imgRecord.wrapW=t,this.imgRecord.wrapH=o}else console.error("DOM not found")},imageLoaded(){this.focus&&this.focusMark()}}},lt={class:"v3iv-viewer-clip",ref:"clipper"};function ct(e,t,o,s,i,n){const a=r.resolveComponent("Image"),l=r.resolveComponent("DrawRect"),c=r.resolveComponent("ImgMarks"),d=r.resolveComponent("Navigation"),m=r.resolveComponent("ToolBar"),f=r.resolveComponent("Preload");return r.openBlock(),r.createElementBlock("div",{class:r.normalizeClass(["v3iv-viewer",{"v3iv-has-toolbar":o.toolbar,"v3iv-mousedown":n.mouseActive}]),onMousewheel:t[1]||(t[1]=(...h)=>n.onWheel&&n.onWheel(...h)),onMousedown:t[2]||(t[2]=(...h)=>n.onMousedown&&n.onMousedown(...h)),onMouseup:t[3]||(t[3]=(...h)=>n.onMouseup&&n.onMouseup(...h)),onMousemove:t[4]||(t[4]=(...h)=>n.onMousemove&&n.onMousemove(...h)),onMouseleave:t[5]||(t[5]=(...h)=>n.onMouseleave&&n.onMouseleave(...h)),onContextmenu:t[6]||(t[6]=r.withModifiers(()=>{},["stop","prevent"]))},[r.createElementVNode("div",lt,[r.createElementVNode("div",{class:"v3iv-viewer-img-wrap",style:r.normalizeStyle(n.wrapStyle)},[r.createVNode(a,{height:"100%",width:"100%",base:o.base,src:n.URL,token:o.token,onMousedown:n.onDrawStart,onMouseup:n.onDrawEnd,onMousemove:n.onDrawMove,onMouseleave:n.onDrawEnd,onContextmenu:t[0]||(t[0]=r.withModifiers(()=>{},["stop","prevent"])),onLoad:n.onLoad,onError:n.onError,fit:o.fit},{loading:r.withCtx(()=>[r.renderSlot(e.$slots,"loading",{},()=>[r.createTextVNode(" 加载中... ")],!0)]),error:r.withCtx(()=>[r.renderSlot(e.$slots,"error",{},()=>[r.createTextVNode(" 加载失败 ")],!0)]),_:3},8,["base","src","token","onMousedown","onMouseup","onMousemove","onMouseleave","onLoad","onError","fit"])],4),r.createVNode(l,{drawable:o.drawable,drawMark:i.drawMark},null,8,["drawable","drawMark"]),i.loadStatus.success?(r.openBlock(),r.createBlock(c,{key:0,marks:i.marksFormat,drawing:i.drawing,focus:o.focus,deleteable:o.deleteable,location:i.location,renderRecord:n.renderRecord,onResize:n.onMarkResize,onDelete:n.onMarkDelete},null,8,["marks","drawing","focus","deleteable","location","renderRecord","onResize","onDelete"])):r.createCommentVNode("",!0),o.navigation?(r.openBlock(),r.createBlock(d,{key:1,currentIndex:i.currentIndex,images:n.images,base:o.base,token:o.token,onSwitch:n.switchIndex},null,8,["currentIndex","images","base","token","onSwitch"])):r.createCommentVNode("",!0)],512),o.toolbar?(r.openBlock(),r.createBlock(m,{key:0,fitMode:i.fitMode,scaleFit:i.scaleFit,imgRecord:i.imgRecord,onSwitchMode:n.onSwitchMode,onPrev:n.onPrev,onNext:n.onNext,onZoomOut:n.onZoomOut,onZoomIn:n.onZoomIn,onReset:n.onReset,ref:"toolbar"},null,8,["fitMode","scaleFit","imgRecord","onSwitchMode","onPrev","onNext","onZoomOut","onZoomIn","onReset"])):r.createCommentVNode("",!0),r.createVNode(f,{base:o.base,token:o.token,preload:o.preload,images:n.images,currentIndex:i.currentIndex},null,8,["base","token","preload","images","currentIndex"])],34)}const dt=_(at,[["render",ct],["__scopeId","data-v-628549ba"]]);window._iconfont_svg_string_3113478='<svg><symbol id="icon-v3iv-yidong" viewBox="0 0 1024 1024"><path d="M893.76 523.26a29.582 29.582 0 0 0 0-22.56c-1.5-3.63-3.67-6.9-6.4-9.62l-88.6-88.6c-11.54-11.54-30.23-11.54-41.77 0-11.54 11.54-11.54 30.23 0 41.77l38.2 38.2H541.54V228.8l38.2 38.2c5.77 5.77 13.33 8.65 20.89 8.65s15.12-2.88 20.89-8.65c11.54-11.54 11.54-30.23 0-41.77l-88.6-88.6c-2.73-2.74-6-4.9-9.62-6.4a29.562 29.562 0 0 0-22.57 0c-3.63 1.5-6.89 3.67-9.62 6.4l-88.6 88.6c-11.54 11.54-11.54 30.23 0 41.77 11.54 11.54 30.23 11.54 41.77 0l38.2-38.2v253.64H228.82l38.2-38.2c11.54-11.54 11.54-30.23 0-41.77s-30.23-11.54-41.77 0l-88.6 88.6c-2.73 2.73-4.9 6-6.4 9.62a29.516 29.516 0 0 0 0 22.57c1.5 3.62 3.66 6.89 6.4 9.62l88.6 88.6c5.77 5.77 13.33 8.65 20.89 8.65 7.56 0 15.12-2.88 20.89-8.65 11.54-11.54 11.54-30.23 0-41.77l-38.2-38.2h253.64v253.64l-38.2-38.2c-11.54-11.54-30.23-11.54-41.77 0-11.54 11.54-11.54 30.23 0 41.77l88.6 88.6c2.73 2.74 6 4.9 9.62 6.4 3.61 1.49 7.44 2.28 11.29 2.28s7.68-0.78 11.29-2.28c3.63-1.5 6.89-3.67 9.62-6.4l88.6-88.6c11.54-11.54 11.54-30.23 0-41.77-11.54-11.54-30.23-11.54-41.77 0l-38.2 38.2V541.52h253.64l-38.2 38.2c-11.54 11.54-11.54 30.23 0 41.77 5.77 5.77 13.33 8.65 20.89 8.65s15.12-2.88 20.89-8.65l88.6-88.6c2.73-2.73 4.89-6 6.39-9.63z" ></path></symbol><symbol id="icon-v3iv-chongzhi" viewBox="0 0 1024 1024"><path d="M567.342545 101.888c-67.537455 0-134.516364 16.802909-193.768727 48.546909a34.955636 34.955636 0 0 0 33.047273 61.579636 341.178182 341.178182 0 0 1 160.768-40.261818c187.624727 0 340.293818 152.622545 340.293818 340.293818s-152.622545 340.293818-340.293818 340.293819c-163.095273 0-299.613091-115.386182-332.567273-268.706909l46.545455 46.545454a34.816 34.816 0 0 0 49.338182 0 34.909091 34.909091 0 0 0 0-49.384727l-112.314182-112.314182a35.979636 35.979636 0 0 0-49.384728 0L56.785455 580.747636a34.909091 34.909091 0 1 0 49.384727 49.384728l56.273454-56.32c29.975273 196.840727 199.866182 348.299636 404.945455 348.299636 226.117818 0 410.065455-183.994182 410.065454-410.112 0-226.117818-183.947636-410.112-410.112-410.112z" ></path></symbol><symbol id="icon-v3iv-error" viewBox="0 0 1024 1024"><path d="M512 720m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" ></path><path d="M480 416v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8z" ></path><path d="M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48z m-783.5-27.9L512 239.9l339.8 588.2H172.2z" ></path></symbol><symbol id="icon-v3iv-xiazai" viewBox="0 0 1024 1024"><path d="M491.9751111 795.53422223c4.77866667 4.77866667 11.60533333 7.50933333 17.74933334 9.55733333C513.82044444 807.13955556 518.5991111 807.82222223 523.37777777 807.82222223s9.55733333-0.68266667 13.65333333-2.73066667c6.82666667-1.36533333 12.97066667-4.096 17.74933334-9.55733333l334.50666666-334.50666667c15.01866667-15.01866667 15.01866667-38.22933333 0-53.248-15.01866667-15.01866667-38.22933333-15.01866667-53.248 0L557.5111111 686.30755556 557.5111111 91.02222223C557.5111111 71.90755556 542.49244444 56.8888889 523.37777777 56.8888889 504.2631111 56.8888889 489.24444444 71.90755556 489.24444444 91.02222223l0 595.28533333L210.71644444 407.77955556c-15.01866667-15.01866667-38.22933333-15.01866667-53.248 0-15.01866667 15.01866667-15.01866667 38.22933333 0 53.248L491.9751111 795.53422223zM932.97777777 876.0888889l-819.2 0C94.6631111 876.0888889 79.64444444 891.10755556 79.64444444 910.22222223 79.64444444 929.3368889 94.6631111 944.35555556 113.77777777 944.35555556l819.2 0c19.11466667 0 34.13333333-15.01866667 34.13333333-34.13333333C967.1111111 891.10755556 952.09244444 876.0888889 932.97777777 876.0888889z" ></path></symbol><symbol id="icon-v3iv-guanbi" viewBox="0 0 1024 1024"><path d="M576.80746218 506.10841296l394.73636374 394.73636236-41.24111306 41.24111303-394.73636235-394.73636374-394.73636375 394.73636374-41.24111303-41.24111303 394.73636374-394.73636236L99.58887373 111.37204922l41.24111303-41.24111306 394.73636375 394.73636374L930.30271286 70.13093616l41.24111306 41.24111306-394.73636374 394.73636374z" fill="#444444" ></path></symbol><symbol id="icon-v3iv-left-arrow" viewBox="0 0 1024 1024"><path d="M633.8 852.1l45.8 45.8c3.9 3.9 3.9 10.2 0 14.1-2 2-4.5 2.9-7.1 2.9-2.6 0-5.1-1-7.1-2.9l-45.8-45.8c-3.9-3.9-3.9-10.2 0-14.1 4-3.9 10.3-3.9 14.2 0zM315.9 462.5L711.5 66.9c3.9-3.9 10.2-3.9 14.1 0 3.9 3.9 3.9 10.2 0 14.1L330.1 476.6c-9.4 9.4-14.6 22-14.6 35.4 0 13.4 5.2 25.9 14.6 35.4L600.7 818c3.9 3.9 3.9 10.2 0 14.1-2 2-4.5 2.9-7.1 2.9-2.6 0-5.1-1-7.1-2.9L315.9 561.5c-13.2-13.2-20.5-30.8-20.5-49.5s7.3-36.3 20.5-49.5z" fill="" ></path><path d="M718.6 950m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="" ></path></symbol><symbol id="icon-v3iv-right-arrow" viewBox="0 0 1024 1024"><path d="M390.2 852.1l-45.8 45.8c-3.9 3.9-3.9 10.2 0 14.1 2 2 4.5 2.9 7.1 2.9s5.1-1 7.1-2.9l45.8-45.8c3.9-3.9 3.9-10.2 0-14.1-4-3.9-10.3-3.9-14.2 0zM708 462.5L312.5 66.9c-3.9-3.9-10.2-3.9-14.1 0s-3.9 10.2 0 14.1L694 476.6c9.4 9.4 14.6 22 14.6 35.4 0 13.4-5.2 25.9-14.6 35.4L423.3 817.9c-3.9 3.9-3.9 10.2 0 14.1 2 2 4.5 2.9 7.1 2.9s5.1-1 7.1-2.9l270.6-270.6c13.2-13.2 20.5-30.8 20.5-49.5-0.1-18.6-7.3-36.2-20.6-49.4z" fill="" ></path><path d="M305.4 950m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="" ></path></symbol><symbol id="icon-v3iv-jian" viewBox="0 0 1024 1024"><path d="M119.46666667 549.33333334c-25.92 0-46.93333333-21.01333333-46.93333334-46.93333334s21.01333333-46.93333333 46.93333334-46.93333333h785.20213333c25.92 0 46.93333333 21.01333333 46.93333333 46.93333333s-21.01333333 46.93333333-46.93333333 46.93333334H119.46666667z" ></path></symbol><symbol id="icon-v3iv-jia" viewBox="0 0 1024 1024"><path d="M512 62a37.50000029 37.50000029 0 0 1 37.50000029 37.50000029v374.99999942h374.99999942a37.50000029 37.50000029 0 0 1 0 75.00000058H549.50000029v374.99999942a37.50000029 37.50000029 0 0 1-75.00000058 0V549.50000029H99.50000029a37.50000029 37.50000029 0 0 1 0-75.00000058h374.99999942V99.50000029a37.50000029 37.50000029 0 0 1 37.50000029-37.50000029z" ></path></symbol><symbol id="icon-v3iv-zhixiang-you" viewBox="0 0 1024 1024"><path d="M805.33267342 555.33078503l-222.20490524 222.20490524a41.42522469 41.42522469 0 0 0 58.57526772 58.57526771l292.95918901-292.91776379a41.30094901 41.30094901 0 0 0 0-58.5752677l-292.95918901-292.9177638a41.42522469 41.42522469 0 0 0-58.57526772 58.57526771l222.20490524 222.20490525H104.04504462a41.42522469 41.42522469 0 0 0 0 82.85044938h701.32905403z" fill="#000000" ></path></symbol><symbol id="icon-v3iv-quanping" viewBox="0 0 1024 1024"><path d="M158.93333333 347.2V159.14666667h188.16c15.25333333 0 27.62666667-12.37333333 27.62666667-27.62666667v-33.17333333c0-15.25333333-12.37333333-27.62666667-27.62666667-27.62666667H91.73333333c-11.73333333 0-21.33333333 9.6-21.33333333 21.33333333v255.36c0 15.25333333 12.37333333 27.62666667 27.62666667 27.62666667H131.2c15.36-0.10666667 27.73333333-12.48 27.73333333-27.84zM679.04 159.14666667H867.2v188.16c0 15.25333333 12.37333333 27.62666667 27.62666667 27.62666666H928c15.25333333 0 27.62666667-12.37333333 27.62666667-27.62666666V91.94666667c0-11.73333333-9.6-21.33333333-21.33333334-21.33333334H679.04c-15.25333333 0-27.62666667 12.37333333-27.62666667 27.62666667v33.17333333c0 15.25333333 12.37333333 27.73333333 27.62666667 27.73333334zM347.09333333 867.41333333H158.93333333V679.25333333c0-15.25333333-12.37333333-27.62666667-27.62666666-27.62666666H98.13333333c-15.25333333 0-27.62666667 12.37333333-27.62666666 27.62666666v255.36c0 11.73333333 9.6 21.33333333 21.33333333 21.33333334h255.36c15.25333333 0 27.62666667-12.37333333 27.62666667-27.62666667v-33.17333333c-0.10666667-15.36-12.48-27.73333333-27.73333334-27.73333334zM867.2 679.25333333v188.16H679.04c-15.25333333 0-27.62666667 12.37333333-27.62666667 27.62666667v33.17333333c0 15.25333333 12.37333333 27.62666667 27.62666667 27.62666667H934.4c11.73333333 0 21.33333333-9.6 21.33333333-21.33333333V679.25333333c0-15.25333333-12.37333333-27.62666667-27.62666666-27.62666666H894.93333333c-15.36 0-27.73333333 12.37333333-27.73333333 27.62666666z" ></path></symbol><symbol id="icon-v3iv-fullfill" viewBox="0 0 1024 1024"><path d="M288.99555555 694.04444445h68.26666667c5.00622222 0 9.10222222-4.096 9.10222223-9.10222223V339.05777778c0-5.00622222-4.096-9.10222222-9.10222223-9.10222223h-68.26666667c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222223v345.88444444c0 5.00622222 4.096 9.10222222 9.10222222 9.10222223zM512 637.15555555c25.14488889 0 45.51111111-20.36622222 45.51111111-44.37333333 0-26.28266667-20.36622222-46.64888889-45.51111111-46.64888889s-45.51111111 20.36622222-45.51111111 46.64888889c0 24.00711111 20.36622222 44.37333333 45.51111111 44.37333333zM512 477.86666667c25.14488889 0 45.51111111-20.36622222 45.51111111-44.37333334 0-26.28266667-20.36622222-46.64888889-45.51111111-46.64888888s-45.51111111 20.36622222-45.51111111 46.64888888c0 24.00711111 20.36622222 44.37333333 45.51111111 44.37333334z" ></path><path d="M930.70222222 56.88888889H93.29777778c-20.13866667 0-36.40888889 16.27022222-36.40888889 36.40888889v837.40444444c0 20.13866667 16.27022222 36.40888889 36.40888889 36.40888889h837.40444444c20.13866667 0 36.40888889-16.27022222 36.40888889-36.40888889V93.29777778c0-20.13866667-16.27022222-36.40888889-36.40888889-36.40888889z m-45.51111111 828.30222222H138.80888889V138.80888889h746.38222222v746.38222222z" ></path><path d="M666.73777778 694.04444445h68.26666667c5.00622222 0 9.10222222-4.096 9.10222222-9.10222223V339.05777778c0-5.00622222-4.096-9.10222222-9.10222222-9.10222223h-68.26666667c-5.00622222 0-9.10222222 4.096-9.10222223 9.10222223v345.88444444c0 5.00622222 4.096 9.10222222 9.10222223 9.10222223z" ></path></symbol><symbol id="icon-v3iv-xuanzhuan" viewBox="0 0 1048 1024"><path d="M281.73151074 276.38883828h331.82543233c76.42183096 0 104.1239417 7.94855566 132.04029902 22.90298203a155.75741807 155.75741807 0 0 1 64.78822969 64.78823057C825.36132237 391.9964082 833.28845381 419.69851807 833.28845381 496.12034903v246.126716c0 76.42183096-7.94855566 104.1239417-22.90298204 132.04029815a155.75741807 155.75741807 0 0 1-64.78822968 64.78822969C717.68088477 954.05144434 689.97877403 961.9785749 613.55694307 961.9785749H281.73151074c-76.42183096 0-104.1239417-7.94855566-132.04029814-22.90298203a155.75741807 155.75741807 0 0 1-64.78823057-64.78822969C69.92713145 846.37100586 62 818.66889599 62 742.24706503V496.12034903c0-76.42183096 7.94855566-104.1239417 22.90298203-132.04029815a155.75741807 155.75741807 0 0 1 64.78823057-64.78823057C177.60756904 284.31596972 205.30967979 276.38883828 281.73151074 276.38883828z m-24.16703818 85.69871719c-38.20020292 0-52.06197041 3.98498994-66.03086162 11.44077891a77.87870948 77.87870948 0 0 0-32.39411485 32.39411484C151.68370713 419.89134042 147.69871719 433.75310791 147.69871719 471.95331084v294.46079238c0 38.20020292 3.98498994 52.06197041 11.4407789 66.03086074 7.47721318 13.96889122 18.42522451 24.91690166 32.39411485 32.39411573 13.96889122 7.45578808 27.83065869 11.44077891 66.03086162 11.4407789h380.15950869c38.20020292 0 52.06197041-3.98498994 66.03086162-11.4407789a77.87870948 77.87870948 0 0 0 32.39411572-32.39411573c7.45578808-13.96889122 11.44077891-27.83065869 11.44077803-66.03086073V471.95331084c0-38.20020292-3.98498994-52.06197041-11.44077803-66.03086162a77.87870948 77.87870948 0 0 0-32.39411572-32.39411485c-13.96889122-7.45578808-27.83065869-11.44077891-66.03086162-11.4407789H257.56447256z m361.52003848-149.97275508A42.84935859 42.84935859 0 0 1 597.61698154 132.15789776l111.32263389-64.27403789a42.84935859 42.84935859 0 1 1 42.8493586 74.21508896l-8.35562461 4.82055293A386.82258398 386.82258398 0 0 1 970.1921542 352.44644961a42.84935859 42.84935859 0 0 1-78.41432549 34.60085684C844.36501309 283.80177705 740.09109922 212.13622549 619.08451104 212.11480039z" ></path></symbol><symbol id="icon-v3iv-zhongzhi-circle" viewBox="0 0 1024 1024"><path d="M145.06666667 503.68c1.06666667-46.61333333 10.66666667-91.84 28.69333333-134.4 18.45333333-43.73333333 44.90666667-82.88 78.61333333-116.69333333C286.08 218.77333333 325.33333333 192.32 369.06666667 173.86666667c45.22666667-19.09333333 93.22666667-28.8 142.82666666-28.8s97.6 9.70666667 142.72 28.8c43.62666667 18.45333333 82.88 44.90666667 116.58666667 78.72 10.56 10.56 20.48 21.76 29.65333333 33.49333333l-64.21333333 50.13333333c-5.65333333 4.37333333-3.73333333 13.33333333 3.2 15.04l187.41333333 45.86666667c5.33333333 1.28 10.56-2.77333333 10.56-8.21333333l0.85333334-192.96c0-7.14666667-8.21333333-11.2-13.76-6.72l-60.16 47.04C782.72 131.30666667 655.14666667 64 511.78666667 64 267.41333333 64 68.58666667 259.84 63.99786667 503.25333333 63.89333333 508.05333333 67.73333333 512 72.53333333 512h64c4.69333333 0 8.42666667-3.73333333 8.53333334-8.32z m806.4 8.32h-64c-4.69333333 0-8.42666667 3.73333333-8.53333334 8.32-1.06666667 46.61333333-10.66666667 91.84-28.69333333 134.4-18.45333333 43.73333333-44.90666667 82.98666667-78.61333333 116.69333333C737.92 805.12 698.66666667 831.68 654.93333333 850.13333333c-45.22666667 19.09333333-93.22666667 28.8-142.82666666 28.8s-97.6-9.70666667-142.82666667-28.8c-43.62666667-18.45333333-82.88-44.90666667-116.58666667-78.72-10.56-10.56-20.48-21.76-29.65333333-33.49333333l64.21333333-50.13333333c5.65333333-4.37333333 3.73333333-13.33333333-3.2-15.04l-187.41333333-45.86666667c-5.33333333-1.28-10.56 2.77333333-10.56 8.21333333l-0.74666667 193.06666667c0 7.14666667 8.21333333 11.2 13.76 6.72l60.16-47.04C241.28 892.69333333 368.85333333 960 512.21333333 960c244.48 0 443.2-195.94666667 447.7888-439.25333333 0.10453333-4.8-3.73546667-8.74666667-8.53546666-8.74666667z" ></path></symbol><symbol id="icon-v3iv-zhixiang-zuo" viewBox="0 0 1024 1024"><path d="M218.66732658 468.66921497l222.20490524-222.20490524a41.42522469 41.42522469 0 0 0-58.57526772-58.57526771l-292.95918901 292.9177638a41.30094901 41.30094901 0 0 0 0 58.57526769l292.95918901 292.9177638a41.42522469 41.42522469 0 0 0 58.57526772-58.57526771l-222.20490524-222.20490525L919.95495538 551.51966435a41.42522469 41.42522469 0 0 0 0-82.85044938l-701.32905403 0z" fill="#000000" ></path></symbol></svg>',function(e){var o=(o=document.getElementsByTagName("script"))[o.length-1],t=o.getAttribute("data-injectcss"),o=o.getAttribute("data-disable-injectsvg");if(!o){var s,i,n,a,l,c=function(f,h){h.parentNode.insertBefore(f,h)};if(t&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(f){console&&console.log(f)}}s=function(){var f,h=document.createElement("div");h.innerHTML=e._iconfont_svg_string_3113478,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(f=document.body).firstChild?c(h,f.firstChild):f.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(s,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),s()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(n=s,a=e.document,l=!1,m(),a.onreadystatechange=function(){a.readyState=="complete"&&(a.onreadystatechange=null,d())})}function d(){l||(l=!0,n())}function m(){try{a.documentElement.doScroll("left")}catch{return void setTimeout(m,50)}d()}}(window);const _t="";M.Image=R,M.Viewer=dt,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});

9

package.json
{
"name": "vue3-image-viewer",
"version": "0.0.4",
"version": "0.0.5",
"type": "module",

@@ -25,3 +25,6 @@ "files": [

"picture",
"photo"
"photo",
"inspection",
"drone",
"marker"
],

@@ -38,3 +41,3 @@ "scripts": {

"devDependencies": {
"@types/node": "^18.11.13",
"@types/node": "^18.14.1",
"@vitejs/plugin-vue": "^4.0.0",

@@ -41,0 +44,0 @@ "typescript": "^4.9.3",

8

README.md

@@ -43,4 +43,4 @@ ### 安装/Installation

<script setup>
import Image from '../packages/Image/index.vue';
// import { Image } from 'vue3-image-viewer'
import { Image } from 'vue3-image-viewer'
import 'vue3-image-viewer/dist/style.css'
const images = [

@@ -124,4 +124,4 @@ {

<script setup>
import Viewer from '../packages/Viewer/index.vue';
// import { Viewer } from 'vue3-image-viewer'
import { Viewer } from 'vue3-image-viewer'
import 'vue3-image-viewer/dist/style.css'
import { reactive, ref, computed, unref } from 'vue';

@@ -128,0 +128,0 @@ const images = reactive([

dist/build.es.ts

Sorry, the diff of this file is too big to display

dist/style.css

Sorry, the diff of this file is not supported yet