@ifc-lite/viewer 1.17.6 → 1.19.0

package/src/components/viewer/MainToolbar.tsx

@@ -10,6 +10,7 @@ import {
   PersonStanding,
   Ruler,
   Scissors,
+  MapPin,
   Eye,
   EyeOff,
   Equal,
@@ -37,6 +38,7 @@ import {
   Layout,
   LayoutTemplate,
   FileCode2,
+  CalendarClock,
   Globe2,
   Settings,
 } from 'lucide-react';
@@ -66,6 +68,7 @@ import { ExportDialog } from './ExportDialog';
 import { BulkPropertyEditor } from './BulkPropertyEditor';
 import { DataConnector } from './DataConnector';
 import { ExportChangesButton } from './ExportChangesButton';
+import { SearchInline } from './SearchInline';
 // CesiumSettingsDialog removed — settings now shown as overlay on Cesium viewer
 import { useFloorplanView } from '@/hooks/useFloorplanView';
 import { buildDesktopUpgradeUrl, hasDesktopFeatureAccess, type DesktopFeature } from '@/lib/desktop-product';
@@ -84,7 +87,7 @@ import {
   subscribeAnalysisExtensions,
 } from '@/services/analysis-extensions';
 
-type Tool = 'select' | 'walk' | 'measure' | 'section';
+type Tool = 'select' | 'walk' | 'measure' | 'section' | 'annotate';
 type WorkspacePanel = 'script' | 'list' | 'bcf' | 'ids' | 'lens' | string;
 
 function isNativeFileHandle(file: File | NativeFileHandle): file is NativeFileHandle {
@@ -100,21 +103,39 @@ interface ToolButtonProps {
   shortcut?: string;
   activeTool: string;
   onToolChange: (tool: Tool) => void;
+  /**
+   * Tailwind classes applied when this tool is active. Defaults to the
+   * shared `bg-primary text-primary-foreground` shape; pass a per-tool
+   * accent (e.g. amber for Annotate) to set tools apart visually
+   * without breaking the toolbar's tool-button rhythm.
+   */
+  activeAccentClass?: string;
 }
 
-function ToolButton({ tool, icon: Icon, label, shortcut, activeTool, onToolChange }: ToolButtonProps) {
+function ToolButton({
+  tool,
+  icon: Icon,
+  label,
+  shortcut,
+  activeTool,
+  onToolChange,
+  activeAccentClass,
+}: ToolButtonProps) {
+  const isActive = activeTool === tool;
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          variant={activeTool === tool ? 'default' : 'ghost'}
+          variant={isActive ? 'default' : 'ghost'}
           size="icon-sm"
           onClick={(e) => {
             // Blur button to close tooltip after click
             (e.currentTarget as HTMLButtonElement).blur();
             onToolChange(tool);
           }}
-          className={cn(activeTool === tool && 'bg-primary text-primary-foreground')}
+          className={cn(
+            isActive && (activeAccentClass ?? 'bg-primary text-primary-foreground'),
+          )}
         >
           <Icon className="h-4 w-4" />
         </Button>
@@ -305,6 +326,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const setLensPanelVisible = useViewerStore((state) => state.setLensPanelVisible);
   const scriptPanelVisible = useViewerStore((state) => state.scriptPanelVisible);
   const setScriptPanelVisible = useViewerStore((state) => state.setScriptPanelVisible);
+  const ganttPanelVisible = useViewerStore((state) => state.ganttPanelVisible);
+  const setGanttPanelVisible = useViewerStore((state) => state.setGanttPanelVisible);
   // Cesium 3D overlay state
   const cesiumAvailable = useViewerStore((state) => state.cesiumAvailable);
   const cesiumEnabled = useViewerStore((state) => state.cesiumEnabled);
@@ -402,6 +425,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     // Filter to supported files (IFC, IFCX, GLB)
     const supportedFiles = Array.from(files).filter(
       f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
+        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57')
     );
 
     if (supportedFiles.length === 0) return;
@@ -442,6 +466,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     // Filter to supported files (IFC, IFCX, GLB)
     const supportedFiles = Array.from(files).filter(
       f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
+        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57')
     );
 
     if (supportedFiles.length === 0) return;
@@ -508,21 +533,31 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     return false;
   }, [desktopEntitlement, promptDesktopUpgrade]);
 
-  const handleToggleBottomPanel = useCallback((panel: 'script' | 'list') => {
+  const handleToggleBottomPanel = useCallback((panel: 'script' | 'list' | 'gantt') => {
     if (activeAnalysisExtension?.placement === 'bottom') {
       closeActiveAnalysisExtension();
     }
-    const isScriptPanel = panel === 'script';
-    const nextScriptVisible = isScriptPanel ? !scriptPanelVisible : false;
-    const nextListVisible = isScriptPanel ? false : !listPanelVisible;
+    const nextScriptVisible = panel === 'script' ? !scriptPanelVisible : false;
+    const nextListVisible = panel === 'list' ? !listPanelVisible : false;
+    const nextGanttVisible = panel === 'gantt' ? !ganttPanelVisible : false;
 
     setScriptPanelVisible(nextScriptVisible);
     setListPanelVisible(nextListVisible);
+    setGanttPanelVisible(nextGanttVisible);
 
-    if (nextScriptVisible || nextListVisible) {
+    if (nextScriptVisible || nextListVisible || nextGanttVisible) {
       setRightPanelCollapsed(false);
     }
-  }, [activeAnalysisExtension?.placement, listPanelVisible, scriptPanelVisible, setListPanelVisible, setRightPanelCollapsed, setScriptPanelVisible]);
+  }, [
+    activeAnalysisExtension?.placement,
+    ganttPanelVisible,
+    listPanelVisible,
+    scriptPanelVisible,
+    setGanttPanelVisible,
+    setListPanelVisible,
+    setRightPanelCollapsed,
+    setScriptPanelVisible,
+  ]);
 
   const handleToggleRightPanel = useCallback((panel: 'bcf' | 'ids' | 'lens') => {
     if (activeAnalysisExtension?.placement !== 'bottom') {
@@ -577,6 +612,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     if ((extension.placement ?? 'right') === 'bottom') {
       setScriptPanelVisible(false);
       setListPanelVisible(false);
+      setGanttPanelVisible(false);
       setRightPanelCollapsed(false);
       return;
     }
@@ -589,6 +625,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     analysisExtensionState.activeId,
     analysisExtensionState.extensions,
     setBcfPanelVisible,
+    setGanttPanelVisible,
     setIdsPanelVisible,
     setLensPanelVisible,
     setListPanelVisible,
@@ -600,6 +637,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     const panels = new Set<WorkspacePanel>();
     if (scriptPanelVisible) panels.add('script');
     if (listPanelVisible) panels.add('list');
+    if (ganttPanelVisible) panels.add('gantt');
     if (bcfPanelVisible) panels.add('bcf');
     if (idsPanelVisible) panels.add('ids');
     if (lensPanelVisible) panels.add('lens');
@@ -608,6 +646,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   }, [
     analysisExtensionState.activeId,
     bcfPanelVisible,
+    ganttPanelVisible,
     idsPanelVisible,
     lensPanelVisible,
     listPanelVisible,
@@ -619,6 +658,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     if (activeWorkspacePanels.size > 1) return 'Multiple Panels';
     if (activeWorkspacePanels.has('script')) return 'Script Editor';
     if (activeWorkspacePanels.has('list')) return 'Lists';
+    if (activeWorkspacePanels.has('gantt')) return 'Schedule';
     if (activeWorkspacePanels.has('bcf')) return 'BCF Issues';
     if (activeWorkspacePanels.has('ids')) return 'IDS Validation';
     if (activeWorkspacePanels.has('lens')) return 'Lens Rules';
@@ -741,7 +781,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         id="file-input-open"
         ref={fileInputRef}
         type="file"
-        accept=".ifc,.ifcx,.glb"
+        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57"
         multiple
         onChange={handleFileSelect}
         className="hidden"
@@ -749,7 +789,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       <input
         ref={addModelInputRef}
         type="file"
-        accept=".ifc,.ifcx,.glb"
+        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57"
         multiple
         onChange={handleAddModelSelect}
         className="hidden"
@@ -948,6 +988,13 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             <FileSpreadsheet className="h-4 w-4 mr-2" />
             Lists
           </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('gantt')}
+            onCheckedChange={() => handleToggleBottomPanel('gantt')}
+          >
+            <CalendarClock className="h-4 w-4 mr-2" />
+            Schedule (Gantt)
+          </DropdownMenuCheckboxItem>
           <DropdownMenuSeparator />
           <DropdownMenuCheckboxItem
             checked={activeWorkspacePanels.has('bcf')}
@@ -1011,6 +1058,11 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
 
       <Separator orientation="vertical" className="h-6 mx-1" />
 
+      {/* ── Search (Tier-0 inline; ⌘F or / to focus) ── */}
+      <SearchInline />
+
+      <Separator orientation="vertical" className="h-6 mx-1" />
+
       {/* ── Navigation Tools ── */}
       <ToolButton tool="select" icon={MousePointer2} label="Select" shortcut="V" activeTool={activeTool} onToolChange={setActiveTool} />
       <ToolButton tool="walk" icon={PersonStanding} label="Walk Mode" shortcut="C" activeTool={activeTool} onToolChange={setActiveTool} />
@@ -1020,6 +1072,15 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       {/* ── Measurement & Section ── */}
       <ToolButton tool="measure" icon={Ruler} label="Measure" shortcut="M" activeTool={activeTool} onToolChange={setActiveTool} />
       <ToolButton tool="section" icon={Scissors} label="Section" shortcut="X" activeTool={activeTool} onToolChange={setActiveTool} />
+      <ToolButton
+        tool="annotate"
+        icon={MapPin}
+        label="Annotate"
+        shortcut="P"
+        activeTool={activeTool}
+        onToolChange={setActiveTool}
+        activeAccentClass="bg-amber-500 text-white hover:bg-amber-500/90"
+      />
 
       {/* Floorplan dropdown */}
       {availableStoreys.length > 0 && (

package/src/components/viewer/PointCloudPanel.tsx

@@ -0,0 +1,174 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+/**
+ * Compact panel that exposes point cloud rendering controls (color mode,
+ * size mode, point size, EDL). Renders only when point cloud assets are
+ * loaded — sits over the canvas without affecting layout for IFC-only
+ * models.
+ */
+
+import { useViewerStore } from '@/store';
+import type { PointColorModeUi, PointSizeModeUi } from '@/store/slices/pointCloudSlice';
+import { cn } from '@/lib/utils';
+
+const COLOR_MODES: Array<{ value: PointColorModeUi; label: string; hint: string }> = [
+  { value: 'rgb',            label: 'RGB',            hint: 'Per-point colour from the source' },
+  { value: 'classification', label: 'Classification', hint: 'ASPRS class palette (ground, vegetation, building...)' },
+  { value: 'intensity',      label: 'Intensity',      hint: 'Greyscale ramp from per-point intensity' },
+  { value: 'height',         label: 'Height',         hint: 'Cool-warm ramp by Y-up world height' },
+  { value: 'fixed',          label: 'Solid',          hint: 'Single colour override' },
+];
+
+const SIZE_MODES: Array<{ value: PointSizeModeUi; label: string; hint: string }> = [
+  { value: 'fixed-px',       label: 'Fixed',    hint: 'Always render at the slider value (in pixels)' },
+  { value: 'attenuated',     label: 'Auto',     hint: 'Adaptive (closer = bigger), clamped to the slider as max' },
+  { value: 'adaptive-world', label: 'World',    hint: 'Pure world-space radius — splat covers N mm in source space' },
+];
+
+export interface PointCloudPanelProps {
+  /** Number of currently-loaded point cloud assets — panel hides when 0. */
+  assetCount: number;
+}
+
+export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
+  const colorMode = useViewerStore((s) => s.pointCloudColorMode);
+  const setColorMode = useViewerStore((s) => s.setPointCloudColorMode);
+  const sizeMode = useViewerStore((s) => s.pointCloudSizeMode);
+  const setSizeMode = useViewerStore((s) => s.setPointCloudSizeMode);
+  const pointSize = useViewerStore((s) => s.pointCloudPointSize);
+  const setPointSize = useViewerStore((s) => s.setPointCloudPointSize);
+  const worldRadius = useViewerStore((s) => s.pointCloudWorldRadius);
+  const setWorldRadius = useViewerStore((s) => s.setPointCloudWorldRadius);
+  const edlEnabled = useViewerStore((s) => s.pointCloudEdlEnabled);
+  const setEdlEnabled = useViewerStore((s) => s.setPointCloudEdlEnabled);
+  const edlStrength = useViewerStore((s) => s.pointCloudEdlStrength);
+  const setEdlStrength = useViewerStore((s) => s.setPointCloudEdlStrength);
+
+  if (assetCount <= 0) return null;
+
+  return (
+    <div className="absolute bottom-4 left-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-[200px]">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          Point Cloud
+        </span>
+        <span className="text-[10px] text-muted-foreground">
+          {assetCount} asset{assetCount === 1 ? '' : 's'}
+        </span>
+      </div>
+
+      {/* Color mode */}
+      <div className="flex flex-col gap-0.5">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Colour</span>
+        {COLOR_MODES.map((mode) => {
+          const active = colorMode === mode.value;
+          return (
+            <button
+              key={mode.value}
+              aria-pressed={active}
+              onClick={() => setColorMode(mode.value)}
+              title={mode.hint}
+              className={cn(
+                'flex items-center gap-2 px-2 py-1 rounded text-xs transition-colors text-left',
+                active
+                  ? 'bg-teal-600 text-white'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+              )}
+            >
+              {mode.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Size mode */}
+      <div className="flex flex-col gap-0.5">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Size</span>
+        <div className="grid grid-cols-3 gap-0.5">
+          {SIZE_MODES.map((mode) => {
+            const active = sizeMode === mode.value;
+            return (
+              <button
+                key={mode.value}
+                aria-pressed={active}
+                onClick={() => setSizeMode(mode.value)}
+                title={mode.hint}
+                className={cn(
+                  'px-1.5 py-1 rounded text-[11px] transition-colors',
+                  active
+                    ? 'bg-teal-600 text-white'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+                )}
+              >
+                {mode.label}
+              </button>
+            );
+          })}
+        </div>
+        <label className="flex items-center gap-2 mt-1">
+          <span className="text-[10px] text-muted-foreground w-8 shrink-0">{pointSize.toFixed(0)}px</span>
+          <input
+            type="range"
+            min={1}
+            max={20}
+            step={1}
+            value={pointSize}
+            onChange={(e) => setPointSize(Number(e.target.value))}
+            className="flex-1 h-1 accent-teal-600 cursor-pointer"
+            title="Splat size in pixels (or upper cap in Auto mode)"
+          />
+        </label>
+        {sizeMode !== 'fixed-px' && (
+          <label className="flex items-center gap-2">
+            <span className="text-[10px] text-muted-foreground w-8 shrink-0">
+              {(worldRadius * 1000).toFixed(0)}mm
+            </span>
+            <input
+              type="range"
+              min={1}
+              max={100}
+              step={1}
+              value={Math.round(worldRadius * 1000)}
+              onChange={(e) => setWorldRadius(Number(e.target.value) / 1000)}
+              className="flex-1 h-1 accent-teal-600 cursor-pointer"
+              title="World-space splat radius in millimetres"
+            />
+          </label>
+        )}
+      </div>
+
+      {/* EDL */}
+      <div className="flex flex-col gap-0.5">
+        <label className="flex items-center justify-between gap-2 cursor-pointer">
+          <span className="text-[9px] uppercase text-muted-foreground tracking-wider">EDL</span>
+          <input
+            type="checkbox"
+            checked={edlEnabled}
+            onChange={(e) => setEdlEnabled(e.target.checked)}
+            className="accent-teal-600"
+            title="Eye-Dome Lighting — adds depth perception via screen-space depth gradient"
+          />
+        </label>
+        {edlEnabled && (
+          <label className="flex items-center gap-2">
+            <span className="text-[10px] text-muted-foreground w-8 shrink-0">
+              {edlStrength.toFixed(1)}
+            </span>
+            <input
+              type="range"
+              min={0}
+              max={3}
+              step={0.1}
+              value={edlStrength}
+              onChange={(e) => setEdlStrength(Number(e.target.value))}
+              className="flex-1 h-1 accent-teal-600 cursor-pointer"
+              title="EDL strength multiplier"
+            />
+          </label>
+        )}
+      </div>
+    </div>
+  );
+}