@ifc-lite/viewer 1.7.0 → 1.8.0

package/src/components/viewer/MainToolbar.tsx

@@ -14,7 +14,7 @@ import {
   Scissors,
   Eye,
   EyeOff,
-  Focus,
+  Equal,
   Crosshair,
   Home,
   Maximize2,
@@ -34,13 +34,11 @@ import {
   SquareX,
   Building2,
   Plus,
+  Minus,
   MessageSquare,
   ClipboardCheck,
-  Pin,
-  PinOff,
   Palette,
   Orbit,
-  Trash2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -57,7 +55,8 @@ import {
   DropdownMenuSubContent,
 } from '@/components/ui/dropdown-menu';
 import { Progress } from '@/components/ui/progress';
-import { useViewerStore, isIfcxDataStore } from '@/store';
+import { useViewerStore, isIfcxDataStore, stringToEntityRef } from '@/store';
+import type { EntityRef } from '@/store';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
 import { GLTFExporter, CSVExporter } from '@ifc-lite/export';
@@ -158,8 +157,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const theme = useViewerStore((state) => state.theme);
   const toggleTheme = useViewerStore((state) => state.toggleTheme);
   const selectedEntityId = useViewerStore((state) => state.selectedEntityId);
-  const isolateEntity = useViewerStore((state) => state.isolateEntity);
-  const hideEntity = useViewerStore((state) => state.hideEntity);
+  const hideEntities = useViewerStore((state) => state.hideEntities);
   const showAll = useViewerStore((state) => state.showAll);
   const clearStoreySelection = useViewerStore((state) => state.clearStoreySelection);
   const error = useViewerStore((state) => state.error);
@@ -178,13 +176,14 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const setRightPanelCollapsed = useViewerStore((state) => state.setRightPanelCollapsed);
   const projectionMode = useViewerStore((state) => state.projectionMode);
   const toggleProjectionMode = useViewerStore((state) => state.toggleProjectionMode);
-  // Pinboard state
+  // Basket state (= + − isolation basket)
   const pinboardEntities = useViewerStore((state) => state.pinboardEntities);
-  const addToPinboard = useViewerStore((state) => state.addToPinboard);
-  const removeFromPinboard = useViewerStore((state) => state.removeFromPinboard);
-  const showPinboard = useViewerStore((state) => state.showPinboard);
-  const clearPinboard = useViewerStore((state) => state.clearPinboard);
-  const selectedEntity = useViewerStore((state) => state.selectedEntity);
+  const setBasket = useViewerStore((state) => state.setBasket);
+  const addToBasket = useViewerStore((state) => state.addToBasket);
+  const removeFromBasket = useViewerStore((state) => state.removeFromBasket);
+  const clearBasket = useViewerStore((state) => state.clearBasket);
+  // NOTE: selectedEntity and selectedEntitiesSet accessed via getState() in callbacks
+  // to avoid re-rendering MainToolbar on every Cmd+Click selection change.
   // Lens state
   const lensPanelVisible = useViewerStore((state) => state.lensPanelVisible);
   const toggleLensPanel = useViewerStore((state) => state.toggleLensPanel);
@@ -289,25 +288,85 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     e.target.value = '';
   }, [loadFilesSequentially, addIfcxOverlays, ifcDataStore]);
 
