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