vue-amazing-ui/lib/watermark/Watermark.vue.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),O=require("../utils/index.cjs"),P=3,J=n.defineComponent({__name:"Watermark",props:{width:{default:void 0},height:{default:void 0},layout:{default:"alternate"},rotate:{default:-22},zIndex:{default:90},image:{default:void 0},content:{default:void 0},fullscreen:{type:Boolean,default:!1},fixed:{type:Boolean,default:!0},textStyle:{default:()=>({color:"rgba(0, 0, 0, 0.15)",fontSize:16,fontWeight:"normal",fontFamily:"sans-serif",fontStyle:"normal"})},gap:{default:()=>[100,100]},offset:{default:()=>[50,50]}},setup(C){const a=C,S=n.shallowRef(),s=n.shallowRef(),g=n.shallowRef(document.documentElement),A=n.shallowRef(g.value.classList.contains("dark")),R=n.shallowRef(!1),x=n.computed(()=>{var e;return((e=a.gap)==null?void 0:e[0])??100}),w=n.computed(()=>{var e;return((e=a.gap)==null?void 0:e[1])??100}),F=n.computed(()=>x.value/2),L=n.computed(()=>w.value/2),D=n.computed(()=>{var e;return((e=a.offset)==null?void 0:e[0])??F.value}),X=n.computed(()=>{var e;return((e=a.offset)==null?void 0:e[1])??L.value}),z=n.computed(()=>({parallel:1,alternate:2})[a.layout]),Y=n.computed(()=>a.fullscreen&&a.fixed),H=n.computed(()=>{const e={zIndex:a.zIndex??9,position:Y.value?"fixed":"absolute",left:0,top:0,width:"100%",height:"100%",pointerEvents:"none",backgroundRepeat:"repeat"};A.value&&(e.filter="invert(1) hue-rotate(180deg)");let t=D.value-F.value,o=X.value-L.value;return t>0&&(e.left=`${t}px`,e.width=`calc(100% - ${t}px)`,t=0),o>0&&(e.top=`${o}px`,e.height=`calc(100% - ${o}px)`,o=0),e.backgroundPosition=`${t}px ${o}px`,e});n.watch(()=>[a],()=>{b()},{deep:!0,flush:"post"}),n.onMounted(()=>{b()}),n.onBeforeUnmount(()=>{M()}),O.useMutationObserver(g,()=>{A.value=g.value.classList.contains("dark"),M(),b()},{attributeFilter:["class"]}),O.useMutationObserver(a.fullscreen?g:S,j,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["style","class"]});function j(e){R.value||e.forEach(t=>{Z(t,s.value)&&(M(),b())})}function M(){s.value&&(s.value.remove(),s.value=void 0)}function I(e,t){var o;S.value&&s.value&&(R.value=!0,s.value.setAttribute("style",q({...H.value,backgroundImage:`url('${e}')`,backgroundSize:`${(x.value+t)*z.value}px`})),a.fullscreen?(g.value.setAttribute("style","position: relative"),g.value.append(s.value)):(o=S.value)==null||o.append(s.value),setTimeout(()=>{R.value=!1}))}function U(e){return e.replace(/([A-Z])/g,"-$1").toLowerCase()}function q(e){return Object.keys(e).map(t=>`${U(t)}: ${e[t]};`).join(" ")}function G(e){let t=120,o=64;const r=a.content,l=a.image,i=a.width,f=a.height,d=a.textStyle.fontSize??16,v=a.textStyle.fontFamily??"sans-serif";if(!l&&e.measureText){e.font=`${Number(d)}px ${v}`;const u=Array.isArray(r)?r:[r],m=u.map(c=>e.measureText(c).width);t=Math.ceil(Math.max(...m)),o=Number(d)*u.length+(u.length-1)*P}return[i??t,f??o]}function T(){return window.devicePixelRatio||1}function _(e,t,o,r,l){const i=T(),f=a.content,d=a.textStyle.fontSize??16,v=a.textStyle.fontWeight??"normal",u=a.textStyle.fontFamily??"sans-serif",m=a.textStyle.fontStyle??"normal",c=a.textStyle.color??"rgba(0, 0, 0, 0.15)",p=Number(d)*i;e.font=`${m} normal ${v} ${p}px/${l}px ${u}`,e.fillStyle=c,e.textAlign="center",e.textBaseline="top",e.translate(r/2,0);const h=Array.isArray(f)?f:[f];h==null||h.forEach(($,k)=>{e.fillText($??"",t,o+k*(p+P*i))})}function b(){const e=document.createElement("canvas"),t=e.getContext("2d"),o=a.image,r=a.rotate??-22;if(t){s.value||(s.value=document.createElement("div"));const l=T(),[i,f]=G(t),d=(x.value+i)*l,v=(w.value+f)*l;e.setAttribute("width",`${d*z.value}px`),e.setAttribute("height",`${v*z.value}px`);const u=x.value*l/2,m=w.value*l/2,c=i*l,p=f*l,h=(c+x.value*l)/2,$=(p+w.value*l)/2,k=u+d,B=m+v,E=h+d,N=$+v;if(t.save(),W(t,h,$,r),o){const y=new Image;y.onload=()=>{t.drawImage(y,u,m,c,p),t.restore(),W(t,E,N,r),t.drawImage(y,k,B,c,p),I(e.toDataURL(),i)},y.crossOrigin="anonymous",y.referrerPolicy="no-referrer",y.src=o}else _(t,u,m,c,p),t.restore(),W(t,E,N,r),_(t,k,B,c,p),I(e.toDataURL(),i)}}function W(e,t,o,r){e.translate(t,o),e.rotate(Math.PI/180*Number(r)),e.translate(-t,-o)}function Z(e,t){let o=!1;return e.removedNodes.length&&(o=Array.from(e.removedNodes).some(r=>r===t)),e.type==="attributes"&&e.target===t&&(o=!0),o}return(e,t)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"containerRef",ref:S,style:{position:"relative"}},[n.renderSlot(e.$slots,"default")],512))}});exports.default=J;