@ifc-lite/viewer 1.1.6 → 1.5.0

package/src/components/viewer/ToolOverlays.tsx

@@ -6,10 +6,12 @@
  * Tool-specific overlays for measure and section tools
  */
 
-import { useCallback } from 'react';
-import { X, Trash2, Ruler, Slice } from 'lucide-react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import { X, Trash2, Ruler, Slice, ChevronDown, FileImage } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { useViewerStore, type Measurement } from '@/store';
+import { useViewerStore, type Measurement, type SnapVisualization } from '@/store';
+import type { MeasurementConstraintEdge } from '@/store/types';
+import { SnapType, type SnapTarget } from '@ifc-lite/renderer';
 
 export function ToolOverlays() {
   const activeTool = useViewerStore((s) => s.activeTool);
@@ -28,81 +30,180 @@ export function ToolOverlays() {
 function MeasureOverlay() {
   const measurements = useViewerStore((s) => s.measurements);
   const pendingMeasurePoint = useViewerStore((s) => s.pendingMeasurePoint);
+  const activeMeasurement = useViewerStore((s) => s.activeMeasurement);
+  const snapTarget = useViewerStore((s) => s.snapTarget);
+  const snapVisualization = useViewerStore((s) => s.snapVisualization);
+  const snapEnabled = useViewerStore((s) => s.snapEnabled);
+  const measurementConstraintEdge = useViewerStore((s) => s.measurementConstraintEdge);
+  const toggleSnap = useViewerStore((s) => s.toggleSnap);
   const deleteMeasurement = useViewerStore((s) => s.deleteMeasurement);
   const clearMeasurements = useViewerStore((s) => s.clearMeasurements);
   const setActiveTool = useViewerStore((s) => s.setActiveTool);
+  const projectToScreen = useViewerStore((s) => s.cameraCallbacks.projectToScreen);
+
+  // Track cursor position in ref (no re-renders on mouse move)
+  const cursorPosRef = React.useRef<{ x: number; y: number } | null>(null);
+  // Only update snap indicator position when snap target changes (not on every cursor move)
+  const [snapIndicatorPos, setSnapIndicatorPos] = useState<{ x: number; y: number } | null>(null);
+  // Panel collapsed by default for minimal UI
+  const [isPanelCollapsed, setIsPanelCollapsed] = useState(true);
+  // Ref to the overlay container for coordinate conversion
+  const overlayRef = React.useRef<HTMLDivElement>(null);
+
+  // Update cursor position in ref (no re-renders)
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      // Convert page coords to overlay-relative coords for consistent SVG positioning
+      const container = overlayRef.current?.parentElement;
+      if (container) {
+        const rect = container.getBoundingClientRect();
+        cursorPosRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      } else {
+        cursorPosRef.current = { x: e.clientX, y: e.clientY };
+      }
+    };
+    
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+
+  // Update snap indicator position when snap target changes
+  // Cursor position is stored in ref (no re-renders on mouse move)
+  // Snap target changes already trigger re-renders, so indicator will update frequently enough
+  useEffect(() => {
+    if (snapTarget && cursorPosRef.current) {
+      setSnapIndicatorPos(cursorPosRef.current);
+    } else {
+      setSnapIndicatorPos(null);
+    }
+  }, [snapTarget]);
 
   const handleClear = useCallback(() => {
     clearMeasurements();
   }, [clearMeasurements]);
 
-  const handleClose = useCallback(() => {
-    setActiveTool('select');
-  }, [setActiveTool]);
-
   const handleDeleteMeasurement = useCallback((id: string) => {
     deleteMeasurement(id);
   }, [deleteMeasurement]);
 
+  const togglePanel = useCallback(() => {
+    setIsPanelCollapsed(prev => !prev);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setActiveTool('select');
+  }, [setActiveTool]);
+
   // Calculate total distance
   const totalDistance = measurements.reduce((sum, m) => sum + m.distance, 0);
 
   return (
     <>
-      {/* Measure Tool Panel */}
-      <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-background/95 backdrop-blur-sm rounded-lg border shadow-lg p-3 min-w-64 z-30">
-        <div className="flex items-center justify-between gap-4 mb-3">
-          <div className="flex items-center gap-2">
+      {/* Hidden ref element for coordinate calculation */}
+      <div ref={overlayRef} className="absolute top-0 left-0 w-0 h-0" />
+      
+      {/* Compact Measure Tool Panel */}
+      <div className="pointer-events-auto absolute top-4 left-1/2 -translate-x-1/2 bg-background/95 backdrop-blur-sm rounded-lg border shadow-lg z-30">
+        {/* Header - always visible */}
+        <div className="flex items-center justify-between gap-2 p-2">
+          <button
+            onClick={togglePanel}
+            className="flex items-center gap-2 hover:bg-accent/50 rounded px-2 py-1 transition-colors"
+          >
             <Ruler className="h-4 w-4 text-primary" />
-            <span className="font-medium text-sm">Measure Tool</span>
-          </div>
+            <span className="font-medium text-sm">Measure</span>
+            {measurements.length > 0 && !isPanelCollapsed && (
+              <span className="text-xs text-muted-foreground">({measurements.length})</span>
+            )}
+            <ChevronDown className={`h-3 w-3 transition-transform ${isPanelCollapsed ? '-rotate-90' : ''}`} />
+          </button>
           <div className="flex items-center gap-1">
-            <Button variant="ghost" size="icon-sm" onClick={handleClear} title="Clear all">
-              <Trash2 className="h-4 w-4" />
-            </Button>
+            {measurements.length > 0 && (
+              <Button variant="ghost" size="icon-sm" onClick={handleClear} title="Clear all">
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            )}
             <Button variant="ghost" size="icon-sm" onClick={handleClose} title="Close">
-              <X className="h-4 w-4" />
+              <X className="h-3 w-3" />
             </Button>
           </div>
         </div>
 
-        <div className="text-xs text-muted-foreground mb-3">
-          Click on the model to place measurement points
-        </div>
-
-        {measurements.length > 0 ? (
-          <div className="space-y-2">
-            {measurements.map((m, i) => (
-              <MeasurementItem
-                key={m.id}
-                measurement={m}
-                index={i}
-                onDelete={handleDeleteMeasurement}
-              />
-            ))}
-            {measurements.length > 1 && (
-              <div className="flex items-center justify-between border-t pt-2 mt-2 text-sm font-medium">
-                <span>Total</span>
-                <span className="font-mono">{formatDistance(totalDistance)}</span>
+        {/* Expandable content */}
+        {!isPanelCollapsed && (
+          <div className="border-t px-2 pb-2 min-w-56">
+            {measurements.length > 0 ? (
+              <div className="space-y-1 mt-2">
+                {measurements.map((m, i) => (
+                  <MeasurementItem
+                    key={m.id}
+                    measurement={m}
+                    index={i}
+                    onDelete={handleDeleteMeasurement}
+                  />
+                ))}
+                {measurements.length > 1 && (
+                  <div className="flex items-center justify-between border-t pt-1 mt-1 text-xs font-medium">
+                    <span>Total</span>
+                    <span className="font-mono">{formatDistance(totalDistance)}</span>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="text-center py-2 text-muted-foreground text-xs">
+                No measurements
               </div>
             )}
           </div>
-        ) : (
-          <div className="text-center py-4 text-muted-foreground text-sm">
-            No measurements yet
-          </div>
         )}
       </div>
 
-      {/* Instruction hint */}
-      <div className="absolute bottom-20 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-2 rounded-full text-sm shadow-lg z-30">
-        {pendingMeasurePoint
-          ? 'Click to set end point'
-          : 'Click on model to set start point'}
+      {/* Instruction hint - brutalist style with snap-colored shadow */}
+      <div 
+        className="pointer-events-auto absolute bottom-16 left-1/2 -translate-x-1/2 z-30 bg-zinc-900 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-900 px-3 py-1.5 border-2 border-zinc-900 dark:border-zinc-100 transition-shadow duration-150"
+        style={{
+          boxShadow: snapTarget
+            ? `4px 4px 0px 0px ${
+                snapTarget.type === 'vertex' ? '#FFEB3B' :
+                snapTarget.type === 'edge' ? '#FF9800' :
+                snapTarget.type === 'face' ? '#03A9F4' : '#00BCD4'
+              }`
+            : '3px 3px 0px 0px rgba(0,0,0,0.3)'
+        }}
+      >
+        <span className="font-mono text-xs uppercase tracking-wide">
+          {activeMeasurement ? 'Release to complete' : 'Drag to measure'}
+        </span>
+      </div>
+
+      {/* Snap toggle - brutalist style */}
+      <div className="pointer-events-auto absolute bottom-4 left-1/2 -translate-x-1/2 z-30">
+        <button
+          onClick={toggleSnap}
+          className={`px-2 py-1 font-mono text-[10px] uppercase tracking-wider border-2 transition-colors ${
+            snapEnabled 
+              ? 'bg-primary text-primary-foreground border-primary' 
+              : 'bg-zinc-100 dark:bg-zinc-900 text-zinc-500 border-zinc-300 dark:border-zinc-700'
+          }`}
+          title="Toggle snap (S key)"
+        >
+          Snap {snapEnabled ? 'On' : 'Off'}
+        </button>
       </div>
 
-      {/* Render measurement lines and labels */}
-      <MeasurementOverlays measurements={measurements} pending={pendingMeasurePoint} />
+      {/* Render measurement lines, labels, and snap indicators */}
+      <MeasurementOverlays
+        measurements={measurements}
+        pending={pendingMeasurePoint}
+        activeMeasurement={activeMeasurement}
+        snapTarget={snapTarget}
+        snapVisualization={snapVisualization}
+        hoverPosition={snapIndicatorPos}
+        projectToScreen={projectToScreen}
+        constraintEdge={measurementConstraintEdge}
+      />
     </>
   );
 }
@@ -115,16 +216,16 @@ interface MeasurementItemProps {
 
 function MeasurementItem({ measurement, index, onDelete }: MeasurementItemProps) {
   return (
-    <div className="flex items-center justify-between bg-muted/50 rounded px-2 py-1 text-sm">
-      <span className="text-muted-foreground">#{index + 1}</span>
-      <span className="font-mono">{formatDistance(measurement.distance)}</span>
+    <div className="flex items-center justify-between bg-muted/50 rounded px-2 py-0.5 text-xs">
+      <span className="text-muted-foreground text-xs">#{index + 1}</span>
+      <span className="font-mono font-medium">{formatDistance(measurement.distance)}</span>
       <Button
         variant="ghost"
         size="icon-sm"
-        className="h-5 w-5"
+        className="h-4 w-4 hover:bg-destructive/20"
         onClick={() => onDelete(measurement.id)}
       >
-        <X className="h-3 w-3" />
+        <X className="h-2.5 w-2.5" />
       </Button>
     </div>
   );
@@ -133,18 +234,79 @@ function MeasurementItem({ measurement, index, onDelete }: MeasurementItemProps)
 interface MeasurementOverlaysProps {
   measurements: Measurement[];
   pending: { screenX: number; screenY: number } | null;
+  activeMeasurement: { start: { screenX: number; screenY: number; x: number; y: number; z: number }; current: { screenX: number; screenY: number }; distance: number } | null;
+  snapTarget: SnapTarget | null;
+  snapVisualization: SnapVisualization | null;
+  hoverPosition?: { x: number; y: number } | null;
+  projectToScreen?: (worldPos: { x: number; y: number; z: number }) => { x: number; y: number } | null;
+  constraintEdge?: MeasurementConstraintEdge | null;
 }
 
-function MeasurementOverlays({ measurements, pending }: MeasurementOverlaysProps) {
+const MeasurementOverlays = React.memo(function MeasurementOverlays({ measurements, pending, activeMeasurement, snapTarget, snapVisualization, hoverPosition, projectToScreen, constraintEdge }: MeasurementOverlaysProps) {
+  // Determine snap indicator position
+  // Priority: activeMeasurement.current > snapTarget projected position > hoverPosition (fallback)
+  const snapIndicatorPos = useMemo(() => {
+    // During active measurement, use the measurement's current position
+    if (activeMeasurement) {
+      return { x: activeMeasurement.current.screenX, y: activeMeasurement.current.screenY };
+    }
+    // During hover, project the snap target's world position to screen
+    // This ensures the indicator is at the actual snap point, not the cursor
+    if (snapTarget && projectToScreen) {
+      const projected = projectToScreen(snapTarget.position);
+      if (projected) {
+        return projected;
+      }
+    }
+    // Fallback to hover position (cursor position)
+    return hoverPosition ?? null;
+  }, [
+    activeMeasurement?.current?.screenX,
+    activeMeasurement?.current?.screenY,
+    snapTarget?.position?.x,
+    snapTarget?.position?.y,
+    snapTarget?.position?.z,
+    projectToScreen,
+    hoverPosition?.x,
+    hoverPosition?.y,
+  ]);
+
+  // Stable values for effect dependencies
+  const measurementsCount = measurements.length;
+  const hasActiveMeasurement = !!activeMeasurement;
+  const hasSnapTarget = !!snapTarget;
+  const hasSnapVisualization = !!snapVisualization;
+
+
   return (
     <>
+      {/* SVG filter definitions for glow effect */}
+      <svg className="absolute w-0 h-0 pointer-events-none" style={{ pointerEvents: 'none' }}>
+        <defs>
+          <filter id="glow">
+            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+            <feMerge>
+              <feMergeNode in="coloredBlur"/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+          <filter id="snap-glow">
+            <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
+            <feMerge>
+              <feMergeNode in="coloredBlur"/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+        </defs>
+      </svg>
+
       {/* Completed measurements */}
       {measurements.map((m) => (
-        <div key={m.id}>
+        <div key={m.id} className="pointer-events-none">
           {/* Line connecting start and end */}
           <svg
             className="absolute inset-0 pointer-events-none z-20"
-            style={{ overflow: 'visible' }}
+            style={{ overflow: 'visible', pointerEvents: 'none' }}
           >
             <line
               x1={m.start.screenX}
@@ -153,25 +315,32 @@ function MeasurementOverlays({ measurements, pending }: MeasurementOverlaysProps
               y2={m.end.screenY}
               stroke="hsl(var(--primary))"
               strokeWidth="2"
-              strokeDasharray="5,5"
+              strokeDasharray="6,3"
+              filter="url(#glow)"
             />
+            {/* Start point */}
             <circle
               cx={m.start.screenX}
               cy={m.start.screenY}
-              r="4"
-              fill="hsl(var(--primary))"
+              r="5"
+              fill="white"
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
             />
+            {/* End point */}
             <circle
               cx={m.end.screenX}
               cy={m.end.screenY}
-              r="4"
-              fill="hsl(var(--primary))"
+              r="5"
+              fill="white"
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
             />
           </svg>
 
-          {/* Distance label at midpoint */}
+          {/* Distance label at midpoint - brutalist style */}
           <div
-            className="absolute pointer-events-none z-20 bg-primary text-primary-foreground px-2 py-0.5 rounded text-xs font-mono -translate-x-1/2 -translate-y-1/2"
+            className="absolute pointer-events-none z-20 bg-zinc-900 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-900 px-2 py-1 font-mono text-xs font-bold -translate-x-1/2 -translate-y-1/2 border-2 border-zinc-900 dark:border-zinc-100 shadow-[2px_2px_0px_0px_rgba(0,0,0,0.3)]"
             style={{
               left: (m.start.screenX + m.end.screenX) / 2,
               top: (m.start.screenY + m.end.screenY) / 2,
@@ -182,45 +351,547 @@ function MeasurementOverlays({ measurements, pending }: MeasurementOverlaysProps
         </div>
       ))}
 
-      {/* Pending point */}
-      {pending && (
+      {/* Active measurement (live preview while dragging) */}
+      {activeMeasurement && (
+        <div className="pointer-events-none">
+          <svg
+            className="absolute inset-0 pointer-events-none z-20"
+            style={{ overflow: 'visible', pointerEvents: 'none' }}
+          >
+            {/* Animated dashed line (marching ants effect) */}
+            <line
+              x1={activeMeasurement.start.screenX}
+              y1={activeMeasurement.start.screenY}
+              x2={activeMeasurement.current.screenX}
+              y2={activeMeasurement.current.screenY}
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+              strokeDasharray="6,3"
+              strokeOpacity="0.7"
+              filter="url(#glow)"
+            />
+            {/* Start point */}
+            <circle
+              cx={activeMeasurement.start.screenX}
+              cy={activeMeasurement.start.screenY}
+              r="6"
+              fill="white"
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+              filter="url(#glow)"
+            />
+            {/* Current point (slightly larger, pulsing) */}
+            <circle
+              cx={activeMeasurement.current.screenX}
+              cy={activeMeasurement.current.screenY}
+              r="7"
+              fill="white"
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+              filter="url(#glow)"
+              className="animate-pulse"
+            />
+          </svg>
+
+          {/* Live distance label - brutalist style */}
+          <div
+            className="absolute pointer-events-none z-20 bg-primary text-primary-foreground px-2.5 py-1 font-mono text-sm font-bold -translate-x-1/2 -translate-y-1/2 border-2 border-primary shadow-[3px_3px_0px_0px_rgba(0,0,0,0.2)]"
+            style={{
+              left: (activeMeasurement.start.screenX + activeMeasurement.current.screenX) / 2,
+              top: (activeMeasurement.start.screenY + activeMeasurement.current.screenY) / 2,
+            }}
+          >
+            {formatDistance(activeMeasurement.distance)}
+          </div>
+        </div>
+      )}
+
+      {/* Orthogonal constraint axes visualization */}
+      {activeMeasurement && constraintEdge?.activeAxis && projectToScreen && (() => {
+        const startWorld = activeMeasurement.start;
+        const startScreen = { x: startWorld.screenX, y: startWorld.screenY };
+
+        // Project axis endpoints to screen space
+        const axisLength = 2.0; // 2 meters in world space
+
+        const { axis1, axis2, axis3 } = constraintEdge.axes;
+        const colors = constraintEdge.colors;
+
+        // Calculate endpoints along each axis (positive and negative)
+        const axis1End = projectToScreen({
+          x: startWorld.x + axis1.x * axisLength,
+          y: startWorld.y + axis1.y * axisLength,
+          z: startWorld.z + axis1.z * axisLength,
+        });
+        const axis1Neg = projectToScreen({
+          x: startWorld.x - axis1.x * axisLength,
+          y: startWorld.y - axis1.y * axisLength,
+          z: startWorld.z - axis1.z * axisLength,
+        });
+        const axis2End = projectToScreen({
+          x: startWorld.x + axis2.x * axisLength,
+          y: startWorld.y + axis2.y * axisLength,
+          z: startWorld.z + axis2.z * axisLength,
+        });
+        const axis2Neg = projectToScreen({
+          x: startWorld.x - axis2.x * axisLength,
+          y: startWorld.y - axis2.y * axisLength,
+          z: startWorld.z - axis2.z * axisLength,
+        });
+        const axis3End = projectToScreen({
+          x: startWorld.x + axis3.x * axisLength,
+          y: startWorld.y + axis3.y * axisLength,
+          z: startWorld.z + axis3.z * axisLength,
+        });
+        const axis3Neg = projectToScreen({
+          x: startWorld.x - axis3.x * axisLength,
+          y: startWorld.y - axis3.y * axisLength,
+          z: startWorld.z - axis3.z * axisLength,
+        });
+
+        if (!axis1End || !axis1Neg || !axis2End || !axis2Neg || !axis3End || !axis3Neg) return null;
+
+        const activeAxis = constraintEdge.activeAxis;
+
+        return (
+          <svg
+            className="absolute inset-0 pointer-events-none z-25"
+            style={{ overflow: 'visible', pointerEvents: 'none' }}
+          >
+            {/* Axis 1 */}
+            <line
+              x1={axis1Neg.x}
+              y1={axis1Neg.y}
+              x2={axis1End.x}
+              y2={axis1End.y}
+              stroke={colors.axis1}
+              strokeWidth={activeAxis === 'axis1' ? 3 : 1.5}
+              strokeOpacity={activeAxis === 'axis1' ? 0.9 : 0.3}
+              strokeDasharray={activeAxis === 'axis1' ? 'none' : '4,4'}
+              strokeLinecap="round"
+            />
+            {/* Axis 2 */}
+            <line
+              x1={axis2Neg.x}
+              y1={axis2Neg.y}
+              x2={axis2End.x}
+              y2={axis2End.y}
+              stroke={colors.axis2}
+              strokeWidth={activeAxis === 'axis2' ? 3 : 1.5}
+              strokeOpacity={activeAxis === 'axis2' ? 0.9 : 0.3}
+              strokeDasharray={activeAxis === 'axis2' ? 'none' : '4,4'}
+              strokeLinecap="round"
+            />
+            {/* Axis 3 */}
+            <line
+              x1={axis3Neg.x}
+              y1={axis3Neg.y}
+              x2={axis3End.x}
+              y2={axis3End.y}
+              stroke={colors.axis3}
+              strokeWidth={activeAxis === 'axis3' ? 3 : 1.5}
+              strokeOpacity={activeAxis === 'axis3' ? 0.9 : 0.3}
+              strokeDasharray={activeAxis === 'axis3' ? 'none' : '4,4'}
+              strokeLinecap="round"
+            />
+            {/* Center origin dot */}
+            <circle
+              cx={startScreen.x}
+              cy={startScreen.y}
+              r="4"
+              fill="white"
+              stroke={colors[activeAxis]}
+              strokeWidth="2"
+            />
+          </svg>
+        );
+      })()}
+
+      {/* Edge highlight - draw full edge in 3D-projected screen space */}
+      {snapVisualization?.edgeLine3D && projectToScreen && (() => {
+        const start = projectToScreen(snapVisualization.edgeLine3D.v0);
+        const end = projectToScreen(snapVisualization.edgeLine3D.v1);
+        if (!start || !end) return null;
+
+        // Corner position (at v0 or v1)
+        const cornerPos = snapVisualization.cornerRings
+          ? (snapVisualization.cornerRings.atStart ? start : end)
+          : null;
+
+        return (
+          <svg
+            className="absolute inset-0 pointer-events-none z-30"
+            style={{ overflow: 'visible', pointerEvents: 'none' }}
+          >
+            {/* Edge line with snap color (orange for edges) */}
+            <line
+              x1={start.x}
+              y1={start.y}
+              x2={end.x}
+              y2={end.y}
+              stroke="#FF9800"
+              strokeWidth="4"
+              strokeOpacity="0.9"
+              strokeLinecap="round"
+              filter="url(#snap-glow)"
+            />
+            {/* Outer glow line for better visibility */}
+            <line
+              x1={start.x}
+              y1={start.y}
+              x2={end.x}
+              y2={end.y}
+              stroke="#FF9800"
+              strokeWidth="8"
+              strokeOpacity="0.3"
+              strokeLinecap="round"
+            />
+            {/* Edge endpoints */}
+            <circle cx={start.x} cy={start.y} r="4" fill="#FF9800" fillOpacity="0.6" />
+            <circle cx={end.x} cy={end.y} r="4" fill="#FF9800" fillOpacity="0.6" />
+
+            {/* Corner rings - shows strong attraction at corners */}
+            {cornerPos && snapVisualization.cornerRings && (
+              <>
+                {/* Outer pulsing ring */}
+                <circle
+                  cx={cornerPos.x}
+                  cy={cornerPos.y}
+                  r="18"
+                  fill="none"
+                  stroke="#FFEB3B"
+                  strokeWidth="2"
+                  strokeOpacity="0.4"
+                  className="animate-pulse"
+                />
+                {/* Middle ring */}
+                <circle
+                  cx={cornerPos.x}
+                  cy={cornerPos.y}
+                  r="12"
+                  fill="none"
+                  stroke="#FFEB3B"
+                  strokeWidth="2"
+                  strokeOpacity="0.6"
+                />
+                {/* Inner ring */}
+                <circle
+                  cx={cornerPos.x}
+                  cy={cornerPos.y}
+                  r="6"
+                  fill="#FFEB3B"
+                  fillOpacity="0.8"
+                  stroke="white"
+                  strokeWidth="1"
+                />
+                {/* Center dot */}
+                <circle
+                  cx={cornerPos.x}
+                  cy={cornerPos.y}
+                  r="2"
+                  fill="white"
+                />
+                {/* Valence indicators (small dots around corner) */}
+                {snapVisualization.cornerRings.valence >= 3 && (
+                  <>
+                    <circle cx={cornerPos.x - 10} cy={cornerPos.y} r="2" fill="#FFEB3B" fillOpacity="0.7" />
+                    <circle cx={cornerPos.x + 10} cy={cornerPos.y} r="2" fill="#FFEB3B" fillOpacity="0.7" />
+                    <circle cx={cornerPos.x} cy={cornerPos.y - 10} r="2" fill="#FFEB3B" fillOpacity="0.7" />
+                  </>
+                )}
+              </>
+            )}
+          </svg>
+        );
+      })()}
+
+      {/* Plane indicator - subtle grid/cross for face snaps */}
+      {snapVisualization?.planeIndicator && (
+        <svg
+          className="absolute inset-0 pointer-events-none z-25"
+          style={{ overflow: 'visible', pointerEvents: 'none' }}
+        >
+          {/* Cross indicator */}
+          <line
+            x1={snapVisualization.planeIndicator.x - 20}
+            y1={snapVisualization.planeIndicator.y}
+            x2={snapVisualization.planeIndicator.x + 20}
+            y2={snapVisualization.planeIndicator.y}
+            stroke="hsl(var(--primary))"
+            strokeWidth="2"
+            strokeOpacity="0.4"
+          />
+          <line
+            x1={snapVisualization.planeIndicator.x}
+            y1={snapVisualization.planeIndicator.y - 20}
+            x2={snapVisualization.planeIndicator.x}
+            y2={snapVisualization.planeIndicator.y + 20}
+            stroke="hsl(var(--primary))"
+            strokeWidth="2"
+            strokeOpacity="0.4"
+          />
+          {/* Small circle at center */}
+          <circle
+            cx={snapVisualization.planeIndicator.x}
+            cy={snapVisualization.planeIndicator.y}
+            r="4"
+            fill="hsl(var(--primary))"
+            fillOpacity="0.6"
+          />
+        </svg>
+      )}
+
+      {/* Snap indicator */}
+      {snapTarget && snapIndicatorPos && (
+        <SnapIndicator
+          screenX={snapIndicatorPos.x}
+          screenY={snapIndicatorPos.y}
+          snapType={snapTarget.type}
+        />
+      )}
+
+      {/* Pending point (legacy - keep for backward compatibility) */}
+      {pending && !activeMeasurement && (
         <svg
           className="absolute inset-0 pointer-events-none z-20"
-          style={{ overflow: 'visible' }}
+          style={{ overflow: 'visible', pointerEvents: 'none' }}
         >
           <circle
             cx={pending.screenX}
             cy={pending.screenY}
-            r="6"
+            r="5"
             fill="none"
             stroke="hsl(var(--primary))"
-            strokeWidth="2"
+            strokeWidth="1.5"
           />
           <circle
             cx={pending.screenX}
             cy={pending.screenY}
-            r="3"
+            r="2.5"
             fill="hsl(var(--primary))"
           />
         </svg>
       )}
     </>
   );
+}, (prevProps, nextProps) => {
+  // Custom comparison to prevent unnecessary re-renders
+  // Return true if props are equal (skip re-render), false if different (re-render)
+  
+  // Compare measurements - check both IDs AND screen coordinates
+  if (prevProps.measurements.length !== nextProps.measurements.length) return false;
+  for (let i = 0; i < prevProps.measurements.length; i++) {
+    const prev = prevProps.measurements[i];
+    const next = nextProps.measurements[i];
+    if (!next || prev.id !== next.id) return false;
+    // Check screen coordinates for zoom/camera changes
+    if (prev.start.screenX !== next.start.screenX || prev.start.screenY !== next.start.screenY) return false;
+    if (prev.end.screenX !== next.end.screenX || prev.end.screenY !== next.end.screenY) return false;
+  }
+  
+  // Compare activeMeasurement - check if it exists and if position changed
+  if (!!prevProps.activeMeasurement !== !!nextProps.activeMeasurement) return false;
+  if (prevProps.activeMeasurement && nextProps.activeMeasurement) {
+    if (
+      prevProps.activeMeasurement.current.screenX !== nextProps.activeMeasurement.current.screenX ||
+      prevProps.activeMeasurement.current.screenY !== nextProps.activeMeasurement.current.screenY ||
+      prevProps.activeMeasurement.start.screenX !== nextProps.activeMeasurement.start.screenX ||
+      prevProps.activeMeasurement.start.screenY !== nextProps.activeMeasurement.start.screenY
+    ) return false;
+  }
+  
+  // Compare snapTarget - check type and position
+  if (!!prevProps.snapTarget !== !!nextProps.snapTarget) return false;
+  if (prevProps.snapTarget && nextProps.snapTarget) {
+    if (
+      prevProps.snapTarget.type !== nextProps.snapTarget.type ||
+      prevProps.snapTarget.position.x !== nextProps.snapTarget.position.x ||
+      prevProps.snapTarget.position.y !== nextProps.snapTarget.position.y ||
+      prevProps.snapTarget.position.z !== nextProps.snapTarget.position.z
+    ) return false;
+  }
+  
+  // Compare snapVisualization
+  if (!!prevProps.snapVisualization !== !!nextProps.snapVisualization) return false;
+  if (prevProps.snapVisualization && nextProps.snapVisualization) {
+    // Compare edgeLine3D (3D world coordinates)
+    const prevEdge = prevProps.snapVisualization.edgeLine3D;
+    const nextEdge = nextProps.snapVisualization.edgeLine3D;
+    if (!!prevEdge !== !!nextEdge) return false;
+    if (prevEdge && nextEdge) {
+      if (
+        prevEdge.v0.x !== nextEdge.v0.x ||
+        prevEdge.v0.y !== nextEdge.v0.y ||
+        prevEdge.v0.z !== nextEdge.v0.z ||
+        prevEdge.v1.x !== nextEdge.v1.x ||
+        prevEdge.v1.y !== nextEdge.v1.y ||
+        prevEdge.v1.z !== nextEdge.v1.z
+      ) return false;
+    }
+    // Compare slidingDot (t parameter only)
+    const prevDot = prevProps.snapVisualization.slidingDot;
+    const nextDot = nextProps.snapVisualization.slidingDot;
+    if (!!prevDot !== !!nextDot) return false;
+    if (prevDot && nextDot) {
+      if (prevDot.t !== nextDot.t) return false;
+    }
+    // Compare cornerRings (atStart + valence)
+    const prevCorner = prevProps.snapVisualization.cornerRings;
+    const nextCorner = nextProps.snapVisualization.cornerRings;
+    if (!!prevCorner !== !!nextCorner) return false;
+    if (prevCorner && nextCorner) {
+      if (
+        prevCorner.atStart !== nextCorner.atStart ||
+        prevCorner.valence !== nextCorner.valence
+      ) return false;
+    }
+    const prevPlane = prevProps.snapVisualization.planeIndicator;
+    const nextPlane = nextProps.snapVisualization.planeIndicator;
+    if (!!prevPlane !== !!nextPlane) return false;
+    if (prevPlane && nextPlane) {
+      if (
+        prevPlane.x !== nextPlane.x ||
+        prevPlane.y !== nextPlane.y
+      ) return false;
+    }
+  }
+
+  // Compare projectToScreen (always re-render if it changes as we need it for projection)
+  if (prevProps.projectToScreen !== nextProps.projectToScreen) return false;
+  
+  // Compare hoverPosition
+  if (prevProps.hoverPosition?.x !== nextProps.hoverPosition?.x ||
+      prevProps.hoverPosition?.y !== nextProps.hoverPosition?.y) return false;
+  
+  // Compare pending
+  if (prevProps.pending?.screenX !== nextProps.pending?.screenX ||
+      prevProps.pending?.screenY !== nextProps.pending?.screenY) return false;
+
+  // Compare constraintEdge
+  if (!!prevProps.constraintEdge !== !!nextProps.constraintEdge) return false;
+  if (prevProps.constraintEdge && nextProps.constraintEdge) {
+    if (prevProps.constraintEdge.activeAxis !== nextProps.constraintEdge.activeAxis) return false;
+  }
+
+  return true; // All props are equal, skip re-render
+});
+
+interface SnapIndicatorProps {
+  screenX: number;
+  screenY: number;
+  snapType: SnapType;
 }
 
+function SnapIndicator({ screenX, screenY, snapType }: SnapIndicatorProps) {
+  // Distinct colors for each snap type - no labels needed, shapes are self-explanatory
+  const snapColors = {
+    [SnapType.VERTEX]: '#FFEB3B', // Yellow - circle = point
+    [SnapType.EDGE]: '#FF9800', // Orange - line = edge
+    [SnapType.FACE]: '#03A9F4', // Light Blue - square = face
+    [SnapType.FACE_CENTER]: '#00BCD4', // Cyan - square with dot = center
+  };
+
+  const color = snapColors[snapType];
+
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none z-25"
+      style={{ overflow: 'visible', pointerEvents: 'none' }}
+    >
+      {/* Outer glow ring - subtle pulsing indicator */}
+      <circle
+        cx={screenX}
+        cy={screenY}
+        r="10"
+        fill="none"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeOpacity="0.4"
+        filter="url(#snap-glow)"
+      />
+      
+      {/* Vertex: filled circle (point) */}
+      {snapType === SnapType.VERTEX && (
+        <>
+          <circle cx={screenX} cy={screenY} r="5" fill={color} opacity="0.3" />
+          <circle cx={screenX} cy={screenY} r="2.5" fill={color} />
+        </>
+      )}
+      
+      {/* Edge: horizontal line with center dot */}
+      {snapType === SnapType.EDGE && (
+        <>
+          <line
+            x1={screenX - 8}
+            y1={screenY}
+            x2={screenX + 8}
+            y2={screenY}
+            stroke={color}
+            strokeWidth="2"
+            strokeLinecap="round"
+          />
+          <circle cx={screenX} cy={screenY} r="2" fill={color} />
+        </>
+      )}
+      
+      {/* Face: square outline */}
+      {snapType === SnapType.FACE && (
+        <>
+          <rect
+            x={screenX - 5}
+            y={screenY - 5}
+            width="10"
+            height="10"
+            fill={color}
+            fillOpacity="0.2"
+            stroke={color}
+            strokeWidth="1.5"
+          />
+        </>
+      )}
+      
+      {/* Face Center: square with center dot */}
+      {snapType === SnapType.FACE_CENTER && (
+        <>
+          <rect
+            x={screenX - 5}
+            y={screenY - 5}
+            width="10"
+            height="10"
+            fill="none"
+            stroke={color}
+            strokeWidth="1.5"
+          />
+          <circle cx={screenX} cy={screenY} r="2" fill={color} />
+        </>
+      )}
+    </svg>
+  );
+}
+
+// Axis display info for semantic names
+const AXIS_INFO = {
+  down: { label: 'Down', description: 'Horizontal cut (floor plan view)', icon: '↓' },
+  front: { label: 'Front', description: 'Vertical cut (elevation view)', icon: '→' },
+  side: { label: 'Side', description: 'Vertical cut (side elevation)', icon: '⊙' },
+} as const;
+
 function SectionOverlay() {
   const sectionPlane = useViewerStore((s) => s.sectionPlane);
   const setSectionPlaneAxis = useViewerStore((s) => s.setSectionPlaneAxis);
   const setSectionPlanePosition = useViewerStore((s) => s.setSectionPlanePosition);
   const toggleSectionPlane = useViewerStore((s) => s.toggleSectionPlane);
-  const flipSectionPlane = useViewerStore((s) => s.flipSectionPlane);
   const setActiveTool = useViewerStore((s) => s.setActiveTool);
+  const setDrawingPanelVisible = useViewerStore((s) => s.setDrawing2DPanelVisible);
+  const drawingPanelVisible = useViewerStore((s) => s.drawing2DPanelVisible);
+  const clearDrawing = useViewerStore((s) => s.clearDrawing2D);
+  const [isPanelCollapsed, setIsPanelCollapsed] = useState(true);
 
   const handleClose = useCallback(() => {
     setActiveTool('select');
   }, [setActiveTool]);
 
-  const handleAxisChange = useCallback((axis: 'x' | 'y' | 'z') => {
+  const handleAxisChange = useCallback((axis: 'down' | 'front' | 'side') => {
     setSectionPlaneAxis(axis);
   }, [setSectionPlaneAxis]);
 
@@ -228,73 +899,210 @@ function SectionOverlay() {
     setSectionPlanePosition(Number(e.target.value));
   }, [setSectionPlanePosition]);
 
-  return (
-    <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-background/95 backdrop-blur-sm rounded-lg border shadow-lg p-3 min-w-72 z-30">
-      <div className="flex items-center justify-between gap-4 mb-3">
-        <div className="flex items-center gap-2">
-          <Slice className="h-4 w-4 text-primary" />
-          <span className="font-medium text-sm">Section Plane</span>
-        </div>
-        <Button variant="ghost" size="icon-sm" onClick={handleClose} title="Close">
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
+  const togglePanel = useCallback(() => {
+    setIsPanelCollapsed(prev => !prev);
+  }, []);
+
+  const handleView2D = useCallback(() => {
+    // Clear existing drawing to force regeneration with current settings
+    clearDrawing();
+    setDrawingPanelVisible(true);
+  }, [clearDrawing, setDrawingPanelVisible]);
 
-      <div className="space-y-4">
-        {/* Axis Selection */}
-        <div>
-          <label className="text-xs text-muted-foreground mb-2 block">Axis</label>
-          <div className="flex gap-1">
-            {(['x', 'y', 'z'] as const).map((axis) => (
-              <Button
-                key={axis}
-                variant={sectionPlane.axis === axis ? 'default' : 'outline'}
-                size="sm"
-                className="flex-1"
-                onClick={() => handleAxisChange(axis)}
-              >
-                {axis.toUpperCase()}
+  return (
+    <>
+      {/* Compact Section Tool Panel - matches Measure tool style */}
+      <div className="pointer-events-auto absolute top-4 left-1/2 -translate-x-1/2 bg-background/95 backdrop-blur-sm rounded-lg border shadow-lg z-30">
+        {/* Header - always visible */}
+        <div className="flex items-center justify-between gap-2 p-2">
+          <button
+            onClick={togglePanel}
+            className="flex items-center gap-2 hover:bg-accent/50 rounded px-2 py-1 transition-colors"
+          >
+            <Slice className="h-4 w-4 text-primary" />
+            <span className="font-medium text-sm">Section</span>
+            {sectionPlane.enabled && (
+              <span className="text-xs text-primary font-mono">
+                {AXIS_INFO[sectionPlane.axis].label} <span className="inline-block w-12 text-right tabular-nums">{sectionPlane.position.toFixed(1)}%</span>
+              </span>
+            )}
+            <ChevronDown className={`h-3 w-3 transition-transform ${isPanelCollapsed ? '-rotate-90' : ''}`} />
+          </button>
+          <div className="flex items-center gap-1">
+            {/* Only show 2D button when panel is closed */}
+            {!drawingPanelVisible && (
+              <Button variant="ghost" size="icon-sm" onClick={handleView2D} title="Open 2D Drawing Panel">
+                <FileImage className="h-3 w-3" />
               </Button>
-            ))}
+            )}
+            <Button variant="ghost" size="icon-sm" onClick={handleClose} title="Close">
+              <X className="h-3 w-3" />
+            </Button>
           </div>
         </div>
 
-        {/* Position Slider */}
-        <div>
-          <div className="flex items-center justify-between mb-2">
-            <label className="text-xs text-muted-foreground">Position</label>
-            <span className="text-xs font-mono">{sectionPlane.position}%</span>
+        {/* Expandable content */}
+        {!isPanelCollapsed && (
+          <div className="border-t px-3 pb-3 min-w-64">
+            {/* Direction Selection */}
+            <div className="mt-3">
+              <label className="text-xs text-muted-foreground mb-2 block">Direction</label>
+              <div className="flex gap-1">
+                {(['down', 'front', 'side'] as const).map((axis) => (
+                  <Button
+                    key={axis}
+                    variant={sectionPlane.axis === axis ? 'default' : 'outline'}
+                    size="sm"
+                    className="flex-1 flex-col h-auto py-1.5"
+                    onClick={() => handleAxisChange(axis)}
+                  >
+                    <span className="text-xs font-medium">{AXIS_INFO[axis].label}</span>
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* Position Slider */}
+            <div className="mt-3">
+              <div className="flex items-center justify-between mb-1">
+                <label className="text-xs text-muted-foreground">Position</label>
+                <input
+                  type="number"
+                  min="0"
+                  max="100"
+                  step="0.1"
+                  value={sectionPlane.position}
+                  onChange={handlePositionChange}
+                  className="w-16 text-xs font-mono bg-muted px-1.5 py-0.5 rounded border-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                />
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                step="0.1"
+                value={sectionPlane.position}
+                onChange={handlePositionChange}
+                className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
+              />
+            </div>
+
+            {/* Show 2D panel button - only when panel is closed */}
+            {!drawingPanelVisible && (
+              <div className="mt-3 pt-3 border-t">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-full"
+                  onClick={handleView2D}
+                >
+                  <FileImage className="h-4 w-4 mr-2" />
+                  Open 2D Drawing
+                </Button>
+              </div>
+            )}
           </div>
-          <input
-            type="range"
-            min="0"
-            max="100"
-            value={sectionPlane.position}
-            onChange={handlePositionChange}
-            className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
-          />
-        </div>
+        )}
+      </div>
 
-        {/* Actions */}
-        <div className="flex gap-2">
-          <Button
-            variant={sectionPlane.enabled ? 'default' : 'outline'}
-            size="sm"
-            className="flex-1"
-            onClick={toggleSectionPlane}
-          >
-            {sectionPlane.enabled ? 'Disable' : 'Enable'}
-          </Button>
-          <Button variant="outline" size="sm" className="flex-1" onClick={flipSectionPlane}>
-            Flip
-          </Button>
-        </div>
+      {/* Instruction hint - brutalist style matching Measure tool */}
+      <div
+        className="pointer-events-auto absolute bottom-16 left-1/2 -translate-x-1/2 z-30 bg-zinc-900 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-900 px-3 py-1.5 border-2 border-zinc-900 dark:border-zinc-100 transition-shadow duration-150"
+        style={{
+          boxShadow: sectionPlane.enabled
+            ? '4px 4px 0px 0px #03A9F4' // Light blue shadow when active
+            : '3px 3px 0px 0px rgba(0,0,0,0.3)'
+        }}
+      >
+        <span className="font-mono text-xs uppercase tracking-wide">
+          {sectionPlane.enabled
+            ? `Cutting ${AXIS_INFO[sectionPlane.axis].label.toLowerCase()} at ${sectionPlane.position.toFixed(1)}%`
+            : 'Preview mode'}
+        </span>
+      </div>
 
-        <div className="text-xs text-muted-foreground text-center">
-          Section plane cuts the model along the selected axis
-        </div>
+      {/* Enable toggle - brutalist style matching Measure tool */}
+      <div className="pointer-events-auto absolute bottom-4 left-1/2 -translate-x-1/2 z-30">
+        <button
+          onClick={toggleSectionPlane}
+          className={`px-2 py-1 font-mono text-[10px] uppercase tracking-wider border-2 transition-colors ${
+            sectionPlane.enabled
+              ? 'bg-primary text-primary-foreground border-primary'
+              : 'bg-zinc-100 dark:bg-zinc-900 text-zinc-500 border-zinc-300 dark:border-zinc-700'
+          }`}
+          title="Toggle section plane"
+        >
+          {sectionPlane.enabled ? 'Cutting' : 'Preview'}
+        </button>
       </div>
-    </div>
+
+      {/* Section plane visualization overlay */}
+      <SectionPlaneVisualization axis={sectionPlane.axis} enabled={sectionPlane.enabled} />
+    </>
+  );
+}
+
+// Section plane visual indicator component
+function SectionPlaneVisualization({ axis, enabled }: { axis: 'down' | 'front' | 'side'; enabled: boolean }) {
+  // Get the axis color
+  const axisColors = {
+    down: '#03A9F4',  // Light blue for horizontal cuts
+    front: '#4CAF50', // Green for front cuts
+    side: '#FF9800',  // Orange for side cuts
+  };
+
+  const color = axisColors[axis];
+
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none z-20"
+      style={{ overflow: 'visible', pointerEvents: 'none' }}
+    >
+      <defs>
+        <filter id="section-glow">
+          <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+          <feMerge>
+            <feMergeNode in="coloredBlur"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+        {/* Animated dash pattern */}
+        <pattern id="section-pattern" patternUnits="userSpaceOnUse" width="10" height="10">
+          <line x1="0" y1="0" x2="10" y2="10" stroke={color} strokeWidth="1" strokeOpacity="0.5"/>
+        </pattern>
+      </defs>
+
+      {/* Axis indicator in corner */}
+      <g transform="translate(24, 24)">
+        <circle cx="20" cy="20" r="18" fill={color} fillOpacity={enabled ? 0.2 : 0.1} stroke={color} strokeWidth={enabled ? 3 : 2} filter="url(#section-glow)"/>
+        <text
+          x="20"
+          y="20"
+          textAnchor="middle"
+          dominantBaseline="central"
+          fill={color}
+          fontFamily="monospace"
+          fontSize="11"
+          fontWeight="bold"
+        >
+          {AXIS_INFO[axis].label.toUpperCase()}
+        </text>
+        {/* Active indicator */}
+        {enabled && (
+          <text
+            x="20"
+            y="32"
+            textAnchor="middle"
+            fill={color}
+            fontFamily="monospace"
+            fontSize="7"
+            fontWeight="bold"
+          >
+            CUT
+          </text>
+        )}
+      </g>
+    </svg>
   );
 }