@vertexvis/viewer-toolkit-react 0.0.1 → 0.0.2-canary.0

package/dist/bundle.esm.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
-import { VertexMenu, VertexMenuItem, VertexIcon, VertexMenuDivider, VertexPopover, VertexTooltip, VertexSlider as VertexSlider$1, VertexIconButton, VertexTextfield } from '@vertexvis/ui-react';
+import { VertexMenu, VertexMenuItem, VertexIcon, VertexMenuDivider, VertexTooltip, VertexPopover, VertexSlider as VertexSlider$1, VertexIconButton, VertexTextfield } from '@vertexvis/ui-react';
 import { UUID, Color } from '@vertexvis/utils';
 import { useRecoilValue, useRecoilCallback, atom, selector, atomFamily, useSetRecoilState, useRecoilValueLoadable, useRecoilState, RecoilRoot } from 'recoil';
 import { Point, Vector3, BoundingBox, Angle } from '@vertexvis/geometry';
 import Pino from 'pino';
-import { VertexSceneTreeTableLayout as VertexSceneTreeTableLayout$1, VertexSceneTreeTableColumn, VertexSceneTree as VertexSceneTree$1, VertexViewerToolbarGroup, VertexViewerToolbar, VertexViewerBoxQueryTool, VertexViewerViewCube as VertexViewerViewCube$1, VertexViewer as VertexViewer$1 } from '@vertexvis/viewer-react';
+import { VertexSceneTreeTableLayout as VertexSceneTreeTableLayout$1, VertexSceneTreeTableColumn, VertexSceneTreeToolbar as VertexSceneTreeToolbar$1, VertexSceneTree as VertexSceneTree$1, VertexViewerToolbarGroup, VertexViewerToolbar, VertexViewerBoxQueryTool, VertexViewerViewCube as VertexViewerViewCube$1, VertexViewer as VertexViewer$1 } from '@vertexvis/viewer-react';
 import classNames from 'classnames';
 import { defineCustomElements } from '@vertexvis/viewer/loader';
 
@@ -572,6 +572,14 @@ function useViewerSceneActions() {
         selectItemsTransform,
         deselectItemsTransform,
         clearSelectionTransform,
+        reset: useActionCallback(({ snapshot }) => async (correlationId) => {
+            const sceneProvider = await snapshot.getPromiseRequired(viewerSceneProvider);
+            const scene = await sceneProvider();
+            scene === null || scene === void 0 ? void 0 : scene.reset({
+                includeCamera: true,
+                suppliedCorrelationId: correlationId,
+            });
+        }),
     };
 }
 
@@ -1633,82 +1641,31 @@ var index$1 = /*#__PURE__*/Object.freeze({
    useSelectionActions: useSelectionActions
 });
 
