'use strict';

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

var vue = require('vue');
require('../../../utils/index.js');
var SignaturePad = require('signature_pad');
var signature = require('./signature.js');
var createNamespace = require('../../../utils/create-namespace.js');

"use strict";
const _sfc_main = /* @__PURE__ */ Object.assign({ name: "LlSignature" }, {
  __name: "signature",
  props: signature.signatureProps,
  setup(__props, { expose: __expose }) {
    const bem = createNamespace.createNamespace("signaturer");
    const props = __props;
    const canvas = vue.ref(null);
    const signaturePad = vue.ref(null);
    const signatureExists = vue.ref(false);
    vue.watch(
      () => [props.width, props.height],
      () => {
        vue.nextTick(() => {
          resizeCanvas();
        });
      }
    );
    vue.watch(
      () => [props.lineWidth, props.strokeStyle],
      () => {
        if (signaturePad.value) {
          signaturePad.value.minWidth = props.lineWidth;
          signaturePad.value.maxWidth = props.lineWidth * 2;
          signaturePad.value.penColor = props.strokeStyle;
        }
      }
    );
    vue.watch(
      () => props.disabled,
      (newVal) => {
        if (newVal) {
          disableSignaturePad();
        } else {
          enableSignaturePad();
        }
      }
    );
    const initSignaturePad = () => {
      if (!canvas.value) return;
      signaturePad.value = new SignaturePad(canvas.value, {
        minWidth: props.lineWidth,
        maxWidth: props.lineWidth * 2,
        penColor: props.strokeStyle,
        backgroundColor: "rgb(255, 255, 255)",
        throttle: 8,
        // 节流控制，优化性能
        velocityFilterWeight: 0.8
        // 速度过滤权重
      });
      resizeCanvas();
      signaturePad.value.addEventListener("beginStroke", () => {
        signatureExists.value = true;
      });
      if (props.disabled) {
        disableSignaturePad();
      }
    };
    const resizeCanvas = () => {
      if (!canvas.value || !signaturePad.value) return;
      const ratio = Math.max(window.devicePixelRatio || 1, 1);
      canvas.value.width = props.width * ratio;
      canvas.value.height = props.height * ratio;
      canvas.value.style.width = `${props.width}px`;
      canvas.value.style.height = `${props.height}px`;
      const ctx = canvas.value.getContext("2d");
      ctx.scale(ratio, ratio);
      signaturePad.value.clear();
    };
    const disableSignaturePad = () => {
      if (signaturePad.value) {
        signaturePad.value.off();
        canvas.value.style.pointerEvents = "none";
      }
    };
    const enableSignaturePad = () => {
      if (signaturePad.value) {
        signaturePad.value.on();
        canvas.value.style.pointerEvents = "auto";
        signaturePad.value.addEventListener("beginStroke", () => {
          signatureExists.value = true;
        });
      }
    };
    const clearSignature = () => {
      if (signaturePad.value) {
        signaturePad.value.clear();
        signatureExists.value = false;
      }
    };
    const saveSignature = () => {
      if (!signatureExists.value || !signaturePad.value || props.disabled)
        return null;
      const dataURL = signaturePad.value.toDataURL("image/png");
      return dataURL;
    };
    __expose({
      saveSignature,
      clearSignature,
      enableSignaturePad,
      disableSignaturePad
    });
    vue.onMounted(() => {
      initSignaturePad();
      window.addEventListener("resize", resizeCanvas);
    });
    vue.onUnmounted(() => {
      window.removeEventListener("resize", resizeCanvas);
      if (signaturePad.value) {
        signaturePad.value.off();
      }
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass([
            vue.unref(bem).b(),
            _ctx.disabled ? vue.unref(bem).is("disabled") : "",
            _ctx.hiddenBorder ? vue.unref(bem).is("hidden-border") : ""
          ]),
          style: vue.normalizeStyle({ width: props.width + "px", height: props.height + "px" })
        },
        [
          vue.createElementVNode(
            "canvas",
            {
              ref_key: "canvas",
              ref: canvas
            },
            null,
            512
            /* NEED_PATCH */
          ),
          vue.createCommentVNode(" \u672A\u7B7E\u540D\u65F6\u7684\u5360\u4F4D\u7B26 "),
          !signatureExists.value && props.placeholder ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 0,
              class: vue.normalizeClass(vue.unref(bem).e("placeholder"))
            },
            [
              vue.createElementVNode(
                "p",
                null,
                vue.toDisplayString(props.placeholder),
                1
                /* TEXT */
              )
            ],
            2
            /* CLASS */
          )) : vue.createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=signature.vue.js.map
