@itwin/imodel-components-react 4.0.0-dev.9 → 4.0.1

package/lib/cjs/imodel-components-react/viewport/ViewportComponent.js

@@ -1,275 +1,277 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Viewport
- */
-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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewportComponent = void 0;
-const React = __importStar(require("react"));
-const core_bentley_1 = require("@itwin/core-bentley");
-const core_geometry_1 = require("@itwin/core-geometry");
-const core_common_1 = require("@itwin/core-common");
-const core_frontend_1 = require("@itwin/core-frontend");
-const ViewportComponentEvents_1 = require("./ViewportComponentEvents");
-/**
- * A viewport React component that creates a ScreenViewport.
- * @public
- */
-function ViewportComponent(props) {
-    const { viewState, imodel, viewDefinitionId, getViewOverlay, viewManagerOverride, tentativePointOverride, onContextMenu, style, className, screenViewportOverride, controlId, viewportRef } = props;
-    // istanbul ignore next
-    const viewManagerRef = React.useRef(viewManagerOverride !== null && viewManagerOverride !== void 0 ? viewManagerOverride : core_frontend_1.IModelApp.viewManager);
-    const tentativePointOverrideRef = React.useRef(tentativePointOverride);
-    const screenViewportCreated = React.useRef(false);
-    const viewportDiv = React.useRef(null);
-    const screenViewportRef = React.useRef(null);
-    const isMounted = React.useRef(false);
-    const viewClassFullName = React.useRef("");
-    const viewId = React.useRef("0");
-    // istanbul ignore next
-    const handleViewChanged = (vp) => {
-        // istanbul ignore next
-        if (!(vp.iModel.isOpen || vp.iModel.isBlank))
-            return;
-        ViewportComponentEvents_1.ViewportComponentEvents.setViewMatrix(vp);
-        if (viewClassFullName.current !== vp.view.classFullName) {
-            setTimeout(() => {
-                ViewportComponentEvents_1.ViewportComponentEvents.onViewClassFullNameChangedEvent.emit({ viewport: vp, oldName: viewClassFullName.current, newName: vp.view.classFullName });
-                viewClassFullName.current = vp.view.classFullName;
-            });
-        }
-        if (viewId.current !== vp.view.id) {
-            setTimeout(() => {
-                ViewportComponentEvents_1.ViewportComponentEvents.onViewIdChangedEvent.emit({ viewport: vp, oldId: viewId.current, newId: vp.view.id });
-                viewId.current = vp.view.id;
-            });
-        }
-    };
-    const handleStandardRotationChangeEvent = (args) => {
-        const viewManager = viewManagerRef.current;
-        const currentScreenViewport = screenViewportRef.current;
-        if (currentScreenViewport && viewManager.selectedView === currentScreenViewport) {
-            currentScreenViewport.view.setRotationAboutPoint(core_frontend_1.ViewState.getStandardViewMatrix(args.standardRotation));
-            currentScreenViewport.synchWithView();
-        }
-    };
-    const handleDrawingViewportChangeEvent = (args) => {
-        const viewManager = viewManagerRef.current;
-        const currentScreenViewport = screenViewportRef.current;
-        if (currentScreenViewport && viewManager.selectedView === currentScreenViewport) {
-            currentScreenViewport.view.setOrigin(args.origin);
-            currentScreenViewport.view.setRotation(args.rotation);
-            currentScreenViewport.synchWithView({ noSaveInUndo: args.complete !== true });
-        }
-    };
-    const targetPoint = React.useRef(null);
-    const getRotatePoint = (vp) => {
-        var _a, _b;
-        const lastTargetPoint = targetPoint.current;
-        // istanbul ignore next
-        const tentativePoint = (_a = tentativePointOverrideRef.current) !== null && _a !== void 0 ? _a : core_frontend_1.IModelApp.tentativePoint;
-        // istanbul ignore else
-        if (tentativePoint.isActive)
-            return tentativePoint.getPoint();
-        // istanbul ignore else
-        if (undefined !== vp.viewCmdTargetCenter) {
-            const testPt = vp.worldToView(vp.viewCmdTargetCenter);
-            const viewRect = vp.viewRect;
-            if (viewRect.containsPoint(testPt))
-                return vp.viewCmdTargetCenter;
-            vp.viewCmdTargetCenter = undefined;
-        }
-        // istanbul ignore else
-        if (null !== lastTargetPoint) {
-            const testPt = vp.worldToView(lastTargetPoint);
-            const viewRect = vp.viewRect.clone();
-            viewRect.scaleAboutCenter(0.25, 0.25);
-            // istanbul ignore next hard to reach because of mocks
-            if (viewRect.containsPoint(testPt))
-                return lastTargetPoint;
-            targetPoint.current = null;
-        }
-        const visiblePoint = vp.pickNearestVisibleGeometry(vp.npcToWorld(core_common_1.NpcCenter), vp.pixelsFromInches(core_frontend_1.ToolSettings.viewToolPickRadiusInches));
-        targetPoint.current = (undefined !== visiblePoint ? visiblePoint : vp.view.getTargetPoint());
-        // istanbul ignore next
-        return (_b = targetPoint.current) !== null && _b !== void 0 ? _b : vp.view.getCenter();
-    };
-    const handleCubeRotationChangeEvent = (args) => {
-        const viewManager = viewManagerRef.current;
-        const currentScreenViewport = screenViewportRef.current;
-        // istanbul ignore else
-        if (currentScreenViewport && viewManager.selectedView === currentScreenViewport) {
-            const rotMatrix = args.rotMatrix;
-            // istanbul ignore else
-            if (currentScreenViewport.rotation !== rotMatrix) {
-                const inverse = rotMatrix.transpose(); // rotation is from current nav cube state...
-                const center = getRotatePoint(currentScreenViewport);
-                const targetMatrix = inverse.multiplyMatrixMatrix(currentScreenViewport.view.getRotation());
-                const worldTransform = core_geometry_1.Transform.createFixedPointAndMatrix(center, targetMatrix);
-                const frustum = currentScreenViewport.getWorldFrustum();
-                frustum.multiply(worldTransform);
-                currentScreenViewport.view.setupFromFrustum(frustum);
-                currentScreenViewport.synchWithView({ noSaveInUndo: !args.complete });
-            }
-        }
-    };
-    const handleDisconnectFromViewManager = () => {
-        const screenViewport = screenViewportRef.current;
-        if (screenViewport) {
-            const viewManager = core_frontend_1.IModelApp.viewManager;
-            screenViewport.onViewChanged.removeListener(handleViewChanged);
-            screenViewportRef.current = null;
-            screenViewportCreated.current = false;
-            ViewportComponentEvents_1.ViewportComponentEvents.onDrawingViewportChangeEvent.removeListener(handleDrawingViewportChangeEvent);
-            ViewportComponentEvents_1.ViewportComponentEvents.onCubeRotationChangeEvent.removeListener(handleCubeRotationChangeEvent);
-            ViewportComponentEvents_1.ViewportComponentEvents.onStandardRotationChangeEvent.removeListener(handleStandardRotationChangeEvent);
-            viewManager.dropViewport(screenViewport, true);
-        }
-    };
-    // istanbul ignore next
-    const handleWindowUnload = () => {
-        const parentDiv = viewportDiv.current;
-        if (parentDiv) {
-            const parentWindow = parentDiv.ownerDocument.defaultView;
-            if (parentWindow !== window) {
-                handleDisconnectFromViewManager();
-            }
-        }
-    };
-    const getScreenViewport = (parentDiv, inViewState) => {
-        // istanbul ignore next
-        const screenViewportFactory = screenViewportOverride ? screenViewportOverride : core_frontend_1.ScreenViewport;
-        const parentWindow = parentDiv.ownerDocument.defaultView;
-        parentWindow.addEventListener("unload", handleWindowUnload, true); // listener clear after being called
-        ViewportComponentEvents_1.ViewportComponentEvents.initialize();
-        ViewportComponentEvents_1.ViewportComponentEvents.onDrawingViewportChangeEvent.addListener(handleDrawingViewportChangeEvent);
-        ViewportComponentEvents_1.ViewportComponentEvents.onCubeRotationChangeEvent.addListener(handleCubeRotationChangeEvent);
-        ViewportComponentEvents_1.ViewportComponentEvents.onStandardRotationChangeEvent.addListener(handleStandardRotationChangeEvent);
-        const screenViewport = screenViewportFactory.create(parentDiv, inViewState);
-        screenViewportCreated.current = true;
-        viewClassFullName.current = screenViewport.view.classFullName;
-        viewId.current = screenViewport.view.id;
-        screenViewport.onViewChanged.addListener(handleViewChanged);
-        return screenViewport;
-    };
-    React.useEffect(() => {
-        isMounted.current = true;
-        core_bentley_1.Logger.logInfo("ViewportComponent", `mounting ViewportComponent for controlId=${controlId}`);
-        return () => {
-            isMounted.current = false;
-            core_bentley_1.Logger.logInfo("ViewportComponent", `un-mounting ViewportComponent for controlId=${controlId}`);
-            handleDisconnectFromViewManager();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const [initialViewState, setInitialViewState] = React.useState(() => {
-        if (viewState) {
-            if (typeof viewState === "function")
-                return viewState().clone();
-            else
-                return viewState.clone();
-        }
-        return undefined;
-    });
-    React.useEffect(() => {
-        setInitialViewState(undefined);
-    }, [viewDefinitionId, viewState]);
-    React.useEffect(() => {
-        async function fetchInitialViewstate() {
-            let currentViewState;
-            if (viewState) {
-                if (typeof viewState === "function")
-                    currentViewState = viewState();
-                else
-                    currentViewState = viewState;
-            }
-            else if (viewDefinitionId && imodel) {
-                try {
-                    currentViewState = await imodel.views.load(viewDefinitionId);
-                    // istanbul ignore next
-                    if (!currentViewState) {
-                        core_bentley_1.Logger.logError("ViewportComponent", `Viewstate failed to load`);
-                    }
-                }
-                catch (_e) {
-                    // istanbul ignore next
-                    core_bentley_1.Logger.logError("ViewportComponent", `Viewstate failed to load`);
-                }
-            }
-            else {
-                core_bentley_1.Logger.logError("ViewportComponent", `A Viewstate or a viewId and imodel must be provided`);
-            }
-            // istanbul ignore next
-            if (isMounted.current && ((currentViewState === null || currentViewState === void 0 ? void 0 : currentViewState.iModel.isOpen) || (currentViewState === null || currentViewState === void 0 ? void 0 : currentViewState.iModel.isBlank))) {
-                setInitialViewState(currentViewState === null || currentViewState === void 0 ? void 0 : currentViewState.clone());
-            }
-        }
-        if (undefined === initialViewState)
-            fetchInitialViewstate(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }, [imodel, initialViewState, viewDefinitionId, viewState]);
-    const [viewOverlay, setViewOverlay] = React.useState(null);
-    // This useEffect connects to ViewManger as soon as initialViewState is available once component is mounted.
-    React.useEffect(() => {
-        var _a;
-        const parentDiv = viewportDiv.current;
-        const viewManager = viewManagerRef.current;
-        // istanbul ignore next
-        if (parentDiv && initialViewState && ((initialViewState === null || initialViewState === void 0 ? void 0 : initialViewState.iModel.isOpen) || (initialViewState === null || initialViewState === void 0 ? void 0 : initialViewState.iModel.isBlank))) {
-            if (!screenViewportCreated.current) {
-                const screenViewport = getScreenViewport(parentDiv, initialViewState);
-                screenViewportRef.current = screenViewport;
-                if (viewportRef)
-                    viewportRef(screenViewport);
-                core_bentley_1.Logger.logInfo("ViewportComponent", `processing viewManager.addViewport for controlId=${controlId}`);
-                viewManager.addViewport(screenViewport);
-                // overlay component is set up once a ScreenViewport is available. The overlay component must handle any view changes itself.
-                setViewOverlay(getViewOverlay ? getViewOverlay(screenViewport) : null);
-            }
-            else {
-                // istanbul ignore next
-                (_a = screenViewportRef.current) === null || _a === void 0 ? void 0 : _a.changeView(initialViewState);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [controlId, initialViewState, viewportRef]);
-    const handleContextMenu = React.useCallback((e) => {
-        e.preventDefault();
-        if (onContextMenu)
-            onContextMenu(e);
-    }, [onContextMenu]);
-    const parentDivStyle = {
-        height: "100%", width: "100%", position: "relative",
-    };
-    const viewportDivStyle = {
-        ...style,
-        height: "100%", width: "100%",
-    };
-    return (React.createElement("div", { style: parentDivStyle, "data-item-id": controlId },
-        React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: viewportDiv, "data-testid": "viewport-component", className: className, style: viewportDivStyle, onContextMenu: handleContextMenu }),
-            viewOverlay)));
-}
-exports.ViewportComponent = ViewportComponent;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Viewport
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportComponent = void 0;
+const React = __importStar(require("react"));
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_geometry_1 = require("@itwin/core-geometry");
+const core_common_1 = require("@itwin/core-common");
+const core_frontend_1 = require("@itwin/core-frontend");
+const ViewportComponentEvents_1 = require("./ViewportComponentEvents");
+/**
+ * A viewport React component that creates a ScreenViewport.
+ * @public
+ */
+function ViewportComponent(props) {
+    const { viewState, imodel, viewDefinitionId, getViewOverlay, viewManagerOverride, tentativePointOverride, onContextMenu, style, className, screenViewportOverride, controlId, viewportRef } = props;
+    // istanbul ignore next
+    const viewManagerRef = React.useRef(viewManagerOverride ?? core_frontend_1.IModelApp.viewManager);
+    const tentativePointOverrideRef = React.useRef(tentativePointOverride);
+    const screenViewportCreated = React.useRef(false);
+    const viewportDiv = React.useRef(null);
+    const screenViewportRef = React.useRef(null);
+    const isMounted = React.useRef(false);
+    const viewClassFullName = React.useRef("");
+    const viewId = React.useRef("0");
+    // istanbul ignore next
+    const handleViewChanged = (vp) => {
+        // istanbul ignore next
+        if (!(vp.iModel.isOpen || vp.iModel.isBlank))
+            return;
+        ViewportComponentEvents_1.ViewportComponentEvents.setViewMatrix(vp);
+        if (viewClassFullName.current !== vp.view.classFullName) {
+            setTimeout(() => {
+                ViewportComponentEvents_1.ViewportComponentEvents.onViewClassFullNameChangedEvent.emit({ viewport: vp, oldName: viewClassFullName.current, newName: vp.view.classFullName });
+                viewClassFullName.current = vp.view.classFullName;
+            });
+        }
+        if (viewId.current !== vp.view.id) {
+            setTimeout(() => {
+                ViewportComponentEvents_1.ViewportComponentEvents.onViewIdChangedEvent.emit({ viewport: vp, oldId: viewId.current, newId: vp.view.id });
+                viewId.current = vp.view.id;
+            });
+        }
+    };
+    const handleStandardRotationChangeEvent = (args) => {
+        const viewManager = viewManagerRef.current;
+        const currentScreenViewport = screenViewportRef.current;
+        if (currentScreenViewport && viewManager.selectedView === currentScreenViewport) {
+            currentScreenViewport.view.setRotationAboutPoint(core_frontend_1.ViewState.getStandardViewMatrix(args.standardRotation));
+            currentScreenViewport.synchWithView();
+        }
+    };
+    const handleDrawingViewportChangeEvent = (args) => {
+        const viewManager = viewManagerRef.current;
+        const currentScreenViewport = screenViewportRef.current;
+        if (currentScreenViewport && viewManager.selectedView === currentScreenViewport) {
+            currentScreenViewport.view.setOrigin(args.origin);
+            currentScreenViewport.view.setRotation(args.rotation);
+            currentScreenViewport.synchWithView({ noSaveInUndo: args.complete !== true });
+        }
+    };
+    const targetPoint = React.useRef(null);
+    const getRotatePoint = (vp) => {
+        const lastTargetPoint = targetPoint.current;
+        // istanbul ignore next
+        const tentativePoint = tentativePointOverrideRef.current ?? core_frontend_1.IModelApp.tentativePoint;
+        // istanbul ignore else
+        if (tentativePoint.isActive)
+            return tentativePoint.getPoint();
+        // istanbul ignore else
+        if (undefined !== vp.viewCmdTargetCenter) {
+            const testPt = vp.worldToView(vp.viewCmdTargetCenter);
+            const viewRect = vp.viewRect;
+            if (viewRect.containsPoint(testPt))
+                return vp.viewCmdTargetCenter;
+            vp.viewCmdTargetCenter = undefined;
+        }
+        // istanbul ignore else
+        if (null !== lastTargetPoint) {
+            const testPt = vp.worldToView(lastTargetPoint);
+            const viewRect = vp.viewRect.clone();
+            viewRect.scaleAboutCenter(0.25, 0.25);
+            // istanbul ignore next hard to reach because of mocks
+            if (viewRect.containsPoint(testPt))
+                return lastTargetPoint;
+            targetPoint.current = null;
+        }
+        const visiblePoint = vp.pickNearestVisibleGeometry(vp.npcToWorld(core_common_1.NpcCenter), vp.pixelsFromInches(core_frontend_1.ToolSettings.viewToolPickRadiusInches));
+        targetPoint.current = (undefined !== visiblePoint ? visiblePoint : vp.view.getTargetPoint());
+        // istanbul ignore next
+        return targetPoint.current ?? vp.view.getCenter();
+    };
+    const handleCubeRotationChangeEvent = (args) => {
+        const viewManager = viewManagerRef.current;
+        const currentScreenViewport = screenViewportRef.current;
+        // istanbul ignore else
+        if (currentScreenViewport && viewManager.selectedView === currentScreenViewport) {
+            const rotMatrix = args.rotMatrix;
+            // istanbul ignore else
+            if (currentScreenViewport.rotation !== rotMatrix) {
+                const inverse = rotMatrix.transpose(); // rotation is from current nav cube state...
+                const center = getRotatePoint(currentScreenViewport);
+                const targetMatrix = inverse.multiplyMatrixMatrix(currentScreenViewport.view.getRotation());
+                const worldTransform = core_geometry_1.Transform.createFixedPointAndMatrix(center, targetMatrix);
+                const frustum = currentScreenViewport.getWorldFrustum();
+                frustum.multiply(worldTransform);
+                currentScreenViewport.view.setupFromFrustum(frustum);
+                currentScreenViewport.synchWithView({ noSaveInUndo: !args.complete });
+            }
+        }
+    };
+    const handleDisconnectFromViewManager = () => {
+        const screenViewport = screenViewportRef.current;
+        if (screenViewport) {
+            const viewManager = core_frontend_1.IModelApp.viewManager;
+            screenViewport.onViewChanged.removeListener(handleViewChanged);
+            screenViewportRef.current = null;
+            screenViewportCreated.current = false;
+            ViewportComponentEvents_1.ViewportComponentEvents.onDrawingViewportChangeEvent.removeListener(handleDrawingViewportChangeEvent);
+            ViewportComponentEvents_1.ViewportComponentEvents.onCubeRotationChangeEvent.removeListener(handleCubeRotationChangeEvent);
+            ViewportComponentEvents_1.ViewportComponentEvents.onStandardRotationChangeEvent.removeListener(handleStandardRotationChangeEvent);
+            viewManager.dropViewport(screenViewport, true);
+        }
+    };
+    // istanbul ignore next
+    const handleWindowUnload = () => {
+        const parentDiv = viewportDiv.current;
+        if (parentDiv) {
+            const parentWindow = parentDiv.ownerDocument.defaultView;
+            if (parentWindow !== window) {
+                handleDisconnectFromViewManager();
+            }
+        }
+    };
+    const getScreenViewport = (parentDiv, inViewState) => {
+        // istanbul ignore next
+        const screenViewportFactory = screenViewportOverride ? screenViewportOverride : core_frontend_1.ScreenViewport;
+        const parentWindow = parentDiv.ownerDocument.defaultView;
+        parentWindow.addEventListener("unload", handleWindowUnload, true); // listener clear after being called
+        ViewportComponentEvents_1.ViewportComponentEvents.initialize();
+        ViewportComponentEvents_1.ViewportComponentEvents.onDrawingViewportChangeEvent.addListener(handleDrawingViewportChangeEvent);
+        ViewportComponentEvents_1.ViewportComponentEvents.onCubeRotationChangeEvent.addListener(handleCubeRotationChangeEvent);
+        ViewportComponentEvents_1.ViewportComponentEvents.onStandardRotationChangeEvent.addListener(handleStandardRotationChangeEvent);
+        const screenViewport = screenViewportFactory.create(parentDiv, inViewState);
+        screenViewportCreated.current = true;
+        viewClassFullName.current = screenViewport.view.classFullName;
+        viewId.current = screenViewport.view.id;
+        screenViewport.onViewChanged.addListener(handleViewChanged);
+        return screenViewport;
+    };
+    React.useEffect(() => {
+        isMounted.current = true;
+        core_bentley_1.Logger.logInfo("ViewportComponent", `mounting ViewportComponent for controlId=${controlId}`);
+        return () => {
+            isMounted.current = false;
+            core_bentley_1.Logger.logInfo("ViewportComponent", `un-mounting ViewportComponent for controlId=${controlId}`);
+            handleDisconnectFromViewManager();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const [initialViewState, setInitialViewState] = React.useState(() => {
+        if (viewState) {
+            if (typeof viewState === "function")
+                return viewState().clone();
+            else
+                return viewState.clone();
+        }
+        return undefined;
+    });
+    React.useEffect(() => {
+        setInitialViewState(undefined);
+    }, [viewDefinitionId, viewState]);
+    React.useEffect(() => {
+        async function fetchInitialViewstate() {
+            let currentViewState;
+            if (viewState) {
+                if (typeof viewState === "function")
+                    currentViewState = viewState();
+                else
+                    currentViewState = viewState;
+            }
+            else if (viewDefinitionId && imodel) {
+                try {
+                    currentViewState = await imodel.views.load(viewDefinitionId);
+                    // istanbul ignore next
+                    if (!currentViewState) {
+                        core_bentley_1.Logger.logError("ViewportComponent", `Viewstate failed to load`);
+                    }
+                }
+                catch (_e) {
+                    // istanbul ignore next
+                    core_bentley_1.Logger.logError("ViewportComponent", `Viewstate failed to load`);
+                }
+            }
+            else {
+                core_bentley_1.Logger.logError("ViewportComponent", `A Viewstate or a viewId and imodel must be provided`);
+            }
+            // istanbul ignore next
+            if (isMounted.current && (currentViewState?.iModel.isOpen || currentViewState?.iModel.isBlank)) {
+                setInitialViewState(currentViewState?.clone());
+            }
+        }
+        if (undefined === initialViewState)
+            fetchInitialViewstate(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }, [imodel, initialViewState, viewDefinitionId, viewState]);
+    const [viewOverlay, setViewOverlay] = React.useState(null);
+    // This useEffect connects to ViewManger as soon as initialViewState is available once component is mounted.
+    React.useEffect(() => {
+        const parentDiv = viewportDiv.current;
+        const viewManager = viewManagerRef.current;
+        // istanbul ignore next
+        if (parentDiv && initialViewState && (initialViewState?.iModel.isOpen || initialViewState?.iModel.isBlank)) {
+            if (!screenViewportCreated.current) {
+                const screenViewport = getScreenViewport(parentDiv, initialViewState);
+                screenViewportRef.current = screenViewport;
+                if (viewportRef)
+                    viewportRef(screenViewport);
+                core_bentley_1.Logger.logInfo("ViewportComponent", `processing viewManager.addViewport for controlId=${controlId}`);
+                viewManager.addViewport(screenViewport);
+                // overlay component is set up once a ScreenViewport is available. The overlay component must handle any view changes itself.
+                setViewOverlay(getViewOverlay ? getViewOverlay(screenViewport) : null);
+            }
+            else {
+                // istanbul ignore next
+                screenViewportRef.current?.changeView(initialViewState);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controlId, initialViewState, viewportRef]);
+    const handleContextMenu = React.useCallback((e) => {
+        e.preventDefault();
+        if (onContextMenu)
+            onContextMenu(e);
+    }, [onContextMenu]);
+    const parentDivStyle = {
+        height: "100%", width: "100%", position: "relative",
+    };
+    const viewportDivStyle = {
+        ...style,
+        height: "100%", width: "100%",
+    };
+    return (React.createElement("div", { style: parentDivStyle, "data-item-id": controlId },
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { ref: viewportDiv, "data-testid": "viewport-component", className: className, style: viewportDivStyle, onContextMenu: handleContextMenu }),
+            viewOverlay)));
+}
+exports.ViewportComponent = ViewportComponent;
 //# sourceMappingURL=ViewportComponent.js.map