Add an option to open a blank connection

iTwin · Nov 5, 2024 · 406083d · 406083d
1 parent 8483805
commit 406083d
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 16 deletions.
diff --git a/packages/test-app-frontend/src/App/App.tsx b/packages/test-app-frontend/src/App/App.tsx
@@ -72,6 +72,7 @@ function Main(): ReactElement {
             <Route path=":iTwinId" element={<IModelBrowser />} />
           </Route>
           <Route path="open-imodel/:iTwinId/:iModelId" element={<OpenIModel iTwinJsApp={iTwinJsApp} />} />
+          <Route path="open-blank-connection" element={<OpenBlankConnection iTwinJsApp={iTwinJsApp} />} />
         </Route>
       </Routes>
     </>
@@ -189,3 +190,15 @@ function OpenIModel(props: OpenIModelProps): ReactElement | null {
 
   return <props.iTwinJsApp iTwinId={iTwinId} iModelId={iModelId} />;
 }
+
+interface OpenBlankConnectionProps {
+  iTwinJsApp: typeof ITwinJsApp | undefined;
+}
+
+function OpenBlankConnection(props: OpenBlankConnectionProps): ReactElement {
+  if (props.iTwinJsApp === undefined) {
+    return <LoadingScreen>Initializing...</LoadingScreen>;
+  }
+
+  return <props.iTwinJsApp iTwinId="" iModelId="" />;
+}
diff --git a/packages/test-app-frontend/src/App/ITwinJsApp/ITwinJsApp.tsx b/packages/test-app-frontend/src/App/ITwinJsApp/ITwinJsApp.tsx
@@ -3,11 +3,11 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import {
-  BentleyCloudRpcManager, BentleyCloudRpcParams, IModelReadRpcInterface, IModelTileRpcInterface,
+  BentleyCloudRpcManager, BentleyCloudRpcParams, Cartographic, IModelReadRpcInterface, IModelTileRpcInterface,
   type AuthorizationClient,
 } from "@itwin/core-common";
 import {
-  CheckpointConnection, IModelApp, type IModelConnection, type Viewport, type ViewState,
+  BlankConnection, CheckpointConnection, IModelApp, type IModelConnection, type Viewport, type ViewState,
 } from "@itwin/core-frontend";
 import { ITwinLocalization } from "@itwin/core-i18n";
 import { UiCore } from "@itwin/core-react";
@@ -96,7 +96,17 @@ function useIModel(
       IModelApp.authorizationClient = authorizationClient;
 
       let disposed = false;
-      const iModelPromise = CheckpointConnection.openRemote(iTwinId, iModelId);
+      const iModelPromise = iModelId === ""
+        ? (
+          Promise.resolve(
+            BlankConnection.create({
+              name: "saved-viws-test-app-blank-connection",
+              location: Cartographic.createZero(),
+              extents: { low: { x: 0.0, y: 0.0, z: 0.0 }, high: { x: 1.0, y: 1.0, z: 1.0 } },
+            }),
+          )
+        )
+        : CheckpointConnection.openRemote(iTwinId, iModelId);
       void (async () => {
         try {
           const openedIModel = await iModelPromise;

diff --git a/packages/test-app-frontend/src/App/ITwinJsApp/SavedViewsWidget.tsx b/packages/test-app-frontend/src/App/ITwinJsApp/SavedViewsWidget.tsx
@@ -70,6 +70,19 @@ export function SavedViewsWidget(props: SavedViewsWidgetProps): ReactElement {
     return <LoadingScreen>Loading saved views...</LoadingScreen>;
   }
 
+  const handleCaptureSavedView = async () => {
+    try {
+      const savedViewData = await captureSavedViewData({ viewport: props.viewport });
+      toaster.positive("Captured saved view. See output in console.");
+      // eslint-disable-next-line no-console
+      console.log(savedViewData);
+    } catch (error) {
+      toaster.negative("Failed to capture saved view.");
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  };
+
   const handleCreateView = async () => {
     const savedViewData = await captureSavedViewData({ viewport: props.viewport });
     const savedViewId = await savedViews.createSavedView({ displayName: "0 Saved View Name" }, savedViewData);
@@ -124,7 +137,14 @@ export function SavedViewsWidget(props: SavedViewsWidgetProps): ReactElement {
       alignContent: "start",
       minHeight: 0,
     }}>
-      <div style={{ display: "flex", gap: "var(--iui-size-s)", paddingTop: "var(--iui-size-s)", alignItems: "center" }}>
+      <div style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "var(--iui-size-s)",
+        paddingTop: "var(--iui-size-s)",
+        alignItems: "center",
+      }}>
+        <Button onClick={handleCaptureSavedView}>Capture saved view</Button>
         <Button onClick={handleCreateView}>Create saved view</Button>
         <Button onClick={() => savedViews.createGroup("0 Group")}>Create group</Button>
         {operationsInProgress > 0 && "Updating saved views..."}

diff --git a/packages/test-app-frontend/src/App/imodel-browser/ITwinBrowser.tsx b/packages/test-app-frontend/src/App/imodel-browser/ITwinBrowser.tsx
@@ -2,7 +2,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { SvgProject } from "@itwin/itwinui-icons-react";
+import { SvgImodelHollow, SvgProject } from "@itwin/itwinui-icons-react";
 import { FluidGrid, PageLayout } from "@itwin/itwinui-layouts-react";
 import { Surface, Text, Tile } from "@itwin/itwinui-react";
 import { type ReactElement } from "react";
@@ -27,20 +27,38 @@ export function ITwinBrowser(): ReactElement {
     { authorizationClient },
   );
 
+  const navigate = useNavigate();
+
   return (
     <PageLayout.Content padded>
       <div style={{ display: "grid", gap: "var(--iui-size-xl)" }}>
-        <Surface style={{ padding: "var(--iui-size-l)" }}>
-          <div style={{ display: "grid", gap: "var(--iui-size-m)" }}>
-            <Text variant="title">Recent</Text>
-            <Paginator
-              initialUrl={applyUrlPrefix("https://api.bentley.com/itwins/recents?subclass=Project&$top=5")}
-              fetch={fetchITwins}
-            >
-              {(result) => <ITwinTileGrid iTwins={result.iTwins} />}
-            </Paginator>
-          </div>
-        </Surface>
+        <div style={{ display: "grid", grid: "1fr / auto 1fr" }}>
+          <Tile.Wrapper style={{ margin: "var(--iui-size-l)", width: "calc(10 * var(--iui-size-l))" }}>
+            <Tile.ThumbnailArea style={{ height: "calc(5 * var(--iui-size-l))" }}>
+              <Tile.ThumbnailPicture>
+                <SvgImodelHollow />
+              </Tile.ThumbnailPicture>
+            </Tile.ThumbnailArea>
+            <Tile.Name>
+              <Tile.NameLabel>
+                <Tile.Action onClick={() => navigate("/itwinjs/open-blank-connection")}>
+                  Open  blank connection
+                </Tile.Action>
+              </Tile.NameLabel>
+            </Tile.Name>
+          </Tile.Wrapper>
+          <Surface style={{ padding: "var(--iui-size-l)" }}>
+            <div style={{ display: "grid", gap: "var(--iui-size-m)" }}>
+              <Text variant="title">Recent</Text>
+              <Paginator
+                initialUrl={applyUrlPrefix("https://api.bentley.com/itwins/recents?subclass=Project&$top=5")}
+                fetch={fetchITwins}
+              >
+                {(result) => <ITwinTileGrid iTwins={result.iTwins} />}
+              </Paginator>
+            </div>
+          </Surface>
+        </div>
         <div style={{ display: "grid", gap: "var(--iui-size-m)" }}>
           <Text variant="title">All iTwins</Text>
           <Paginator