mula
/
cosmo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Resolve useToast context error by prop-drilling toast to FocusInfo

main
mula.liu 2025-12-02 11:24:19 +08:00
parent d567377835
commit b677da6dfe
3 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/App.tsx
View File

@ -207,6 +207,7 @@ function App() {
showOrbits={showOrbits}
onBodySelect={handleBodySelect}
resetTrigger={resetTrigger}
toast={toast}
/>
{/* Timeline Controller */}

6
frontend/src/components/FocusInfo.tsx
View File

@ -3,15 +3,15 @@ import { useState } from 'react';
import { request } from '../utils/request';
import type { CelestialBody } from '../types';
import { TerminalModal } from './TerminalModal';
import { useToast } from '../contexts/ToastContext';
import type { ToastContextValue } from '../contexts/ToastContext'; // Import ToastContextValue type
interface FocusInfoProps {
body: CelestialBody | null;
onClose: () => void;
toast: ToastContextValue; // Add toast prop
}
export function FocusInfo({ body, onClose }: FocusInfoProps) {
const toast = useToast();
export function FocusInfo({ body, onClose, toast }: FocusInfoProps) {
const [showTerminal, setShowTerminal] = useState(false);
const [terminalData, setTerminalData] = useState('');
const [loading, setLoading] = useState(false);

11
frontend/src/components/Scene.tsx
View File

@ -1,13 +1,12 @@
/**
* Main 3D Scene component
*/
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Stars as BackgroundStars, Html } from '@react-three/drei';
import { Html } from '@react-three/drei';
import { useMemo, useState, useEffect } from 'react';
import { CelestialBody } from './CelestialBody';
import { Probe } from './Probe';
import { CameraController } from './CameraController';
import { Trajectory } from './Trajectory';
import { Trajectory } => './Trajectory';
import { OrbitRenderer } from './OrbitRenderer';
import { Stars } from './Stars';
import { Constellations } from './Constellations';
@ -18,6 +17,7 @@ import { AsteroidBelts } from './AsteroidBelts';
import { scalePosition } from '../utils/scaleDistance';
import { calculateRenderPosition } from '../utils/renderPosition';
import type { CelestialBody as CelestialBodyType, Position } from '../types';
import type { ToastContextValue } from '../contexts/ToastContext'; // Import ToastContextValue
interface SceneProps {
bodies: CelestialBodyType[];
@ -26,9 +26,10 @@ interface SceneProps {
showOrbits?: boolean;
onBodySelect?: (body: CelestialBodyType | null) => void;
resetTrigger?: number;
toast: ToastContextValue; // Add toast prop
}
export function Scene({ bodies, selectedBody, trajectoryPositions = [], showOrbits = true, onBodySelect, resetTrigger = 0 }: SceneProps) {
export function Scene({ bodies, selectedBody, trajectoryPositions = [], showOrbits = true, onBodySelect, resetTrigger = 0, toast }: SceneProps) {
// State to control info panel visibility (independent of selection)
const [showInfoPanel, setShowInfoPanel] = useState(true);
@ -170,7 +171,7 @@ export function Scene({ bodies, selectedBody, trajectoryPositions = [], showOrbi
{/* Dynamic Focus Info Label */}
{selectedBody && showInfoPanel && (
<Html position={focusInfoPosition} center zIndexRange={[100, 0]}>
<FocusInfo body={selectedBody} onClose={() => setShowInfoPanel(false)} />
<FocusInfo body={selectedBody} onClose={() => setShowInfoPanel(false)} toast={toast} />
</Html>
)}
</Canvas>