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

package/dist/bundle.cjs.js

@@ -592,6 +592,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,
+            });
+        }),
     };
 }
 
@@ -1653,82 +1661,31 @@ var index$1 = /*#__PURE__*/Object.freeze({
    useSelectionActions: useSelectionActions
 });
 
-recoil.atom({
-    key: 'sceneTreeLoaderVisible',
-    default: false,
-});
-const sceneTreeElement = recoil.atom({
-    key: 'sceneTreeElement',
-    default: undefined,
-});
-const sceneTreeWidth = recoil.atom({
-    key: 'sceneTreeWidth',
-    default: undefined,
-});
-recoil.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 = recoil.useRecoilValue(selectionSelectedItemIds);
+    const selectedSummary = recoil.useRecoilValue(selectionVisibleSummary);
+    const cameraActions = useViewerCameraActions();
+    return (jsxRuntime.jsxs(uiReact.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: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "fit-selected", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Fit Selected" })] }));
+};
+
+const VertexFlyToMenuItem = () => {
+    const cameraActions = useViewerCameraActions();
+    const currentItem = recoil.useRecoilValue(contextMenuItem);
+    return (jsxRuntime.jsxs(uiReact.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: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "paper-airplane", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Fly To" })] }));
+};
 
 function useSceneItemsOperations({ viewerElement }) {
     const sceneItemsOperation = React.useCallback(async (f, ids) => {
@@ -1774,13 +1731,6 @@ function useSceneItemsOperations({ viewerElement }) {
     };
 }
 
-const VertexHideSelectedMenuItem = () => {
-    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
-    const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
-    return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "hide-selected-menu-option", onClick: () => sceneItemOperations.hideSelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Hide Selected" })] }));
-};
-
 const VertexHideAllMenuItem = () => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
@@ -1789,27 +1739,27 @@ const VertexHideAllMenuItem = () => {
         }, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Hide All Parts" })] }));
 };
 
-const VertexShowOnlyMenuItem = () => {
+const VertexHidePartMenuItem = () => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const currentItem = recoil.useRecoilValue(contextMenuItem);
     const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
-    return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "show-only-menu-option", onClick: () => {
+    return (jsxRuntime.jsxs(uiReact.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: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Show Only Part" })] }));
+        }, disabled: currentItem == null, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Hide Part" })] }));
 };
 
-const VertexShowOnlySelectedMenuItem = () => {
+const VertexHideSelectedMenuItem = () => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
     const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
-    return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "show-only-selected-menu-option", onClick: () => sceneItemOperations.showOnlySelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Show Only Selected" })] }));
+    return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "hide-selected-menu-option", onClick: () => sceneItemOperations.hideSelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Hide Selected" })] }));
 };
 
 const VertexShowAllMenuItem = () => {
@@ -1820,32 +1770,106 @@ const VertexShowAllMenuItem = () => {
         }, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Show All Parts" })] }));
 };
 
-const VertexFitSelectedMenuItem = () => {
-    const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
-    const selectedSummary = recoil.useRecoilValue(selectionVisibleSummary);
-    const cameraActions = useViewerCameraActions();
-    return (jsxRuntime.jsxs(uiReact.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: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "fit-selected", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Fit Selected" })] }));
-};
-
-const VertexFlyToMenuItem = () => {
-    const cameraActions = useViewerCameraActions();
+const VertexShowOnlyMenuItem = () => {
+    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const currentItem = recoil.useRecoilValue(contextMenuItem);
-    return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "fly-to-part-menu-option", onClick: () => {
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxRuntime.jsxs(uiReact.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: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "paper-airplane", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Fly To" })] }));
+        }, disabled: currentItem == null, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Show Only Part" })] }));
+};
+
+const VertexShowOnlySelectedMenuItem = () => {
+    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
+    const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "show-only-selected-menu-option", onClick: () => sceneItemOperations.showOnlySelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Show Only Selected" })] }));
 };
 
+recoil.atom({
+    key: 'sceneTreeLoaderVisible',
+    default: false,
+});
+const sceneTreeElement = recoil.atom({
+    key: 'sceneTreeElement',
+    default: undefined,
+});
+const sceneTreeWidth = recoil.atom({
+    key: 'sceneTreeWidth',
+    default: undefined,
+});
+recoil.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 (jsxRuntime.jsxs("div", { className: "w-56", children: [jsxRuntime.jsx(VertexHideSelectedMenuItem, {}), jsxRuntime.jsx(VertexHideAllMenuItem, {}), jsxRuntime.jsx(VertexShowOnlyMenuItem, {}), jsxRuntime.jsx(VertexShowOnlySelectedMenuItem, {}), jsxRuntime.jsx(VertexShowAllMenuItem, {}), jsxRuntime.jsx(uiReact.VertexMenuDivider, { className: "md:contents hidden short:hidden" }), jsxRuntime.jsx(VertexFitSelectedMenuItem, {}), jsxRuntime.jsx(VertexFlyToMenuItem, {})] }));
 };
@@ -1862,22 +1886,6 @@ const VertexSceneTreeContextMenu = ({ children }) => {
             : (jsxRuntime.jsx(DefaultSceneTreeContextMenu, {})) }));
 };
 
-const VertexHidePartMenuItem = () => {
-    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
-    const currentItem = recoil.useRecoilValue(contextMenuItem);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
-    return (jsxRuntime.jsxs(uiReact.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: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Hide Part" })] }));
-};
-
 const DefaultViewerContextMenu = () => {
     return (jsxRuntime.jsxs("div", { className: "w-56", children: [jsxRuntime.jsx(VertexHidePartMenuItem, {}), jsxRuntime.jsx(VertexHideSelectedMenuItem, {}), jsxRuntime.jsx(VertexHideAllMenuItem, {}), jsxRuntime.jsx(VertexShowOnlyMenuItem, {}), jsxRuntime.jsx(VertexShowOnlySelectedMenuItem, {}), jsxRuntime.jsx(VertexShowAllMenuItem, {}), jsxRuntime.jsx(uiReact.VertexMenuDivider, { className: "md:contents hidden short:hidden" }), jsxRuntime.jsx(VertexFitSelectedMenuItem, {}), jsxRuntime.jsx(VertexFlyToMenuItem, {})] }));
 };
@@ -2015,6 +2023,24 @@ const VertexSceneTreeTableLayout = (sdkProps) => {
         }) })));
 };
 
+const VertexSceneTreeExpandAll = () => {
+    const sceneTreeHTMLElement = recoil.useRecoilValue(sceneTreeElement);
+    return (jsxRuntime.jsx(uiReact.VertexTooltip, { className: "w-auto", content: "Expand All", placement: "top", children: jsxRuntime.jsx(uiReact.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 = recoil.useRecoilValue(sceneTreeElement);
+    return (jsxRuntime.jsx(uiReact.VertexTooltip, { className: "w-auto", content: "Collapse All", placement: "top", children: jsxRuntime.jsx(uiReact.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 (jsxRuntime.jsx(viewerReact.VertexSceneTreeToolbar, { className: "h-10 border-b border-neutral-300 box-border", children: jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 w-full text-neutral-700 items-center gap mx-2", children: [jsxRuntime.jsx(VertexSceneTreeExpandAll, {}), jsxRuntime.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 = recoil.useRecoilValue(sdkConfig);
@@ -2054,7 +2080,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: [jsxRuntime.jsx(VertexSceneTreeTableLayout, {}), children] })));
+        } }, sdkProps, { children: [jsxRuntime.jsx(VertexSceneTreeToolbar, {}), jsxRuntime.jsx(VertexSceneTreeTableLayout, {}), children] })));
 };
 
 const useSynchronizedProp = (state, value) => {
@@ -2375,6 +2401,19 @@ const VertexToolbar = ({ children }) => {
     return (jsxRuntime.jsx(viewerReact.VertexViewerToolbar, { placement: 'bottom-center', children: hasDefinedChildren ? (jsxRuntime.jsx(viewerReact.VertexViewerToolbarGroup, { className: "p-1 border border-neutral-200 rounded bg-neutral-100 opacity-95", children: children })) : (jsxRuntime.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 (jsxRuntime.jsx(uiReact.VertexTooltip, { content: "Reset View", children: jsxRuntime.jsx(uiReact.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) => {
@@ -2409,8 +2448,15 @@ const BoxSelectionTool = () => {
 };
 
 const VertexViewerViewCube = (_a) => {
-    var { placement } = _a, sdkProps = __rest(_a, ["placement"]);
-    return (jsxRuntime.jsx(viewerReact.VertexViewerToolbar, { "data-testid": "view-cube-toolbar", placement: placement !== null && placement !== void 0 ? placement : 'top-right', children: jsxRuntime.jsx(viewerReact.VertexViewerViewCube, 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.isValidElement(c) || c.type !== viewerReact.VertexViewerViewCube)
+        .filter((c) => c != null && c !== false);
+    const viewCube = childrenAsArray.find((c) => React.isValidElement(c) && c.type === viewerReact.VertexViewerViewCube);
+    return (jsxRuntime.jsxs(viewerReact.VertexViewerToolbar, { direction: "vertical", "data-testid": "view-cube-toolbar", placement: placement !== null && placement !== void 0 ? placement : 'top-right', children: [viewCube !== null && viewCube !== void 0 ? viewCube : jsxRuntime.jsx(viewerReact.VertexViewerViewCube, Object.assign({ className: "m-7" }, sdkProps)), definedChildrenWithoutViewCube.length === 0 ? (jsxRuntime.jsx("div", { className: "flex items-center justify-center mt-3", children: jsxRuntime.jsx(VertexViewerSceneReset, {}) })) : (jsxRuntime.jsx("div", { className: "mt-3", children: definedChildrenWithoutViewCube }))] }));
 };
 
 const VertexViewer = (_a) => {
@@ -2518,6 +2564,7 @@ exports.VertexToolbar = VertexToolbar;
 exports.VertexViewer = VertexViewer;
 exports.VertexViewerContextMenu = VertexViewerContextMenu;
 exports.VertexViewerCrossSectionButton = VertexViewerCrossSectionButton;
+exports.VertexViewerSceneReset = VertexViewerSceneReset;
 exports.VertexViewerToolbarDivider = VertexViewerToolbarDivider;
 exports.VertexViewerToolkitRoot = VertexViewerToolkitRoot;
 exports.VertexViewerViewCube = VertexViewerViewCube;