Function MapViewNav2

frontend/src/components/map-view-nav2.tsx:29–1302

({ className = '' }: MapViewNav2Props)

}

export default function MapViewNav2({ className = '' }: MapViewNav2Props) {
  const { connection } = useRobotConnection();
  const { t } = useLanguage();
  const { dispatch: notificationDispatch } = useNotifications();
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const animationFrameRef = useRef<number | undefined>(undefined);
  const mapTopic = '/map';
  const { occupancyGrid, isLoading, error } = useOccupancyGrid({ topicName: mapTopic });
  
  // Get robot position in map frame
  const robotPose = useMapPose();
  
  // Get navigation plan
  const { navPlan } = useRosNavPlan('/plan');
  const [showNavPlan, setShowNavPlan] = useState(false);

  // Local costmap overlay
  const [showLocalCostmap, setShowLocalCostmap] = useState(false);
  const { occupancyGrid: localCostmap } = useOccupancyGrid({
    topicName: '/local_costmap/costmap',
    enabled: showLocalCostmap,
    throttleMs: 0 // No throttling for real-time updates
  });
  const localCostmapRef = useRef(localCostmap);
  const costmapImageCacheRef = useRef<ImageData | null>(null);
  const costmapDataHashRef = useRef<string>('');
  
  // Navigation waypoints functionality
  const {
    navigateThroughWaypoints,
    cancelNavigation,
    isNavigating,
    currentWaypointIndex,
    navigationError,
    isConnected: nav2Connected
  } = useNav2Waypoints();

  // Active mission context for displaying mission waypoints on map
  const {
    missionWaypoints,
    currentWaypointIndex: missionWaypointIndex,
    isMissionActive
  } = useActiveMission();

  // Navigation targets context for AR overlay
  const { setSingleGoal } = useNavigationTargets();

  const [isWaypointMode, setIsWaypointMode] = useState(false);
  const [waypoint, setWaypoint] = useState<Waypoint | null>(null);
  const [isDraggingWaypoint, setIsDraggingWaypoint] = useState(false);
  const [tempWaypoint, setTempWaypoint] = useState<Waypoint | null>(null);
  const [hasNavigationStarted, setHasNavigationStarted] = useState(false);
  const [isStopping, setIsStopping] = useState(false);
  
  // Set Home mode state
  const [isSetHomeMode, setIsSetHomeMode] = useState(false);
  const [isDraggingHome, setIsDraggingHome] = useState(false);