react-signature-canvas-ts/dist/index.js

A React wrapper component around signature_pad. Unopinionated and heavily updated fork of react-signature-pad

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const signature_pad_1 = __importDefault(require("signature_pad"));
const trim_canvas_1 = __importDefault(require("trim-canvas"));
const useCombinedRefs_1 = require("./useCombinedRefs");
const SignatureCanvas = (0, react_1.forwardRef)(({ canvasProps, clearOnResize = true, onBegin, onEnd, onClear, ...signaturePadProps }, ref) => {
    const canvasRef = (0, react_1.useRef)(null);
    const sigPadRef = (0, react_1.useRef)(null);
    const handleRef = (0, react_1.useRef)(null);
    const combinedRef = (0, useCombinedRefs_1.useCombinedRefs)(ref, handleRef);
    const resizeCanvas = (0, react_1.useCallback)(() => {
        const { width, height } = canvasProps || {};
        if (typeof width !== "undefined" && typeof height !== "undefined") {
            return;
        }
        if (!canvasRef.current || !sigPadRef.current)
            return;
        const data = sigPadRef.current.toData();
        const ratio = Math.max(window.devicePixelRatio ?? 1, 1);
        if (typeof width === "undefined") {
            canvasRef.current.width = canvasRef.current.offsetWidth * ratio;
        }
        if (typeof height === "undefined") {
            canvasRef.current.height = canvasRef.current.offsetHeight * ratio;
        }
        canvasRef.current.getContext("2d").scale(ratio, ratio);
        if (clearOnResize) {
            sigPadRef.current.clear();
            onClear?.();
        }
        else if (data) {
            sigPadRef.current.fromData(data);
            onEnd?.();
        }
        console.log(sigPadRef.current.toDataURL("image/svg+xml"));
    }, [canvasRef, canvasProps, sigPadRef, clearOnResize]);
    const checkClearOnResize = (0, react_1.useCallback)(() => {
        resizeCanvas();
    }, [clearOnResize, resizeCanvas]);
    (0, react_1.useImperativeHandle)(combinedRef, () => ({
        on: () => {
            window.addEventListener("resize", checkClearOnResize);
            return sigPadRef.current?.on();
        },
        off: () => {
            window.removeEventListener("resize", checkClearOnResize);
            return sigPadRef.current?.off();
        },
        clear: () => {
            sigPadRef.current?.clear();
            onClear?.();
        },
        isEmpty: () => {
            return sigPadRef.current?.isEmpty() ?? true;
        },
        fromDataURL: (dataUrl, options) => {
            return (sigPadRef.current?.fromDataURL(dataUrl, options) ??
                Promise.resolve());
        },
        toDataURL: (type, encoderOptions) => {
            return sigPadRef.current?.toDataURL(type, encoderOptions) || "";
        },
        fromData: (pointGroups, options) => {
            return sigPadRef.current?.fromData(pointGroups, options);
        },
        toData: () => {
            return sigPadRef.current?.toData() ?? [];
        },
        getTrimmedCanvas: () => {
            if (!canvasRef.current)
                return;
            const copy = document.createElement("canvas");
            copy.width = canvasRef.current.width;
            copy.height = canvasRef.current.height;
            copy.getContext("2d").drawImage(canvasRef.current, 0, 0);
            return (0, trim_canvas_1.default)(copy);
        },
        getHeight: () => {
            return canvasRef.current?.height ?? 0;
        },
        getWidth: () => {
            return canvasRef.current?.width ?? 0;
        }
    }), [sigPadRef.current, canvasRef.current]);
    (0, react_1.useEffect)(() => {
        if (!canvasRef.current)
            return;
        sigPadRef.current = new signature_pad_1.default(canvasRef.current, signaturePadProps);
        if (onBegin) {
            sigPadRef.current.addEventListener("beginStroke", onBegin);
        }
        if (onEnd) {
            sigPadRef.current.addEventListener("endStroke", onEnd);
        }
        resizeCanvas();
        window.addEventListener("resize", checkClearOnResize);
        sigPadRef.current?.on();
        return () => {
            if (onBegin) {
                sigPadRef.current?.removeEventListener("beginStroke", onBegin);
            }
            if (onEnd) {
                sigPadRef.current?.removeEventListener("endStroke", onEnd);
            }
            window.removeEventListener("resize", checkClearOnResize);
            sigPadRef.current?.off();
        };
    }, [
        canvasRef.current,
        sigPadRef.current,
        signaturePadProps,
        onBegin,
        onEnd
    ]);
    return (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, ...canvasProps });
});
exports.default = SignatureCanvas;