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