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

A signature board component for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getClinetXY = exports.getBoundingClientRect = exports.defaultStyle = void 0;
exports.getSvgPathFromStroke = getSvgPathFromStroke;
exports.useEvent = useEvent;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
/**
 * Turn the points returned from perfect-freehand into SVG path data.
 */
function getSvgPathFromStroke(stroke) {
  if (!stroke.length) return '';
  var d = stroke.reduce(function (acc, _ref, i, arr) {
    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
      x0 = _ref2[0],
      y0 = _ref2[1];
    var _arr = (0, _slicedToArray2["default"])(arr[(i + 1) % arr.length], 2),
      x1 = _arr[0],
      y1 = _arr[1];
    acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
    return acc;
  }, ['M'].concat((0, _toConsumableArray2["default"])(stroke[0]), ['Q']));
  d.push('Z');
  return d.join(' ');
}
var getBoundingClientRect = exports.getBoundingClientRect = function getBoundingClientRect(el) {
  var rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
  var offsetX = (rect === null || rect === void 0 ? void 0 : rect.left) || 0;
  var offsetY = (rect === null || rect === void 0 ? void 0 : rect.top) || 0;
  return {
    offsetX: offsetX,
    offsetY: offsetY
  };
};
var getClinetXY = exports.getClinetXY = function getClinetXY(_ref3) {
  var clientX = _ref3.clientX,
    clientY = _ref3.clientY;
  return {
    clientX: clientX,
    clientY: clientY
  };
};
var defaultStyle = exports.defaultStyle = {
  '--w-signature-background': '#fff',
  touchAction: 'none',
  position: 'relative',
  width: '100%',
  height: '100%',
  backgroundColor: 'var(--w-signature-background)'
};

// Saves incoming handler to the ref in order to avoid "useCallback hell"
function useEvent(handler) {
  var callbackRef = (0, _react.useRef)(handler);
  (0, _react.useEffect)(function () {
    callbackRef.current = handler;
  });
  return (0, _react.useCallback)(function (event) {
    return callbackRef.current && callbackRef.current(event);
  }, []);
}