-atom({
-    key: 'sceneTreeLoaderVisible',
-    default: false,
-});
-const sceneTreeElement = atom({
-    key: 'sceneTreeElement',
-    default: undefined,
-});
-const sceneTreeWidth = atom({
-    key: 'sceneTreeWidth',
-    default: undefined,
-});
-selector({
-    key: 'sceneTreeController',
-    get: ({ get }) => { var _a; return (_a = get(sceneTreeElement)) === null || _a === void 0 ? void 0 : _a.controller; },
-    dangerouslyAllowMutability: true,
-});
-
-function useSceneTreeActions() {
-    const selectionActions = useSelectionActions();
-    const viewerCameraActions = useViewerCameraActions();
-    return {
-        toggleSelection: useActionCallback(({ snapshot }) => async (event, node, tree) => {
-            var _a, _b;
-            if (event.defaultPrevented || event.button !== 0) {
-                return;
-            }
-            if (!event.altKey) {
-                if ((event.ctrlKey || event.metaKey) && node.selected) {
-                    tree.deselectItem(node);
-                }
-                else if (node.selected) {
-                    tree.selectItem(node, {
-                        recurseParent: true,
-                    });
-                }
-                else if (!node.selected) {
-                    tree.selectItem(node, {
-                        append: event.ctrlKey || event.metaKey,
-                        range: event.shiftKey,
-                    });
-                }
-            }
-            if (node.id != null) {
-                const lastSelected = await snapshot.getPromise(selectionLastSelected);
-                selectionActions.syncSelection({
-                    id: (_a = node.id) === null || _a === void 0 ? void 0 : _a.hex,
-                    ancestors: (_b = lastSelected === null || lastSelected === void 0 ? void 0 : lastSelected.ancestors) !== null && _b !== void 0 ? _b : [],
-                }, {
-                    selected: event.metaKey || event.ctrlKey ? !node.selected : true,
-                    multiSelect: event.shiftKey || event.metaKey || event.ctrlKey,
-                });
-                // TODO: transform widget interaction
+const VertexFitSelectedMenuItem = () => {
+    const selectedItems = useRecoilValue(selectionSelectedItemIds);
+    const selectedSummary = useRecoilValue(selectionVisibleSummary);
+    const cameraActions = useViewerCameraActions();
+    return (jsxs(VertexMenuItem, { "data-testid": "fit-selected-menu-option", onClick: () => {
+            if ((selectedSummary === null || selectedSummary === void 0 ? void 0 : selectedSummary.boundingBox) != null) {
+                cameraActions.flyToByBoundingBox(selectedSummary.boundingBox);
             }
-        }),
-        toggleExpansion: useActionCallback(() => (event, node, tree) => {
-            tree.toggleExpandItem(node);
-        }),
-        toggleVisibility: useActionCallback(() => (event, node, tree) => {
-            tree.toggleItemVisibility(node);
-        }),
-        flyToRow: useActionCallback(({ snapshot }) => async (rowClientY) => {
+        }, disabled: selectedItems.length === 0, children: [jsx(VertexIcon, { slot: "icon", name: "fit-selected", size: "sm" }), jsx("div", { className: "pl-2", children: "Fit Selected" })] }));
+};
+
+const VertexFlyToMenuItem = () => {
+    const cameraActions = useViewerCameraActions();
+    const currentItem = useRecoilValue(contextMenuItem);
+    return (jsxs(VertexMenuItem, { "data-testid": "fly-to-part-menu-option", onClick: () => {
             var _a;
-            const element = await snapshot.getPromise(sceneTreeElement);
-            const row = await (element === null || element === void 0 ? void 0 : element.getRowAtClientY(rowClientY));
-            if (((_a = row === null || row === void 0 ? void 0 : row.node.id) === null || _a === void 0 ? void 0 : _a.hex) != null) {
-                await viewerCameraActions.flyToById(row.node.id.hex);
+            const isRow = contextMenuItemIsRow(currentItem);
+            const itemId = isRow
+                ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex
+                : currentItem === null || currentItem === void 0 ? void 0 : currentItem.id;
+            if (itemId != null) {
+                cameraActions.flyToById(itemId);
             }
-        }),
-        setContextMenuItem: useActionCallback(({ set, snapshot }) => async (rowClientY) => {
-            const element = await snapshot.getPromise(sceneTreeElement);
-            const row = await (element === null || element === void 0 ? void 0 : element.getRowAtClientY(rowClientY));
-            set(contextMenuItem, row);
-        }),
-    };
-}
+        }, disabled: currentItem == null, children: [jsx(VertexIcon, { slot: "icon", name: "paper-airplane", size: "sm" }), jsx("div", { className: "pl-2", children: "Fly To" })] }));
+};
 
 function useSceneItemsOperations({ viewerElement }) {
     const sceneItemsOperation = React__default.useCallback(async (f, ids) => {
@@ -1754,13 +1711,6 @@ function useSceneItemsOperations({ viewerElement }) {
     };
 }
 
-const VertexHideSelectedMenuItem = () => {
-    const viewerHTMLElement = useRecoilValue(viewerElement);
-    const selectedItems = useRecoilValue(selectionSelectedItemIds);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
-    return (jsxs(VertexMenuItem, { "data-testid": "hide-selected-menu-option", onClick: () => sceneItemOperations.hideSelected(), disabled: selectedItems.length === 0, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsx("div", { className: "pl-2", children: "Hide Selected" })] }));
-};
-
 const VertexHideAllMenuItem = () => {
     const viewerHTMLElement = useRecoilValue(viewerElement);
     const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
@@ -1769,27 +1719,27 @@ const VertexHideAllMenuItem = () => {
         }, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsx("div", { className: "pl-2", children: "Hide All Parts" })] }));
 };
 
