"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const types = require("../../../utils/types.js");
const watermark = require("./watermark.js");
const utils = require("./utils.js");
const useClips = require("./useClips.js");
const index = require("../../../../node_modules/@vueuse/core/index.js");
const Vue = require("vue");
const shared_esmBundler = require("../../../../../@vue/shared/dist/shared.esm-bundler.js");
var watermark_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElWatermark",
  __name: "watermark",
  props: watermark.watermarkProps,
  setup(__props) {
    const style = { position: "relative" };
    const props = __props;
    const fontGap = Vue.computed(() => {
      var _a;
      return ((_a = props.font) == null ? void 0 : _a.fontGap) ?? 3;
    });
    const color = Vue.computed(() => {
      var _a;
      return ((_a = props.font) == null ? void 0 : _a.color) ?? "rgba(0,0,0,.15)";
    });
    const fontSize = Vue.computed(() => {
      var _a;
      return ((_a = props.font) == null ? void 0 : _a.fontSize) ?? 16;
    });
    const fontWeight = Vue.computed(() => {
      var _a;
      return ((_a = props.font) == null ? void 0 : _a.fontWeight) ?? "normal";
    });
    const fontStyle = Vue.computed(() => {
      var _a;
      return ((_a = props.font) == null ? void 0 : _a.fontStyle) ?? "normal";
    });
    const fontFamily = Vue.computed(() => {
      var _a;
      return ((_a = props.font) == null ? void 0 : _a.fontFamily) ?? "sans-serif";
    });
    const textAlign = Vue.computed(() => {
      var _a;
      return ((_a = props.font) == null ? void 0 : _a.textAlign) ?? "center";
    });
    const textBaseline = Vue.computed(() => {
      var _a;
      return ((_a = props.font) == null ? void 0 : _a.textBaseline) ?? "hanging";
    });
    const gapX = Vue.computed(() => props.gap[0]);
    const gapY = Vue.computed(() => props.gap[1]);
    const gapXCenter = Vue.computed(() => gapX.value / 2);
    const gapYCenter = Vue.computed(() => gapY.value / 2);
    const offsetLeft = Vue.computed(() => {
      var _a;
      return ((_a = props.offset) == null ? void 0 : _a[0]) ?? gapXCenter.value;
    });
    const offsetTop = Vue.computed(() => {
      var _a;
      return ((_a = props.offset) == null ? void 0 : _a[1]) ?? gapYCenter.value;
    });
    const getMarkStyle = () => {
      const markStyle = {
        zIndex: props.zIndex,
        position: "absolute",
        left: 0,
        top: 0,
        width: "100%",
        height: "100%",
        pointerEvents: "none",
        backgroundRepeat: "repeat"
      };
      let positionLeft = offsetLeft.value - gapXCenter.value;
      let positionTop = offsetTop.value - gapYCenter.value;
      if (positionLeft > 0) {
        markStyle.left = `${positionLeft}px`;
        markStyle.width = `calc(100% - ${positionLeft}px)`;
        positionLeft = 0;
      }
      if (positionTop > 0) {
        markStyle.top = `${positionTop}px`;
        markStyle.height = `calc(100% - ${positionTop}px)`;
        positionTop = 0;
      }
      markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
      return markStyle;
    };
    const containerRef = Vue.shallowRef(null);
    const watermarkRef = Vue.shallowRef();
    const stopObservation = Vue.ref(false);
    const destroyWatermark = () => {
      if (watermarkRef.value) {
        watermarkRef.value.remove();
        watermarkRef.value = void 0;
      }
    };
    const appendWatermark = (base64Url, markWidth) => {
      var _a;
      if (containerRef.value && watermarkRef.value) {
        stopObservation.value = true;
        watermarkRef.value.setAttribute("style", utils.getStyleStr({
          ...getMarkStyle(),
          backgroundImage: `url('${base64Url}')`,
          backgroundSize: `${Math.floor(markWidth)}px`
        }));
        (_a = containerRef.value) == null ? void 0 : _a.append(watermarkRef.value);
        setTimeout(() => {
          stopObservation.value = false;
        });
      }
    };
    const getMarkSize = (ctx) => {
      let defaultWidth = 120;
      let defaultHeight = 64;
      let space = 0;
      const { image, content, width, height, rotate } = props;
      if (!image && ctx.measureText) {
        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
        const contents = shared_esmBundler.isArray(content) ? content : [content];
        let maxWidth = 0;
        let maxHeight = 0;
        contents.forEach((item) => {
          const { width: width2, fontBoundingBoxAscent, fontBoundingBoxDescent, actualBoundingBoxAscent, actualBoundingBoxDescent } = ctx.measureText(item);
          const height2 = types.isUndefined(fontBoundingBoxAscent) ? actualBoundingBoxAscent + actualBoundingBoxDescent : fontBoundingBoxAscent + fontBoundingBoxDescent;
          if (width2 > maxWidth) maxWidth = Math.ceil(width2);
          if (height2 > maxHeight) maxHeight = Math.ceil(height2);
        });
        defaultWidth = maxWidth;
        defaultHeight = maxHeight * contents.length + (contents.length - 1) * fontGap.value;
        const angle = Math.PI / 180 * Number(rotate);
        space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
        defaultWidth += space;
      }
      return [
        width ?? defaultWidth,
        height ?? defaultHeight,
        space
      ];
    };
    const getClips = useClips.default();
    const renderWatermark = () => {
      const ctx = document.createElement("canvas").getContext("2d");
      const image = props.image;
      const content = props.content;
      const rotate = props.rotate;
      if (ctx) {
        if (!watermarkRef.value) watermarkRef.value = document.createElement("div");
        const ratio = utils.getPixelRatio();
        const [markWidth, markHeight, space] = getMarkSize(ctx);
        const drawCanvas = (drawContent) => {
          const [textClips, clipWidth] = getClips(drawContent || "", rotate, ratio, markWidth, markHeight, {
            color: color.value,
            fontSize: fontSize.value,
            fontStyle: fontStyle.value,
            fontWeight: fontWeight.value,
            fontFamily: fontFamily.value,
            fontGap: fontGap.value,
            textAlign: textAlign.value,
            textBaseline: textBaseline.value
          }, gapX.value, gapY.value, space);
          appendWatermark(textClips, clipWidth);
        };
        if (image) {
          const img = new Image();
          img.onload = () => {
            drawCanvas(img);
          };
          img.onerror = () => {
            drawCanvas(content);
          };
          img.crossOrigin = "anonymous";
          img.referrerPolicy = "no-referrer";
          img.src = image;
        } else drawCanvas(content);
      }
    };
    Vue.onMounted(() => {
      renderWatermark();
    });
    Vue.watch(() => props, () => {
      renderWatermark();
    }, {
      deep: true,
      flush: "post"
    });
    Vue.onBeforeUnmount(() => {
      destroyWatermark();
    });
    const onMutate = (mutations) => {
      if (stopObservation.value) return;
      mutations.forEach((mutation) => {
        if (utils.reRendering(mutation, watermarkRef.value)) {
          destroyWatermark();
          renderWatermark();
        }
      });
    };
    index.useMutationObserver(containerRef, onMutate, {
      attributes: true,
      subtree: true,
      childList: true
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        ref_key: "containerRef",
        ref: containerRef,
        style: Vue.normalizeStyle([style])
      }, [Vue.renderSlot(_ctx.$slots, "default")], 4);
    };
  }
});
exports.default = watermark_vue_vue_type_script_setup_true_lang_default;
