iTwin · GerardasB · Nov 22, 2024 · Nov 22, 2024 · Nov 22, 2024 · Nov 22, 2024
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1,viewport-fit=cover,shrink-to-fit=no"
+    />
+    <title>AppUI Cesium App</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,38 @@
+{
+  "name": "cesium-app",
+  "type": "module",
+  "description": "AppUI Cesium Application",
+  "private": true,
+  "license": "MIT",
+  "version": "0.0.0",
+  "homepage": "http://localhost:3000/",
+  "scripts": {
+    "build": "vite build",
+    "start": "vite"
+  },
+  "author": {
+    "name": "Bentley Systems, Inc.",
+    "url": "http://www.bentley.com"
+  },
+  "devDependencies": {
+    "vite": "^5.4.7",
+    "@types/react": "^18.3.12",
+    "vite-plugin-static-copy": "^1.0.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iTwin/appui.git",
+    "directory": "apps/cesium-app"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@itwin/appui-react": "workspace:*",
+    "@itwin/core-react": "workspace:*",
+    "@bentley/icons-generic": "^1.0.34",
+    "cesium": "~1.123.1",
+    "zustand": "^4.4.1",
+    "@itwin/itwinui-icons-react": "^2.8.0",
+    "@itwin/itwinui-react": "^3.15.0"
+  }
+}
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      html,
+      body {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        overflow: hidden;
+      }
+
+      #root {
+        height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
@@ -0,0 +1,133 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import {
+  ConditionalStringValue,
+  StagePanelLocation,
+  StagePanelSection,
+  StatusBarItemUtilities,
+  SyncUiEventDispatcher,
+  ToolbarItemUtilities,
+  ToolbarOrientation,
+  ToolbarUsage,
+  UiItemsProvider,
+  useConditionalValue,
+} from "@itwin/appui-react";
+import { Button, Input } from "@itwin/itwinui-react";
+import { useAppStore } from "./useAppStore";
+import { Command, Fullscreen, GeocoderViewModel, Viewer } from "cesium";
+import {
+  SvgHome,
+  SvgWindowCollapse,
+  SvgWindowFullScreen,
+} from "@itwin/itwinui-icons-react";
+
+export function createCesiumUIItemsProvider() {
+  return {
+    id: "cesium-provider",
+    getToolbarItems: () => [
+      ToolbarItemUtilities.createActionItem({
+        id: "home",
+        label: "Home",
+        icon: <SvgHome />,
+        execute: () => {
+          const viewer = useAppStore.getState().viewer;
+          if (!viewer) return;
+
+          viewer.scene.camera.flyHome();
+        },
+        layouts: {
+          standard: {
+            orientation: ToolbarOrientation.Horizontal,
+            usage: ToolbarUsage.ContentManipulation,
+          },
+        },
+      }),
+    ],
+    getWidgets: () => {
+      return [
+        {
+          id: "geocoder",
+          label: "Geocoder",
+          canPopout: true,
+          content: <GeocoderWidget />,
+          layouts: {
+            standard: {
+              location: StagePanelLocation.Right,
+              section: StagePanelSection.Start,
+            },
+          },
+        },
+      ];
+    },
+    getStatusBarItems: () => [
+      StatusBarItemUtilities.createActionItem({
+        id: "fullscreen",
+        tooltip: new ConditionalStringValue(() => {
+          if (Fullscreen.fullscreen) return "Exit fullscreen";
+          return "Enter fullscreen";
+        }, ["test-app:fullscreen"]),
+        icon: <FullScreenIcon />,
+        execute: () => {
+          if (Fullscreen.fullscreen) {
+            Fullscreen.exitFullscreen();
+            return;
+          }
+          Fullscreen.requestFullscreen(document.body);
+        },
+      }),
+    ],
+  } satisfies UiItemsProvider;
+}
+
+function FullScreenIcon() {
+  const fullScreen = useConditionalValue(
+    () => Fullscreen.fullscreen,
+    ["test-app:fullscreen"]
+  );
+  React.useEffect(() => {
+    const listener = () => {
+      // Needed to update the label.
+      SyncUiEventDispatcher.dispatchSyncUiEvent("test-app:fullscreen");
+    };
+    document.addEventListener(Fullscreen.changeEventName, listener);
+    return () => {
+      document.removeEventListener(Fullscreen.changeEventName, listener);
+    };
+  }, []);
+  if (fullScreen) return <SvgWindowCollapse />;
+  return <SvgWindowFullScreen />;
+}
+
+function GeocoderWidget() {
+  const viewer = useAppStore((state) => state.viewer);
+  const geocoder = React.useMemo(() => {
+    if (!viewer) return undefined;
+    return new GeocoderViewModel({
+      scene: viewer.scene,
+    });
+  }, [viewer]);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  return (
+    <div style={{ padding: 12, display: "flex", gap: 8 }}>
+      <Input defaultValue="Vilnius" ref={inputRef} />
+      <Button
+        onClick={async () => {
+          if (!inputRef.current) return;
+          if (!geocoder) return;
+          geocoder.searchText = inputRef.current.value;
+          callCommand(geocoder.search);
+        }}
+        styleType="cta"
+      >
+        Fly to
+      </Button>
+    </div>
+  );
+}
+
+function callCommand(command: Command) {
+  return (command as unknown as Function)();
+}
@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from "react";
+import {
+  Cartesian3,
+  Math as CesiumMath,
+  Terrain,
+  Viewer,
+  createOsmBuildingsAsync,
+} from "cesium";
+import "cesium/Build/Cesium/Widgets/widgets.css";
+import { useAppStore } from "./useAppStore";
+
+const disableCesiumUI = {
+  animation: false,
+  baseLayerPicker: false,
+  fullscreenButton: false,
+  geocoder: false,
+  homeButton: false,
+  infoBox: false,
+  sceneModePicker: false,
+  selectionIndicator: false,
+  timeline: false,
+  navigationHelpButton: false,
+} satisfies Viewer.ConstructorOptions;
+
+export function CesiumViewer() {
+  React.useEffect(() => {
+    const viewer = new Viewer("cesiumContainer", {
+      terrain: Terrain.fromWorldTerrain(),
+      ...disableCesiumUI,
+    });
+    useAppStore.setState({ viewer: viewer ?? undefined });
+    void appSpecificInitializer(viewer);
+
+    return () => {
+      viewer.destroy();
+    };
+  }, []);
+  return <div style={{ height: "100%" }} id="cesiumContainer" />;
+}
+
+async function appSpecificInitializer(viewer: Viewer) {
+  viewer.camera.flyTo({
+    destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
+    orientation: {
+      heading: CesiumMath.toRadians(0.0),
+      pitch: CesiumMath.toRadians(-15.0),
+    },
+  });
+
+  const buildingTileset = await createOsmBuildingsAsync();
+  if (viewer.isDestroyed()) return;
+  viewer.scene.primitives.add(buildingTileset);
+}
@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+body {
+  margin: 0;
+}
+
+#root {
+  height: 100vh;
+}
@@ -0,0 +1,69 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./index.css";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import {
+  ConfigurableUiContent,
+  FrontstageUtilities,
+  StageUsage,
+  StandardContentLayouts,
+  ThemeManager,
+  UiFramework,
+  UiItemsManager,
+} from "@itwin/appui-react";
+import { CesiumViewer } from "./CesiumViewer";
+import { Ion } from "cesium";
+import { createCesiumUIItemsProvider } from "./CesiumUiItemsProvider";
+
+// Set up the application
+(() => {
+  const ionToken = import.meta.env.VITE_ION_TOKEN;
+  Ion.defaultAccessToken = ionToken;
+
+  UiFramework.frontstages.addFrontstage(
+    FrontstageUtilities.createStandardFrontstage({
+      id: "cesium-frontstage",
+      usage: StageUsage.General,
+      contentGroupProps: {
+        id: "cesium-content",
+        layout: StandardContentLayouts.singleView,
+        contents: [
+          {
+            id: "cesium-content-view",
+            classId: "",
+            content: <CesiumViewer />,
+          },
+        ],
+      },
+      // TODO: tool settings rely on IModelApp
+      hideToolSettings: true,
+    })
+  );
+
+  UiItemsManager.register(createCesiumUIItemsProvider());
+
+  UiFramework.frontstages.setActiveFrontstage("cesium-frontstage");
+
+  // TODO: `pagehide` is not emitted when the widget is closed.
+  UiFramework.useDefaultPopoutUrl = true;
+})();
+
+// Render the app
+const rootElement = document.getElementById("root")!;
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(<App />);
+}
+
+function App() {
+  return (
+    <React.StrictMode>
+      <ThemeManager>
+        <ConfigurableUiContent />
+      </ThemeManager>
+    </React.StrictMode>
+  );
+}
@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { Viewer } from "cesium";
+import { create } from "zustand";
+
+export const useAppStore = create<{
+  viewer: Viewer | undefined;
+}>(() => ({
+  viewer: undefined,
+}));
@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/// <reference types="vite/client" />