tweak-tools/dist/hooks/useCanvas.js

Tweak your React projects until awesomeness

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCanvas2d = void 0;
const react_1 = require("react");
const utils_1 = require("../utils");
function useCanvas2d(fn) {
    const canvas = (0, react_1.useRef)(null);
    const ctx = (0, react_1.useRef)(null);
    const hasFired = (0, react_1.useRef)(false);
    // TODO this is pretty much useless in 90% of cases since panels
    // have a fixed width
    (0, react_1.useEffect)(() => {
        const handleCanvas = (0, utils_1.debounce)(() => {
            canvas.current.width = canvas.current.offsetWidth * window.devicePixelRatio;
            canvas.current.height = canvas.current.offsetHeight * window.devicePixelRatio;
            fn(canvas.current, ctx.current);
        }, 250);
        window.addEventListener('resize', handleCanvas);
        if (!hasFired.current) {
            handleCanvas();
            hasFired.current = true;
        }
        return () => window.removeEventListener('resize', handleCanvas);
    }, [fn]);
    (0, react_1.useEffect)(() => {
        ctx.current = canvas.current.getContext('2d');
    }, []);
    return [canvas, ctx];
}
exports.useCanvas2d = useCanvas2d;