devexpress-reporting-react/dx-report-viewer/components/reporting/Widgets/Painter/Painter.js

DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.

import React from 'react';
import dxZoom from '../../../../hooks/dxZoom';
import { Painter } from 'devexpress-reporting/viewer/widgets/pictureEditor/_painter';
const PainterComponent = ({ options, className, ...delegatedProps }) => {
    const ref = React.useRef();
    const [model, setModel] = React.useState();
    const canvasRef = dxZoom(model?.scale);
    React.useLayoutEffect(() => {
        const painter = new Painter(ref.current, options);
        options.setPainter(painter);
        setModel(painter);
        return () => {
            painter?.dispose();
            options?.setPainter(null);
        };
    }, []);
    return (React.createElement("div", { ref: ref, className: `dx-painter ${className}`, ...delegatedProps },
        React.createElement("canvas", { ref: canvasRef })));
};
export default PainterComponent;