@uiw/react-signature/cjs/canvas/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.defaultStyle = 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 _options = require("../options");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["className", "prefixCls", "style", "readonly", "onPointer", "options", "children"];
var defaultStyle = exports.defaultStyle = {
  '--w-signature-background': '#fff',
  touchAction: 'none',
  position: 'relative',
  backgroundColor: 'var(--w-signature-background)'
};
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,
    options = props.options,
    children = props.children,
    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var cls = [className, prefixCls].filter(Boolean).join(' ');
  var $canvas = (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)();
  var dispatchOption = (0, _options.useOptionDispatch)();
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      canvas: $canvas.current,
      dispatch: dispatch,
      clear: function clear() {
        var _$canvas$current, _$canvas$current2, _$canvas$current3;
        dispatch({});
        var ctx = (_$canvas$current = $canvas.current) === null || _$canvas$current === void 0 ? void 0 : _$canvas$current.getContext('2d');
        ctx === null || ctx === void 0 || ctx.clearRect(0, 0, ((_$canvas$current2 = $canvas.current) === null || _$canvas$current2 === void 0 ? void 0 : _$canvas$current2.width) || 0, ((_$canvas$current3 = $canvas.current) === null || _$canvas$current3 === void 0 ? void 0 : _$canvas$current3.height) || 0);
      }
    };
  }, [$canvas.current, dispatch]);
  var handlePointerDown = (0, _utils.useEvent)(function (e) {
    if (readonly) return;
    pointCount.current += 1;
    var _getBoundingClientRec = (0, _utils.getBoundingClientRect)($canvas.current),
      offsetY = _getBoundingClientRec.offsetY,
      offsetX = _getBoundingClientRec.offsetX;
    var clientX = e.clientX || e.nativeEvent.clientX;
    var clientY = e.clientY || e.nativeEvent.clientY;
    pointsRef.current = [[clientX - offsetX, clientY - offsetY]];
    var pathElm = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    $path.current = pathElm;
    $canvas.current.appendChild(pathElm);
    dispatch((0, _defineProperty2["default"])({}, pointId + pointCount.current, pointsRef.current));
  });
  var handlePointerMove = (0, _utils.useEvent)(function (e) {
    if ($path.current) {
      var _getBoundingClientRec2 = (0, _utils.getBoundingClientRect)($canvas.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 () {
    var result = pointsRef.current || [];
    onPointer && props.onPointer(result);
    $path.current = undefined;
    pointsRef.current = undefined;
  });
  (0, _react.useEffect)(function () {
    if ($canvas.current) {
      dispatchOption({
        container: $canvas.current
      });
    }
    if (readonly) return;
    document.addEventListener('pointermove', handlePointerMove);
    document.addEventListener('pointerup', handlePointerUp);
    return function () {
      if (readonly) return;
      document.removeEventListener('pointermove', handlePointerMove);
      document.removeEventListener('pointerup', handlePointerUp);
    };
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
    ref: $canvas,
    className: cls,
    onPointerDown: handlePointerDown,
    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defaultStyle), style),
    children: children
  }));
});