import{Y as N,r as c,y as V,h as Z,m as F,j as H,k as d,l as k,p as L,w,D as R,al as I,T as B}from"./BCLrUOBx.js";const T={class:"img-zoom-container"},U=["src"],j={__name:"ImageZoom",props:{zoomImage:{type:String,default:""},image:{type:String,default:""},zoomFactor:{type:Number,default:2}},setup(b){const S=b,{zoomImage:v,image:y,zoomFactor:a}=N(S),h=c(null),x=c(null),z=c(null),u=c(!1);let m=null,r=null,l=null,t={x:0,y:0},g=null;const _=(o,e)=>{const i=new Image;i.src=o,i.onload=()=>{e()},i.onerror=()=>{console.error("Error loading image")}},{getImageURL:E}=V(),M=o=>{const e=o.target;e.dataset.errorHandled!=="true"&&(e.dataset.errorHandled="true",e.src=E())},$=()=>{if(!m||!l)return;g=m.getBoundingClientRect();const{width:o,height:e}=g;t={x:o/a.value,y:e/a.value},l.style.height=`${e}px`,l.style.width=`${o}px`,r.style.height=`${t.y}px`,r.style.width=`${t.x}px`};Z(()=>{_(y.value,()=>{_(v.value,()=>{m=h.value,l=x.value,r=z.value,$()})})});const C=o=>{if(!m||!l)return;u.value=!0;const{left:e,top:i,width:f,height:p}=g;let s=o.clientX-e-t.x/2,n=o.clientY-i-t.y/2;s<0&&(s=0),n<0&&(n=0),s>f-t.x&&(s=f-t.x),n>p-t.y&&(n=p-t.y),r.style.left=`${s}px`,r.style.top=`${n}px`,l.style.backgroundImage=`url('${v.value}')`,l.style.backgroundSize=`${f*a.value}px ${p*a.value}px`,l.style.backgroundPosition=`-${s*a.value}px -${n*a.value}px`},D=()=>{u.value=!1};return(o,e)=>(H(),F("div",T,[d("div",{class:"image-wrapper",onMouseover:$},[d("img",{id:"main-image",class:"zoom-image",src:L(y),onError:M,ref_key:"imageRef",ref:h,onMousemove:C,onMouseleave:D},null,40,U)],32),k(B,{name:"zoom-fade"},{default:w(()=>[R(d("div",{id:"zoom-lens",class:"img-lens",ref_key:"lensRef",ref:z},null,512),[[I,u.value]])]),_:1}),k(B,{name:"zoom-fade"},{default:w(()=>[R(d("div",{id:"zoom-result",class:"img-zoom-result",ref_key:"zoomRef",ref:x},null,512),[[I,u.value]])]),_:1})]))}};export{j as default};
