import{defineComponent as Q,shallowRef as z,computed as r,onMounted as Z,watch as _,onBeforeUnmount as tt,createVNode as et}from"vue";import{useMutationObserver as at}from"../_util/hooks/_vueuse/useMutationObserver.mjs";import nt from"../_util/props-util/initDefaultProps.mjs";import{withInstall as ot,arrayType as P,objectType as rt,someType as lt}from"../_util/type.mjs";import{useToken as st}from"../theme/internal.mjs";import{rotateWatermark as W,getStyleStr as it,getPixelRatio as H,reRendering as ct}from"./utils.mjs";const A=2,B=3,ut=()=>({zIndex:Number,rotate:Number,width:Number,height:Number,image:String,content:lt([String,Array]),font:rt(),rootClassName:String,gap:P(),offset:P()}),ft=Q({name:"AWatermark",inheritAttrs:!1,props:nt(ut(),{zIndex:9,rotate:-22,font:{},gap:[100,100]}),setup(a,{slots:G,attrs:x}){const[,p]=st(),w=z(),s=z(),k=z(!1),d=r(()=>a.gap?.[0]??100),b=r(()=>a.gap?.[1]??100),T=r(()=>d.value/2),N=r(()=>b.value/2),O=r(()=>a.offset?.[0]??T.value),U=r(()=>a.offset?.[1]??N.value),S=r(()=>a.font?.fontSize??p.value.fontSizeLG),j=r(()=>a.font?.fontWeight??"normal"),V=r(()=>a.font?.fontStyle??"normal"),R=r(()=>a.font?.fontFamily??"sans-serif"),q=r(()=>a.font?.color??p.value.colorFill),J=r(()=>{const t={zIndex:a.zIndex??9,position:"absolute",left:0,top:0,width:"100%",height:"100%",pointerEvents:"none",backgroundRepeat:"repeat"};let e=O.value-T.value,n=U.value-N.value;return e>0&&(t.left=`${e}px`,t.width=`calc(100% - ${e}px)`,e=0),n>0&&(t.top=`${n}px`,t.height=`calc(100% - ${n}px)`,n=0),t.backgroundPosition=`${e}px ${n}px`,t}),I=()=>{s.value&&(s.value.remove(),s.value=void 0)},F=(t,e)=>{w.value&&s.value&&(k.value=!0,s.value.setAttribute("style",it({...J.value,backgroundImage:`url('${t}')`,backgroundSize:`${(d.value+e)*A}px`})),w.value?.append(s.value),setTimeout(()=>{k.value=!1}))},K=t=>{let e=120,n=64;const i=a.content,o=a.image,c=a.width,u=a.height;if(!o&&t.measureText){t.font=`${Number(S.value)}px ${R.value}`;const l=Array.isArray(i)?i:[i],m=l.map(f=>t.measureText(f).width);e=Math.ceil(Math.max(...m)),n=Number(S.value)*l.length+(l.length-1)*B}return[c??e,u??n]},L=(t,e,n,i,o)=>{const c=H(),u=a.content,l=Number(S.value)*c;t.font=`${V.value} normal ${j.value} ${l}px/${o}px ${R.value}`,t.fillStyle=q.value,t.textAlign="center",t.textBaseline="top",t.translate(i/2,0),(Array.isArray(u)?u:[u])?.forEach((f,g)=>{t.fillText(f??"",e,n+g*(l+B*c))})},$=()=>{const t=document.createElement("canvas"),e=t.getContext("2d"),n=a.image,i=a.rotate??-22;if(e){s.value||(s.value=document.createElement("div"));const o=H(),[c,u]=K(e),l=(d.value+c)*o,m=(b.value+u)*o;t.setAttribute("width",`${l*A}px`),t.setAttribute("height",`${m*A}px`);const f=d.value*o/2,g=b.value*o/2,h=c*o,y=u*o,M=(h+d.value*o)/2,C=(y+b.value*o)/2,X=f+l,Y=g+m,D=M+l,E=C+m;if(e.save(),W(e,M,C,i),n){const v=new Image;v.onload=()=>{e.drawImage(v,f,g,h,y),e.restore(),W(e,D,E,i),e.drawImage(v,X,Y,h,y),F(t.toDataURL(),c)},v.crossOrigin="anonymous",v.referrerPolicy="no-referrer",v.src=n}else L(e,f,g,h,y),e.restore(),W(e,D,E,i),L(e,X,Y,h,y),F(t.toDataURL(),c)}};return Z(()=>{$()}),_(()=>[a,p.value.colorFill,p.value.fontSizeLG],()=>{$()},{deep:!0,flush:"post"}),tt(()=>{I()}),at(w,t=>{k.value||t.forEach(e=>{ct(e,s.value)&&(I(),$())})},{attributes:!0,subtree:!0,childList:!0,attributeFilter:["style","class"]}),()=>et("div",{...x,ref:w,class:[x.class,a.rootClassName],style:[{position:"relative"},x.style]},[G.default?.()])}}),wt=ot(ft);export{wt as default,ut as watermarkProps};