-const VertexShowOnlyMenuItem = () => {
+const VertexHidePartMenuItem = () => {
     const viewerHTMLElement = useRecoilValue(viewerElement);
     const currentItem = useRecoilValue(contextMenuItem);
     const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
-    return (jsxs(VertexMenuItem, { "data-testid": "show-only-menu-option", onClick: () => {
+    return (jsxs(VertexMenuItem, { "data-testid": "hide-menu-option", onClick: () => {
             var _a;
             const isRow = contextMenuItemIsRow(currentItem);
             const itemId = isRow
                 ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex
-                : currentItem === null || currentItem === void 0 ? void 0 : currentItem.id;
+                : currentItem.id;
             if (itemId != null) {
-                sceneItemOperations.showOnlyItem(itemId);
+                sceneItemOperations.sceneItemsOperation((builder) => builder.hide(), [itemId]);
             }
-        }, disabled: currentItem == null, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsx("div", { className: "pl-2", children: "Show Only Part" })] }));
+        }, disabled: currentItem == null, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsx("div", { className: "pl-2", children: "Hide Part" })] }));
 };
 
-const VertexShowOnlySelectedMenuItem = () => {
+const VertexHideSelectedMenuItem = () => {
     const viewerHTMLElement = useRecoilValue(viewerElement);
     const selectedItems = useRecoilValue(selectionSelectedItemIds);
     const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
-    return (jsxs(VertexMenuItem, { "data-testid": "show-only-selected-menu-option", onClick: () => sceneItemOperations.showOnlySelected(), disabled: selectedItems.length === 0, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsx("div", { className: "pl-2", children: "Show Only Selected" })] }));
+    return (jsxs(VertexMenuItem, { "data-testid": "hide-selected-menu-option", onClick: () => sceneItemOperations.hideSelected(), disabled: selectedItems.length === 0, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsx("div", { className: "pl-2", children: "Hide Selected" })] }));
 };
 
 const VertexShowAllMenuItem = () => {
@@ -1800,32 +1750,106 @@ const VertexShowAllMenuItem = () => {
         }, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsx("div", { className: "pl-2", children: "Show All Parts" })] }));
 };
 
-const VertexFitSelectedMenuItem = () => {
-    const selectedItems = useRecoilValue(selectionSelectedItemIds);
-    const selectedSummary = useRecoilValue(selectionVisibleSummary);
-    const cameraActions = useViewerCameraActions();
-    return (jsxs(VertexMenuItem, { "data-testid": "fit-selected-menu-option", onClick: () => {
-            if ((selectedSummary === null || selectedSummary === void 0 ? void 0 : selectedSummary.boundingBox) != null) {
-                cameraActions.flyToByBoundingBox(selectedSummary.boundingBox);
-            }
-        }, disabled: selectedItems.length === 0, children: [jsx(VertexIcon, { slot: "icon", name: "fit-selected", size: "sm" }), jsx("div", { className: "pl-2", children: "Fit Selected" })] }));
-};
-
-const VertexFlyToMenuItem = () => {
-    const cameraActions = useViewerCameraActions();
+const VertexShowOnlyMenuItem = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
     const currentItem = useRecoilValue(contextMenuItem);
-    return (jsxs(VertexMenuItem, { "data-testid": "fly-to-part-menu-option", onClick: () => {
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxs(VertexMenuItem, { "data-testid": "show-only-menu-option", onClick: () => {
             var _a;
             const isRow = contextMenuItemIsRow(currentItem);
             const itemId = isRow
                 ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex
                 : currentItem === null || currentItem === void 0 ? void 0 : currentItem.id;
             if (itemId != null) {
-                cameraActions.flyToById(itemId);
+                sceneItemOperations.showOnlyItem(itemId);
             }
-        }, disabled: currentItem == null, children: [jsx(VertexIcon, { slot: "icon", name: "paper-airplane", size: "sm" }), jsx("div", { className: "pl-2", children: "Fly To" })] }));
+        }, disabled: currentItem == null, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsx("div", { className: "pl-2", children: "Show Only Part" })] }));
+};
+
+const VertexShowOnlySelectedMenuItem = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const selectedItems = useRecoilValue(selectionSelectedItemIds);
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxs(VertexMenuItem, { "data-testid": "show-only-selected-menu-option", onClick: () => sceneItemOperations.showOnlySelected(), disabled: selectedItems.length === 0, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsx("div", { className: "pl-2", children: "Show Only Selected" })] }));
 };
 
