Test viewr: Use selection-related status bar items from viewer instead of our own (#1471)

Author: grigasp

apps/test-viewer/src/components/Viewer.tsx

@@ -10,16 +10,17 @@ import { SchemaFormatsProvider, SchemaUnitProvider } from "@itwin/ecschema-metad
 import { ECSchemaRpcInterface } from "@itwin/ecschema-rpcinterface-common";
 import { FrontendDevTools } from "@itwin/frontend-devtools";
 import { ArcGisAccessClient } from "@itwin/map-layers-auth";
-import { Viewer as WebViewer } from "@itwin/web-viewer-react";
+import { QuantityFormatting } from "@itwin/quantity-formatting-react";
+import { ViewerStatusbarItemsProvider, Viewer as WebViewer } from "@itwin/web-viewer-react";
 import { unifiedSelectionStorage } from "../SelectionStorage";
 import { getUiProvidersConfig } from "../UiProvidersConfig";
 import { ApiKeys } from "./ApiKeys";
 import { useAuthorizationContext } from "./Authorization";
-import { statusBarActionsProvider, ViewerOptionsProvider } from "./ViewerOptions";
 import { FormatManager } from "./FormatManager";
+import { statusBarActionsProvider, ViewerOptionsProvider } from "./ViewerOptions";
 
+import type { ComponentPropsWithoutRef } from "react";
 import type { UiProvidersConfig } from "../UiProvidersConfig";
-import { QuantityFormatting } from "@itwin/quantity-formatting-react";
 
 export function Viewer() {
   return (
@@ -68,7 +69,11 @@ function ViewerWithOptions() {
       enablePerformanceMonitors={false}
       onIModelAppInit={onIModelAppInit}
       // Only set providers once IModelAppInit has fired, otherwise map-layers objects will fail to initialize
-      uiProviders={uiConfig ? [...uiConfig.getUiItemsProviders(), statusBarActionsProvider] : []}
+      uiProviders={
+        uiConfig
+          ? [...uiConfig.getUiItemsProviders(), new ViewerStatusbarItemsProvider({ selectionScope: true, selectionInfo: true }), statusBarActionsProvider]
+          : []
+      }
       defaultUiConfig={{
         hideNavigationAid: false,
         hideStatusBar: false,
@@ -90,10 +95,38 @@ function ViewerWithOptions() {
           selectionStorage: unifiedSelectionStorage,
         },
       }}
+      selectionStorage={unifiedSelectionStorage}
+      selectionScopes={selectionScopes}
     />
   );
 }
 
+const selectionScopes: ComponentPropsWithoutRef<typeof WebViewer>["selectionScopes"] = {
+  available: {
+    element: {
+      def: { id: "element" },
+      label: "Element",
+    },
+    assembly: {
+      def: { id: "element", ancestorLevel: 1 },
+      label: "Assembly",
+    },
+    "top-assembly": {
+      def: { id: "element", ancestorLevel: 2 },
+      label: "Top assembly",
+    },
+    model: {
+      def: { id: "model" },
+      label: "Model",
+    },
+    category: {
+      def: { id: "category" },
+      label: "Category",
+    },
+  },
+  active: "element",
+};
+
 function onIModelConnected(imodel: IModelConnection) {
   const setupFormatsProvider = async () => {
     try {

apps/test-viewer/src/components/ViewerOptions.tsx

@@ -3,15 +3,13 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useState } from "react";
 import { StatusBarSection, useActiveIModelConnection } from "@itwin/appui-react";
 import { TransientIdSequence } from "@itwin/core-bentley";
 import { SvgSelection, SvgVisibilityShow, SvgZoomInCircular } from "@itwin/itwinui-icons-react";
-import { IconButton, Select } from "@itwin/itwinui-react";
-import { Presentation } from "@itwin/presentation-frontend";
+import { IconButton } from "@itwin/itwinui-react";
 import { QuantityFormatButton } from "./QuantityFormatButton";
 
-import type { SelectionScopesManager } from "@itwin/presentation-frontend";
 import type { PropsWithChildren } from "react";
 import type { UiItemsProvider } from "@itwin/appui-react";
 
@@ -61,12 +59,6 @@ export const statusBarActionsProvider: UiItemsProvider = {
       itemPriority: 2,
       section: StatusBarSection.Left,
     },
-    {
-      id: `selectionScopeSelectorButton`,
-      content: <SelectionScopeSelectorButton />,
-      itemPriority: 3,
-      section: StatusBarSection.Left,
-    },
     {
       id: `addTransientElementToSelectionButton`,
       content: <AddTransientElementToSelectionButton />,
@@ -79,12 +71,6 @@ export const statusBarActionsProvider: UiItemsProvider = {
       itemPriority: 5,
       section: StatusBarSection.Left,
     },
-    {
-      id: `selectedElementsCount`,
-      content: <SelectedElementsCountField />,
-      itemPriority: 1,
-      section: StatusBarSection.Right,
-    },
   ],
 };
 
@@ -106,67 +92,6 @@ function ToggleTreeNodesSelectionButton() {
   );
 }
 
-function SelectionScopeSelectorButton() {
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
-  const [activeScope, setActiveScope] = useState(getScopeId(Presentation.selection.scopes.activeScope));
-  return (
-    <Select
-      options={Object.entries(scopes).map(([key, { label }]) => ({
-        value: key,
-        label,
-      }))}
-      value={activeScope}
-      onChange={(value) => {
-        const scopeId = value as keyof typeof scopes;
-        setActiveScope(scopeId);
-        // TODO: Viewer should allow specifying the active selection scope without using `Presentation.selection`
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        Presentation.selection.scopes.activeScope = scopes[scopeId].props;
-      }}
-    />
-  );
-}
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-function getScopeId(scopeArg: SelectionScopesManager["activeScope"]): keyof typeof scopes {
-  if (!scopeArg) {
-    return "element";
-  }
-  if (typeof scopeArg === "string") {
-    return scopeArg as keyof typeof scopes;
-  }
-  if (scopeArg.id === "element" && "ancestorLevel" in scopeArg) {
-    if (scopeArg.ancestorLevel === 1) {
-      return "assembly";
-    }
-    if (scopeArg.ancestorLevel === 2) {
-      return "top-assembly";
-    }
-  }
-  return scopeArg.id as keyof typeof scopes;
-}
-const scopes = {
-  element: {
-    props: { id: "element" },
-    label: "Element",
-  },
-  assembly: {
-    props: { id: "element", ancestorLevel: 1 },
-    label: "Assembly",
-  },
-  "top-assembly": {
-    props: { id: "element", ancestorLevel: 2 },
-    label: "Top assembly",
-  },
-  model: {
-    props: { id: "model" },
-    label: "Model",
-  },
-  category: {
-    props: { id: "category" },
-    label: "Category",
-  },
-};
-
 function AddTransientElementToSelectionButton() {
   const [sequence] = useState(new TransientIdSequence());
   const imodel = useActiveIModelConnection();
@@ -179,14 +104,3 @@ function AddTransientElementToSelectionButton() {
     </IconButton>
   );
 }
-
-function SelectedElementsCountField() {
-  const imodel = useActiveIModelConnection();
-  const [count, setCount] = useState(imodel?.selectionSet.size ?? 0);
-  useEffect(() => {
-    return imodel?.selectionSet.onChanged.addListener(() => {
-      setCount(imodel.selectionSet.size);
-    });
-  }, [imodel]);
-  return `Selected elements: ${count}`;
-}