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

A signature board component for react.

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["container"];
import { useEffect } from 'react';
import { getStroke } from 'perfect-freehand';
import { useStore } from "../store.js";
import { useOptionStore } from "../options.js";
import { getSvgPathFromStroke } from "../utils.js";
export var Paths = () => {
  var data = useStore();
  var _useOptionStore = useOptionStore(),
    {
      container
    } = _useOptionStore,
    option = _objectWithoutPropertiesLoose(_useOptionStore, _excluded);
  var canvas = container;
  var ctx = canvas == null ? void 0 : canvas.getContext('2d');
  useEffect(() => {
    if (!canvas) return;
    if (ctx) {
      ctx == null || ctx.clearRect(0, 0, canvas.width || 0, canvas.height || 0);
    }
    Object.keys(data).forEach((key, index) => {
      var stroke = getStroke(data[key], option);
      var pathData = getSvgPathFromStroke(stroke);
      if (ctx) {
        var myPath = new Path2D(pathData);
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.fill(myPath);
      }
    });
  }, [data, canvas, option]);
  return null;
};