Function MapEditor

frontend/src/components/map-editor/MapEditor.tsx:35–1291

({ className }: MapEditorProps)

}

export function MapEditor({ className }: MapEditorProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const previewCanvasRef = useRef<HTMLCanvasElement>(null);
  const toolPreviewCanvasRef = useRef<HTMLCanvasElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const yamlInputRef = useRef<HTMLInputElement>(null);
  
  const [isDrawing, setIsDrawing] = useState(false);
  const [currentTool, setCurrentTool] = useState<DrawingTool>('brush');
  const [currentRegion, setCurrentRegion] = useState<MapRegion>('occupied');
  const [brushSize, setBrushSize] = useState(5);
  const [showThreshold, setShowThreshold] = useState(false);
  const [showInflation, setShowInflation] = useState(false);
  const [zoom, setZoom] = useState(1);
  const [pan, setPan] = useState({ x: 0, y: 0 });
  const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(null);
  const [polygonPoints, setPolygonPoints] = useState<{ x: number; y: number }[]>([]);
  const [mapMetadata, setMapMetadata] = useState<MapMetadata>({
    image: 'map.pgm',
    resolution: 0.05,
    origin: [-10.0, -10.0, 0.0],
    negate: 0,
    occupied_thresh: 0.65,
    free_thresh: 0.196
  });
  const [robotRadius, setRobotRadius] = useState(0.3); // meters
  
  const [startPoint, setStartPoint] = useState<{ x: number; y: number } | null>(null);
  const [webglContext, setWebglContext] = useState<ReturnType<typeof setupWebGL> | null>(null);
  const [canvasVersion, setCanvasVersion] = useState(0); // Track canvas changes
  
  // Undo/Redo history management
  const [history, setHistory] = useState<ImageData[]>([]);
  const [historyIndex, setHistoryIndex] = useState(-1);
  
  // Get color for region based on thresholds
  const getRegionColor = useCallback((region: MapRegion): string => {
    const occupiedThresh = mapMetadata.occupied_thresh;
    const freeThresh = mapMetadata.free_thresh;
    const unknownValue = Math.round(((occupiedThresh + freeThresh) / 2) * 255);
    
    switch (region) {
      case 'occupied': return '#000000';
      case 'free': return '#FFFFFF';
      case 'unknown': return `rgb(${unknownValue},${unknownValue},${unknownValue})`;
    }
  }, [mapMetadata]);
  
  // Save current canvas state to history AFTER drawing is complete
  const saveToHistory = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    if (!ctx) return;
    
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);