tav-ui/lib/packages/hooks/web/useWatermark2.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var domUtils = require('../../utils/domUtils2.js');
var index = require('../../utils/event/index2.js');
var is = require('../../utils/is2.js');

const domSymbol = Symbol("watermark-dom");
const DEFAULT_FILL_STYLE = "rgba(0, 0, 0, 0.1)";
const DEFAULT_WATER_MARKER_SIZE = {
  width: 300,
  height: 240
};
function useWatermark({
  appendEl = vue.ref(document.body),
  color = DEFAULT_FILL_STYLE,
  size = DEFAULT_WATER_MARKER_SIZE
}) {
  const id = domSymbol.toString();
  const watermarkEl = vue.shallowRef();
  const func = domUtils.useRafThrottle(() => {
    const el = vue.unref(appendEl);
    if (!el)
      return;
    const { clientHeight: height, clientWidth: width } = el;
    updateWatermark({ height, width });
  });
  const clear = () => {
    const domId = vue.unref(watermarkEl);
    watermarkEl.value = void 0;
    const el = vue.unref(appendEl);
    if (!el)
      return;
    domId && el.removeChild(domId);
    index.removeResizeListener(el, func);
  };
  function createBase64(str) {
    const can = document.createElement("canvas");
    const { width, height } = size;
    Object.assign(can, { width, height });
    const cans = can.getContext("2d");
    if (cans) {
      cans.rotate(-20 * Math.PI / 120);
      cans.font = "15px Vedana";
      cans.fillStyle = color || "rgba(0, 0, 0, 0.1)";
      cans.textAlign = "left";
      cans.textBaseline = "middle";
      cans.fillText(str, width / 20, height);
    }
    return can.toDataURL("image/png");
  }
  function updateWatermark(options = {}) {
    const el = vue.unref(watermarkEl);
    if (!el)
      return;
    if (is.isDef(options.width)) {
      el.style.width = `100%`;
    }
    if (is.isDef(options.height)) {
      el.style.height = `100%`;
    }
    if (is.isDef(options.str)) {
      el.style.background = `url(${createBase64(options.str)}) left top repeat`;
    }
  }
  const createWatermark = (str) => {
    if (vue.unref(watermarkEl)) {
      updateWatermark({ str });
      return id;
    }
    const div = document.createElement("div");
    watermarkEl.value = div;
    div.id = id;
    div.style.pointerEvents = "none";
    div.style.top = "0px";
    div.style.left = "0px";
    div.style.position = "absolute";
    div.style.zIndex = "100000";
    const el = vue.unref(appendEl);
    if (!el)
      return id;
    const { clientHeight: height, clientWidth: width } = el;
    updateWatermark({ str, width, height });
    el.appendChild(div);
    return id;
  };
  function setWatermark(str) {
    createWatermark(str);
    index.addResizeListener(document.documentElement, func);
    const instance = vue.getCurrentInstance();
    if (instance) {
      vue.onBeforeUnmount(() => {
        clear();
      });
    }
  }
  return { setWatermark, clear };
}

exports.useWatermark = useWatermark;
//# sourceMappingURL=useWatermark2.js.map