-  const handleIsolate = useCallback(() => {
-    if (selectedEntityId) {
-      isolateEntity(selectedEntityId);
+  /** Get current selection as EntityRef[] — uses getState() to avoid reactive subscriptions */
+  const getSelectionRefs = useCallback((): EntityRef[] => {
+    const state = useViewerStore.getState();
+    if (state.selectedEntitiesSet.size > 0) {
+      const refs: EntityRef[] = [];
+      for (const str of state.selectedEntitiesSet) {
+        refs.push(stringToEntityRef(str));
+      }
+      return refs;
+    }
+    if (state.selectedEntity) {
+      return [state.selectedEntity];
+    }
+    return [];
+  }, []);
+
+  const hasSelection = selectedEntityId !== null;
+
+  // Basket state
+  const showPinboard = useViewerStore((state) => state.showPinboard);
+
+  // Clear multi-select state after basket operations so subsequent − targets a single entity
+  const clearMultiSelect = useCallback(() => {
+    const state = useViewerStore.getState();
+    if (state.selectedEntitiesSet.size > 0) {
+      useViewerStore.setState({ selectedEntitiesSet: new Set(), selectedEntityIds: new Set() });
+    }
+  }, []);
+
+  // Basket operations
+  const handleSetBasket = useCallback(() => {
+    const state = useViewerStore.getState();
+    // If basket already exists and user hasn't explicitly multi-selected,
+    // re-apply the basket instead of replacing it with a stale single selection.
+    // Only an explicit multi-selection (Ctrl+Click) should replace an existing basket.
+    if (state.pinboardEntities.size > 0 && state.selectedEntitiesSet.size === 0) {
+      showPinboard();
+      return;
+    }
+    const refs = getSelectionRefs();
+    if (refs.length > 0) {
+      setBasket(refs);
+      clearMultiSelect();
+    }
+  }, [getSelectionRefs, setBasket, showPinboard, clearMultiSelect]);
+
+  const handleAddToBasket = useCallback(() => {
+    const refs = getSelectionRefs();
+    if (refs.length > 0) {
+      addToBasket(refs);
+      clearMultiSelect();
+    }
+  }, [getSelectionRefs, addToBasket, clearMultiSelect]);
+
+  const handleRemoveFromBasket = useCallback(() => {
+    const refs = getSelectionRefs();
+    if (refs.length > 0) {
+      removeFromBasket(refs);
+      clearMultiSelect();
     }
-  }, [selectedEntityId, isolateEntity]);
+  }, [getSelectionRefs, removeFromBasket, clearMultiSelect]);
 
   const clearSelection = useViewerStore((state) => state.clearSelection);
 
   const handleHide = useCallback(() => {
-    if (selectedEntityId) {
-      hideEntity(selectedEntityId);
-      // Clear selection after hiding - element is no longer visible
+    // Hide ALL selected entities (multi-select or single)
+    const state = useViewerStore.getState();
+    const ids: number[] = state.selectedEntityIds.size > 0
+      ? Array.from(state.selectedEntityIds)
+      : selectedEntityId !== null ? [selectedEntityId] : [];
+    if (ids.length > 0) {
+      hideEntities(ids);
       clearSelection();
     }
-  }, [selectedEntityId, hideEntity, clearSelection]);
+  }, [selectedEntityId, hideEntities, clearSelection]);
 
   const handleShowAll = useCallback(() => {
-    showAll();
-    clearStoreySelection(); // Also clear storey filtering (matches 'A' keyboard shortcut)
+    showAll();     // Clear hiddenEntities + isolatedEntities (basket contents preserved)
+    clearStoreySelection(); // Also clear storey filtering
   }, [showAll, clearStoreySelection]);
 
   const handleExportGLB = useCallback(() => {
@@ -675,9 +734,37 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
 
       <Separator orientation="vertical" className="h-6 mx-1" />
 
-      {/* ── Visibility & Filtering (all together) ── */}
-      <ActionButton icon={Focus} label="Isolate Selection" onClick={handleIsolate} shortcut="I" disabled={!selectedEntityId} />
-      <ActionButton icon={EyeOff} label="Hide Selection" onClick={handleHide} shortcut="Del" disabled={!selectedEntityId} />
+      {/* ── Basket Isolation (= + −) ── */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={pinboardEntities.size > 0 ? 'default' : 'ghost'}
+            size="icon-sm"
+            onClick={(e) => {
+              (e.currentTarget as HTMLButtonElement).blur();
+              handleSetBasket();
+            }}
+            disabled={!hasSelection && pinboardEntities.size === 0}
+            className={cn(
+              pinboardEntities.size > 0 && 'bg-primary text-primary-foreground relative',
+            )}
+          >
+            <Equal className="h-4 w-4" />
+            {pinboardEntities.size > 0 && (
+              <span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-[9px] font-bold rounded-full min-w-[14px] h-[14px] flex items-center justify-center px-0.5 border border-background">
+                {pinboardEntities.size}
+              </span>
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          Set Basket — isolate selection <span className="ml-2 text-xs opacity-60">(I)</span>
+        </TooltipContent>
+      </Tooltip>
+      <ActionButton icon={Plus} label="Add to Basket" onClick={handleAddToBasket} shortcut="+" disabled={!hasSelection} />
+      <ActionButton icon={Minus} label="Remove from Basket" onClick={handleRemoveFromBasket} shortcut="−" disabled={!hasSelection} />
+
+      <ActionButton icon={EyeOff} label="Hide Selection" onClick={handleHide} shortcut="Del / Space" disabled={!hasSelection} />
       <ActionButton icon={Eye} label="Show All (Reset Filters)" onClick={handleShowAll} shortcut="A" />
       <ActionButton icon={Maximize2} label="Fit All" onClick={() => cameraCallbacks.fitAll?.()} shortcut="Z" />
       <ActionButton
@@ -685,7 +772,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         label="Frame Selection"
         onClick={() => cameraCallbacks.frameSelection?.()}
         shortcut="F"
-        disabled={!selectedEntityId}
+        disabled={!hasSelection}
       />
 
       <DropdownMenu>
@@ -730,60 +817,6 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         </DropdownMenuContent>
       </DropdownMenu>
 
-      {/* Pinboard dropdown */}
-      <DropdownMenu>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant={pinboardEntities.size > 0 ? 'default' : 'ghost'}
-                size="icon-sm"
-                className={cn(pinboardEntities.size > 0 && 'bg-primary text-primary-foreground relative')}
-              >
-                <Pin className="h-4 w-4" />
-                {pinboardEntities.size > 0 && (
-                  <span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-[9px] font-bold rounded-full min-w-[14px] h-[14px] flex items-center justify-center px-0.5 border border-background">
-                    {pinboardEntities.size}
-                  </span>
-                )}
-              </Button>
-            </DropdownMenuTrigger>
-          </TooltipTrigger>
-          <TooltipContent>Pinboard ({pinboardEntities.size})</TooltipContent>
-        </Tooltip>
-        <DropdownMenuContent>
-          <DropdownMenuItem
-            onClick={() => { if (selectedEntity) addToPinboard([selectedEntity]); }}
-            disabled={!selectedEntity}
-          >
-            <Pin className="h-4 w-4 mr-2" />
-            Pin Selection
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={() => { if (selectedEntity) removeFromPinboard([selectedEntity]); }}
-            disabled={!selectedEntity}
-          >
-            <PinOff className="h-4 w-4 mr-2" />
-            Unpin Selection
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onClick={() => showPinboard()}
-            disabled={pinboardEntities.size === 0}
-          >
-            <Eye className="h-4 w-4 mr-2" />
-            Show Pinboard
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={() => clearPinboard()}
-            disabled={pinboardEntities.size === 0}
-          >
-            <Trash2 className="h-4 w-4 mr-2" />
-            Clear Pinboard
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
       {/* Lens (rule-based filtering) */}
       <Tooltip>
         <TooltipTrigger asChild>

package/src/components/viewer/Section2DPanel.tsx

@@ -12,7 +12,7 @@
  */
 
 import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { X, Download, Eye, EyeOff, Maximize2, ZoomIn, ZoomOut, Loader2, Printer, GripVertical, MoreHorizontal, RefreshCw, Pin, PinOff, Palette, Ruler, Trash2, FileText, Shapes, Box } from 'lucide-react';
+import { X, Download, Eye, EyeOff, Maximize2, ZoomIn, ZoomOut, Loader2, Printer, GripVertical, MoreHorizontal, RefreshCw, Pin, PinOff, Palette, Ruler, Trash2, FileText, Shapes, Box, PenTool, Hexagon, Type, Cloud, MousePointer2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -28,9 +28,11 @@ import { type GeometryResult } from '@ifc-lite/geometry';
 import { DrawingSettingsPanel } from './DrawingSettingsPanel';
 import { SheetSetupPanel } from './SheetSetupPanel';
 import { TitleBlockEditor } from './TitleBlockEditor';
+import { TextAnnotationEditor } from './TextAnnotationEditor';
 import { Drawing2DCanvas } from './Drawing2DCanvas';
 import { useDrawingGeneration } from '@/hooks/useDrawingGeneration';
 import { useMeasure2D } from '@/hooks/useMeasure2D';
+import { useAnnotation2D } from '@/hooks/useAnnotation2D';
 import { useViewControls } from '@/hooks/useViewControls';
 import { useDrawingExport } from '@/hooks/useDrawingExport';
 
@@ -98,6 +100,39 @@ export function Section2DPanel({
   const measure2DSnapPoint = useViewerStore((s) => s.measure2DSnapPoint);
   const setMeasure2DSnapPoint = useViewerStore((s) => s.setMeasure2DSnapPoint);
 
+  // Annotation tool state
+  const annotation2DActiveTool = useViewerStore((s) => s.annotation2DActiveTool);
+  const setAnnotation2DActiveTool = useViewerStore((s) => s.setAnnotation2DActiveTool);
+  const annotation2DCursorPos = useViewerStore((s) => s.annotation2DCursorPos);
+  const setAnnotation2DCursorPos = useViewerStore((s) => s.setAnnotation2DCursorPos);
+  // Polygon area state
+  const polygonArea2DPoints = useViewerStore((s) => s.polygonArea2DPoints);
+  const polygonArea2DResults = useViewerStore((s) => s.polygonArea2DResults);
+  const addPolygonArea2DPoint = useViewerStore((s) => s.addPolygonArea2DPoint);
+  const completePolygonArea2D = useViewerStore((s) => s.completePolygonArea2D);
+  const cancelPolygonArea2D = useViewerStore((s) => s.cancelPolygonArea2D);
+  const clearPolygonArea2DResults = useViewerStore((s) => s.clearPolygonArea2DResults);
+  // Text annotation state
+  const textAnnotations2D = useViewerStore((s) => s.textAnnotations2D);
+  const textAnnotation2DEditing = useViewerStore((s) => s.textAnnotation2DEditing);
+  const addTextAnnotation2D = useViewerStore((s) => s.addTextAnnotation2D);
+  const updateTextAnnotation2D = useViewerStore((s) => s.updateTextAnnotation2D);
+  const removeTextAnnotation2D = useViewerStore((s) => s.removeTextAnnotation2D);
+  const setTextAnnotation2DEditing = useViewerStore((s) => s.setTextAnnotation2DEditing);
+  // Cloud annotation state
+  const cloudAnnotation2DPoints = useViewerStore((s) => s.cloudAnnotation2DPoints);
+  const cloudAnnotations2D = useViewerStore((s) => s.cloudAnnotations2D);
+  const addCloudAnnotation2DPoint = useViewerStore((s) => s.addCloudAnnotation2DPoint);
+  const completeCloudAnnotation2D = useViewerStore((s) => s.completeCloudAnnotation2D);
+  const cancelCloudAnnotation2D = useViewerStore((s) => s.cancelCloudAnnotation2D);
+  // Selection
+  const selectedAnnotation2D = useViewerStore((s) => s.selectedAnnotation2D);
+  const setSelectedAnnotation2D = useViewerStore((s) => s.setSelectedAnnotation2D);
+  const deleteSelectedAnnotation2D = useViewerStore((s) => s.deleteSelectedAnnotation2D);
+  const moveAnnotation2D = useViewerStore((s) => s.moveAnnotation2D);
+  // Bulk
+  const clearAllAnnotations2D = useViewerStore((s) => s.clearAllAnnotations2D);
+
   const sectionPlane = useViewerStore((s) => s.sectionPlane);
   const activeTool = useViewerStore((s) => s.activeTool);
   const models = useViewerStore((s) => s.models);
@@ -228,7 +263,7 @@ export function Section2DPanel({
     isPinned, cachedSheetTransformRef,
   });
 
-  const { handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, handleMouseEnter } = useMeasure2D({
+  const measureHandlers = useMeasure2D({
     drawing, viewTransform, setViewTransform, sectionAxis: sectionPlane.axis, containerRef,
     measure2DMode, measure2DStart, measure2DCurrent,
     measure2DShiftLocked, measure2DLockedAxis,
@@ -236,10 +271,67 @@ export function Section2DPanel({
     setMeasure2DSnapPoint, cancelMeasure2D, completeMeasure2D,
   });
 
+  const annotationHandlers = useAnnotation2D({
+    drawing, viewTransform, sectionAxis: sectionPlane.axis, containerRef,
+    activeTool: annotation2DActiveTool, setActiveTool: setAnnotation2DActiveTool,
+    polygonArea2DPoints, addPolygonArea2DPoint, completePolygonArea2D, cancelPolygonArea2D,
+    textAnnotations2D, addTextAnnotation2D, setTextAnnotation2DEditing,
+    cloudAnnotation2DPoints, cloudAnnotations2D, addCloudAnnotation2DPoint, completeCloudAnnotation2D, cancelCloudAnnotation2D,
+    measure2DResults, polygonArea2DResults,
+    selectedAnnotation2D, setSelectedAnnotation2D, deleteSelectedAnnotation2D, moveAnnotation2D,
+    setAnnotation2DCursorPos, setMeasure2DSnapPoint,
+  });
+
+  // Unified mouse handlers that dispatch to the right tool
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (annotation2DActiveTool === 'measure') {
+      measureHandlers.handleMouseDown(e);
+    } else if (annotation2DActiveTool === 'none') {
+      // Try annotation selection/drag first; if it consumed the click, don't pan
+      const consumed = annotationHandlers.handleMouseDown(e);
+      if (!consumed) {
+        measureHandlers.handleMouseDown(e);
+      }
+    } else {
+      annotationHandlers.handleMouseDown(e);
+    }
+  }, [annotation2DActiveTool, measureHandlers, annotationHandlers]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    // If dragging an annotation, let the annotation handler handle it
+    if (annotationHandlers.isDraggingRef.current) {
+      annotationHandlers.handleMouseMove(e);
+      return;
+    }
+    if (annotation2DActiveTool === 'measure' || annotation2DActiveTool === 'none') {
+      measureHandlers.handleMouseMove(e);
+    } else {
+      annotationHandlers.handleMouseMove(e);
+    }
+  }, [annotation2DActiveTool, measureHandlers, annotationHandlers]);
+
+  const handleMouseUp = useCallback((e: React.MouseEvent) => {
+    annotationHandlers.handleMouseUp(e);
+    measureHandlers.handleMouseUp();
+  }, [measureHandlers, annotationHandlers]);
+
+  const handleMouseLeave = useCallback(() => {
+    measureHandlers.handleMouseLeave();
+  }, [measureHandlers]);
+
+  const handleMouseEnter = useCallback((e: React.MouseEvent) => {
+    measureHandlers.handleMouseEnter(e);
+  }, [measureHandlers]);
+
+  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
+    annotationHandlers.handleDoubleClick(e);
+  }, [annotationHandlers]);
+
   const { formatDistance, handleExportSVG, handlePrint } = useDrawingExport({
     drawing, displayOptions, sectionPlane, activePresetId,
     entityColorMap, overridesEnabled, overrideEngine,
-    measure2DResults, sheetEnabled, activeSheet,
+    measure2DResults, polygonArea2DResults, textAnnotations2D, cloudAnnotations2D,
+    sheetEnabled, activeSheet,
   });
 
   // ═══════════════════════════════════════════════════════════════════════════
@@ -271,6 +363,42 @@ export function Section2DPanel({
     setIsPinned((prev) => !prev);
   }, []);
 
+  // Text editor handlers
+  const handleTextConfirm = useCallback((id: string, text: string) => {
+    updateTextAnnotation2D(id, { text });
+    setTextAnnotation2DEditing(null);
+  }, [updateTextAnnotation2D, setTextAnnotation2DEditing]);
+
+  const handleTextCancel = useCallback((id: string) => {
+    // If text is empty (just created), remove it
+    const annotation = textAnnotations2D.find((a) => a.id === id);
+    if (annotation && !annotation.text.trim()) {
+      removeTextAnnotation2D(id);
+    }
+    setTextAnnotation2DEditing(null);
+  }, [textAnnotations2D, removeTextAnnotation2D, setTextAnnotation2DEditing]);
+
+  // Check if any annotations exist
+  const hasAnnotations = measure2DResults.length > 0 ||
+    polygonArea2DResults.length > 0 ||
+    textAnnotations2D.length > 0 ||
+    cloudAnnotations2D.length > 0;
+
+  // Cursor style based on active tool
+  const cursorClass = useMemo(() => {
+    if (selectedAnnotation2D && annotation2DActiveTool === 'none') return 'cursor-move';
+    switch (annotation2DActiveTool) {
+      case 'measure':
+      case 'polygon-area':
+      case 'cloud':
+        return 'cursor-crosshair';
+      case 'text':
+        return 'cursor-text';
+      default:
+        return 'cursor-grab active:cursor-grabbing';
+    }
+  }, [annotation2DActiveTool, selectedAnnotation2D]);
+
   // ═══════════════════════════════════════════════════════════════════════════
   // RESIZE HANDLING
   // ═══════════════════════════════════════════════════════════════════════════
@@ -400,25 +528,55 @@ export function Section2DPanel({
                 {displayOptions.useSymbolicRepresentations ? <Shapes className="h-4 w-4" /> : <Box className="h-4 w-4" />}
               </Button>
 
-              {/* 2D Measure Tool */}
-              <Button
-                variant={measure2DMode ? 'default' : 'ghost'}
-                size="icon-sm"
-                onClick={toggleMeasure2DMode}
-                title={measure2DMode ? 'Exit measure mode' : 'Measure distance'}
-              >
-                <Ruler className="h-4 w-4" />
-              </Button>
-              {measure2DResults.length > 0 && (
-                <Button
-                  variant="ghost"
-                  size="icon-sm"
-                  onClick={clearMeasure2DResults}
-                  title="Clear measurements"
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
-              )}
+              {/* Annotation Tools Dropdown */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant={annotation2DActiveTool !== 'none' ? 'default' : 'ghost'}
+                    size="icon-sm"
+                    title="Annotation tools"
+                  >
+                    <PenTool className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool('none')}>
+                    <MousePointer2 className="h-4 w-4 mr-2" />
+                    Select / Pan
+                    {annotation2DActiveTool === 'none' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'measure' ? 'none' : 'measure')}>
+                    <Ruler className="h-4 w-4 mr-2" />
+                    Distance Measure
+                    {annotation2DActiveTool === 'measure' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'polygon-area' ? 'none' : 'polygon-area')}>
+                    <Hexagon className="h-4 w-4 mr-2" />
+                    Area Measure
+                    {annotation2DActiveTool === 'polygon-area' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'text' ? 'none' : 'text')}>
+                    <Type className="h-4 w-4 mr-2" />
+                    Text Box
+                    {annotation2DActiveTool === 'text' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'cloud' ? 'none' : 'cloud')}>
+                    <Cloud className="h-4 w-4 mr-2" />
+                    Revision Cloud
+                    {annotation2DActiveTool === 'cloud' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  {hasAnnotations && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={clearAllAnnotations2D}>
+                        <Trash2 className="h-4 w-4 mr-2" />
+                        Clear All Annotations
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
 
               {/* Graphic Override Settings */}
               <Button
@@ -537,14 +695,30 @@ export function Section2DPanel({
                     {displayOptions.useSymbolicRepresentations ? <Shapes className="h-4 w-4 mr-2" /> : <Box className="h-4 w-4 mr-2" />}
                     {displayOptions.useSymbolicRepresentations ? 'Symbolic (Plan)' : 'Section Cut (Body)'}
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={toggleMeasure2DMode}>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool('none')}>
+                    <MousePointer2 className="h-4 w-4 mr-2" />
+                    Select / Pan {annotation2DActiveTool === 'none' ? '(On)' : ''}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'measure' ? 'none' : 'measure')}>
                     <Ruler className="h-4 w-4 mr-2" />
-                    Measure {measure2DMode ? 'On' : 'Off'}
+                    Distance Measure {annotation2DActiveTool === 'measure' ? '(On)' : ''}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'polygon-area' ? 'none' : 'polygon-area')}>
+                    <Hexagon className="h-4 w-4 mr-2" />
+                    Area Measure {annotation2DActiveTool === 'polygon-area' ? '(On)' : ''}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'text' ? 'none' : 'text')}>
+                    <Type className="h-4 w-4 mr-2" />
+                    Text Box {annotation2DActiveTool === 'text' ? '(On)' : ''}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'cloud' ? 'none' : 'cloud')}>
+                    <Cloud className="h-4 w-4 mr-2" />
+                    Revision Cloud {annotation2DActiveTool === 'cloud' ? '(On)' : ''}
                   </DropdownMenuItem>
