@ifc-lite/viewer 1.17.3 → 1.17.4

package/src/components/viewer/ViewportOverlays.tsx

@@ -8,10 +8,16 @@ import {
   ZoomIn,
   ZoomOut,
   Layers,
+  Globe2,
+  Mountain,
+  Building2,
+  Satellite,
+  X,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useViewerStore } from '@/store';
+import type { CesiumDataSource } from '@/store/slices/cesiumSlice';
 import { goHomeFromStore } from '@/store/homeView';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
@@ -28,6 +34,14 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
   const setOnScaleChange = useViewerStore((s) => s.setOnScaleChange);
   const { ifcDataStore, geometryResult } = useIfc();
 
+  // Cesium state
+  const cesiumEnabled = useViewerStore((s) => s.cesiumEnabled);
+  const cesiumDataSource = useViewerStore((s) => s.cesiumDataSource);
+  const setCesiumDataSource = useViewerStore((s) => s.setCesiumDataSource);
+  const cesiumTerrainEnabled = useViewerStore((s) => s.cesiumTerrainEnabled);
+  const setCesiumTerrainEnabled = useViewerStore((s) => s.setCesiumTerrainEnabled);
+  const toggleCesium = useViewerStore((s) => s.toggleCesium);
+
   // Use refs for rotation to avoid re-renders - ViewCube updates itself directly
   const cameraRotationRef = useRef({ azimuth: 45, elevation: 25 });
   const viewCubeRef = useRef<ViewCubeRef | null>(null);
