@uiw/react-signature/cjs/canvas/Paths.js

A signature board component for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Paths = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _perfectFreehand = require("perfect-freehand");
var _store = require("../store");
var _options = require("../options");
var _utils = require("../utils");
var _excluded = ["container"];
var Paths = exports.Paths = function Paths() {
  var data = (0, _store.useStore)();
  var _useOptionStore = (0, _options.useOptionStore)(),
    container = _useOptionStore.container,
    option = (0, _objectWithoutProperties2["default"])(_useOptionStore, _excluded);
  var canvas = container;
  var ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
  (0, _react.useEffect)(function () {
    if (!canvas) return;
    if (ctx) {
      ctx === null || ctx === void 0 || ctx.clearRect(0, 0, canvas.width || 0, canvas.height || 0);
    }
    Object.keys(data).forEach(function (key, index) {
      var stroke = (0, _perfectFreehand.getStroke)(data[key], option);
      var pathData = (0, _utils.getSvgPathFromStroke)(stroke);
      if (ctx) {
        var myPath = new Path2D(pathData);
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.fill(myPath);
      }
    });
  }, [data, canvas, option]);
  return null;
};