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} showOrbits={showOrbits}
onBodySelect={handleBodySelect} onBodySelect={handleBodySelect}
resetTrigger={resetTrigger} resetTrigger={resetTrigger}
toast={toast}
/> />
{/* Timeline Controller */} {/* Timeline Controller */}

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

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

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

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