+atom({
+    key: 'sceneTreeLoaderVisible',
+    default: false,
+});
+const sceneTreeElement = atom({
+    key: 'sceneTreeElement',
+    default: undefined,
+});
+const sceneTreeWidth = atom({
+    key: 'sceneTreeWidth',
+    default: undefined,
+});
+selector({
+    key: 'sceneTreeController',
+    get: ({ get }) => { var _a; return (_a = get(sceneTreeElement)) === null || _a === void 0 ? void 0 : _a.controller; },
+    dangerouslyAllowMutability: true,
+});
+
+function useSceneTreeActions() {
+    const selectionActions = useSelectionActions();
+    const viewerCameraActions = useViewerCameraActions();
+    return {
+        toggleSelection: useActionCallback(({ snapshot }) => async (event, node, tree) => {
+            var _a, _b;
+            if (event.defaultPrevented || event.button !== 0) {
+                return;
+            }
+            if (!event.altKey) {
+                if ((event.ctrlKey || event.metaKey) && node.selected) {
+                    tree.deselectItem(node);
+                }
+                else if (node.selected) {
+                    tree.selectItem(node, {
+                        recurseParent: true,
+                    });
+                }
+                else if (!node.selected) {
+                    tree.selectItem(node, {
+                        append: event.ctrlKey || event.metaKey,
+                        range: event.shiftKey,
+                    });
+                }
+            }
+            if (node.id != null) {
+                const lastSelected = await snapshot.getPromise(selectionLastSelected);
+                selectionActions.syncSelection({
+                    id: (_a = node.id) === null || _a === void 0 ? void 0 : _a.hex,
+                    ancestors: (_b = lastSelected === null || lastSelected === void 0 ? void 0 : lastSelected.ancestors) !== null && _b !== void 0 ? _b : [],
+                }, {
+                    selected: event.metaKey || event.ctrlKey ? !node.selected : true,
+                    multiSelect: event.shiftKey || event.metaKey || event.ctrlKey,
+                });
+                // TODO: transform widget interaction
+            }
+        }),
+        toggleExpansion: useActionCallback(() => (event, node, tree) => {
+            tree.toggleExpandItem(node);
+        }),
+        toggleVisibility: useActionCallback(() => (event, node, tree) => {
+            tree.toggleItemVisibility(node);
+        }),
+        flyToRow: useActionCallback(({ snapshot }) => async (rowClientY) => {
+            var _a;
+            const element = await snapshot.getPromise(sceneTreeElement);
+            const row = await (element === null || element === void 0 ? void 0 : element.getRowAtClientY(rowClientY));
+            if (((_a = row === null || row === void 0 ? void 0 : row.node.id) === null || _a === void 0 ? void 0 : _a.hex) != null) {
+                await viewerCameraActions.flyToById(row.node.id.hex);
+            }
+        }),
+        setContextMenuItem: useActionCallback(({ set, snapshot }) => async (rowClientY) => {
+            const element = await snapshot.getPromise(sceneTreeElement);
+            const row = await (element === null || element === void 0 ? void 0 : element.getRowAtClientY(rowClientY));
+            set(contextMenuItem, row);
+        }),
+    };
+}
+
 const DefaultSceneTreeContextMenu = () => {
     return (jsxs("div", { className: "w-56", children: [jsx(VertexHideSelectedMenuItem, {}), jsx(VertexHideAllMenuItem, {}), jsx(VertexShowOnlyMenuItem, {}), jsx(VertexShowOnlySelectedMenuItem, {}), jsx(VertexShowAllMenuItem, {}), jsx(VertexMenuDivider, { className: "md:contents hidden short:hidden" }), jsx(VertexFitSelectedMenuItem, {}), jsx(VertexFlyToMenuItem, {})] }));
 };
@@ -1842,22 +1866,6 @@ const VertexSceneTreeContextMenu = ({ children }) => {
             : (jsx(DefaultSceneTreeContextMenu, {})) }));
 };
 
