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

A signature board component for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Signature = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _utils = require("./utils");
var _store = require("./store");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["className", "prefixCls", "style", "readonly", "onPointer", "children"];
var Signature = exports.Signature = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var className = props.className,
    _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-signature' : _props$prefixCls,
    style = props.style,
    _props$readonly = props.readonly,
    readonly = _props$readonly === void 0 ? false : _props$readonly,
    onPointer = props.onPointer,
    children = props.children,
    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var cls = [className, prefixCls].filter(Boolean).join(' ');
  var $svg = (0, _react.useRef)(null);
  var $path = (0, _react.useRef)();
  var pointsRef = (0, _react.useRef)();
  var pointCount = (0, _react.useRef)(0);
  var pointId = (0, _react.useId)();
  var dispatch = (0, _store.useDispatch)();
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      svg: $svg.current,
      dispatch: dispatch,
      clear: function clear() {
        return dispatch({});
      }
    };
  }, [$svg.current, dispatch]);
  var handlePointerDown = (0, _utils.useEvent)(function (e) {
    if (readonly) return;
    pointCount.current += 1;
    var _getBoundingClientRec = (0, _utils.getBoundingClientRect)($svg.current),
      offsetY = _getBoundingClientRec.offsetY,
      offsetX = _getBoundingClientRec.offsetX;
    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((0, _defineProperty2["default"])({}, pointId + pointCount.current, pointsRef.current));
    document.addEventListener('pointermove', handlePointerMove);
  });
  var handlePointerMove = (0, _utils.useEvent)(function (e) {
    if ($path.current) {
      var _getBoundingClientRec2 = (0, _utils.getBoundingClientRect)($svg.current),
        offsetY = _getBoundingClientRec2.offsetY,
        offsetX = _getBoundingClientRec2.offsetX;
      var _getClinetXY = (0, _utils.getClinetXY)(e),
        clientX = _getClinetXY.clientX,
        clientY = _getClinetXY.clientY;
      pointsRef.current = [].concat((0, _toConsumableArray2["default"])(pointsRef.current), [[clientX - offsetX, clientY - offsetY]]);
      dispatch((0, _defineProperty2["default"])({}, pointId + pointCount.current, pointsRef.current));
    }
  });
  var handlePointerUp = (0, _utils.useEvent)(function () {
    if (!pointsRef.current) return;
    var result = pointsRef.current || [];
    onPointer && props.onPointer(result);
    // Remove the temporary path element from DOM
    if ($path.current && $svg.current && $svg.current.contains($path.current)) {
      $svg.current.removeChild($path.current);
    }
    $path.current = undefined;
    pointsRef.current = undefined;
    document.removeEventListener('pointermove', handlePointerMove);
  });
  (0, _react.useEffect)(function () {
    var _$svg$current;
    document.addEventListener('pointerup', handlePointerUp);
    (_$svg$current = $svg.current) === null || _$svg$current === void 0 || _$svg$current.addEventListener('pointerdown', handlePointerDown);
    return function () {
      var _$svg$current2;
      document.removeEventListener('pointerup', handlePointerUp);
      (_$svg$current2 = $svg.current) === null || _$svg$current2 === void 0 || _$svg$current2.removeEventListener('pointerdown', handlePointerDown);
    };
  }, []);
  var svgStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _utils.defaultStyle), style);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
    ref: $svg,
    className: cls,
    style: svgStyle,
    children: children
  }));
});