@varlet/ui/es/signature/Signature.mjs

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

import { defineComponent, onMounted, ref } from "vue";
import { call, getRect, getStyle, toNumber } from "@varlet/shared";
import { onWindowResize, useEventListener } from "@varlet/use";
import { createNamespace } from "../utils/components.mjs";
import { props } from "./props.mjs";
const { name, n } = createNamespace("signature");
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
const _hoisted_1 = ["height", "width"];
function __render__(_ctx, _cache) {
  return _openBlock(), _createElementBlock(
    "div",
    {
      ref: "root",
      class: _normalizeClass(_ctx.n())
    },
    [
      _createElementVNode("canvas", {
        ref: "canvas",
        height: _ctx.canvasHeight,
        width: _ctx.canvasWidth
      }, null, 8, _hoisted_1)
    ],
    2
    /* CLASS */
  );
}
const __sfc__ = defineComponent({
  name,
  props,
  setup(props2) {
    const root = ref();
    const canvas = ref();
    const canvasWidth = ref(0);
    const canvasHeight = ref(0);
    let isSigning = false;
    let ctx = null;
    useEventListener(canvas, "touchstart", handleTouchstart);
    useEventListener(canvas, "touchmove", handleTouchmove);
    useEventListener(canvas, "touchend", handleTouchend);
    onWindowResize(resize);
    onMounted(resize);
    function resize() {
      if (!canvas.value || !root.value) {
        return;
      }
      ctx = canvas.value.getContext("2d");
      canvasWidth.value = root.value.offsetWidth;
      canvasHeight.value = root.value.offsetHeight;
    }
    function handleTouchstart(event) {
      if (!ctx || !root.value) {
        return;
      }
      event.preventDefault();
      isSigning = true;
      ctx.beginPath();
      ctx.lineWidth = toNumber(props2.lineWidth);
      ctx.strokeStyle = props2.strokeStyle === "currentColor" ? getStyle(root.value).color : props2.strokeStyle;
      call(props2.onStart);
    }
    function handleTouchmove(event) {
      event.preventDefault();
      if (!canvas.value || !ctx || !isSigning) {
        return;
      }
      const clientX = event.touches[0].clientX;
      const clientY = event.touches[0].clientY;
      const rect = getRect(canvas.value);
      const x = clientX - rect.left;
      const y = clientY - rect.top;
      ctx.lineTo(x, y);
      ctx.stroke();
      call(props2.onSigning);
    }
    function handleTouchend(event) {
      if (!isSigning) {
        return;
      }
      event.preventDefault();
      isSigning = false;
      call(props2.onEnd);
    }
    function getDataUrl(canvas2) {
      switch (props2.dataUrlType) {
        case "jpg":
          return canvas2.toDataURL("image/jpeg");
        default:
          return canvas2.toDataURL("image/png");
      }
    }
    function isCanvasEmpty(canvas2) {
      if (!canvas2) {
        return true;
      }
      const emptyCanvas = document.createElement("canvas");
      emptyCanvas.width = canvas2.width;
      emptyCanvas.height = canvas2.height;
      return getDataUrl(canvas2) === getDataUrl(emptyCanvas);
    }
    function reset() {
      if (!ctx) {
        return;
      }
      isSigning = false;
      ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
      ctx.closePath();
    }
    function confirm() {
      if (!canvas.value) {
        return;
      }
      if (isCanvasEmpty(canvas.value)) {
        return "";
      }
      return getDataUrl(canvas.value);
    }
    return {
      root,
      canvas,
      canvasWidth,
      canvasHeight,
      n,
      confirm,
      reset
    };
  }
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
  stdin_default as default
};