-const VertexHidePartMenuItem = () => {
-    const viewerHTMLElement = useRecoilValue(viewerElement);
-    const currentItem = useRecoilValue(contextMenuItem);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
-    return (jsxs(VertexMenuItem, { "data-testid": "hide-menu-option", onClick: () => {
-            var _a;
-            const isRow = contextMenuItemIsRow(currentItem);
-            const itemId = isRow
-                ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex
-                : currentItem.id;
-            if (itemId != null) {
-                sceneItemOperations.sceneItemsOperation((builder) => builder.hide(), [itemId]);
-            }
-        }, disabled: currentItem == null, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsx("div", { className: "pl-2", children: "Hide Part" })] }));
-};
-
 const DefaultViewerContextMenu = () => {
     return (jsxs("div", { className: "w-56", children: [jsx(VertexHidePartMenuItem, {}), jsx(VertexHideSelectedMenuItem, {}), jsx(VertexHideAllMenuItem, {}), jsx(VertexShowOnlyMenuItem, {}), jsx(VertexShowOnlySelectedMenuItem, {}), jsx(VertexShowAllMenuItem, {}), jsx(VertexMenuDivider, { className: "md:contents hidden short:hidden" }), jsx(VertexFitSelectedMenuItem, {}), jsx(VertexFlyToMenuItem, {})] }));
 };
@@ -1995,6 +2003,24 @@ const VertexSceneTreeTableLayout = (sdkProps) => {
         }) })));
 };
 
