ll-package
Version:
2 lines (1 loc) • 5.16 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("../../../../@babel/runtime/helpers/esm/objectSpread2.js"),R=require("../../../../@babel/runtime/helpers/esm/extends.js"),t=require("vue"),k=require("../../_util/classNames.js"),we=require("../../vc-dialog/DialogWrap.js"),pe=require("../../vc-dialog/IDialogPropTypes.js"),Ce=require("../../vc-util/Dom/css.js"),w=require("../../vc-util/Dom/addEventListener.js"),U=require("../../_util/KeyCode.js"),ge=require("../../vc-util/warning.js"),ye=require("./hooks/useFrameSetState.js"),he=require("./getFixScaleEleTransPosition.js"),xe=require("./PreviewGroup.js"),r={x:0,y:0},z=R.default(R.default({},pe.dialogPropTypes()),{src:String,alt:String,rootClassName:String,icons:{type:Object,default:()=>({})}}),be=t.defineComponent({compatConfig:{MODE:3},name:"Preview",inheritAttrs:!1,props:z,emits:["close","afterClose"],setup(o,F){let{emit:S,attrs:W}=F;const{rotateLeft:j,rotateRight:E,zoomIn:G,zoomOut:K,close:A,left:Z,right:_,flipX:H,flipY:B}=t.reactive(o.icons),i=t.shallowRef(1),p=t.shallowRef(0),s=t.reactive({x:1,y:1}),[n,u]=ye.default(r),L=()=>S("close"),y=t.shallowRef(),c=t.reactive({originX:0,originY:0,deltaX:0,deltaY:0}),f=t.shallowRef(!1),J=xe.context.inject(),{previewUrls:N,current:q,isPreviewGroup:T,setCurrent:h}=J,x=t.computed(()=>N.value.size),C=t.computed(()=>Array.from(N.value.keys())),l=t.computed(()=>C.value.indexOf(q.value)),Q=t.computed(()=>T.value?N.value.get(q.value):o.src),$=t.computed(()=>T.value&&x.value>1),P=t.shallowRef({wheelDirection:0}),ee=()=>{i.value=1,p.value=0,s.x=1,s.y=1,u(r),S("afterClose")},Y=e=>{e?i.value+=.5:i.value++,u(r)},X=e=>{i.value>1&&(e?i.value-=.5:i.value--),u(r)},te=()=>{p.value+=90},oe=()=>{p.value-=90},ie=()=>{s.x=-s.x},le=()=>{s.y=-s.y},ae=e=>{e.preventDefault(),e.stopPropagation(),l.value>0&&h(C.value[l.value-1])},se=e=>{e.preventDefault(),e.stopPropagation(),l.value<x.value-1&&h(C.value[l.value+1])},ne=k.default({[`${o.prefixCls}-moving`]:f.value}),re=`${o.prefixCls}-operations-operation`,ue=`${o.prefixCls}-operations-icon`,ce=[{icon:A,onClick:L,type:"close"},{icon:G,onClick:()=>Y(),type:"zoomIn"},{icon:K,onClick:()=>X(),type:"zoomOut",disabled:t.computed(()=>i.value===1)},{icon:E,onClick:te,type:"rotateRight"},{icon:j,onClick:oe,type:"rotateLeft"},{icon:H,onClick:ie,type:"flipX"},{icon:B,onClick:le,type:"flipY"}],O=()=>{if(o.visible&&f.value){const e=y.value.offsetWidth*i.value,a=y.value.offsetHeight*i.value,{left:v,top:g}=Ce.getOffset(y.value),d=p.value%180!==0;f.value=!1;const m=he.default(d?a:e,d?e:a,v,g);m&&u(R.default({},m))}},fe=e=>{e.button===0&&(e.preventDefault(),e.stopPropagation(),c.deltaX=e.pageX-n.x,c.deltaY=e.pageY-n.y,c.originX=n.x,c.originY=n.y,f.value=!0)},V=e=>{o.visible&&f.value&&u({x:e.pageX-c.deltaX,y:e.pageY-c.deltaY})},ve=e=>{if(!o.visible)return;e.preventDefault();const a=e.deltaY;P.value={wheelDirection:a}},de=e=>{!o.visible||!$.value||(e.preventDefault(),e.keyCode===U.default.LEFT?l.value>0&&h(C.value[l.value-1]):e.keyCode===U.default.RIGHT&&l.value<x.value-1&&h(C.value[l.value+1]))},me=()=>{o.visible&&(i.value!==1&&(i.value=1),(n.x!==r.x||n.y!==r.y)&&u(r))};let D=()=>{};return t.onMounted(()=>{t.watch([()=>o.visible,f],()=>{D();let e,a;const v=w.default(window,"mouseup",O,!1),g=w.default(window,"mousemove",V,!1),d=w.default(window,"wheel",ve,{passive:!1}),m=w.default(window,"keydown",de,!1);try{window.top!==window.self&&(e=w.default(window.top,"mouseup",O,!1),a=w.default(window.top,"mousemove",V,!1))}catch(M){ge.warning(!1,`[vc-image] ${M}`)}D=()=>{v.remove(),g.remove(),d.remove(),m.remove(),e&&e.remove(),a&&a.remove()}},{flush:"post",immediate:!0}),t.watch([P],()=>{const{wheelDirection:e}=P.value;e>0?X(!0):e<0&&Y(!0)})}),t.onUnmounted(()=>{D()}),()=>{const{visible:e,prefixCls:a,rootClassName:v}=o;return t.createVNode(we.default,I.default(I.default({},W),{},{transitionName:o.transitionName,maskTransitionName:o.maskTransitionName,closable:!1,keyboard:!0,prefixCls:a,onClose:L,afterClose:ee,visible:e,wrapClassName:ne,rootClassName:v,getContainer:o.getContainer}),{default:()=>[t.createVNode("div",{class:[`${o.prefixCls}-operations-wrapper`,v]},[t.createVNode("ul",{class:`${o.prefixCls}-operations`},[ce.map(g=>{let{icon:d,onClick:m,type:M,disabled:b}=g;return t.createVNode("li",{class:k.default(re,{[`${o.prefixCls}-operations-operation-disabled`]:b&&(b==null?void 0:b.value)}),onClick:m,key:M},[t.cloneVNode(d,{class:ue})])})])]),t.createVNode("div",{class:`${o.prefixCls}-img-wrapper`,style:{transform:`translate3d(${n.x}px, ${n.y}px, 0)`}},[t.createVNode("img",{onMousedown:fe,onDblclick:me,ref:y,class:`${o.prefixCls}-img`,src:Q.value,alt:o.alt,style:{transform:`scale3d(${s.x*i.value}, ${s.y*i.value}, 1) rotate(${p.value}deg)`}},null)]),$.value&&t.createVNode("div",{class:k.default(`${o.prefixCls}-switch-left`,{[`${o.prefixCls}-switch-left-disabled`]:l.value<=0}),onClick:ae},[Z]),$.value&&t.createVNode("div",{class:k.default(`${o.prefixCls}-switch-right`,{[`${o.prefixCls}-switch-right-disabled`]:l.value>=x.value-1}),onClick:se},[_])]})}}}),ke=be;exports.default=ke;exports.previewProps=z;