@itwin/imodel-components-react 4.0.0-dev.8 → 4.0.0

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

@@ -1,252 +1,252 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import { Logger } from "@itwin/core-bentley";
-import { Transform } from "@itwin/core-geometry";
-import { NpcCenter } from "@itwin/core-common";
-import { IModelApp, ScreenViewport, ToolSettings, ViewState, } from "@itwin/core-frontend";
-import { ViewportComponentEvents, } from "./ViewportComponentEvents";
-/**
- * A viewport React component that creates a ScreenViewport.
- * @public
- */
-export 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 : 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.setViewMatrix(vp);
-        if (viewClassFullName.current !== vp.view.classFullName) {
-            setTimeout(() => {
-                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.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(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 : 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(NpcCenter), vp.pixelsFromInches(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 = 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 = IModelApp.viewManager;
-            screenViewport.onViewChanged.removeListener(handleViewChanged);
-            screenViewportRef.current = null;
-            screenViewportCreated.current = false;
-            ViewportComponentEvents.onDrawingViewportChangeEvent.removeListener(handleDrawingViewportChangeEvent);
-            ViewportComponentEvents.onCubeRotationChangeEvent.removeListener(handleCubeRotationChangeEvent);
-            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 : ScreenViewport;
-        const parentWindow = parentDiv.ownerDocument.defaultView;
-        parentWindow.addEventListener("unload", handleWindowUnload, true); // listener clear after being called
-        ViewportComponentEvents.initialize();
-        ViewportComponentEvents.onDrawingViewportChangeEvent.addListener(handleDrawingViewportChangeEvent);
-        ViewportComponentEvents.onCubeRotationChangeEvent.addListener(handleCubeRotationChangeEvent);
-        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;
-        Logger.logInfo("ViewportComponent", `mounting ViewportComponent for controlId=${controlId}`);
-        return () => {
-            isMounted.current = false;
-            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) {
-                        Logger.logError("ViewportComponent", `Viewstate failed to load`);
-                    }
-                }
-                catch (_e) {
-                    // istanbul ignore next
-                    Logger.logError("ViewportComponent", `Viewstate failed to load`);
-                }
-            }
-            else {
-                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);
-                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)));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { Logger } from "@itwin/core-bentley";
+import { Transform } from "@itwin/core-geometry";
+import { NpcCenter } from "@itwin/core-common";
+import { IModelApp, ScreenViewport, ToolSettings, ViewState, } from "@itwin/core-frontend";
+import { ViewportComponentEvents, } from "./ViewportComponentEvents";
+/**
+ * A viewport React component that creates a ScreenViewport.
+ * @public
+ */
+export 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 : 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.setViewMatrix(vp);
+        if (viewClassFullName.current !== vp.view.classFullName) {
+            setTimeout(() => {
+                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.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(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 : 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(NpcCenter), vp.pixelsFromInches(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 = 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 = IModelApp.viewManager;
+            screenViewport.onViewChanged.removeListener(handleViewChanged);
+            screenViewportRef.current = null;
+            screenViewportCreated.current = false;
+            ViewportComponentEvents.onDrawingViewportChangeEvent.removeListener(handleDrawingViewportChangeEvent);
+            ViewportComponentEvents.onCubeRotationChangeEvent.removeListener(handleCubeRotationChangeEvent);
+            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 : ScreenViewport;
+        const parentWindow = parentDiv.ownerDocument.defaultView;
+        parentWindow.addEventListener("unload", handleWindowUnload, true); // listener clear after being called
+        ViewportComponentEvents.initialize();
+        ViewportComponentEvents.onDrawingViewportChangeEvent.addListener(handleDrawingViewportChangeEvent);
+        ViewportComponentEvents.onCubeRotationChangeEvent.addListener(handleCubeRotationChangeEvent);
+        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;
+        Logger.logInfo("ViewportComponent", `mounting ViewportComponent for controlId=${controlId}`);
+        return () => {
+            isMounted.current = false;
+            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) {
+                        Logger.logError("ViewportComponent", `Viewstate failed to load`);
+                    }
+                }
+                catch (_e) {
+                    // istanbul ignore next
+                    Logger.logError("ViewportComponent", `Viewstate failed to load`);
+                }
+            }
+            else {
+                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);
+                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)));
+}
 //# sourceMappingURL=ViewportComponent.js.map