react-ngl/dist/components/Stage/Stage.js

React wrapper for ngl

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Stage = void 0;
var react_1 = __importStar(require("react"));
var hooks_1 = require("../../hooks");
var utils_1 = require("../../utils");
var Viewer_1 = require("./Viewer");
exports.Stage = function (_a) {
    var children = _a.children, width = _a.width, height = _a.height, params = _a.params, cameraState = _a.cameraState, onCameraMove = _a.onCameraMove;
    var lastCameraStateRef = react_1.useRef();
    var _b = __read(react_1.useState(), 2), stage = _b[0], setStage = _b[1];
    var stageElementRef = react_1.useCallback(function (element) {
        if (element) {
            var currentStage = new utils_1.NGL.Stage(element);
            setStage(currentStage);
        }
    }, []);
    react_1.useEffect(function () {
        return function () {
            if (stage) {
                stage.dispose();
            }
        };
    }, [stage]);
    var handleComponentChange = react_1.useCallback(function () {
        setTimeout(function () {
            if (stage && lastCameraStateRef.current) {
                // apply latest camera state
                utils_1.applyCameraState(stage, lastCameraStateRef.current);
            }
        });
    }, [stage]);
    react_1.useEffect(function () {
        if (stage) {
            stage.signals.componentAdded.add(handleComponentChange);
            stage.signals.componentRemoved.add(handleComponentChange);
        }
        return function () {
            if (stage) {
                stage.signals.componentAdded.remove(handleComponentChange);
                stage.signals.componentRemoved.remove(handleComponentChange);
            }
        };
    }, [handleComponentChange, stage]);
    react_1.useEffect(function () {
        if (stage) {
            stage.setParameters(params);
        }
    }, [params, stage]);
    react_1.useEffect(function () {
        if (stage) {
            stage.setSize(width, height);
        }
    }, [height, stage, width]);
    react_1.useEffect(function () {
        if (stage) {
            var prevCameraState = lastCameraStateRef.current;
            if (!utils_1.isCameraStateEqual(cameraState, prevCameraState)) {
                lastCameraStateRef.current = cameraState;
                if (cameraState) {
                    utils_1.applyCameraState(stage, cameraState);
                }
            }
        }
    }, [cameraState, stage]);
    var handleCameraMove = react_1.useCallback(function () {
        if (stage && onCameraMove) {
            var currentCameraState = utils_1.getCameraState(stage);
            var cameraStateOrNone = utils_1.isCameraStateEqual(currentCameraState, utils_1.getDefaultCameraState(stage))
                ? utils_1.CAMERA_STATE_NONE
                : currentCameraState;
            onCameraMove(cameraStateOrNone);
        }
    }, [onCameraMove, stage]);
    react_1.useEffect(function () {
        if (stage) {
            stage.viewerControls.signals.changed.add(handleCameraMove);
        }
        return function () {
            if (stage) {
                stage.viewerControls.signals.changed.remove(handleCameraMove);
            }
        };
    }, [handleCameraMove, stage]);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { ref: stageElementRef, style: { width: width, height: height } }),
        stage && (react_1.default.createElement(hooks_1.StageReactContext.Provider, { value: stage },
            react_1.default.createElement(Viewer_1.Viewer, null, children)))));
};
//# sourceMappingURL=Stage.js.map