@ifc-lite/viewer 1.17.2 → 1.17.4

package/src/components/viewer/ViewerLayout.tsx

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
 import type { PanelImperativeHandle } from 'react-resizable-panels';
 import { TooltipProvider } from '@/components/ui/tooltip';
@@ -22,6 +22,13 @@ import { LensPanel } from './LensPanel';
 import { ListPanel } from './lists/ListPanel';
 import { ScriptPanel } from './ScriptPanel';
 import { CommandPalette } from './CommandPalette';
+import { DesktopEntitlementBanner } from './DesktopEntitlementBanner';
+import {
+  closeActiveAnalysisExtension,
+  getAnalysisExtensionById,
+  getAnalysisExtensionsSnapshot,
+  subscribeAnalysisExtensions,
+} from '@/services/analysis-extensions';
 
 const BOTTOM_PANEL_MIN_HEIGHT = 120;
 const BOTTOM_PANEL_DEFAULT_HEIGHT = 300;
@@ -47,6 +54,18 @@ export function ViewerLayout() {
     return () => window.removeEventListener('keydown', handler);
   }, []);
 
+  useEffect(() => {
+    const openCommandPalette = () => setCommandPaletteOpen(true);
+    const showShortcuts = () => shortcutsDialog.toggle();
+
+    window.addEventListener('ifc-lite:open-command-palette', openCommandPalette);
+    window.addEventListener('ifc-lite:show-shortcuts', showShortcuts);
+    return () => {
+      window.removeEventListener('ifc-lite:open-command-palette', openCommandPalette);
+      window.removeEventListener('ifc-lite:show-shortcuts', showShortcuts);
+    };
+  }, [shortcutsDialog]);
+
   // Initialize theme on mount
   const theme = useViewerStore((s) => s.theme);
   const isMobile = useViewerStore((s) => s.isMobile);
