feat(map-server): add fullscreen support, clean UI, sharp rendering

ochafik · ochafik · commit 3ffa9b6d7c1f · 2026-01-11T15:31:48.000Z
- Add fullscreen toggle button (only shown if host supports it)
- Use autoResize: false and manually send height of 400px
- Hide Cesium UI controls (home, scene mode picker)
- Remove location label (gets stale quickly)
- Use full device pixel ratio for sharp rendering on high-DPI displays
- Resize Cesium viewer when display mode changes
diff --git a/examples/map-server/mcp-app.html b/examples/map-server/mcp-app.html
@@ -27,26 +27,34 @@
         html, body, #cesiumContainer {
             width: 100%;
             height: 100%;
-            min-height: 400px;
             margin: 0;
             padding: 0;
             overflow: hidden;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
         }
-        #label {
+        #fullscreen-btn {
             position: absolute;
             top: 10px;
-            left: 10px;
+            right: 10px;
+            width: 36px;
+            height: 36px;
             background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 8px 16px;
+            border: none;
             border-radius: 6px;
-            font-size: 14px;
-            font-weight: 500;
+            cursor: pointer;
             z-index: 1000;
             display: none;
-            max-width: 300px;
-            word-wrap: break-word;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s;
+        }
+        #fullscreen-btn:hover {
+            background: rgba(0, 0, 0, 0.85);
+        }
+        #fullscreen-btn svg {
+            width: 20px;
+            height: 20px;
+            fill: white;
         }
         #loading {
             position: absolute;
@@ -64,7 +72,12 @@
 </head>
 <body>
     <div id="cesiumContainer"></div>
-    <div id="label"></div>
+    <button id="fullscreen-btn" title="Toggle fullscreen">
+        <!-- Expand icon (shown when inline) -->
+        <svg id="expand-icon" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+        <!-- Compress icon (shown when fullscreen) -->
+        <svg id="compress-icon" style="display:none" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>
+    </button>
     <div id="loading">Loading globe...</div>
     <script type="module" src="/src/mcp-app.ts"></script>
 </body>
diff --git a/examples/map-server/src/mcp-app.ts b/examples/map-server/src/mcp-app.ts
@@ -91,11 +91,11 @@ async function initCesium(): Promise<any> {
     // Disable Ion-dependent features
     geocoder: false,
     baseLayerPicker: false,
-    // Simplify UI
+    // Simplify UI - hide all controls
     animation: false,
     timeline: false,
-    homeButton: true,
-    sceneModePicker: true,
+    homeButton: false,
+    sceneModePicker: false,
     navigationHelpButton: false,
     fullscreenButton: false,
     // Disable terrain (requires Ion)
@@ -107,6 +107,8 @@ async function initCesium(): Promise<any> {
         alpha: true,
       },
     },
+    // Use full device pixel ratio for sharp rendering on high-DPI displays
+    useBrowserRecommendedResolution: false,
   });
   log.info("Viewer created");
 
@@ -245,21 +247,6 @@ function flyToBoundingBox(
   });
 }
 
-/**
- * Update the label display
- */
-function setLabel(text: string | undefined): void {
-  const labelEl = document.getElementById("label");
-  if (labelEl) {
-    if (text) {
-      labelEl.textContent = text;
-      labelEl.style.display = "block";
-    } else {
-      labelEl.style.display = "none";
-    }
-  }
-}
-
 /**
  * Hide the loading indicator
  */
@@ -270,13 +257,86 @@ function hideLoading(): void {
   }
 }
 
+// Preferred height for inline mode (px)
+const PREFERRED_INLINE_HEIGHT = 400;
+
+// Current display mode
+let currentDisplayMode: "inline" | "fullscreen" | "pip" = "inline";
+
 // Create App instance with tool capabilities
+// autoResize: false - we manually send size since map fills its container
 const app = new App(
   { name: "CesiumJS Globe", version: "1.0.0" },
   { tools: { listChanged: true } },
-  { autoResize: false }, // Cesium handles its own sizing
+  { autoResize: false },
 );
 
