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 o=require("vue"),O=require("../utils/index.cjs"),P=3,J=o.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,x=o.shallowRef(),s=o.shallowRef(),g=o.shallowRef(document.documentElement),A=o.shallowRef(g.value.classList.contains("dark")),k=o.shallowRef(!1),y=o.computed(()=>a.gap?.[0]??100),S=o.computed(()=>a.gap?.[1]??100),F=o.computed(()=>y.value/2),L=o.computed(()=>S.value/2),D=o.computed(()=>a.offset?.[0]??F.value),X=o.computed(()=>a.offset?.[1]??L.value),R=o.computed(()=>({parallel:1,alternate:2})[a.layout]),Y=o.computed(()=>a.fullscreen&&a.fixed),H=o.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,n=X.value-L.value;return t>0&&(e.left=`${t}px`,e.width=`calc(100% - ${t}px)`,t=0),n>0&&(e.top=`${n}px`,e.height=`calc(100% - ${n}px)`,n=0),e.backgroundPosition=`${t}px ${n}px`,e});o.watch(()=>[a],()=>{w()},{deep:!0,flush:"post"}),o.onMounted(()=>{w()}),o.onBeforeUnmount(()=>{z()}),O.useMutationObserver(g,()=>{A.value=g.value.classList.contains("dark"),z(),w()},{attributeFilter:["class"]}),O.useMutationObserver(a.fullscreen?g:x,j,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["style","class"]});function j(e){k.value||e.forEach(t=>{Z(t,s.value)&&(z(),w())})}function z(){s.value&&(s.value.remove(),s.value=void 0)}function I(e,t){x.value&&s.value&&(k.value=!0,s.value.setAttribute("style",q({...H.value,backgroundImage:`url('${e}')`,backgroundSize:`${(y.value+t)*R.value}px`})),a.fullscreen?(g.value.setAttribute("style","position: relative"),g.value.append(s.value)):x.value?.append(s.value),setTimeout(()=>{k.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,n=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)),n=Number(d)*u.length+(u.length-1)*P}return[i??t,f??n]}function T(){return window.devicePixelRatio||1}function _(e,t,n,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),(Array.isArray(f)?f:[f])?.forEach((b,$)=>{e.fillText(b??"",t,n+$*(p+P*i))})}function w(){const e=document.createElement("canvas"),t=e.getContext("2d"),n=a.image,r=a.rotate??-22;if(t){s.value||(s.value=document.createElement("div"));const l=T(),[i,f]=G(t),d=(y.value+i)*l,v=(S.value+f)*l;e.setAttribute("width",`${d*R.value}px`),e.setAttribute("height",`${v*R.value}px`);const u=y.value*l/2,m=S.value*l/2,c=i*l,p=f*l,W=(c+y.value*l)/2,b=(p+S.value*l)/2,$=u+d,B=m+v,E=W+d,N=b+v;if(t.save(),M(t,W,b,r),n){const h=new Image;h.onload=()=>{t.drawImage(h,u,m,c,p),t.restore(),M(t,E,N,r),t.drawImage(h,$,B,c,p),I(e.toDataURL(),i)},h.crossOrigin="anonymous",h.referrerPolicy="no-referrer",h.src=n}else _(t,u,m,c,p),t.restore(),M(t,E,N,r),_(t,$,B,c,p),I(e.toDataURL(),i)}}function M(e,t,n,r){e.translate(t,n),e.rotate(Math.PI/180*Number(r)),e.translate(-t,-n)}function Z(e,t){let n=!1;return e.removedNodes.length&&(n=Array.from(e.removedNodes).some(r=>r===t)),e.type==="attributes"&&e.target===t&&(n=!0),n}return(e,t)=>(o.openBlock(),o.createElementBlock("div",{ref_key:"containerRef",ref:x,style:{position:"relative"}},[o.renderSlot(e.$slots,"default")],512))}});exports.default=J;