1186 lines
43 KiB
TypeScript
1186 lines
43 KiB
TypeScript
/* Zustand 的 action 引用稳定；初始化 viewer 与导入回调有意只创建一次。 */
|
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import {
|
|
lazy,
|
|
Suspense,
|
|
useCallback,
|
|
useEffect,
|
|
useRef,
|
|
useState,
|
|
type ChangeEvent,
|
|
type DragEvent,
|
|
} from 'react';
|
|
import {
|
|
Camera,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
CircleHelp,
|
|
Code2,
|
|
Crosshair,
|
|
Download,
|
|
Hand,
|
|
Maximize,
|
|
MousePointer2,
|
|
PanelsTopLeft,
|
|
Pause,
|
|
Play,
|
|
RotateCcw,
|
|
Settings as SettingsIcon,
|
|
SunMoon,
|
|
} from 'lucide-react';
|
|
import { DEFAULT_IMPORT_LIMITS, type ProjectManifest } from '../project/types';
|
|
import {
|
|
filesFromDrop,
|
|
importBrowserFiles,
|
|
normalizeProjectPath,
|
|
ProjectImportError,
|
|
} from '../project/importer';
|
|
import {
|
|
MainThreadPhysicsAdapter,
|
|
type UrdfBaseMode,
|
|
type UrdfEnhancementOptions,
|
|
type UrdfLoadMode,
|
|
} from '../simulation/PhysicsAdapter';
|
|
import type { ActuatorParameters } from '../simulation/SimulationSession';
|
|
import type { ControllerCommand, ControllerStatus } from '../controller/types';
|
|
import type { RLCommand, RLPolicyStatus } from '../rl/types';
|
|
import { MuJoCoViewer, type InteractionMode, type ViewerTheme } from '../viewer/MuJoCoViewer';
|
|
import {
|
|
DEFAULT_VIEWER_DISPLAY_OPTIONS,
|
|
type ViewerDisplayOptions,
|
|
} from '../viewer/displayOptions';
|
|
import { useAppStore, type AppDiagnostic } from '../stores/useAppStore';
|
|
import { WorkbenchHeader } from './components/WorkbenchHeader';
|
|
import { ViewerToolDock } from './components/ViewerToolDock';
|
|
import { ProjectSidebar, ModelControlsSidebar } from './components/SidebarPanel';
|
|
import { WorkspaceOverlays, type ImportProgress } from './components/WorkspaceOverlays';
|
|
import { EntrySelectionDialog } from './components/EntrySelectionDialog';
|
|
import { ErrorRecoveryPanel } from './components/ErrorRecoveryPanel';
|
|
import { StatusBar } from './components/StatusBar';
|
|
import { ViewportHUD } from './components/ViewportHUD';
|
|
import { ShortcutHelpDialog } from './components/ShortcutHelpDialog';
|
|
import { CommandPalette, type WorkbenchCommand } from './components/CommandPalette';
|
|
import {
|
|
NotificationCenter,
|
|
ToastViewport,
|
|
type WorkbenchNotification,
|
|
} from './components/NotificationCenter';
|
|
import { SettingsDialog } from './components/SettingsDialog';
|
|
import {
|
|
dispatchLayoutWidths,
|
|
LayoutSettingsDialog,
|
|
type LayoutPreset,
|
|
} from './components/LayoutSettingsDialog';
|
|
import { Button, ConfirmDialog, IconButton } from '../components/ui';
|
|
import { DiagnosticsDrawer } from './components/DiagnosticsDrawer';
|
|
import { ToolbarOverflowMenu } from './components/ToolbarOverflowMenu';
|
|
|
|
import { UrdfImportOptionsDialog } from './components/UrdfImportOptionsDialog';
|
|
import {
|
|
downloadBytes,
|
|
exportedFileName,
|
|
mergeCachedFiles,
|
|
readCachedText,
|
|
upsertCachedMjcf,
|
|
} from '../project/cachedFiles';
|
|
|
|
const SourceEditorDialog = lazy(() =>
|
|
import('./components/SourceEditorDialog').then((module) => ({
|
|
default: module.SourceEditorDialog,
|
|
})),
|
|
);
|
|
|
|
function diagnostic(
|
|
category: AppDiagnostic['category'],
|
|
error: unknown,
|
|
path?: string,
|
|
): AppDiagnostic {
|
|
const detail = error instanceof Error ? error.message : String(error);
|
|
return { category, summary: `${category}失败`, detail, path, at: Date.now() };
|
|
}
|
|
function initialTheme(): ViewerTheme {
|
|
try {
|
|
return localStorage.getItem('mujoco-platform-theme') === 'light' ? 'light' : 'dark';
|
|
} catch {
|
|
return 'dark';
|
|
}
|
|
}
|
|
function initialSidebarVisibility(): { left: boolean; right: boolean } {
|
|
const width = typeof window === 'undefined' ? 1280 : window.innerWidth;
|
|
if (width < 900) return { left: false, right: false };
|
|
try {
|
|
const stored = JSON.parse(localStorage.getItem('mujoco-platform-layout') ?? 'null') as {
|
|
left?: unknown;
|
|
right?: unknown;
|
|
} | null;
|
|
if (stored && typeof stored.left === 'boolean' && typeof stored.right === 'boolean')
|
|
return { left: stored.left, right: stored.right };
|
|
} catch {
|
|
/* 使用响应式默认布局 */
|
|
}
|
|
return width >= 1280 ? { left: true, right: true } : { left: false, right: true };
|
|
}
|
|
function initialDisplayOptions(): ViewerDisplayOptions {
|
|
try {
|
|
const stored = JSON.parse(
|
|
localStorage.getItem('mujoco-platform-display') ?? 'null',
|
|
) as Partial<ViewerDisplayOptions> | null;
|
|
if (!stored) return { ...DEFAULT_VIEWER_DISPLAY_OPTIONS };
|
|
const next = { ...DEFAULT_VIEWER_DISPLAY_OPTIONS };
|
|
for (const key of Object.keys(next) as (keyof ViewerDisplayOptions)[])
|
|
if (typeof stored[key] === 'boolean') next[key] = stored[key];
|
|
return next;
|
|
} catch {
|
|
return { ...DEFAULT_VIEWER_DISPLAY_OPTIONS };
|
|
}
|
|
}
|
|
function convertedCachePath(entryPath: string): string {
|
|
const slash = entryPath.lastIndexOf('/');
|
|
return `${slash >= 0 ? entryPath.slice(0, slash + 1) : ''}.__converted_mjcf_cache__.xml`;
|
|
}
|
|
function urdfLinkNames(project: ProjectManifest | null, path: string | undefined): string[] {
|
|
const file = path ? project?.files.find((candidate) => candidate.path === path) : undefined;
|
|
if (!file) return [];
|
|
const document = new DOMParser().parseFromString(
|
|
new TextDecoder().decode(file.data),
|
|
'application/xml',
|
|
);
|
|
return Array.from(document.querySelectorAll('robot > link[name]'))
|
|
.map((link) => link.getAttribute('name'))
|
|
.filter((name): name is string => Boolean(name));
|
|
}
|
|
|
|
export function App() {
|
|
const state = useAppStore();
|
|
const manifest = useRef<ProjectManifest | null>(null),
|
|
notificationId = useRef(0),
|
|
loadInFlight = useRef(false),
|
|
importInFlight = useRef(false),
|
|
adapter = useRef(new MainThreadPhysicsAdapter()),
|
|
root = useRef<HTMLDivElement>(null),
|
|
viewerHost = useRef<HTMLDivElement>(null),
|
|
viewer = useRef<MuJoCoViewer | null>(null),
|
|
urdfEnhancementsRef = useRef<UrdfEnhancementOptions>({
|
|
addActuators: true,
|
|
addSensors: true,
|
|
sensorType: 'camera',
|
|
});
|
|
const [forceScale, setForceScale] = useState(50),
|
|
[leftOpen, setLeftOpen] = useState(() => initialSidebarVisibility().left),
|
|
[rightOpen, setRightOpen] = useState(() => initialSidebarVisibility().right),
|
|
[helpOpen, setHelpOpen] = useState(false),
|
|
[commandOpen, setCommandOpen] = useState(false),
|
|
[sourceOpen, setSourceOpen] = useState(false),
|
|
[generatedMjcf, setGeneratedMjcf] = useState<string>(),
|
|
[generatedMjcfPath, setGeneratedMjcfPath] = useState<string>(),
|
|
[pendingUrdfPath, setPendingUrdfPath] = useState<string>(),
|
|
[pendingUrdfMounts, setPendingUrdfMounts] = useState<string[]>([]),
|
|
[removeConfirmOpen, setRemoveConfirmOpen] = useState(false),
|
|
[fullscreen, setFullscreen] = useState(false),
|
|
[settingsOpen, setSettingsOpen] = useState(false),
|
|
[layoutOpen, setLayoutOpen] = useState(false),
|
|
[diagnosticsOpen, setDiagnosticsOpen] = useState(false),
|
|
[importProgress, setImportProgress] = useState<ImportProgress>(),
|
|
[notifications, setNotifications] = useState<WorkbenchNotification[]>([]),
|
|
[toast, setToast] = useState<WorkbenchNotification>(),
|
|
[selectedControllerPath, setSelectedControllerPath] = useState<string>(),
|
|
[controllerStatus, setControllerStatus] = useState<ControllerStatus>(),
|
|
[selectedPolicyPath, setSelectedPolicyPath] = useState<string>(),
|
|
[policyStatus, setPolicyStatus] = useState<RLPolicyStatus>();
|
|
const [urdfMode, setUrdfMode] = useState<UrdfLoadMode>('mjcf'),
|
|
urdfModeRef = useRef<UrdfLoadMode>('mjcf');
|
|
const [baseMode, setBaseMode] = useState<UrdfBaseMode>('floating'),
|
|
baseModeRef = useRef<UrdfBaseMode>('floating');
|
|
const [displayOptions, setDisplayOptions] = useState<ViewerDisplayOptions>(initialDisplayOptions),
|
|
[showSensorCamera, setShowSensorCamera] = useState(true),
|
|
[theme, setTheme] = useState<ViewerTheme>(initialTheme),
|
|
[jointAdvanced, setJointAdvanced] = useState(false),
|
|
[ignoreJointLimits, setIgnoreJointLimits] = useState(false),
|
|
[angleUnit, setAngleUnit] = useState<'rad' | 'deg'>('rad');
|
|
const showCollision = displayOptions.showCollision,
|
|
setShowCollision = (value: boolean) =>
|
|
setDisplayOptions((options) => ({ ...options, showCollision: value }));
|
|
useEffect(() => {
|
|
if (!viewerHost.current) return;
|
|
viewer.current = new MuJoCoViewer(viewerHost.current, {
|
|
onSelection: state.setSelection,
|
|
onFrame: (frame, fps, snapshot) => {
|
|
const memory = (performance as Performance & { memory?: { usedJSHeapSize: number } }).memory
|
|
?.usedJSHeapSize;
|
|
state.setMetrics(
|
|
fps,
|
|
frame.stepMs,
|
|
memory === undefined ? undefined : memory / 1048576,
|
|
frame.overBudget,
|
|
);
|
|
if (snapshot) {
|
|
state.setSnapshot(snapshot);
|
|
setControllerStatus(snapshot.controller);
|
|
setPolicyStatus(snapshot.rlPolicy);
|
|
if (snapshot.controller?.error || snapshot.rlPolicy?.error) {
|
|
adapter.current.setPaused(true);
|
|
state.setPaused(true);
|
|
}
|
|
}
|
|
},
|
|
onError: (error) =>
|
|
state.setDiagnostic(diagnostic(error.message.includes('控制器') ? '仿真' : '渲染', error)),
|
|
});
|
|
return () => {
|
|
viewer.current?.dispose();
|
|
viewer.current = null;
|
|
adapter.current.dispose();
|
|
};
|
|
}, []);
|
|
useEffect(() => {
|
|
viewer.current?.setMode(state.mode);
|
|
}, [state.mode]);
|
|
useEffect(() => {
|
|
if (viewer.current) viewer.current.forceScale = forceScale;
|
|
}, [forceScale]);
|
|
useEffect(() => {
|
|
viewer.current?.setDisplayOptions(displayOptions);
|
|
try {
|
|
localStorage.setItem('mujoco-platform-display', JSON.stringify(displayOptions));
|
|
} catch {
|
|
/* 当前会话仍可修改 */
|
|
}
|
|
}, [displayOptions]);
|
|
useEffect(() => {
|
|
if (window.innerWidth < 900) return;
|
|
try {
|
|
localStorage.setItem(
|
|
'mujoco-platform-layout',
|
|
JSON.stringify({ left: leftOpen, right: rightOpen }),
|
|
);
|
|
} catch {
|
|
/* 当前会话仍可修改 */
|
|
}
|
|
}, [leftOpen, rightOpen]);
|
|
useEffect(() => {
|
|
viewer.current?.setShowSensorCamera(showSensorCamera);
|
|
}, [showSensorCamera]);
|
|
useEffect(() => {
|
|
viewer.current?.setTheme(theme);
|
|
document.documentElement.style.colorScheme = theme;
|
|
try {
|
|
localStorage.setItem('mujoco-platform-theme', theme);
|
|
} catch {
|
|
/* 当前会话仍可切换 */
|
|
}
|
|
}, [theme]);
|
|
useEffect(() => {
|
|
const change = () => setFullscreen(document.fullscreenElement === root.current);
|
|
document.addEventListener('fullscreenchange', change);
|
|
return () => document.removeEventListener('fullscreenchange', change);
|
|
}, []);
|
|
const loadEntry = useCallback(async (path: string, requestedMode?: UrdfLoadMode) => {
|
|
if (!manifest.current || loadInFlight.current) return;
|
|
loadInFlight.current = true;
|
|
setIgnoreJointLimits(false);
|
|
setControllerStatus(undefined);
|
|
setPolicyStatus(undefined);
|
|
state.setEntry(path);
|
|
state.setLoading(true);
|
|
setImportProgress({ label: '初始化 WASM 与编译模型', value: 0.65 });
|
|
state.setDiagnostic(undefined);
|
|
setGeneratedMjcf(undefined);
|
|
setGeneratedMjcfPath(undefined);
|
|
viewer.current?.attach(null);
|
|
state.setSnapshot(undefined);
|
|
state.setSelection(null);
|
|
try {
|
|
const snapshot = await adapter.current.load(
|
|
manifest.current,
|
|
path,
|
|
requestedMode ?? urdfModeRef.current,
|
|
baseModeRef.current,
|
|
urdfEnhancementsRef.current,
|
|
);
|
|
const supportFiles = adapter.current.cachedSupportFiles();
|
|
if (supportFiles.length && manifest.current) {
|
|
manifest.current = mergeCachedFiles(manifest.current, supportFiles);
|
|
state.setProject(
|
|
manifest.current.name,
|
|
manifest.current.files.map((file) => ({ path: file.path, size: file.size })),
|
|
manifest.current.entries,
|
|
path,
|
|
);
|
|
}
|
|
setImportProgress({ label: '创建视口场景', value: 0.92 });
|
|
adapter.current.setSpeed(useAppStore.getState().speed);
|
|
state.setSnapshot(snapshot);
|
|
state.setPaused(true);
|
|
viewer.current?.attach(adapter.current.session);
|
|
try {
|
|
setGeneratedMjcf(new TextDecoder().decode(adapter.current.exportMjcf()));
|
|
setGeneratedMjcfPath(convertedCachePath(path));
|
|
} catch (error) {
|
|
console.warn('[MuJoCo] 无法生成源码预览', error);
|
|
}
|
|
const notice: WorkbenchNotification = {
|
|
id: ++notificationId.current,
|
|
title: snapshot.warnings.length
|
|
? `模型已加载 · ${snapshot.warnings.length} 项兼容调整`
|
|
: '模型加载完成',
|
|
detail: snapshot.warnings.length ? snapshot.warnings.join('\n') : path,
|
|
tone: snapshot.warnings.length ? 'warning' : 'success',
|
|
at: Date.now(),
|
|
};
|
|
setNotifications((items) => [notice, ...items].slice(0, 20));
|
|
setToast(notice);
|
|
} catch (error) {
|
|
state.setDiagnostic(diagnostic('模型编译', error, path));
|
|
const notice: WorkbenchNotification = {
|
|
id: ++notificationId.current,
|
|
title: '模型编译失败',
|
|
detail: error instanceof Error ? error.message : String(error),
|
|
tone: 'danger',
|
|
at: Date.now(),
|
|
};
|
|
setNotifications((items) => [notice, ...items].slice(0, 20));
|
|
setToast(notice);
|
|
} finally {
|
|
loadInFlight.current = false;
|
|
setImportProgress(undefined);
|
|
state.setLoading(false);
|
|
}
|
|
}, []);
|
|
const requestLoadEntry = useCallback(
|
|
async (path: string) => {
|
|
const entry = manifest.current?.entries.find((candidate) => candidate.path === path);
|
|
if (entry?.format === 'urdf' && urdfModeRef.current === 'mjcf') {
|
|
setPendingUrdfMounts(urdfLinkNames(manifest.current, path));
|
|
setPendingUrdfPath(path);
|
|
return;
|
|
}
|
|
await loadEntry(path);
|
|
},
|
|
[loadEntry],
|
|
);
|
|
const confirmUrdfOptions = (options: UrdfEnhancementOptions) => {
|
|
const path = pendingUrdfPath;
|
|
if (!path) return;
|
|
urdfEnhancementsRef.current = options;
|
|
setPendingUrdfPath(undefined);
|
|
setPendingUrdfMounts([]);
|
|
void loadEntry(path);
|
|
};
|
|
const skipUrdfOptions = () =>
|
|
confirmUrdfOptions({ addActuators: false, addSensors: false, sensorType: 'camera' });
|
|
const ingest = useCallback(
|
|
async (files: File[], lockOwned = false) => {
|
|
if (importInFlight.current && !lockOwned) return;
|
|
importInFlight.current = true;
|
|
state.setLoading(true);
|
|
setImportProgress({ label: '读取工程文件', value: 0.12 });
|
|
try {
|
|
const next = await importBrowserFiles(files);
|
|
setImportProgress({ label: '处理模型资源与入口', value: 0.38 });
|
|
manifest.current = next;
|
|
setSelectedControllerPath(next.files.find((file) => /\.py$/i.test(file.path))?.path);
|
|
setSelectedPolicyPath(next.files.find((file) => /\.onnx$/i.test(file.path))?.path);
|
|
state.setProject(
|
|
next.name,
|
|
next.files.map(({ path, size }) => ({ path, size })),
|
|
next.entries,
|
|
next.selectedEntry,
|
|
);
|
|
if (next.selectedEntry) await requestLoadEntry(next.selectedEntry);
|
|
} catch (error) {
|
|
state.setDiagnostic(
|
|
diagnostic(
|
|
error instanceof ProjectImportError && /ZIP/.test(error.message) ? 'ZIP' : '导入',
|
|
error,
|
|
error instanceof ProjectImportError ? error.path : undefined,
|
|
),
|
|
);
|
|
const notice: WorkbenchNotification = {
|
|
id: ++notificationId.current,
|
|
title: '工程导入失败',
|
|
detail: error instanceof Error ? error.message : String(error),
|
|
tone: 'danger',
|
|
at: Date.now(),
|
|
};
|
|
setNotifications((items) => [notice, ...items].slice(0, 20));
|
|
setToast(notice);
|
|
} finally {
|
|
importInFlight.current = false;
|
|
setImportProgress(undefined);
|
|
state.setLoading(false);
|
|
}
|
|
},
|
|
[requestLoadEntry],
|
|
);
|
|
const removeProject = () => {
|
|
if (state.projectName) setRemoveConfirmOpen(true);
|
|
};
|
|
const confirmRemoveProject = () => {
|
|
viewer.current?.attach(null);
|
|
adapter.current.dispose();
|
|
manifest.current = null;
|
|
setGeneratedMjcf(undefined);
|
|
setGeneratedMjcfPath(undefined);
|
|
setPendingUrdfPath(undefined);
|
|
setPendingUrdfMounts([]);
|
|
setSelectedControllerPath(undefined);
|
|
setControllerStatus(undefined);
|
|
setSelectedPolicyPath(undefined);
|
|
setPolicyStatus(undefined);
|
|
state.clearProject();
|
|
setRemoveConfirmOpen(false);
|
|
};
|
|
const changeUrdfMode = (value: UrdfLoadMode) => {
|
|
setUrdfMode(value);
|
|
urdfModeRef.current = value;
|
|
const entry = state.entries.find((candidate) => candidate.path === state.selectedEntry);
|
|
if (entry?.format !== 'urdf') return;
|
|
if (value === 'mjcf') {
|
|
setPendingUrdfMounts(urdfLinkNames(manifest.current, entry.path));
|
|
setPendingUrdfPath(entry.path);
|
|
} else void loadEntry(entry.path, value);
|
|
};
|
|
const changeBaseMode = (value: UrdfBaseMode) => {
|
|
setBaseMode(value);
|
|
baseModeRef.current = value;
|
|
const entry = state.entries.find((candidate) => candidate.path === state.selectedEntry);
|
|
if (entry?.format === 'urdf' && urdfModeRef.current === 'mjcf')
|
|
void loadEntry(entry.path, 'mjcf');
|
|
};
|
|
const changeFiles = (event: ChangeEvent<HTMLInputElement>) => {
|
|
void ingest(Array.from(event.target.files ?? []));
|
|
event.target.value = '';
|
|
};
|
|
const drop = (event: DragEvent) => {
|
|
event.preventDefault();
|
|
if (state.loading || importInFlight.current) return;
|
|
importInFlight.current = true;
|
|
state.setLoading(true);
|
|
setImportProgress({ label: '读取拖放文件', value: 0.05 });
|
|
void (async () => {
|
|
try {
|
|
const files = await filesFromDrop(event.dataTransfer.items, event.dataTransfer.files);
|
|
await ingest(files, true);
|
|
} catch (error) {
|
|
importInFlight.current = false;
|
|
setImportProgress(undefined);
|
|
state.setLoading(false);
|
|
state.setDiagnostic(diagnostic('导入', error));
|
|
}
|
|
})();
|
|
};
|
|
const togglePause = () => {
|
|
const value = !state.paused;
|
|
state.setPaused(value);
|
|
adapter.current.setPaused(value);
|
|
};
|
|
const reset = () => {
|
|
adapter.current.setPaused(true);
|
|
adapter.current.reset();
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
state.setPaused(true);
|
|
};
|
|
const singleStep = () => {
|
|
adapter.current.singleStep();
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
};
|
|
const changeSpeed = (value: number) => {
|
|
state.setSpeed(value);
|
|
adapter.current.setSpeed(value);
|
|
};
|
|
const mode = (value: InteractionMode) => state.setMode(value);
|
|
const resetJoints = () => {
|
|
adapter.current.resetJoints();
|
|
state.setPaused(true);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
};
|
|
const toggleJointLimits = () => {
|
|
const next = !ignoreJointLimits;
|
|
adapter.current.setIgnoreJointLimits(next);
|
|
setIgnoreJointLimits(next);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
};
|
|
const setActuator = (id: number, value: number) => {
|
|
adapter.current.setActuator(id, value);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
};
|
|
const setActuatorParameters = (id: number, parameters: ActuatorParameters) => {
|
|
if (!adapter.current.setActuatorParameters(id, parameters)) return;
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
try {
|
|
setGeneratedMjcf(new TextDecoder().decode(adapter.current.exportMjcf()));
|
|
} catch (error) {
|
|
console.warn('[MuJoCo] 无法刷新驱动器参数源码', error);
|
|
}
|
|
};
|
|
const setJoint = (id: number, value: number) => {
|
|
adapter.current.setJointPosition(id, value);
|
|
state.setPaused(true);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
};
|
|
const loadControllerSource = async (source: string, path: string) => {
|
|
state.setLoading(true);
|
|
setImportProgress({ label: '初始化 Python 运行时并加载控制器', value: 0.5 });
|
|
state.setDiagnostic(undefined);
|
|
try {
|
|
const status = await adapter.current.loadPythonController(source, path);
|
|
setControllerStatus(status);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
notify('Python 控制器已加载', `${status.name} · ${status.controlHz} Hz`);
|
|
} catch (error) {
|
|
state.setDiagnostic(diagnostic('仿真', error, path));
|
|
} finally {
|
|
setImportProgress(undefined);
|
|
state.setLoading(false);
|
|
}
|
|
};
|
|
const loadControllerPath = (path: string) => {
|
|
const file = manifest.current?.files.find((candidate) => candidate.path === path);
|
|
if (!file) {
|
|
state.setDiagnostic(diagnostic('仿真', new Error('工程中找不到控制脚本'), path));
|
|
return;
|
|
}
|
|
setSelectedControllerPath(path);
|
|
void loadControllerSource(new TextDecoder().decode(file.data), path);
|
|
};
|
|
const importController = (file: File) => {
|
|
void (async () => {
|
|
try {
|
|
if (!/\.py$/i.test(file.name)) throw new Error('请选择 .py 文件');
|
|
if (file.size > 1024 * 1024) throw new Error('Python 控制脚本不能超过 1 MiB');
|
|
const path = normalizeProjectPath(file.name),
|
|
data = new Uint8Array(await file.arrayBuffer());
|
|
if (manifest.current) {
|
|
const index = manifest.current.files.findIndex((candidate) => candidate.path === path),
|
|
files = manifest.current.files.slice(),
|
|
entry = {
|
|
path,
|
|
data,
|
|
size: data.byteLength,
|
|
source: 'file' as const,
|
|
mimeType: file.type || 'text/x-python',
|
|
};
|
|
if (index >= 0) files[index] = entry;
|
|
else files.push(entry);
|
|
manifest.current = {
|
|
...manifest.current,
|
|
files,
|
|
totalBytes: files.reduce((total, item) => total + item.size, 0),
|
|
};
|
|
state.setProject(
|
|
manifest.current.name,
|
|
files.map(({ path: filePath, size }) => ({ path: filePath, size })),
|
|
manifest.current.entries,
|
|
manifest.current.selectedEntry,
|
|
);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
}
|
|
setSelectedControllerPath(path);
|
|
await loadControllerSource(new TextDecoder().decode(data), path);
|
|
} catch (error) {
|
|
state.setDiagnostic(diagnostic('仿真', error, file.name));
|
|
}
|
|
})();
|
|
};
|
|
const toggleController = (enabled: boolean) => {
|
|
adapter.current.setControllerEnabled(enabled);
|
|
const snapshot = adapter.current.snapshot() ?? undefined;
|
|
setControllerStatus(snapshot?.controller);
|
|
setPolicyStatus(snapshot?.rlPolicy);
|
|
state.setSnapshot(snapshot);
|
|
};
|
|
const sendControllerCommand = (command: ControllerCommand) => {
|
|
try {
|
|
adapter.current.sendControllerCommand(command);
|
|
const snapshot = adapter.current.snapshot() ?? undefined;
|
|
setControllerStatus(snapshot?.controller);
|
|
state.setSnapshot(snapshot);
|
|
} catch (error) {
|
|
state.setDiagnostic(diagnostic('仿真', error, selectedControllerPath));
|
|
}
|
|
};
|
|
const removeController = () => {
|
|
adapter.current.removeController();
|
|
setControllerStatus(undefined);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
};
|
|
const loadPolicyBytes = async (data: Uint8Array, path: string) => {
|
|
state.setLoading(true);
|
|
setImportProgress({ label: '初始化 ONNX Runtime 并加载策略', value: 0.55 });
|
|
state.setDiagnostic(undefined);
|
|
try {
|
|
const status = await adapter.current.loadRLPolicy(data, path);
|
|
setPolicyStatus(status);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
notify(
|
|
'ONNX 策略已加载',
|
|
`${status.taskName} · ${status.observationSize} → ${status.actionSize}`,
|
|
);
|
|
} catch (error) {
|
|
state.setDiagnostic(diagnostic('仿真', error, path));
|
|
} finally {
|
|
setImportProgress(undefined);
|
|
state.setLoading(false);
|
|
}
|
|
};
|
|
const loadPolicyPath = (path: string) => {
|
|
const file = manifest.current?.files.find((candidate) => candidate.path === path);
|
|
if (!file) {
|
|
state.setDiagnostic(diagnostic('仿真', new Error('工程中找不到 ONNX 策略'), path));
|
|
return;
|
|
}
|
|
setSelectedPolicyPath(path);
|
|
void loadPolicyBytes(file.data, path);
|
|
};
|
|
const importPolicy = (file: File) => {
|
|
void (async () => {
|
|
try {
|
|
if (!/\.onnx$/i.test(file.name)) throw new Error('请选择 .onnx 文件');
|
|
if (file.size > 64 * 1024 * 1024) throw new Error('ONNX 策略不能超过 64 MiB');
|
|
const path = normalizeProjectPath(file.name),
|
|
data = new Uint8Array(await file.arrayBuffer());
|
|
if (manifest.current) {
|
|
const index = manifest.current.files.findIndex((candidate) => candidate.path === path),
|
|
files = manifest.current.files.slice(),
|
|
entry = {
|
|
path,
|
|
data,
|
|
size: data.byteLength,
|
|
source: 'file' as const,
|
|
mimeType: file.type || 'application/octet-stream',
|
|
};
|
|
if (index >= 0) files[index] = entry;
|
|
else files.push(entry);
|
|
const totalBytes = files.reduce((total, item) => total + item.size, 0);
|
|
if (totalBytes > DEFAULT_IMPORT_LIMITS.maxTotalBytes)
|
|
throw new Error('加入 ONNX 后工程总大小超过 512 MiB');
|
|
manifest.current = { ...manifest.current, files, totalBytes };
|
|
state.setProject(
|
|
manifest.current.name,
|
|
files.map(({ path: filePath, size }) => ({ path: filePath, size })),
|
|
manifest.current.entries,
|
|
manifest.current.selectedEntry,
|
|
);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
}
|
|
setSelectedPolicyPath(path);
|
|
await loadPolicyBytes(data, path);
|
|
} catch (error) {
|
|
state.setDiagnostic(diagnostic('仿真', error, file.name));
|
|
}
|
|
})();
|
|
};
|
|
const togglePolicy = (enabled: boolean) => {
|
|
adapter.current.setRLPolicyEnabled(enabled);
|
|
const snapshot = adapter.current.snapshot() ?? undefined;
|
|
setPolicyStatus(snapshot?.rlPolicy);
|
|
setControllerStatus(snapshot?.controller);
|
|
state.setSnapshot(snapshot);
|
|
};
|
|
const setPolicyCommand = (command: RLCommand) => {
|
|
adapter.current.setRLCommand(command);
|
|
const snapshot = adapter.current.snapshot() ?? undefined;
|
|
setPolicyStatus(snapshot?.rlPolicy);
|
|
state.setSnapshot(snapshot);
|
|
};
|
|
const removePolicy = () => {
|
|
adapter.current.removeRLPolicy();
|
|
setPolicyStatus(undefined);
|
|
state.setSnapshot(adapter.current.snapshot() ?? undefined);
|
|
};
|
|
const notify = (
|
|
title: string,
|
|
detail: string,
|
|
tone: WorkbenchNotification['tone'] = 'success',
|
|
) => {
|
|
const notice: WorkbenchNotification = {
|
|
id: ++notificationId.current,
|
|
title,
|
|
detail,
|
|
tone,
|
|
at: Date.now(),
|
|
};
|
|
setNotifications((items) => [notice, ...items].slice(0, 20));
|
|
setToast(notice);
|
|
};
|
|
const saveCachedSource = async (path: string, text: string) => {
|
|
if (!manifest.current) return;
|
|
manifest.current = upsertCachedMjcf(manifest.current, path, text);
|
|
state.setProject(
|
|
manifest.current.name,
|
|
manifest.current.files.map((file) => ({ path: file.path, size: file.size })),
|
|
manifest.current.entries,
|
|
path,
|
|
);
|
|
notify('转换后的 MJCF 已保存到缓存', path);
|
|
await loadEntry(path);
|
|
};
|
|
const exportUrdf = () => {
|
|
if (!manifest.current || selectedFormat !== 'urdf' || !state.selectedEntry) return;
|
|
const text = readCachedText(manifest.current, state.selectedEntry);
|
|
downloadBytes(new TextEncoder().encode(text), exportedFileName(manifest.current.name, 'urdf'));
|
|
notify('URDF 已导出', state.selectedEntry);
|
|
};
|
|
const exportMjcf = () => {
|
|
try {
|
|
const data = adapter.current.exportMjcf();
|
|
downloadBytes(data, exportedFileName(manifest.current?.name ?? 'model', 'xml'));
|
|
notify('MJCF 已导出', '导出内容来自当前已编译模型');
|
|
} catch (error) {
|
|
state.setDiagnostic(diagnostic('模型编译', error, state.selectedEntry));
|
|
}
|
|
};
|
|
const toggleFullscreen = () => {
|
|
if (document.fullscreenElement) void document.exitFullscreen().catch(() => {});
|
|
else if (root.current) void root.current.requestFullscreen().catch(() => {});
|
|
};
|
|
const applyLayoutPreset = (preset: LayoutPreset) => {
|
|
if (preset === 'viewport') {
|
|
setLeftOpen(false);
|
|
setRightOpen(false);
|
|
dispatchLayoutWidths(288, 288);
|
|
} else if (preset === 'project') {
|
|
setLeftOpen(true);
|
|
setRightOpen(false);
|
|
dispatchLayoutWidths(384, 288);
|
|
} else if (preset === 'control') {
|
|
setLeftOpen(false);
|
|
setRightOpen(true);
|
|
dispatchLayoutWidths(288, 384);
|
|
} else {
|
|
setLeftOpen(true);
|
|
setRightOpen(true);
|
|
dispatchLayoutWidths(288, 288);
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
const key = (event: KeyboardEvent) => {
|
|
if (
|
|
document.activeElement instanceof HTMLElement &&
|
|
document.activeElement.closest('[role="dialog"]')
|
|
)
|
|
return;
|
|
if ((event.ctrlKey || event.metaKey) && event.key.toLocaleLowerCase() === 'k') {
|
|
event.preventDefault();
|
|
setCommandOpen(true);
|
|
return;
|
|
}
|
|
if ((event.target as HTMLElement).matches('input,select,button')) return;
|
|
if (event.code === 'Space') {
|
|
event.preventDefault();
|
|
togglePause();
|
|
}
|
|
if (event.key === 'r') reset();
|
|
if (event.key === '1') mode('select');
|
|
if (event.key === '2') mode('joint');
|
|
if (event.key === '3') mode('force');
|
|
};
|
|
window.addEventListener('keydown', key);
|
|
return () => window.removeEventListener('keydown', key);
|
|
});
|
|
const selectedFormat = state.entries.find((entry) => entry.path === state.selectedEntry)?.format;
|
|
const commands: WorkbenchCommand[] = [
|
|
{
|
|
id: 'play',
|
|
label: state.paused ? '播放仿真' : '暂停仿真',
|
|
group: '仿真',
|
|
icon: state.paused ? <Play className="h-4 w-4" /> : <Pause className="h-4 w-4" />,
|
|
shortcut: 'Space',
|
|
disabled: !state.snapshot,
|
|
run: togglePause,
|
|
},
|
|
{
|
|
id: 'reset',
|
|
label: '重置仿真',
|
|
group: '仿真',
|
|
icon: <RotateCcw className="h-4 w-4" />,
|
|
shortcut: 'R',
|
|
disabled: !state.snapshot,
|
|
run: reset,
|
|
},
|
|
{
|
|
id: 'select',
|
|
label: '切换到选择模式',
|
|
group: '视口',
|
|
icon: <MousePointer2 className="h-4 w-4" />,
|
|
shortcut: '1',
|
|
run: () => mode('select'),
|
|
},
|
|
{
|
|
id: 'joint',
|
|
label: '切换到关节拖动',
|
|
group: '视口',
|
|
icon: <Hand className="h-4 w-4" />,
|
|
shortcut: '2',
|
|
run: () => mode('joint'),
|
|
},
|
|
{
|
|
id: 'force',
|
|
label: '切换到外力施加',
|
|
group: '视口',
|
|
icon: <Crosshair className="h-4 w-4" />,
|
|
shortcut: '3',
|
|
run: () => mode('force'),
|
|
},
|
|
{
|
|
id: 'camera',
|
|
label: '复位相机',
|
|
group: '视口',
|
|
icon: <Camera className="h-4 w-4" />,
|
|
run: () => viewer.current?.resetCamera(),
|
|
},
|
|
{
|
|
id: 'source',
|
|
label: '查看和修改缓存源代码',
|
|
group: '工程',
|
|
icon: <Code2 className="h-4 w-4" />,
|
|
disabled: !generatedMjcf,
|
|
run: () => setSourceOpen(true),
|
|
},
|
|
{
|
|
id: 'export-urdf',
|
|
label: '导出 URDF 文件',
|
|
group: '工程',
|
|
icon: <Download className="h-4 w-4" />,
|
|
disabled: selectedFormat !== 'urdf',
|
|
run: exportUrdf,
|
|
},
|
|
{
|
|
id: 'export-mjcf',
|
|
label: '导出 MJCF 文件',
|
|
group: '工程',
|
|
icon: <Download className="h-4 w-4" />,
|
|
disabled: !state.snapshot,
|
|
run: exportMjcf,
|
|
},
|
|
{
|
|
id: 'left',
|
|
label: leftOpen ? '隐藏工程面板' : '显示工程面板',
|
|
group: '布局',
|
|
icon: leftOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />,
|
|
run: () => setLeftOpen((value) => !value),
|
|
},
|
|
{
|
|
id: 'right',
|
|
label: rightOpen ? '隐藏属性面板' : '显示属性面板',
|
|
group: '布局',
|
|
icon: rightOpen ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />,
|
|
run: () => setRightOpen((value) => !value),
|
|
},
|
|
{
|
|
id: 'theme',
|
|
label: theme === 'dark' ? '切换到白天主题' : '切换到黑夜主题',
|
|
group: '外观',
|
|
icon: <SunMoon className="h-4 w-4" />,
|
|
run: () => setTheme((value) => (value === 'dark' ? 'light' : 'dark')),
|
|
},
|
|
{
|
|
id: 'fullscreen',
|
|
label: fullscreen ? '退出全屏' : '进入全屏',
|
|
group: '布局',
|
|
icon: <Maximize className="h-4 w-4" />,
|
|
run: toggleFullscreen,
|
|
},
|
|
{
|
|
id: 'help',
|
|
label: '查看快捷键帮助',
|
|
group: '帮助',
|
|
icon: <CircleHelp className="h-4 w-4" />,
|
|
run: () => setHelpOpen(true),
|
|
},
|
|
];
|
|
return (
|
|
<div
|
|
ref={root}
|
|
className={`${theme === 'light' ? 'theme-light' : 'theme-dark'} flex h-screen min-w-0 flex-col overflow-hidden bg-app text-text-primary`}
|
|
onDragOver={(event) => event.preventDefault()}
|
|
onDrop={drop}
|
|
>
|
|
<WorkbenchHeader
|
|
paused={state.paused}
|
|
ready={Boolean(state.snapshot)}
|
|
speed={state.speed}
|
|
theme={theme}
|
|
loading={state.loading}
|
|
leftOpen={leftOpen}
|
|
rightOpen={rightOpen}
|
|
fullscreen={fullscreen}
|
|
hasProject={Boolean(generatedMjcf)}
|
|
onFiles={changeFiles}
|
|
onFolder={changeFiles}
|
|
onOpenSource={() => setSourceOpen(true)}
|
|
onTogglePause={togglePause}
|
|
onStep={singleStep}
|
|
onReset={reset}
|
|
onSpeed={changeSpeed}
|
|
onToggleLeft={() => setLeftOpen((value) => !value)}
|
|
onToggleRight={() => setRightOpen((value) => !value)}
|
|
onToggleTheme={() => setTheme((value) => (value === 'dark' ? 'light' : 'dark'))}
|
|
onHelp={() => setHelpOpen(true)}
|
|
endActions={
|
|
<>
|
|
<NotificationCenter
|
|
items={notifications}
|
|
onDismiss={(id) =>
|
|
setNotifications((items) => items.filter((item) => item.id !== id))
|
|
}
|
|
onClear={() => setNotifications([])}
|
|
onOpenLog={() => setDiagnosticsOpen(true)}
|
|
/>
|
|
<span className="hidden items-center gap-0.5 xl:flex">
|
|
<IconButton
|
|
tooltip="布局设置"
|
|
aria-label="布局设置"
|
|
onClick={() => setLayoutOpen(true)}
|
|
>
|
|
<PanelsTopLeft className="h-4 w-4" />
|
|
</IconButton>
|
|
<IconButton
|
|
tooltip="工作台设置"
|
|
aria-label="工作台设置"
|
|
onClick={() => setSettingsOpen(true)}
|
|
>
|
|
<SettingsIcon className="h-4 w-4" />
|
|
</IconButton>
|
|
</span>
|
|
</>
|
|
}
|
|
compactMenu={
|
|
<ToolbarOverflowMenu
|
|
fullscreen={fullscreen}
|
|
onCommands={() => setCommandOpen(true)}
|
|
onLayout={() => setLayoutOpen(true)}
|
|
onSettings={() => setSettingsOpen(true)}
|
|
onFullscreen={toggleFullscreen}
|
|
onHelp={() => setHelpOpen(true)}
|
|
onTheme={() => setTheme((value) => (value === 'dark' ? 'light' : 'dark'))}
|
|
/>
|
|
}
|
|
onCommands={() => setCommandOpen(true)}
|
|
onToggleFullscreen={toggleFullscreen}
|
|
center={
|
|
<ViewerToolDock
|
|
mode={state.mode}
|
|
display={displayOptions}
|
|
onModeChange={mode}
|
|
onDisplayChange={setDisplayOptions}
|
|
onResetCamera={() => viewer.current?.resetCamera()}
|
|
/>
|
|
}
|
|
/>
|
|
<div className="relative flex min-h-0 flex-1">
|
|
<ProjectSidebar
|
|
visible={leftOpen}
|
|
projectName={state.projectName}
|
|
files={state.files}
|
|
entries={state.entries}
|
|
selectedEntry={state.selectedEntry}
|
|
snapshot={state.snapshot}
|
|
loading={state.loading}
|
|
onRemove={removeProject}
|
|
onSelectEntry={requestLoadEntry}
|
|
onJointHover={(jointId) => viewer.current?.highlightJoint(jointId)}
|
|
/>
|
|
<main className="relative min-w-0 flex-1">
|
|
<div ref={viewerHost} className="absolute inset-0" />
|
|
<ViewportHUD
|
|
paused={state.paused}
|
|
mode={state.mode}
|
|
selection={state.selection}
|
|
ready={Boolean(state.snapshot)}
|
|
/>
|
|
<WorkspaceOverlays
|
|
loading={state.loading}
|
|
hasSnapshot={Boolean(state.snapshot)}
|
|
progress={importProgress}
|
|
/>
|
|
<ToastViewport item={toast} onDismiss={() => setToast(undefined)} />
|
|
{Boolean(state.snapshot?.model.ncam) &&
|
|
(showSensorCamera ? (
|
|
<div
|
|
aria-label="摄像头画面"
|
|
className="pointer-events-none absolute bottom-4 left-4 z-20 aspect-[4/3] w-[min(320px,32%)] min-w-[120px] overflow-hidden rounded-lg border border-border-strong shadow-2xl"
|
|
>
|
|
<div className="pointer-events-auto absolute inset-x-0 top-0 flex h-7 items-center justify-between bg-black/65 px-2 text-[10px] font-medium text-white">
|
|
<span className="flex items-center gap-1">
|
|
<Camera className="h-3 w-3" />
|
|
摄像头
|
|
</span>
|
|
<button
|
|
type="button"
|
|
className="rounded px-1.5 py-0.5 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
|
|
onClick={() => setShowSensorCamera(false)}
|
|
>
|
|
隐藏画面
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Button
|
|
className="absolute bottom-4 left-4 z-20"
|
|
icon={<Camera className="h-3.5 w-3.5" />}
|
|
onClick={() => setShowSensorCamera(true)}
|
|
>
|
|
显示摄像头画面
|
|
</Button>
|
|
))}
|
|
{state.entries.length > 1 && !state.selectedEntry && !pendingUrdfPath && (
|
|
<EntrySelectionDialog entries={state.entries} onSelect={requestLoadEntry} />
|
|
)}{' '}
|
|
{state.diagnostic && (
|
|
<ErrorRecoveryPanel
|
|
key={state.diagnostic.at}
|
|
value={state.diagnostic}
|
|
onClose={() => state.setDiagnostic(undefined)}
|
|
onRetry={
|
|
state.diagnostic.category === '模型编译' && state.diagnostic.path
|
|
? () => void loadEntry(state.diagnostic!.path!)
|
|
: undefined
|
|
}
|
|
onOpenProject={() => {
|
|
setLeftOpen(true);
|
|
state.setDiagnostic(undefined);
|
|
}}
|
|
/>
|
|
)}
|
|
</main>
|
|
<ModelControlsSidebar
|
|
visible={rightOpen}
|
|
snapshot={state.snapshot}
|
|
selection={state.selection}
|
|
selectedFormat={selectedFormat}
|
|
loading={state.loading}
|
|
urdfMode={urdfMode}
|
|
baseMode={baseMode}
|
|
showCollision={showCollision}
|
|
ignoreJointLimits={ignoreJointLimits}
|
|
jointAdvanced={jointAdvanced}
|
|
angleUnit={angleUnit}
|
|
forceScale={forceScale}
|
|
controllerPaths={state.files
|
|
.filter((file) => /\.py$/i.test(file.path))
|
|
.map((file) => file.path)}
|
|
selectedControllerPath={selectedControllerPath}
|
|
controllerStatus={controllerStatus}
|
|
policyPaths={state.files
|
|
.filter((file) => /\.onnx$/i.test(file.path))
|
|
.map((file) => file.path)}
|
|
selectedPolicyPath={selectedPolicyPath}
|
|
policyStatus={policyStatus}
|
|
onUrdfMode={changeUrdfMode}
|
|
onBaseMode={changeBaseMode}
|
|
onShowCollision={setShowCollision}
|
|
onResetJoints={resetJoints}
|
|
onToggleJointLimits={toggleJointLimits}
|
|
onToggleAdvanced={() => setJointAdvanced((value) => !value)}
|
|
onToggleAngleUnit={() => setAngleUnit((value) => (value === 'rad' ? 'deg' : 'rad'))}
|
|
onActuator={setActuator}
|
|
onActuatorParameters={setActuatorParameters}
|
|
onJoint={setJoint}
|
|
onForceScale={setForceScale}
|
|
onSelectControllerPath={setSelectedControllerPath}
|
|
onLoadControllerPath={loadControllerPath}
|
|
onImportController={importController}
|
|
onToggleController={toggleController}
|
|
onControllerCommand={sendControllerCommand}
|
|
onRemoveController={removeController}
|
|
onSelectPolicyPath={setSelectedPolicyPath}
|
|
onLoadPolicyPath={loadPolicyPath}
|
|
onImportPolicy={importPolicy}
|
|
onTogglePolicy={togglePolicy}
|
|
onPolicyCommand={setPolicyCommand}
|
|
onRemovePolicy={removePolicy}
|
|
/>
|
|
</div>
|
|
{pendingUrdfPath && (
|
|
<UrdfImportOptionsDialog
|
|
open
|
|
path={pendingUrdfPath}
|
|
mountBodies={pendingUrdfMounts}
|
|
onConfirm={confirmUrdfOptions}
|
|
onSkip={skipUrdfOptions}
|
|
/>
|
|
)}
|
|
{sourceOpen && generatedMjcf && generatedMjcfPath && (
|
|
<Suspense
|
|
fallback={
|
|
<div
|
|
role="status"
|
|
className="fixed inset-0 z-[390] grid place-items-center bg-app/60 text-sm text-text-secondary backdrop-blur-sm"
|
|
>
|
|
正在加载源码编辑器…
|
|
</div>
|
|
}
|
|
>
|
|
<SourceEditorDialog
|
|
open
|
|
code={generatedMjcf}
|
|
filePath={generatedMjcfPath}
|
|
theme={theme}
|
|
onClose={() => setSourceOpen(false)}
|
|
onSave={saveCachedSource}
|
|
/>
|
|
</Suspense>
|
|
)}
|
|
<ShortcutHelpDialog open={helpOpen} onClose={() => setHelpOpen(false)} />
|
|
<DiagnosticsDrawer
|
|
open={diagnosticsOpen}
|
|
items={notifications}
|
|
onClose={() => setDiagnosticsOpen(false)}
|
|
onClear={() => setNotifications([])}
|
|
/>
|
|
<SettingsDialog
|
|
open={settingsOpen}
|
|
onClose={() => setSettingsOpen(false)}
|
|
theme={theme}
|
|
angleUnit={angleUnit}
|
|
showCollision={showCollision}
|
|
jointAdvanced={jointAdvanced}
|
|
forceScale={forceScale}
|
|
onTheme={setTheme}
|
|
onAngleUnit={setAngleUnit}
|
|
onShowCollision={setShowCollision}
|
|
onJointAdvanced={setJointAdvanced}
|
|
onForceScale={setForceScale}
|
|
/>
|
|
<LayoutSettingsDialog
|
|
open={layoutOpen}
|
|
onClose={() => setLayoutOpen(false)}
|
|
leftOpen={leftOpen}
|
|
rightOpen={rightOpen}
|
|
onLeftOpen={setLeftOpen}
|
|
onRightOpen={setRightOpen}
|
|
onPreset={applyLayoutPreset}
|
|
onReset={() => applyLayoutPreset('default')}
|
|
/>
|
|
<CommandPalette
|
|
open={commandOpen}
|
|
onClose={() => setCommandOpen(false)}
|
|
commands={commands}
|
|
/>
|
|
<ConfirmDialog
|
|
open={removeConfirmOpen}
|
|
title="移除当前工程"
|
|
confirmLabel="移除工程"
|
|
danger
|
|
onConfirm={confirmRemoveProject}
|
|
onClose={() => setRemoveConfirmOpen(false)}
|
|
>
|
|
<p className="text-sm text-text-secondary">
|
|
确定从当前会话中移除“<strong className="text-text-primary">{state.projectName}</strong>
|
|
”吗？
|
|
</p>
|
|
<p className="mt-2 text-xs text-text-tertiary">该操作不会删除本地文件。</p>
|
|
</ConfirmDialog>
|
|
<StatusBar
|
|
time={state.snapshot?.time}
|
|
fps={state.fps}
|
|
stepMs={state.stepMs}
|
|
memoryMb={state.memoryMb}
|
|
loaded={Boolean(state.snapshot)}
|
|
overBudget={state.overBudget}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|