-                  {measure2DResults.length > 0 && (
-                    <DropdownMenuItem onClick={clearMeasure2DResults}>
+                  {hasAnnotations && (
+                    <DropdownMenuItem onClick={clearAllAnnotations2D}>
                       <Trash2 className="h-4 w-4 mr-2" />
-                      Clear Measurements
+                      Clear All Annotations
                     </DropdownMenuItem>
                   )}
                   <DropdownMenuSeparator />
@@ -602,13 +776,13 @@ export function Section2DPanel({
       {/* Drawing Canvas */}
       <div
         ref={containerRef}
-        className={`relative flex-1 overflow-hidden bg-white dark:bg-zinc-950 rounded-b-lg ${measure2DMode ? 'cursor-crosshair' : 'cursor-grab active:cursor-grabbing'
-          }`}
+        className={`relative flex-1 overflow-hidden bg-white dark:bg-zinc-950 rounded-b-lg ${cursorClass}`}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onDoubleClick={handleDoubleClick}
       >
         {status === 'generating' && (
           <div className="absolute inset-0 flex flex-col items-center justify-center bg-background/80">
@@ -658,6 +832,15 @@ export function Section2DPanel({
               sectionAxis={sectionPlane.axis}
               isPinned={isPinned}
               cachedSheetTransformRef={cachedSheetTransformRef}
+              annotation2DActiveTool={annotation2DActiveTool}
+              annotation2DCursorPos={annotation2DCursorPos}
+              polygonAreaPoints={polygonArea2DPoints}
+              polygonAreaResults={polygonArea2DResults}
+              textAnnotations={textAnnotations2D}
+              textAnnotationEditing={textAnnotation2DEditing}
+              cloudAnnotationPoints={cloudAnnotation2DPoints}
+              cloudAnnotations={cloudAnnotations2D}
+              selectedAnnotation={selectedAnnotation2D}
             />
             {/* Subtle updating indicator - shows while regenerating without hiding the drawing */}
             {isRegenerating && (
@@ -669,6 +852,25 @@ export function Section2DPanel({
           </>
         )}
 
+        {/* Text Annotation Editor Overlay */}
+        {textAnnotation2DEditing && (() => {
+          const editingAnnotation = textAnnotations2D.find((a) => a.id === textAnnotation2DEditing);
+          if (!editingAnnotation) return null;
+          const scaleX = sectionPlane.axis === 'side' ? -viewTransform.scale : viewTransform.scale;
+          const scaleY = sectionPlane.axis === 'down' ? viewTransform.scale : -viewTransform.scale;
+          const screenX = editingAnnotation.position.x * scaleX + viewTransform.x;
+          const screenY = editingAnnotation.position.y * scaleY + viewTransform.y;
+          return (
+            <TextAnnotationEditor
+              annotation={editingAnnotation}
+              screenX={screenX}
+              screenY={screenY}
+              onConfirm={handleTextConfirm}
+              onCancel={handleTextCancel}
+            />
+          );
+        })()}
+
         {/* Measure mode tip - bottom right */}
         {measure2DMode && measure2DStart && (
           <div className="absolute bottom-2 right-2 pointer-events-none z-10">
@@ -679,6 +881,44 @@ export function Section2DPanel({
           </div>
         )}
 
+        {/* Polygon area tip */}
+        {annotation2DActiveTool === 'polygon-area' && (
+          <div className="absolute bottom-2 right-2 pointer-events-none z-10">
+            <div className="text-[10px] text-black bg-white/80 px-1.5 py-0.5 rounded">
+              {polygonArea2DPoints.length === 0 ? 'Click to place first vertex · Hold Shift to constrain' :
+               polygonArea2DPoints.length < 3 ? `${polygonArea2DPoints.length} vertices — need at least 3 · Shift = constrain` :
+               'Double-click or click first vertex to close · Shift = constrain'}
+            </div>
+          </div>
+        )}
+
+        {/* Cloud tool tip */}
+        {annotation2DActiveTool === 'cloud' && (
+          <div className="absolute bottom-2 right-2 pointer-events-none z-10">
+            <div className="text-[10px] text-black bg-white/80 px-1.5 py-0.5 rounded">
+              {cloudAnnotation2DPoints.length === 0 ? 'Click to place first corner' : 'Click to place second corner · Shift = square'}
+            </div>
+          </div>
+        )}
+
+        {/* Text tool tip */}
+        {annotation2DActiveTool === 'text' && !textAnnotation2DEditing && (
+          <div className="absolute bottom-2 right-2 pointer-events-none z-10">
+            <div className="text-[10px] text-black bg-white/80 px-1.5 py-0.5 rounded">
+              Click to place text box
+            </div>
+          </div>
+        )}
+
+        {/* Selection tip */}
+        {selectedAnnotation2D && annotation2DActiveTool === 'none' && (
+          <div className="absolute bottom-2 right-2 pointer-events-none z-10">
+            <div className="text-[10px] text-black bg-white/80 px-1.5 py-0.5 rounded">
+              {selectedAnnotation2D.type === 'text' ? 'Del = delete · Drag to move · Double-click to edit' : 'Del = delete · Drag to move'} · Esc = deselect
+            </div>
+          </div>
+        )}
+
         {status === 'ready' && drawing && drawing.cutPolygons.length === 0 && (!drawing.lines || drawing.lines.length === 0) && (
           <div className="absolute inset-0 flex items-center justify-center">
             <div className="text-center text-muted-foreground">