@visactor/react-vrender/cjs/Stage.js

## Description

"use strict";

var __rest = this && this.__rest || function(s, e) {
    var t = {};
    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
        var i = 0;
        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
    }
    return t;
}, __importDefault = this && this.__importDefault || function(mod) {
    return mod && mod.__esModule ? mod : {
        default: mod
    };
};

Object.defineProperty(exports, "__esModule", {
    value: !0
}), exports.Stage = void 0;

const vrender_1 = require("@visactor/vrender"), react_1 = require("react"), react_2 = __importDefault(require("react")), hostConfig_1 = require("./hostConfig"), util_1 = require("./util");

exports.Stage = (0, react_1.forwardRef)(((props, ref) => {
    const {viewBox: viewBox, width: width, height: height, dpr: dpr, background: background, canvasControled: canvasControled, title: title, canvas: canvas, disableDirtyBounds: disableDirtyBounds, beforeRender: beforeRender, afterRender: afterRender, renderStyle: renderStyle, stage3dOptions: stage3dOptions, containerId: containerId, containerTitle: containerTitle, children: children} = props, others = __rest(props, [ "viewBox", "width", "height", "dpr", "background", "canvasControled", "title", "canvas", "disableDirtyBounds", "beforeRender", "afterRender", "renderStyle", "stage3dOptions", "containerId", "containerTitle", "children" ]);
    (0, util_1.assertRef)(ref);
    const fiberRoot = (0, react_1.useRef)(), divRef = (0, react_1.useRef)(null), innerStageRef = (0, 
    react_1.useRef)(null), stageRef = ref || innerStageRef, initedRef = (0, react_1.useRef)(!1);
    return (0, react_1.useLayoutEffect)((() => {
        const stage = (0, vrender_1.createStage)({
            viewBox: viewBox,
            width: width,
            height: height,
            dpr: dpr,
            background: background,
            canvasControled: canvasControled,
            title: title,
            autoRender: !0,
            disableDirtyBounds: disableDirtyBounds,
            beforeRender: beforeRender,
            afterRender: afterRender,
            renderStyle: renderStyle,
            canvas: canvas,
            container: divRef.current
        });
        return stage3dOptions && stage.set3dOptions(stage3dOptions), stageRef.current = stage, 
        fiberRoot.current = hostConfig_1.reconcilor.createContainer(stage, 1, null, !1, !1, ""), 
        () => {
            hostConfig_1.reconcilor.updateContainer(null, fiberRoot.current, null);
        };
    }), []), (0, react_1.useLayoutEffect)((() => {
        viewBox && stageRef.current && initedRef.current && stageRef.current.setViewBox(viewBox.x1, viewBox.y1, viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1, !1);
    }), [ stageRef, viewBox, initedRef ]), (0, react_1.useLayoutEffect)((() => {
        dpr && stageRef.current && initedRef.current && stageRef.current.setDpr(dpr);
    }), [ stageRef, dpr, initedRef ]), (0, react_1.useLayoutEffect)((() => {
        width > 0 && height > 0 && stageRef.current && initedRef.current && stageRef.current.resize(width, height);
    }), [ width, height, stageRef, initedRef ]), (0, react_1.useLayoutEffect)((() => {
        initedRef.current = !0, fiberRoot.current && hostConfig_1.reconcilor.updateContainer(children, fiberRoot.current, null);
    }), [ children ]), react_2.default.createElement("div", Object.assign({}, others, {
        id: containerId,
        title: containerTitle,
        ref: divRef
    }));
}));