+const VertexSceneTreeExpandAll = () => {
+    const sceneTreeHTMLElement = useRecoilValue(sceneTreeElement);
+    return (jsx(VertexTooltip, { className: "w-auto", content: "Expand All", placement: "top", children: jsx(VertexIcon, { size: "sm", "data-testid": "expand-all-icon", className: "h-6 w-6 hover:bg-neutral-300 rounded cursor-pointer", name: "expand-all", onClick: () => {
+                sceneTreeHTMLElement === null || sceneTreeHTMLElement === void 0 ? void 0 : sceneTreeHTMLElement.expandAll();
+            } }) }));
+};
+
+const VertexSceneTreeCollapseAll = () => {
+    const sceneTreeHTMLElement = useRecoilValue(sceneTreeElement);
+    return (jsx(VertexTooltip, { className: "w-auto", content: "Collapse All", placement: "top", children: jsx(VertexIcon, { size: "sm", className: "h-6 w-6 hover:bg-neutral-300 rounded cursor-pointer", "data-testid": "collapse-all-icon", name: "collapse-all", onClick: () => {
+                sceneTreeHTMLElement === null || sceneTreeHTMLElement === void 0 ? void 0 : sceneTreeHTMLElement.collapseAll();
+            } }) }));
+};
+
+function VertexSceneTreeToolbar() {
+    return (jsx(VertexSceneTreeToolbar$1, { className: "h-10 border-b border-neutral-300 box-border", children: jsxs("div", { className: "flex flex-shrink-0 w-full text-neutral-700 items-center gap mx-2", children: [jsx(VertexSceneTreeExpandAll, {}), jsx(VertexSceneTreeCollapseAll, {})] }) }));
+}
+
 const VertexSceneTree = (_a) => {
     var { id, font, backgroundColors, children, style, onPointerDown, onClick, onToggleSelection, onToggleExpansion, onToggleVisibility, className, rowData } = _a, sdkProps = __rest(_a, ["id", "font", "backgroundColors", "children", "style", "onPointerDown", "onClick", "onToggleSelection", "onToggleExpansion", "onToggleVisibility", "className", "rowData"]);
     const config = useRecoilValue(sdkConfig);
@@ -2034,7 +2060,7 @@ const VertexSceneTree = (_a) => {
             var _a;
             const providedRowData = (_a = rowData === null || rowData === void 0 ? void 0 : rowData(row)) !== null && _a !== void 0 ? _a : {};
             return Object.assign({ handleExpansion: wrappedExpansionHandler, handleSelection: wrappedSelectionHandler, handleVisibility: wrappedVisibilityHandler }, providedRowData);
-        } }, sdkProps, { children: [jsx(VertexSceneTreeTableLayout, {}), children] })));
+        } }, sdkProps, { children: [jsx(VertexSceneTreeToolbar, {}), jsx(VertexSceneTreeTableLayout, {}), children] })));
 };
 
 const useSynchronizedProp = (state, value) => {
@@ -2355,6 +2381,19 @@ const VertexToolbar = ({ children }) => {
     return (jsx(VertexViewerToolbar, { placement: 'bottom-center', children: hasDefinedChildren ? (jsx(VertexViewerToolbarGroup, { className: "p-1 border border-neutral-200 rounded bg-neutral-100 opacity-95", children: children })) : (jsx(DefaultToolbar, {})) }));
 };
 
+const VertexViewerSceneReset = ({ onReset }) => {
+    const crossSectioningActions = useCrossSectioningActions();
+    const selectionActions = useSelectionActions();
+    const viewerSceneActions = useViewerSceneActions();
+    const handleReset = async () => {
+        await crossSectioningActions.disable();
+        selectionActions.resetSelectionState();
+        onReset === null || onReset === void 0 ? void 0 : onReset();
+        await viewerSceneActions.reset();
+    };
+    return (jsx(VertexTooltip, { content: "Reset View", children: jsx(VertexIconButton, { iconName: "reset", className: "flex bg-white opacity-70 hover:opacity-100 text-neutral-900 hover:text-neutral-700 hover:bg-neutral-200 rounded p-1 cursor-pointer", "data-testid": "viewer-reset-tool-button", onClick: handleReset, variant: "plain" }) }));
+};
+
 function useViewerFrameActions() {
     return {
         frameDrawn: useActionCallback(({ set, reset, snapshot }) => async (event) => {
@@ -2389,8 +2428,15 @@ const BoxSelectionTool = () => {
 };
 
 const VertexViewerViewCube = (_a) => {
-    var { placement } = _a, sdkProps = __rest(_a, ["placement"]);
-    return (jsx(VertexViewerToolbar, { "data-testid": "view-cube-toolbar", placement: placement !== null && placement !== void 0 ? placement : 'top-right', children: jsx(VertexViewerViewCube$1, Object.assign({ className: "m-7" }, sdkProps)) }));
+    var { placement, children } = _a, sdkProps = __rest(_a, ["placement", "children"]);
+    const childrenAsArray = Array.isArray(children)
+        ? children
+        : [children];
+    const definedChildrenWithoutViewCube = childrenAsArray
+        .filter((c) => !React__default.isValidElement(c) || c.type !== VertexViewerViewCube$1)
+        .filter((c) => c != null && c !== false);
+    const viewCube = childrenAsArray.find((c) => React__default.isValidElement(c) && c.type === VertexViewerViewCube$1);
+    return (jsxs(VertexViewerToolbar, { direction: "vertical", "data-testid": "view-cube-toolbar", placement: placement !== null && placement !== void 0 ? placement : 'top-right', children: [viewCube !== null && viewCube !== void 0 ? viewCube : jsx(VertexViewerViewCube$1, Object.assign({ className: "m-7" }, sdkProps)), definedChildrenWithoutViewCube.length === 0 ? (jsx("div", { className: "flex items-center justify-center mt-3", children: jsx(VertexViewerSceneReset, {}) })) : (jsx("div", { className: "mt-3", children: definedChildrenWithoutViewCube }))] }));
 };
 
 const VertexViewer = (_a) => {
@@ -2475,5 +2521,5 @@ var index = /*#__PURE__*/Object.freeze({
    get AssemblyFontFace () { return AssemblyFontFace; }
 });
 
-export { index$3 as CrossSection, index$2 as Hits, index as SceneTree, index$1 as Selection, VertexContextMenu, VertexFitAllButton, VertexFitSelectedMenuItem, VertexFlyToMenuItem, VertexHideAllMenuItem, VertexHidePartMenuItem, VertexHideSelectedMenuItem, VertexPanButton, VertexRotateButton, VertexSceneTree, VertexSceneTreeContextMenu, VertexSceneTreeTableLayout, VertexShowAllMenuItem, VertexShowOnlyMenuItem, VertexShowOnlySelectedMenuItem, VertexToolbar, VertexViewer, VertexViewerContextMenu, VertexViewerCrossSectionButton, VertexViewerToolbarDivider, VertexViewerToolkitRoot, VertexViewerViewCube, VertexZoomButton };
+export { index$3 as CrossSection, index$2 as Hits, index as SceneTree, index$1 as Selection, VertexContextMenu, VertexFitAllButton, VertexFitSelectedMenuItem, VertexFlyToMenuItem, VertexHideAllMenuItem, VertexHidePartMenuItem, VertexHideSelectedMenuItem, VertexPanButton, VertexRotateButton, VertexSceneTree, VertexSceneTreeContextMenu, VertexSceneTreeTableLayout, VertexShowAllMenuItem, VertexShowOnlyMenuItem, VertexShowOnlySelectedMenuItem, VertexToolbar, VertexViewer, VertexViewerContextMenu, VertexViewerCrossSectionButton, VertexViewerSceneReset, VertexViewerToolbarDivider, VertexViewerToolkitRoot, VertexViewerViewCube, VertexZoomButton };
 //# sourceMappingURL=bundle.esm.js.map