+/**
+ * Update fullscreen button visibility and icon based on current state
+ */
+function updateFullscreenButton(): void {
+  const btn = document.getElementById("fullscreen-btn");
+  const expandIcon = document.getElementById("expand-icon");
+  const compressIcon = document.getElementById("compress-icon");
+  if (!btn || !expandIcon || !compressIcon) return;
+
+  // Check if fullscreen is available from host
+  const context = app.getHostContext();
+  const availableModes = context?.availableDisplayModes ?? ["inline"];
+  const canFullscreen = availableModes.includes("fullscreen");
+
+  // Show button only if fullscreen is available
+  btn.style.display = canFullscreen ? "flex" : "none";
+
+  // Toggle icons based on current mode
+  const isFullscreen = currentDisplayMode === "fullscreen";
+  expandIcon.style.display = isFullscreen ? "none" : "block";
+  compressIcon.style.display = isFullscreen ? "block" : "none";
+  btn.title = isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
+}
+
+/**
+ * Request display mode change from host
+ */
+async function toggleFullscreen(): Promise<void> {
+  const targetMode =
+    currentDisplayMode === "fullscreen" ? "inline" : "fullscreen";
+  log.info("Requesting display mode:", targetMode);
+
+  try {
+    const result = await app.requestDisplayMode({ mode: targetMode });
+    log.info("Display mode result:", result.mode);
+    // Note: actual mode change will come via onhostcontextchanged
+  } catch (error) {
+    log.error("Failed to change display mode:", error);
+  }
+}
+
+/**
+ * Handle display mode changes - resize Cesium and update UI
+ */
+function handleDisplayModeChange(
+  newMode: "inline" | "fullscreen" | "pip",
+): void {
+  if (newMode === currentDisplayMode) return;
+
+  log.info("Display mode changed:", currentDisplayMode, "->", newMode);
+  currentDisplayMode = newMode;
+
+  // Update button state
+  updateFullscreenButton();
+
+  // Tell Cesium to resize to new container dimensions
+  if (viewer) {
+    // Small delay to let the host finish resizing
+    setTimeout(() => {
+      viewer.resize();
+      viewer.scene.requestRender();
+      log.info("Cesium resized for", newMode, "mode");
+    }, 100);
+  }
+}
+
 // Register handlers BEFORE connecting
 app.onteardown = async () => {
   log.info("App is being torn down");
@@ -289,6 +349,22 @@ app.onteardown = async () => {
 
 app.onerror = log.error;
 
+// Listen for host context changes (display mode, theme, etc.)
+app.onhostcontextchanged = (params) => {
+  log.info("Host context changed:", params);
+
+  if (params.displayMode) {
+    handleDisplayModeChange(
+      params.displayMode as "inline" | "fullscreen" | "pip",
+    );
+  }
+
+  // Update button if available modes changed
+  if (params.availableDisplayModes) {
+    updateFullscreenButton();
+  }
+};
+
 // Handle initial tool input (bounding box from show-map tool)
 app.ontoolinput = (params) => {
   log.info("Received tool input:", params);
@@ -339,7 +415,6 @@ app.ontoolinput = (params) => {
             Cesium.Math.toDegrees(viewer!.camera.pitch),
           );
         });
-        setLabel(args?.label);
       }, 500);
     }
   }
@@ -411,6 +486,29 @@ async function init() {
     // Connect to host (auto-creates PostMessageTransport)
     await app.connect();
     log.info("Connected to host");
+
+    // Get initial display mode from host context
+    const context = app.getHostContext();
+    if (context?.displayMode) {
+      currentDisplayMode = context.displayMode as
+        | "inline"
+        | "fullscreen"
+        | "pip";
+    }
+    log.info("Initial display mode:", currentDisplayMode);
+
+    // Tell host our preferred size for inline mode
+    if (currentDisplayMode === "inline") {
+      app.sendSizeChanged({ height: PREFERRED_INLINE_HEIGHT });
+      log.info("Sent initial size:", PREFERRED_INLINE_HEIGHT);
+    }
+
+    // Set up fullscreen button
+    updateFullscreenButton();
+    const fullscreenBtn = document.getElementById("fullscreen-btn");
+    if (fullscreenBtn) {
+      fullscreenBtn.addEventListener("click", toggleFullscreen);
+    }
   } catch (error) {
     log.error("Failed to initialize:", error);
     const loadingEl = document.getElementById("loading");
