@uiw/react-signature/esm/Signature.js

A signature board component for react.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["className", "prefixCls", "style", "readonly", "onPointer", "children"];
import React, { useEffect, useRef, useId, forwardRef, useImperativeHandle } from 'react';
import { getBoundingClientRect, getClinetXY, defaultStyle, useEvent } from "./utils.js";
import { useDispatch } from "./store.js";
import { jsx as _jsx } from "react/jsx-runtime";
export var Signature = /*#__PURE__*/forwardRef((props, ref) => {
  var {
      className,
      prefixCls = 'w-signature',
      style,
      readonly = false,
      onPointer,
      children
    } = props,
    others = _objectWithoutPropertiesLoose(props, _excluded);
  var cls = [className, prefixCls].filter(Boolean).join(' ');
  var $svg = useRef(null);
  var $path = useRef();
  var pointsRef = useRef();
  var pointCount = useRef(0);
  var pointId = useId();
  var dispatch = useDispatch();
  useImperativeHandle(ref, () => ({
    svg: $svg.current,
    dispatch,
    clear: () => dispatch({})
  }), [$svg.current, dispatch]);
  var handlePointerDown = useEvent(e => {
    if (readonly) return;
    pointCount.current += 1;
    var {
      offsetY,
      offsetX
    } = getBoundingClientRect($svg.current);
    var evn = e;
    var clientX = evn.clientX || evn.nativeEvent.clientX;
    var clientY = evn.clientY || evn.nativeEvent.clientY;
    pointsRef.current = [[clientX - offsetX, clientY - offsetY]];
    var pathElm = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    $path.current = pathElm;
    $svg.current.appendChild(pathElm);
    dispatch({
      [pointId + pointCount.current]: pointsRef.current
    });
    document.addEventListener('pointermove', handlePointerMove);
  });
  var handlePointerMove = useEvent(e => {
    if ($path.current) {
      var {
        offsetY,
        offsetX
      } = getBoundingClientRect($svg.current);
      var {
        clientX,
        clientY
      } = getClinetXY(e);
      pointsRef.current = [...pointsRef.current, [clientX - offsetX, clientY - offsetY]];
      dispatch({
        [pointId + pointCount.current]: pointsRef.current
      });
    }
  });
  var handlePointerUp = useEvent(() => {
    var result = pointsRef.current || [];
    onPointer && props.onPointer(result);
    $path.current = undefined;
    pointsRef.current = undefined;
    document.removeEventListener('pointermove', handlePointerMove);
  });
  useEffect(() => {
    var _$svg$current;
    document.addEventListener('pointerup', handlePointerUp);
    (_$svg$current = $svg.current) == null || _$svg$current.addEventListener('pointerdown', handlePointerDown);
    return () => {
      var _$svg$current2;
      document.removeEventListener('pointerup', handlePointerUp);
      (_$svg$current2 = $svg.current) == null || _$svg$current2.removeEventListener('pointerdown', handlePointerDown);
    };
  }, []);
  var svgStyle = _extends({}, defaultStyle, style);
  return /*#__PURE__*/_jsx("svg", _extends({}, others, {
    ref: $svg,
    className: cls,
    style: svgStyle,
    children: children
  }));
});