@@ -132,35 +146,45 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
 
   return (
     <>
-      {/* Navigation Controls (bottom-right) */}
-      <div className="absolute bottom-4 right-4 flex flex-col gap-1 bg-background/80 backdrop-blur-sm rounded-lg border shadow-sm p-1">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon-sm" onClick={handleHome}>
-              <Home className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="left">Home (H)</TooltipContent>
-        </Tooltip>
+      {/* Bottom-right: Cesium settings overlay OR Navigation controls */}
+      {cesiumEnabled ? (
+        <CesiumSettingsOverlay
+          dataSource={cesiumDataSource}
+          onDataSourceChange={setCesiumDataSource}
+          terrainEnabled={cesiumTerrainEnabled}
+          onTerrainChange={setCesiumTerrainEnabled}
+          onClose={toggleCesium}
+        />
+      ) : (
+        <div className="absolute bottom-4 right-4 flex flex-col gap-1 bg-background/80 backdrop-blur-sm rounded-lg border shadow-sm p-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon-sm" onClick={handleHome}>
+                <Home className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="left">Home (H)</TooltipContent>
+          </Tooltip>
 
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon-sm" onClick={handleZoomIn}>
-              <ZoomIn className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="left">Zoom In (+)</TooltipContent>
-        </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon-sm" onClick={handleZoomIn}>
+                <ZoomIn className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="left">Zoom In (+)</TooltipContent>
+          </Tooltip>
 
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon-sm" onClick={handleZoomOut}>
-              <ZoomOut className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="left">Zoom Out (-)</TooltipContent>
-        </Tooltip>
-      </div>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon-sm" onClick={handleZoomOut}>
+                <ZoomOut className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="left">Zoom Out (-)</TooltipContent>
+          </Tooltip>
+        </div>
+      )}
 
       {/* Context Info (bottom-center) - Storey names */}
       {storeyNames && storeyNames.length > 0 && (
@@ -209,3 +233,81 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
     </>
   );
 }
+
+/* ------------------------------------------------------------------ */
+/*  Cesium Settings Overlay — replaces nav controls when Cesium is on  */
+/* ------------------------------------------------------------------ */
+
+const DATA_SOURCES: { value: CesiumDataSource; label: string; icon: typeof Globe2 }[] = [
+  { value: 'google-photorealistic', label: 'Google 3D', icon: Globe2 },
+  { value: 'osm-buildings', label: 'OSM', icon: Building2 },
+  { value: 'bing-aerial', label: 'Aerial', icon: Satellite },
+];
+
+function CesiumSettingsOverlay({
+  dataSource,
+  onDataSourceChange,
+  terrainEnabled,
+  onTerrainChange,
+  onClose,
+}: {
+  dataSource: CesiumDataSource;
+  onDataSourceChange: (ds: CesiumDataSource) => void;
+  terrainEnabled: boolean;
+  onTerrainChange: (enabled: boolean) => void;
+  onClose: () => void;
+}) {
+  return (
+    <div className="absolute bottom-4 right-4 z-10 pointer-events-auto bg-background/90 backdrop-blur-sm rounded-lg border shadow-lg p-2 flex flex-col gap-2 min-w-[160px]">
+      {/* Header */}
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          3D World
+        </span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon-sm" className="h-5 w-5" onClick={onClose}>
+              <X className="h-3 w-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="left">Disable Cesium overlay</TooltipContent>
+        </Tooltip>
+      </div>
+
+      {/* Data Source Buttons */}
+      <div className="flex flex-col gap-0.5">
+        {DATA_SOURCES.map((ds) => {
+          const Icon = ds.icon;
+          const active = dataSource === ds.value;
+          return (
+            <button
+              key={ds.value}
+              onClick={() => onDataSourceChange(ds.value)}
+              className={cn(
+                'flex items-center gap-2 px-2 py-1.5 rounded text-xs transition-colors text-left',
+                active
+                  ? 'bg-teal-600 text-white'
+                  : 'hover:bg-muted text-foreground/80',
+              )}
+            >
+              <Icon className="h-3.5 w-3.5 shrink-0" />
+              {ds.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Terrain Toggle */}
+      <label className="flex items-center gap-2 px-2 py-1 cursor-pointer border-t border-border pt-2">
+        <Mountain className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+        <span className="text-xs text-foreground/80">Terrain</span>
+        <input
+          type="checkbox"
+          checked={terrainEnabled}
+          onChange={(e) => onTerrainChange(e.target.checked)}
+          className="ml-auto accent-teal-500"
+        />
+      </label>
+    </div>
+  );
+}

package/src/components/viewer/properties/GeoreferencingPanel.tsx

@@ -8,14 +8,14 @@
  */
 
 import { useState, useCallback, useMemo } from 'react';
-import { Globe, MapPin, PenLine, Check, X, Search, ChevronRight } from 'lucide-react';
+import { Globe, MapPin, PenLine, Check, X, Search, ChevronRight, Mountain } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { Badge } from '@/components/ui/badge';
 import { computeAngleToGridNorth, type GeoreferenceInfo, type MapConversion, type ProjectedCRS } from '@ifc-lite/parser';
 import { useViewerStore } from '@/store';
 import type { CoordinateInfo, GeometryResult } from '@ifc-lite/geometry';
 import { EpsgLookupDialog, type EpsgResult } from './EpsgLookupDialog';
-import { LocationMap } from './LocationMap';
+import { LocationMap, type PickedPosition } from './LocationMap';
 
 // ── Field-specific assistance data ─────────────────────────────────────
 
@@ -71,9 +71,11 @@ interface GeorefRowProps {
   fieldEntity?: string;
   fieldName?: string;
   onSave?: (value: string | number) => void;
+  /** Extra inline content rendered after the value (e.g. terrain height button) */
+  children?: React.ReactNode;
 }
 
-function GeorefRow({ label, value, suffix, isComputed, isNumber, editable, isMutated, fieldEntity, fieldName, onSave }: GeorefRowProps) {
+function GeorefRow({ label, value, suffix, isComputed, isNumber, editable, isMutated, fieldEntity, fieldName, onSave, children }: GeorefRowProps) {
   const [editing, setEditing] = useState(false);
   const [editValue, setEditValue] = useState('');
 
@@ -214,6 +216,7 @@ function GeorefRow({ label, value, suffix, isComputed, isNumber, editable, isMut
             </>
           )}
         </div>
+        {children}
       </div>
     </div>
   );
@@ -322,6 +325,13 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
   const georefMutations = useViewerStore(s => s.georefMutations);
   const setGeorefField = useViewerStore(s => s.setGeorefField);
   const setGeorefFields = useViewerStore(s => s.setGeorefFields);
+  const cesiumEnabled = useViewerStore(s => s.cesiumEnabled);
+  const terrainClamp = useViewerStore(s => s.cesiumTerrainClamp);
+  const setCesiumTerrainClamp = useViewerStore(s => s.setCesiumTerrainClamp);
+  const cesiumTerrainHeight = useViewerStore(s => s.cesiumTerrainHeight);
+  const cesiumSourceModelId = useViewerStore(s => s.cesiumSourceModelId);
+  // Only show terrain actions when this panel's model is the one backing the Cesium overlay
+  const isActiveCesiumModel = !!modelId && modelId === cesiumSourceModelId;
   const [crsOpen, setCrsOpen] = useState(false);
   const [conversionOpen, setConversionOpen] = useState(false);
 
@@ -375,6 +385,13 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
     return 'm';
   }, [mergedCRS?.mapUnit]);
 
+  // Convert meters to map units (Cesium always returns meters)
+  const metersToMapUnit = useCallback((meters: number): number => {
+    if (mapUnitSuffix === 'ftUS') return meters / 0.3048006096;
+    if (mapUnitSuffix === 'ft') return meters / 0.3048;
+    return meters; // already meters
+  }, [mapUnitSuffix]);
+
   const isMutated = useCallback((entity: 'projectedCRS' | 'mapConversion', field: string): boolean => {
     if (!mutations) return false;
     const entityMuts = mutations[entity];
@@ -399,6 +416,24 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
     ]);
   }, [modelId, setGeorefFields, georef]);
 
+  // Handle position picked from the map (reverse-projected easting/northing + optional terrain height)
+  const handleApplyPosition = useCallback((position: PickedPosition) => {
+    if (!modelId || !setGeorefFields) return;
+    const fields: Array<{ field: string; value: number; oldValue?: number }> = [
+      { field: 'eastings', value: position.easting, oldValue: mergedConversion?.eastings },
+      { field: 'northings', value: position.northing, oldValue: mergedConversion?.northings },
+    ];
+    if (position.terrainHeight !== null) {
+      fields.push({
+        field: 'orthogonalHeight',
+        value: Math.round(position.terrainHeight * 10) / 10,
+        oldValue: mergedConversion?.orthogonalHeight,
+      });
+    }
+    setGeorefFields(modelId, 'mapConversion', fields);
+    setConversionOpen(true);
+  }, [modelId, setGeorefFields, mergedConversion]);
+
   const initializeMapConversionDefaults = useCallback(() => {
     if (!modelId || !setGeorefFields) return;
     setGeorefFields(modelId, 'mapConversion', [
@@ -561,7 +596,9 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
               <GeorefRow label="Type" value="IfcMapConversion" />
               <GeorefRow label="Eastings" value={mergedConversion.eastings} suffix={mapUnitSuffix} isNumber editable={editable} isMutated={isMutated('mapConversion', 'eastings')} fieldEntity="mapConversion" fieldName="eastings" onSave={v => handleSave('mapConversion', 'eastings', v)} />
               <GeorefRow label="Northings" value={mergedConversion.northings} suffix={mapUnitSuffix} isNumber editable={editable} isMutated={isMutated('mapConversion', 'northings')} fieldEntity="mapConversion" fieldName="northings" onSave={v => handleSave('mapConversion', 'northings', v)} />
-              <GeorefRow label="OrthogonalHeight" value={mergedConversion.orthogonalHeight} suffix={mapUnitSuffix} isNumber editable={editable} isMutated={isMutated('mapConversion', 'orthogonalHeight')} fieldEntity="mapConversion" fieldName="orthogonalHeight" onSave={v => handleSave('mapConversion', 'orthogonalHeight', v)} />
+              <GeorefRow label="OrthogonalHeight" value={mergedConversion.orthogonalHeight} suffix={mapUnitSuffix} isNumber editable={editable} isMutated={isMutated('mapConversion', 'orthogonalHeight')} fieldEntity="mapConversion" fieldName="orthogonalHeight" onSave={v => handleSave('mapConversion', 'orthogonalHeight', v)}>
+                <TerrainHeightButton modelId={modelId} editable={editable} onApply={(h) => handleSave('mapConversion', 'orthogonalHeight', Math.round(metersToMapUnit(h) * 100) / 100)} />
+              </GeorefRow>
               <GeorefRow label="XAxisAbscissa" value={mergedConversion.xAxisAbscissa} isNumber editable={editable} isMutated={isMutated('mapConversion', 'xAxisAbscissa')} fieldEntity="mapConversion" fieldName="xAxisAbscissa" onSave={v => handleSave('mapConversion', 'xAxisAbscissa', v)} />
               <GeorefRow label="XAxisOrdinate" value={mergedConversion.xAxisOrdinate} isNumber editable={editable} isMutated={isMutated('mapConversion', 'xAxisOrdinate')} fieldEntity="mapConversion" fieldName="xAxisOrdinate" onSave={v => handleSave('mapConversion', 'xAxisOrdinate', v)} />
               <AngleRow angle={angleToGridNorth} editable={editable} onAngleChange={handleAngleChange} />
@@ -584,8 +621,83 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
         </div>
       )}
 
+      {/* Terrain clamp toggle — only when Cesium overlay is active */}
+      {cesiumEnabled && isActiveCesiumModel && mergedConversion && (
+        <div className="px-3 py-1.5 border-t border-zinc-100 dark:border-zinc-900 space-y-1">
+          <div className="flex items-center gap-2">
+            <Mountain className="h-3 w-3 text-teal-500 shrink-0" />
+            <label className="flex items-center gap-1.5 cursor-pointer flex-1">
+              <input
+                type="checkbox"
+                checked={terrainClamp}
+                onChange={(e) => setCesiumTerrainClamp(e.target.checked)}
+                className="accent-teal-500 h-3 w-3"
+              />
+              <span className="text-[10px] text-zinc-600 dark:text-zinc-400">Clamp to terrain</span>
+            </label>
+            {cesiumTerrainHeight !== null ? (
+              <span className="text-[9px] font-mono text-teal-500">
+                {cesiumTerrainHeight.toFixed(1)} m
+              </span>
+            ) : (
+              <span className="text-[9px] font-mono text-zinc-400">querying...</span>
+            )}
+          </div>
+          {cesiumTerrainHeight !== null && editable && modelId && (
+            <div className="flex items-center gap-1 ml-5">
+              <button
+                onClick={() => handleSave('mapConversion', 'orthogonalHeight', Math.round(metersToMapUnit(cesiumTerrainHeight) * 100) / 100)}
+                className="text-[9px] text-teal-500 hover:text-teal-700 dark:hover:text-teal-300 transition-colors flex items-center gap-0.5"
+              >
+                <Mountain className="h-2.5 w-2.5" />
+                Set OrthogonalHeight to {cesiumTerrainHeight.toFixed(1)} m
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Location minimap */}
-      <LocationMap mapConversion={mergedConversion} projectedCRS={mergedCRS} coordinateInfo={coordinateInfo} geometryResult={geometryResult} />
+      <LocationMap
+        mapConversion={mergedConversion}
+        projectedCRS={mergedCRS}
+        coordinateInfo={coordinateInfo}
+        geometryResult={geometryResult}
+        editable={editable}
+        onApplyPosition={editable ? handleApplyPosition : undefined}
+      />
     </div>
   );
 }
+
+/** Small button to apply Cesium terrain height to OrthogonalHeight field */
+function TerrainHeightButton({ modelId, editable, onApply }: {
+  modelId?: string;
+  editable?: boolean;
+  onApply: (height: number) => void;
+}) {
+  const cesiumEnabled = useViewerStore(s => s.cesiumEnabled);
+  const terrainHeight = useViewerStore(s => s.cesiumTerrainHeight);
+  const sourceModelId = useViewerStore(s => s.cesiumSourceModelId);
+
+  // Only show when this panel's model is the active Cesium model
+  if (!cesiumEnabled || terrainHeight === null || !editable || !modelId || modelId !== sourceModelId) return null;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onApply(terrainHeight);
+          }}
+          className="flex items-center gap-0.5 text-[9px] text-teal-500 hover:text-teal-700 dark:hover:text-teal-300 transition-colors mt-0.5"
+        >
+          <Mountain className="h-2.5 w-2.5" />
+          <span>{terrainHeight.toFixed(1)} m</span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>Set OrthogonalHeight to Cesium terrain elevation ({terrainHeight.toFixed(1)} m)</TooltipContent>
+    </Tooltip>
+  );
+}