@@ -65,6 +84,18 @@ export function ViewerLayout() {
   const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
   const scriptPanelVisible = useViewerStore((s) => s.scriptPanelVisible);
   const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
+  const analysisExtensionState = useSyncExternalStore(
+    subscribeAnalysisExtensions,
+    getAnalysisExtensionsSnapshot,
+    getAnalysisExtensionsSnapshot,
+  );
+  const activeAnalysisExtension = getAnalysisExtensionById(analysisExtensionState.activeId);
+  const activeRightAnalysisExtension = (activeAnalysisExtension?.placement ?? 'right') === 'right'
+    ? activeAnalysisExtension
+    : null;
+  const activeBottomAnalysisExtension = activeAnalysisExtension?.placement === 'bottom'
+    ? activeAnalysisExtension
+    : null;
 
   // Panel refs for programmatic collapse/expand (command palette, keyboard shortcuts)
   const leftPanelRef = useRef<PanelImperativeHandle>(null);
@@ -171,6 +202,7 @@ export function ViewerLayout() {
 
         {/* Main Toolbar */}
         <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />
+        <DesktopEntitlementBanner />
 
         {/* Main Content Area - Desktop Layout */}
         {!isMobile && (
@@ -221,7 +253,9 @@ export function ViewerLayout() {
                   }}
                 >
                   <div className="h-full w-full overflow-hidden panel-container">
-                    {lensPanelVisible ? (
+                    {activeRightAnalysisExtension ? (
+                      activeRightAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                    ) : lensPanelVisible ? (
                       <LensPanel onClose={() => setLensPanelVisible(false)} />
                     ) : idsPanelVisible ? (
                       <IDSPanel onClose={() => setIdsPanelVisible(false)} />
@@ -236,7 +270,7 @@ export function ViewerLayout() {
             </div>
 
             {/* Bottom Panel - Lists or Script (custom resizable, outside PanelGroup) */}
-            {(listPanelVisible || scriptPanelVisible) && (
+            {(listPanelVisible || scriptPanelVisible || !!activeBottomAnalysisExtension) && (
               <div style={{ height: bottomHeight, flexShrink: 0 }} className="relative">
                 {/* Drag handle */}
                 <div
@@ -244,7 +278,9 @@ export function ViewerLayout() {
                   onMouseDown={handleResizeStart}
                 />
                 <div className="h-full w-full overflow-hidden border-t pt-1.5">
-                  {scriptPanelVisible ? (
+                  {activeBottomAnalysisExtension ? (
+                    activeBottomAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                  ) : scriptPanelVisible ? (
                     <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
                   ) : (
                     <ListPanel onClose={() => setListPanelVisible(false)} />
@@ -289,7 +325,7 @@ export function ViewerLayout() {
               <div className="absolute inset-x-0 bottom-0 h-[50vh] bg-background border-t rounded-t-xl shadow-xl z-40 animate-in slide-in-from-bottom">
                 <div className="flex items-center justify-between p-2 border-b">
                   <span className="font-medium text-sm">
-                    {scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
+                    {activeAnalysisExtension ? activeAnalysisExtension.label : scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
                   </span>
                   <button
                     className="p-1 hover:bg-muted rounded"
@@ -300,6 +336,7 @@ export function ViewerLayout() {
                       if (bcfPanelVisible) setBcfPanelVisible(false);
                       if (lensPanelVisible) setLensPanelVisible(false);
                       if (idsPanelVisible) setIdsPanelVisible(false);
+                      if (activeAnalysisExtension) closeActiveAnalysisExtension();
                     }}
                   >
                     <span className="sr-only">Close</span>
@@ -309,7 +346,11 @@ export function ViewerLayout() {
                   </button>
                 </div>
                 <div className="h-[calc(50vh-48px)] overflow-auto">
-                  {scriptPanelVisible ? (
+                  {activeBottomAnalysisExtension ? (
+                    activeBottomAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                  ) : activeRightAnalysisExtension ? (
+                    activeRightAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                  ) : scriptPanelVisible ? (
                     <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
                   ) : listPanelVisible ? (
                     <ListPanel onClose={() => setListPanelVisible(false)} />

package/src/components/viewer/Viewport.tsx

@@ -46,9 +46,23 @@ interface ViewportProps {
   coordinateInfo?: CoordinateInfo;
   computedIsolatedIds?: Set<number> | null;
   modelIdToIndex?: Map<string, number>;
+  /** When true, the WebGPU canvas uses a transparent clear color so the
+   *  CesiumJS globe behind it is visible. */
+  cesiumActive?: boolean;
+  releaseGeometryAfterStream?: boolean;
+  onGeometryReleased?: () => void;
 }
 
-export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIsolatedIds, modelIdToIndex }: ViewportProps) {
+export function Viewport({
+  geometry,
+  geometryVersion,
+  coordinateInfo,
+  computedIsolatedIds,
+  modelIdToIndex,
+  cesiumActive,
+  releaseGeometryAfterStream = false,
+  onGeometryReleased,
+}: ViewportProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
@@ -94,7 +108,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   }, [modelIdToIndex]);
 
   // Compute selectedModelIndex for renderer (multi-model selection highlighting)
-  const selectedModelIndex = selectedEntity && modelIdToIndex
+  const selectedModelIndex = models.size > 1 && selectedEntity && modelIdToIndex
     ? modelIdToIndex.get(selectedEntity.modelId) ?? undefined
     : undefined;
 
@@ -114,12 +128,13 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     }
 
     const globalId = pickResult.expressId;
+    const resolvedRef = resolveEntityRef(globalId);
 
     // Set globalId for renderer (highlighting uses globalIds directly)
     setSelectedEntityId(globalId);
 
     // Resolve globalId → EntityRef for property panel (single source of truth, never null)
-    setSelectedEntity(resolveEntityRef(globalId));
+    setSelectedEntity(resolvedRef);
   }, [setSelectedEntityId, setSelectedEntity]);
 
   // Ref to always access latest handlePickForSelection from event handlers
@@ -291,6 +306,17 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     separationLinesIntensity,
     separationLinesRadius,
   ]);
+
+  // Override clear color when Cesium overlay is active (transparent background)
+  useEffect(() => {
+    if (cesiumActive) {
+      clearColorRef.current = [0, 0, 0, 0]; // fully transparent
+    } else {
+      clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark');
+    }
+    rendererRef.current?.requestRender();
+  }, [cesiumActive, theme]);
+
   // Animation frame ref
   const animationFrameRef = useRef<number | null>(null);
   const lastFrameTimeRef = useRef<number>(0);
@@ -356,6 +382,11 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   const sectionPlaneRef = useLatestRef(sectionPlane);
   const sectionRangeRef = useLatestRef(sectionRange);
   const visualEnhancementRef = useLatestRef(visualEnhancement);
+
+  // Terrain clip Y from Cesium store (read as ref for animation loop)
+  const cesiumTerrainClipY = useViewerStore((s) => s.cesiumTerrainClipY);
+  const fastZoomRef = useLatestRef(!!cesiumActive);
+  const terrainClipYRef = useLatestRef(cesiumActive ? cesiumTerrainClipY : null);
   const geometryRef = useLatestRef(geometry);
 
   // Hover throttling
@@ -457,8 +488,10 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
 
   // Helper: get pick options with visibility filtering
   const getPickOptions = () => {
-    const currentProgress = useViewerStore.getState().progress;
-    const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
+    const currentState = useViewerStore.getState();
+    const currentProgress = currentState.progress;
+    const currentIsStreaming = currentState.geometryStreamingActive
+      || (currentProgress !== null && currentProgress.percent < 100);
     return {
       isStreaming: currentIsStreaming,
       hiddenIds: hiddenEntitiesRef.current,
@@ -656,8 +689,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   const showHiddenLines = useViewerStore((s) => s.drawing2DDisplayOptions.showHiddenLines);
 
   // ===== Streaming progress =====
-  const progress = useViewerStore((state) => state.progress);
-  const isStreaming = progress !== null && progress.percent < 100;
+  const isStreaming = useViewerStore((state) => state.geometryStreamingActive);
 
   // Mouse isDragging proxy ref for animation loop
   // The animation loop reads this to decide whether to update rotation
@@ -728,6 +760,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     RENDER_THROTTLE_MS_SMALL,
     RENDER_THROTTLE_MS_LARGE,
     RENDER_THROTTLE_MS_HUGE,
+    fastZoomRef,
   });
 
   useTouchControls({
@@ -777,6 +810,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     lastFrameTimeRef,
     mouseIsDraggingRef,
     activeToolRef,
+    terrainClipYRef,
     hiddenEntitiesRef,
     isolatedEntitiesRef,
     selectedEntityIdRef,
@@ -808,6 +842,8 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     clearPendingColorUpdates,
     clearPendingMeshColorUpdates,
     clearColorRef,
+    releaseGeometryAfterFinalize: releaseGeometryAfterStream,
+    onGeometryReleased,
   });
 
   useRenderUpdates({
@@ -838,12 +874,17 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     showHiddenLines,
   });
 
+  // Hide WebGPU canvas immediately when Cesium is active.
+  // The model will be rendered by Cesium (as GLB) for correct positioning.
+  // Canvas stays in the DOM for picking/interaction.
+
   return (
     <canvas
       ref={canvasRef}
       data-viewport="main"
       tabIndex={-1}
-      className="w-full h-full block"
+      className={`w-full h-full block ${cesiumActive ? 'relative z-[1]' : ''}`}
+      style={cesiumActive ? { opacity: 0 } : undefined}
       onPointerDown={focusViewportForKeyboardShortcuts}
     />
   );