From ba7ee9697c627e0c7094d31ea8319c20022e9538 Mon Sep 17 00:00:00 2001 From: cen617-code <1057290604@qq.com> Date: Fri, 21 Aug 2026 18:07:52 +0800 Subject: [PATCH] feat(web-platform): release V0.2.1 --- wasm/package-lock.json | 69 ++++++++ wasm/package.json | 2 + wasm/web_platform/V0.1_CAPABILITIES.md | 166 ++++++++++++++++++ wasm/web_platform/e2e/app.spec.ts | 31 ++++ .../fixtures/urdf_dae/robot/dae/triangle.dae | 4 + .../fixtures/urdf_dae/robot/urdf/robot.urdf | 8 + wasm/web_platform/src/app/App.tsx | 22 ++- .../src/app/components/SourceEditorDialog.tsx | 27 +++ .../src/app/components/WorkbenchHeader.tsx | 4 +- .../src/app/components/monacoSetup.ts | 8 + .../src/project/cachedFiles.test.ts | 13 ++ wasm/web_platform/src/project/cachedFiles.ts | 57 ++++++ .../src/simulation/PhysicsAdapter.ts | 16 +- wasm/web_platform/src/vite-env.d.ts | 5 + 14 files changed, 422 insertions(+), 10 deletions(-) create mode 100644 wasm/web_platform/V0.1_CAPABILITIES.md create mode 100644 wasm/web_platform/fixtures/urdf_dae/robot/dae/triangle.dae create mode 100644 wasm/web_platform/fixtures/urdf_dae/robot/urdf/robot.urdf create mode 100644 wasm/web_platform/src/app/components/SourceEditorDialog.tsx create mode 100644 wasm/web_platform/src/app/components/monacoSetup.ts create mode 100644 wasm/web_platform/src/project/cachedFiles.test.ts create mode 100644 wasm/web_platform/src/project/cachedFiles.ts create mode 100644 wasm/web_platform/src/vite-env.d.ts diff --git a/wasm/package-lock.json b/wasm/package-lock.json index 7edd2e56..3f858f82 100644 --- a/wasm/package-lock.json +++ b/wasm/package-lock.json @@ -9,9 +9,11 @@ "version": "1.0.0-alpha.1", "license": "Apache-2.0", "dependencies": { + "@monaco-editor/react": "^4.7.0", "@mujoco/mujoco": "^3.11.0", "fflate": "^0.8.3", "lucide-react": "^0.555.0", + "monaco-editor": "^0.55.1", "react": "^19.2.8", "react-dom": "^19.2.8", "zustand": "^5.0.15" @@ -931,6 +933,29 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@monaco-editor/loader": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz", + "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==", + "license": "MIT", + "dependencies": { + "state-local": "^1.0.6" + } + }, + "node_modules/@monaco-editor/react": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz", + "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==", + "license": "MIT", + "dependencies": { + "@monaco-editor/loader": "^1.5.0" + }, + "peerDependencies": { + "monaco-editor": ">= 0.25.0 < 1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/@mujoco/mujoco": { "version": "3.11.0", "resolved": "https://registry.npmjs.org/@mujoco/mujoco/-/mujoco-3.11.0.tgz", @@ -1550,6 +1575,13 @@ "meshoptimizer": "~1.1.1" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "license": "MIT", + "optional": true + }, "node_modules/@types/webxr": { "version": "0.5.24", "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz", @@ -2542,6 +2574,15 @@ "license": "MIT", "peer": true }, + "node_modules/dompurify": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz", + "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==", + "license": "(MPL-2.0 OR Apache-2.0)", + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -3801,6 +3842,18 @@ "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", "dev": true }, + "node_modules/marked": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", + "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", + "license": "MIT", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/mdn-data": { "version": "2.27.1", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz", @@ -3887,6 +3940,16 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/monaco-editor": { + "version": "0.55.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz", + "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==", + "license": "MIT", + "dependencies": { + "dompurify": "3.2.7", + "marked": "14.0.0" + } + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -4682,6 +4745,12 @@ "dev": true, "license": "MIT" }, + "node_modules/state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==", + "license": "MIT" + }, "node_modules/std-env": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz", diff --git a/wasm/package.json b/wasm/package.json index 44f8981d..dd773403 100644 --- a/wasm/package.json +++ b/wasm/package.json @@ -56,9 +56,11 @@ }, "type": "module", "dependencies": { + "@monaco-editor/react": "^4.7.0", "@mujoco/mujoco": "^3.11.0", "fflate": "^0.8.3", "lucide-react": "^0.555.0", + "monaco-editor": "^0.55.1", "react": "^19.2.8", "react-dom": "^19.2.8", "zustand": "^5.0.15" diff --git a/wasm/web_platform/V0.1_CAPABILITIES.md b/wasm/web_platform/V0.1_CAPABILITIES.md new file mode 100644 index 00000000..cfc87307 --- /dev/null +++ b/wasm/web_platform/V0.1_CAPABILITIES.md @@ -0,0 +1,166 @@ +# MuJoCo Web Platform V0.1 能力总结 + +## 1. 浏览器内模型导入 + +支持以下模型和资源格式： + +- MJCF/XML +- URDF +- ZIP 工程包 +- 文件夹工程 +- OBJ、STL、DAE Mesh +- PNG、JPG 等纹理资源 +- MJCF `include` 多文件工程 +- URDF `package://` 资源路径 + +导入工程仅保存在当前浏览器会话和 WASM 文件系统中，不会修改或删除本地文件。 + +## 2. 工程资源管理 + +- 按真实目录层级展示工程文件。 +- 目录优先并按文件名排序。 +- 标记和高亮当前模型入口。 +- 导入 URDF 时，只自动展开选中 URDF 所在的目录路径。 +- 其他目录默认折叠，仍可手动展开。 +- 支持从当前会话中移除整个工程。 + +## 3. URDF 兼容处理 + +提供两种加载方式： + +- **转换为 MJCF（推荐）** +- **MuJoCo 原生 URDF** + +自动兼容处理包括： + +- 将 `package://` 地址改写为工程相对路径。 +- 在浏览器内将 DAE 转换为 OBJ。 +- 保留 DAE 单位、坐标轴和节点变换。 +- 保留 URDF visual mesh 和 Body 层级。 +- 处理 MuJoCo 不支持的重复 material。 +- DAE 转换失败时提供降级几何。 +- 自动添加 `z=0` 物理地面。 +- 计算模型最低几何点并对齐到地面。 + +## 4. 固定与浮动基座 + +URDF 转 MJCF 时可以选择： + +- **浮动基座** + - 自动添加根 `freejoint`。 + - 支持重力、碰撞和外力运动。 +- **固定基座** + - 根 Body 与世界固连。 + +切换基座类型后会自动重新转换并加载模型。 + +## 5. Three.js 模型可视化 + +- 渲染 MuJoCo Body、Geom 和 Mesh。 +- 支持 Box、Sphere、Capsule、Cylinder、Ellipsoid、Plane 和 Mesh。 +- 正确解析 MuJoCo `mjvGeom.dataid` 的 Mesh/凸包编码。 +- 支持材质颜色、透明度和基础纹理。 +- 默认显示 visual 并隐藏 collision。 +- 可切换显示碰撞几何。 +- 自动计算相机中心和观察范围。 +- 无限地面不会影响相机包围范围。 +- 支持相机旋转、缩放、平移和复位。 + +## 6. XYZ 方向指示器 + +- 右下角提供固定的 XYZ 方向指示器。 +- X、Y、Z 分别使用红、绿、蓝色。 +- 指示器随相机方向实时旋转。 +- 不参与模型拾取和交互。 + +## 7. 模型结构树 + +左侧工程文件树下方显示 MuJoCo 模型结构： + +- 按 Body 父子关系组织。 +- 显示每个 Body 所属的 Joint。 +- 支持层级展开和折叠。 +- 鼠标悬停或键盘聚焦关节时： + - 高亮关节所属 Body。 + - 在关节锚点显示黄色标记。 + - 标记随仿真运动实时更新。 + +## 8. 仿真控制 + +支持： + +- 播放和暂停。 +- 单步运行。 +- 完整重置。 +- `0.25×`～`4×` 仿真速度。 +- 实时仿真时间和物理耗时。 +- 主线程步进预算及追帧限制。 +- 播放中重置后仍可正常再次播放和暂停。 + +快捷键： + +- `Space`：播放/暂停。 +- `R`：重置。 +- `1/2/3`：切换交互模式。 + +## 9. 关节控制 + +- 使用滑块调整旋转和滑动关节。 +- 只读显示 Free、Ball 等不适合单滑块编辑的关节。 +- 调整关节时自动暂停仿真。 +- 支持重置所有可编辑关节。 +- 重置时恢复初始位置并清零对应速度。 +- 支持忽略 MuJoCo 关节限位。 +- 恢复限位时自动将超限值钳制回合法范围。 +- 高级模式显示原始上下限和“已忽略”状态。 +- 旋转关节支持弧度制和角度制切换。 +- 滑动关节保持使用米制单位。 + +## 10. Actuator 与交互工具 + +- 显示模型 Actuator。 +- 根据 `ctrlrange` 提供控制滑块。 +- 提供三种视口交互模式： + - 物体选择。 + - 关节拖动。 + - 外力施加。 +- 外力强度可调。 +- 松开鼠标后自动清除外力。 +- 显示当前选中的 Body、Geom、类型和世界位置。 + +## 11. 界面与主题 + +- 中文用户界面。 +- 左右面板支持显示、隐藏和宽度调整。 +- 支持白天与黑夜主题切换。 +- 主题选择保存到浏览器本地。 +- UI、视口、网格和 XYZ 指示器同步换色。 +- 使用约 `420 ms` 的平滑主题切换动画。 +- 支持系统“减少动态效果”设置。 + +## 12. 状态与诊断 + +实时显示： + +- 仿真时间。 +- FPS。 +- 物理步进耗时。 +- 浏览器内存使用情况。 +- WASM 加载状态。 +- Body、Joint、Geom、Actuator、qpos 和 qvel 数量。 + +错误分类包括： + +- 导入失败。 +- ZIP 解析失败。 +- 模型编译失败。 +- 渲染失败。 + +URDF 自动兼容处理会以中文列出具体修改内容。 + +## 13. 当前限制 + +- DAE 转 OBJ 主要保留几何、单位和节点变换，内嵌材质及复杂贴图不能完全保留。 +- 仿真和渲染目前运行在浏览器主线程。 +- 关节滑块主要面向 Hinge 和 Slide，Free、Ball Joint 暂不提供完整的多自由度编辑器。 +- 导入工程不会持久化，刷新页面后需要重新导入。 diff --git a/wasm/web_platform/e2e/app.spec.ts b/wasm/web_platform/e2e/app.spec.ts index a38c7753..81245f9a 100644 --- a/wasm/web_platform/e2e/app.spec.ts +++ b/wasm/web_platform/e2e/app.spec.ts @@ -1,5 +1,7 @@ import {expect, test} from '@playwright/test'; +import {readFileSync} from 'node:fs'; import {fileURLToPath} from 'node:url'; +import {zipSync} from 'fflate'; const fixture = (relative: string) => fileURLToPath(new URL(`../fixtures/${relative}`, import.meta.url)); @@ -98,6 +100,24 @@ test('显示中文平台骨架并加载单文件模型', async ({page}) => { await expect(page.getByRole('button',{name:'▶ 播放'})).toBeVisible(); }); +test('转换后的 MJCF 可编辑并重新载入', async ({page}) => { + await page.goto('/'); + await page.locator('input[type="file"]').first().setInputFiles({name:'model.xml',mimeType:'text/xml',buffer:Buffer.from(SIMPLE_MODEL)}); + await expect(page.getByText('WASM 已加载')).toBeVisible({timeout:30_000}); + await page.getByRole('button',{name:'源代码'}).click(); + const dialog=page.getByRole('dialog',{name:'转换后的 MJCF 编辑器'});await expect(dialog).toBeVisible(); + await expect(dialog.getByText('缓存文件 · 可编辑')).toBeVisible(); + await expect(dialog.getByText('转换后的 MJCF',{exact:true})).toBeVisible(); + const editor=dialog.locator('.monaco-editor');await editor.click({position:{x:240,y:120}}); + await page.keyboard.press('Control+a');await page.keyboard.insertText(SIMPLE_MODEL.replace('model="e2e"','model="cached-edit"')); + await dialog.getByRole('button',{name:'保存并重新载入',exact:true}).click(); + await expect(dialog.getByRole('button',{name:'保存并重新载入',exact:true})).toBeDisabled({timeout:30_000}); + await dialog.getByRole('button',{name:'关闭源代码编辑器'}).click(); + await expect(page.getByText('WASM 已加载')).toBeVisible({timeout:30_000}); + await expect(page.getByRole('button',{name:'导出 URDF'})).toHaveCount(0); + await expect(page.getByRole('button',{name:'导出 MJCF'})).toHaveCount(0); +}); + test('加载包含 include、OBJ、STL 与 PNG 的工程', async ({page}) => { await page.goto('/'); await page.locator('input[type="file"]').first().setInputFiles([ @@ -128,6 +148,17 @@ test('加载引用 OBJ 的 URDF 工程', async ({page}) => { await expect(notifications).toContainText(/URDF 已转换为 MJCF（浮动基座），并整体平移/); await page.keyboard.press('Escape'); await expect(page.getByLabel('显示碰撞几何')).not.toBeChecked(); + await page.getByRole('button',{name:'源代码'}).click(); + const sourceDialog=page.getByRole('dialog',{name:'转换后的 MJCF 编辑器'});await expect(sourceDialog.getByText('缓存文件 · 可编辑')).toBeVisible(); + await sourceDialog.locator('.monaco-editor').click({position:{x:240,y:120}});await page.keyboard.press('Control+End');await page.keyboard.insertText('\n'); + await sourceDialog.getByRole('button',{name:'保存并重新载入',exact:true}).click();await expect(sourceDialog.getByRole('button',{name:'保存并重新载入',exact:true})).toBeDisabled({timeout:30_000}); + await expect(page.getByText('WASM 已加载')).toBeVisible();await sourceDialog.getByRole('button',{name:'关闭源代码编辑器'}).click(); +}); + +test('转换后的 MJCF 保存时保留 DAE 转换缓存资源',async({page})=>{ + const zip=zipSync({'robot/urdf/robot.urdf':new Uint8Array(readFileSync(fixture('urdf_dae/robot/urdf/robot.urdf'))),'robot/dae/triangle.dae':new Uint8Array(readFileSync(fixture('urdf_dae/robot/dae/triangle.dae')))}); + await page.goto('/');await page.locator('input[type="file"]').first().setInputFiles({name:'dae.zip',mimeType:'application/zip',buffer:Buffer.from(zip)});await expect(page.getByText('WASM 已加载')).toBeVisible({timeout:30_000}); + await page.getByRole('button',{name:'源代码'}).click();const dialog=page.getByRole('dialog',{name:'转换后的 MJCF 编辑器'});await dialog.locator('.monaco-editor').click({position:{x:240,y:120}});await page.keyboard.press('Control+End');await page.keyboard.insertText('\n');await dialog.getByRole('button',{name:'保存并重新载入',exact:true}).click();await expect(dialog.getByRole('button',{name:'保存并重新载入',exact:true})).toBeDisabled({timeout:30_000});await expect(page.getByText('WASM 已加载')).toBeVisible();await expect(page.getByText('模型编译失败')).toHaveCount(0); }); test('中等规模模型持续步进并可重复加载', async ({page}) => { diff --git a/wasm/web_platform/fixtures/urdf_dae/robot/dae/triangle.dae b/wasm/web_platform/fixtures/urdf_dae/robot/dae/triangle.dae new file mode 100644 index 00000000..f802ac81 --- /dev/null +++ b/wasm/web_platform/fixtures/urdf_dae/robot/dae/triangle.dae @@ -0,0 +1,4 @@ + +Z_UP1 1 1 1 +0 0 0 1 0 0 0 1 0 0 0 1

0 2 1 0 1 3 0 3 2 1 2 3

 + diff --git a/wasm/web_platform/fixtures/urdf_dae/robot/urdf/robot.urdf b/wasm/web_platform/fixtures/urdf_dae/robot/urdf/robot.urdf new file mode 100644 index 00000000..a5cc17c8 --- /dev/null +++ b/wasm/web_platform/fixtures/urdf_dae/robot/urdf/robot.urdf @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/wasm/web_platform/src/app/App.tsx b/wasm/web_platform/src/app/App.tsx index a4fc9475..876f8286 100644 --- a/wasm/web_platform/src/app/App.tsx +++ b/wasm/web_platform/src/app/App.tsx @@ -1,7 +1,7 @@ /* Zustand 的 action 引用稳定；初始化 viewer 与导入回调有意只创建一次。 */ /* eslint-disable react-hooks/exhaustive-deps */ import {useCallback,useEffect,useRef,useState,type ChangeEvent,type DragEvent} from 'react'; -import {Camera,ChevronLeft,ChevronRight,CircleHelp,Crosshair,Hand,Maximize,MousePointer2,PanelsTopLeft,Pause,Play,RotateCcw,Settings as SettingsIcon,SunMoon} from 'lucide-react'; +import {Camera,ChevronLeft,ChevronRight,CircleHelp,Code2,Crosshair,Download,Hand,Maximize,MousePointer2,PanelsTopLeft,Pause,Play,RotateCcw,Settings as SettingsIcon,SunMoon} from 'lucide-react'; import type {ProjectManifest} from '../project/types'; import {filesFromDrop,importBrowserFiles,ProjectImportError} from '../project/importer'; import {MainThreadPhysicsAdapter,type UrdfBaseMode,type UrdfLoadMode} from '../simulation/PhysicsAdapter'; @@ -23,14 +23,17 @@ import {dispatchLayoutWidths,LayoutSettingsDialog,type LayoutPreset} from './com import {ConfirmDialog,IconButton} from '../components/ui'; import {DiagnosticsDrawer} from './components/DiagnosticsDrawer'; import {ToolbarOverflowMenu} from './components/ToolbarOverflowMenu'; +import {SourceEditorDialog} from './components/SourceEditorDialog'; +import {downloadBytes,exportedFileName,mergeCachedFiles,readCachedText,upsertCachedMjcf} from '../project/cachedFiles'; 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 convertedCachePath(entryPath:string):string{const slash=entryPath.lastIndexOf('/');return `${slash>=0?entryPath.slice(0,slash+1):''}.__converted_mjcf_cache__.xml`;} export function App(){ const state=useAppStore(); const manifest=useRef(null),notificationId=useRef(0),loadInFlight=useRef(false),importInFlight=useRef(false),adapter=useRef(new MainThreadPhysicsAdapter()),root=useRef(null),viewerHost=useRef(null),viewer=useRef(null); - const [forceScale,setForceScale]=useState(50),[leftOpen,setLeftOpen]=useState(true),[rightOpen,setRightOpen]=useState(true),[helpOpen,setHelpOpen]=useState(false),[commandOpen,setCommandOpen]=useState(false),[removeConfirmOpen,setRemoveConfirmOpen]=useState(false),[fullscreen,setFullscreen]=useState(false),[settingsOpen,setSettingsOpen]=useState(false),[layoutOpen,setLayoutOpen]=useState(false),[diagnosticsOpen,setDiagnosticsOpen]=useState(false),[importProgress,setImportProgress]=useState(),[notifications,setNotifications]=useState([]),[toast,setToast]=useState(); + const [forceScale,setForceScale]=useState(50),[leftOpen,setLeftOpen]=useState(true),[rightOpen,setRightOpen]=useState(true),[helpOpen,setHelpOpen]=useState(false),[commandOpen,setCommandOpen]=useState(false),[sourceOpen,setSourceOpen]=useState(false),[generatedMjcf,setGeneratedMjcf]=useState(),[generatedMjcfPath,setGeneratedMjcfPath]=useState(),[removeConfirmOpen,setRemoveConfirmOpen]=useState(false),[fullscreen,setFullscreen]=useState(false),[settingsOpen,setSettingsOpen]=useState(false),[layoutOpen,setLayoutOpen]=useState(false),[diagnosticsOpen,setDiagnosticsOpen]=useState(false),[importProgress,setImportProgress]=useState(),[notifications,setNotifications]=useState([]),[toast,setToast]=useState(); const [urdfMode,setUrdfMode]=useState('mjcf'),urdfModeRef=useRef('mjcf'); const [baseMode,setBaseMode]=useState('floating'),baseModeRef=useRef('floating'); const [showCollision,setShowCollision]=useState(false),[theme,setTheme]=useState(initialTheme),[jointAdvanced,setJointAdvanced]=useState(false),[ignoreJointLimits,setIgnoreJointLimits]=useState(false),[angleUnit,setAngleUnit]=useState<'rad'|'deg'>('rad'); @@ -40,10 +43,10 @@ export function App(){ useEffect(()=>{viewer.current?.setShowCollision(showCollision);},[showCollision]); 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);state.setEntry(path);state.setLoading(true);setImportProgress({label:'初始化 WASM 与编译模型',value:.65});state.setDiagnostic(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);setImportProgress({label:'创建视口场景',value:.92});adapter.current.setSpeed(useAppStore.getState().speed);state.setSnapshot(snapshot);state.setPaused(true);viewer.current?.attach(adapter.current.session);const notice:WorkbenchNotification={id:++notificationId.current,title:snapshot.warnings.length?'URDF 兼容处理':'模型加载完成',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 loadEntry=useCallback(async(path:string,requestedMode?:UrdfLoadMode)=>{if(!manifest.current||loadInFlight.current)return;loadInFlight.current=true;setIgnoreJointLimits(false);state.setEntry(path);state.setLoading(true);setImportProgress({label:'初始化 WASM 与编译模型',value:.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);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:.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?'URDF 兼容处理':'模型加载完成',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 ingest=useCallback(async(files:File[],lockOwned=false)=>{if(importInFlight.current&&!lockOwned)return;importInFlight.current=true;state.setLoading(true);setImportProgress({label:'读取工程文件',value:.12});try{const next=await importBrowserFiles(files);setImportProgress({label:'处理模型资源与入口',value:.38});manifest.current=next;state.setProject(next.name,next.files.map(({path,size})=>({path,size})),next.entries,next.selectedEntry);if(next.selectedEntry)await loadEntry(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);}},[loadEntry]); const removeProject=()=>{if(state.projectName)setRemoveConfirmOpen(true);}; - const confirmRemoveProject=()=>{viewer.current?.attach(null);adapter.current.dispose();manifest.current=null;state.clearProject();setRemoveConfirmOpen(false);}; + const confirmRemoveProject=()=>{viewer.current?.attach(null);adapter.current.dispose();manifest.current=null;setGeneratedMjcf(undefined);setGeneratedMjcfPath(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')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)=>{void ingest(Array.from(event.target.files??[]));event.target.value='';}; @@ -57,6 +60,10 @@ export function App(){ 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 setJoint=(id:number,value:number)=>{adapter.current.setJointPosition(id,value);state.setPaused(true);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);}); @@ -68,6 +75,9 @@ export function App(){ {id:'joint',label:'切换到关节拖动',group:'视口',icon:,shortcut:'2',run:()=>mode('joint')}, {id:'force',label:'切换到外力施加',group:'视口',icon:,shortcut:'3',run:()=>mode('force')}, {id:'camera',label:'复位相机',group:'视口',icon:,run:()=>viewer.current?.resetCamera()}, + {id:'source',label:'查看和修改缓存源代码',group:'工程',icon:,disabled:!generatedMjcf,run:()=>setSourceOpen(true)}, + {id:'export-urdf',label:'导出 URDF 文件',group:'工程',icon:,disabled:selectedFormat!=='urdf',run:exportUrdf}, + {id:'export-mjcf',label:'导出 MJCF 文件',group:'工程',icon:,disabled:!state.snapshot,run:exportMjcf}, {id:'left',label:leftOpen?'隐藏工程面板':'显示工程面板',group:'布局',icon:leftOpen?:,run:()=>setLeftOpen(value=>!value)}, {id:'right',label:rightOpen?'隐藏属性面板':'显示属性面板',group:'布局',icon:rightOpen?:,run:()=>setRightOpen(value=>!value)}, {id:'theme',label:theme==='dark'?'切换到白天主题':'切换到黑夜主题',group:'外观',icon:,run:()=>setTheme(value=>value==='dark'?'light':'dark')}, @@ -75,8 +85,8 @@ export function App(){ {id:'help',label:'查看快捷键帮助',group:'帮助',icon:,run:()=>setHelpOpen(true)}, ]; return
event.preventDefault()} onDrop={drop}> - setLeftOpen(value=>!value)} onToggleRight={()=>setRightOpen(value=>!value)} onToggleTheme={()=>setTheme(value=>value==='dark'?'light':'dark')} onHelp={()=>setHelpOpen(true)} endActions={<>setNotifications(items=>items.filter(item=>item.id!==id))} onClear={()=>setNotifications([])} onOpenLog={()=>setDiagnosticsOpen(true)}/>setLayoutOpen(true)}>setSettingsOpen(true)}>} compactMenu={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={viewer.current?.resetCamera()}/>}/> + 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={<>setNotifications(items=>items.filter(item=>item.id!==id))} onClear={()=>setNotifications([])} onOpenLog={()=>setDiagnosticsOpen(true)}/>setLayoutOpen(true)}>setSettingsOpen(true)}>} compactMenu={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={viewer.current?.resetCamera()}/>}/>
void loadEntry(path)} onJointHover={jointId=>viewer.current?.highlightJoint(jointId)}/>
setToast(undefined)}/>{state.entries.length>1&&!state.selectedEntry&&} {state.diagnostic&&state.setDiagnostic(undefined)} onRetry={state.diagnostic.category==='模型编译'&&state.diagnostic.path?()=>void loadEntry(state.diagnostic!.path!):undefined} onOpenProject={()=>{setLeftOpen(true);state.setDiagnostic(undefined);}}/>}
setJointAdvanced(value=>!value)} onToggleAngleUnit={()=>setAngleUnit(value=>value==='rad'?'deg':'rad')} onActuator={setActuator} onJoint={setJoint} onForceScale={setForceScale}/>
- setHelpOpen(false)}/>setDiagnosticsOpen(false)} onClear={()=>setNotifications([])}/>setSettingsOpen(false)} theme={theme} angleUnit={angleUnit} showCollision={showCollision} jointAdvanced={jointAdvanced} forceScale={forceScale} onTheme={setTheme} onAngleUnit={setAngleUnit} onShowCollision={setShowCollision} onJointAdvanced={setJointAdvanced} onForceScale={setForceScale}/>setLayoutOpen(false)} leftOpen={leftOpen} rightOpen={rightOpen} onLeftOpen={setLeftOpen} onRightOpen={setRightOpen} onPreset={applyLayoutPreset} onReset={()=>applyLayoutPreset('default')}/>setCommandOpen(false)} commands={commands}/>setRemoveConfirmOpen(false)}>

确定从当前会话中移除“{state.projectName}”吗？

该操作不会删除本地文件。

 + {sourceOpen&&generatedMjcf&&generatedMjcfPath&&setSourceOpen(false)} onSave={saveCachedSource}/>}setHelpOpen(false)}/>setDiagnosticsOpen(false)} onClear={()=>setNotifications([])}/>setSettingsOpen(false)} theme={theme} angleUnit={angleUnit} showCollision={showCollision} jointAdvanced={jointAdvanced} forceScale={forceScale} onTheme={setTheme} onAngleUnit={setAngleUnit} onShowCollision={setShowCollision} onJointAdvanced={setJointAdvanced} onForceScale={setForceScale}/>setLayoutOpen(false)} leftOpen={leftOpen} rightOpen={rightOpen} onLeftOpen={setLeftOpen} onRightOpen={setRightOpen} onPreset={applyLayoutPreset} onReset={()=>applyLayoutPreset('default')}/>setCommandOpen(false)} commands={commands}/>setRemoveConfirmOpen(false)}>

确定从当前会话中移除“{state.projectName}”吗？

该操作不会删除本地文件。
; } diff --git a/wasm/web_platform/src/app/components/SourceEditorDialog.tsx b/wasm/web_platform/src/app/components/SourceEditorDialog.tsx new file mode 100644 index 00000000..1b8f3d74 --- /dev/null +++ b/wasm/web_platform/src/app/components/SourceEditorDialog.tsx @@ -0,0 +1,27 @@ +import './monacoSetup'; +import Editor from '@monaco-editor/react'; +import {useCallback,useEffect,useRef,useState,type PointerEvent as ReactPointerEvent} from 'react'; +import {Check,Code2,Copy,Download,Maximize2,Minimize2,Save,X} from 'lucide-react'; +import {downloadBytes} from '../../project/cachedFiles'; +import {Button,IconButton} from '../../components/ui'; + +function basename(path:string):string{return path.split('/').at(-1)??path;} +function contentSize(content:string):string{const bytes=new Blob([content]).size;return bytes<1024?`${bytes} B`:`${(bytes/1024).toFixed(1)} KB`;} +function xmlProblem(code:string):string|undefined{const document=new DOMParser().parseFromString(code,'application/xml'),error=document.querySelector('parsererror');return error?.textContent?.split('\n')[0]||undefined;} + +export function SourceEditorDialog({open,code:sourceCode,filePath,theme,onClose,onSave}:{open:boolean;code:string;filePath:string;theme:'light'|'dark';onClose:()=>void;onSave:(path:string,text:string)=>void|Promise}){ + const [code,setCode]=useState(sourceCode),[savedCode,setSavedCode]=useState(sourceCode),[saving,setSaving]=useState(false),[copied,setCopied]=useState(false),[maximized,setMaximized]=useState(false),[position,setPosition]=useState(()=>({x:Math.max(24,(window.innerWidth-900)/2),y:Math.max(52,(window.innerHeight-650)/2)})); + const drag=useRef<{x:number;y:number;left:number;top:number}|null>(null),dirty=code!==savedCode,problem=xmlProblem(code); + const save=useCallback(async()=>{if(!dirty||problem)return;setSaving(true);try{await onSave(filePath,code);setSavedCode(code);}finally{setSaving(false);}},[code,dirty,filePath,onSave,problem]); + useEffect(()=>{const key=(event:KeyboardEvent)=>{if((event.ctrlKey||event.metaKey)&&event.key.toLowerCase()==='s'&&dirty&&!problem){event.preventDefault();void save();}};window.addEventListener('keydown',key);return()=>window.removeEventListener('keydown',key);},[dirty,problem,save]); + const copy=async()=>{await navigator.clipboard.writeText(code);setCopied(true);window.setTimeout(()=>setCopied(false),1500);}; + const download=()=>downloadBytes(new TextEncoder().encode(code),basename(filePath),'application/xml'); + const pointerDown=(event:ReactPointerEvent)=>{if(maximized||event.button!==0||(event.target as HTMLElement).closest('button'))return;drag.current={x:event.clientX,y:event.clientY,left:position.x,top:position.y};event.currentTarget.setPointerCapture(event.pointerId);}; + const pointerMove=(event:ReactPointerEvent)=>{if(!drag.current)return;setPosition({x:Math.min(window.innerWidth-120,Math.max(-780,drag.current.left+event.clientX-drag.current.x)),y:Math.min(window.innerHeight-48,Math.max(0,drag.current.top+event.clientY-drag.current.y))});}; + if(!open)return null; + return
+
{drag.current=null;}} onDoubleClick={()=>setMaximized(value=>!value)}>
转换后的 MJCF
{filePath}
{contentSize(code)}缓存文件 · 可编辑{dirty&&已修改}setMaximized(value=>!value)}>{maximized?:}
+
setCode(value??'')} options={{automaticLayout:true,minimap:{enabled:false},fontFamily:"'JetBrains Mono','Fira Code',ui-monospace,monospace",fontSize:13,fontLigatures:true,scrollBeyondLastLine:false,wordWrap:'off',stickyScroll:{enabled:false},tabSize:2,formatOnPaste:true,formatOnType:true,lineNumbersMinChars:4,padding:{top:12,bottom:14},renderLineHighlight:'all'}}/>
+
{problem?`XML 错误：${problem}`:'✓ XML 结构正常'}
Ctrl+S 保存并重新载入•MJCF / XML
+
; +} diff --git a/wasm/web_platform/src/app/components/WorkbenchHeader.tsx b/wasm/web_platform/src/app/components/WorkbenchHeader.tsx index ee67086c..743739ec 100644 --- a/wasm/web_platform/src/app/components/WorkbenchHeader.tsx +++ b/wasm/web_platform/src/app/components/WorkbenchHeader.tsx @@ -1,5 +1,5 @@ import type {ChangeEvent,ReactNode} from 'react'; -import {CircleHelp,Expand,FolderOpen,Minimize,PanelLeft,PanelRight,Pause,Play,RotateCcw,Search,StepForward,Sun,Moon,Upload} from 'lucide-react'; +import {CircleHelp,Code2,Expand,FolderOpen,Minimize,PanelLeft,PanelRight,Pause,Play,RotateCcw,Search,StepForward,Sun,Moon,Upload} from 'lucide-react'; import {Button,IconButton,Select} from '../../components/ui'; const fileActionClass='inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border border-border bg-surface px-2 text-xs font-medium text-text-primary transition-colors hover:bg-element-hover focus-within:ring-2 focus-within:ring-accent/30'; -export function WorkbenchHeader({paused,ready,speed,theme,loading,leftOpen,rightOpen,fullscreen,center,endActions,compactMenu,onFiles,onFolder,onTogglePause,onStep,onReset,onSpeed,onToggleLeft,onToggleRight,onToggleTheme,onHelp,onCommands,onToggleFullscreen}:{paused:boolean;ready:boolean;speed:number;theme:'light'|'dark';loading:boolean;leftOpen:boolean;rightOpen:boolean;fullscreen:boolean;center:ReactNode;endActions?:ReactNode;compactMenu?:ReactNode;onFiles:(event:ChangeEvent)=>void;onFolder:(event:ChangeEvent)=>void;onTogglePause:()=>void;onStep:()=>void;onReset:()=>void;onSpeed:(value:number)=>void;onToggleLeft:()=>void;onToggleRight:()=>void;onToggleTheme:()=>void;onHelp:()=>void;onCommands:()=>void;onToggleFullscreen:()=>void}){return

MuJoCo Web 仿真平台

{center}
{endActions}{compactMenu}{fullscreen?:}{theme==='dark'?:}
;} +export function WorkbenchHeader({paused,ready,speed,theme,loading,leftOpen,rightOpen,fullscreen,hasProject,center,endActions,compactMenu,onFiles,onFolder,onOpenSource,onTogglePause,onStep,onReset,onSpeed,onToggleLeft,onToggleRight,onToggleTheme,onHelp,onCommands,onToggleFullscreen}:{paused:boolean;ready:boolean;speed:number;theme:'light'|'dark';loading:boolean;leftOpen:boolean;rightOpen:boolean;fullscreen:boolean;hasProject?:boolean;center:ReactNode;endActions?:ReactNode;compactMenu?:ReactNode;onFiles:(event:ChangeEvent)=>void;onFolder:(event:ChangeEvent)=>void;onOpenSource?:()=>void;onTogglePause:()=>void;onStep:()=>void;onReset:()=>void;onSpeed:(value:number)=>void;onToggleLeft:()=>void;onToggleRight:()=>void;onToggleTheme:()=>void;onHelp:()=>void;onCommands:()=>void;onToggleFullscreen:()=>void}){return

MuJoCo Web 仿真平台

{center}
{endActions}{compactMenu}{fullscreen?:}{theme==='dark'?:}
;} diff --git a/wasm/web_platform/src/app/components/monacoSetup.ts b/wasm/web_platform/src/app/components/monacoSetup.ts new file mode 100644 index 00000000..d5700da8 --- /dev/null +++ b/wasm/web_platform/src/app/components/monacoSetup.ts @@ -0,0 +1,8 @@ +import {loader} from '@monaco-editor/react'; +import * as monaco from 'monaco-editor/esm/vs/editor/edcore.main'; +import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution'; +import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; + +type MonacoGlobal=typeof globalThis&{MonacoEnvironment?:{getWorker?:()=>Worker}}; +(globalThis as MonacoGlobal).MonacoEnvironment={getWorker:()=>new EditorWorker()}; +loader.config({monaco}); diff --git a/wasm/web_platform/src/project/cachedFiles.test.ts b/wasm/web_platform/src/project/cachedFiles.test.ts new file mode 100644 index 00000000..51b3e0b1 --- /dev/null +++ b/wasm/web_platform/src/project/cachedFiles.test.ts @@ -0,0 +1,13 @@ +import {editableSourcePaths,exportedFileName,mergeCachedFiles,readCachedText,updateCachedText,upsertCachedMjcf} from './cachedFiles'; +import type {ProjectManifest} from './types'; + +const encoder=new TextEncoder(); +function fixture():ProjectManifest{const xml=encoder.encode(''),png=new Uint8Array([1,2]);return {id:'p',name:'测试 工程.zip',files:[{path:'model.xml',data:xml,size:xml.byteLength,source:'zip',mimeType:'text/xml'},{path:'texture.png',data:png,size:png.byteLength,source:'zip',mimeType:'image/png'}],entries:[{path:'model.xml',format:'mjcf',label:'model'}],selectedEntry:'model.xml',totalBytes:xml.byteLength+png.byteLength};} + +describe('cached source files',()=>{ + it('只列出可编辑文本并读取缓存',()=>{const manifest=fixture();expect(editableSourcePaths(manifest)).toEqual(['model.xml']);expect(readCachedText(manifest,'model.xml')).toBe('');expect(()=>readCachedText(manifest,'texture.png')).toThrow('二进制');}); + it('以不可变方式更新会话缓存和大小',()=>{const original=fixture(),updated=updateCachedText(original,'model.xml','');expect(readCachedText(updated,'model.xml')).toContain('edited');expect(readCachedText(original,'model.xml')).toBe('');expect(updated.totalBytes).toBe(updated.files.reduce((sum,file)=>sum+file.size,0));}); + it('合并转换生成的支持资源',()=>{const original=fixture(),obj={path:'mesh.mujoco.obj',data:encoder.encode('v 0 0 0'),size:7,source:'file' as const,mimeType:'text/plain'},updated=mergeCachedFiles(original,[obj]);expect(updated.files.map(file=>file.path)).toContain('mesh.mujoco.obj');expect(original.files.map(file=>file.path)).not.toContain('mesh.mujoco.obj');}); + it('创建可重新载入的 MJCF 缓存文件和入口',()=>{const updated=upsertCachedMjcf(fixture(),'.__converted_mjcf_cache__.xml','');expect(readCachedText(updated,'.__converted_mjcf_cache__.xml')).toContain('cached');expect(updated.entries.at(-1)).toMatchObject({path:'.__converted_mjcf_cache__.xml',format:'mjcf'});}); + it('生成安全的导出文件名',()=>{expect(exportedFileName('测试 工程.zip','urdf')).toBe('测试_工程.urdf');expect(exportedFileName('robot.xml','xml')).toBe('robot.xml');}); +}); diff --git a/wasm/web_platform/src/project/cachedFiles.ts b/wasm/web_platform/src/project/cachedFiles.ts new file mode 100644 index 00000000..97de3d3b --- /dev/null +++ b/wasm/web_platform/src/project/cachedFiles.ts @@ -0,0 +1,57 @@ +import type {ProjectManifest} from './types'; + +const TEXT_EXTENSIONS=/\.(?:xml|urdf|txt|obj|mtl|csv|json|yaml|yml)$/i; +const decoder=new TextDecoder('utf-8',{fatal:false}); +const encoder=new TextEncoder(); + +export function isEditableSource(path:string):boolean{return TEXT_EXTENSIONS.test(path);} + +export function editableSourcePaths(manifest:ProjectManifest):string[]{ + return manifest.files.filter(file=>isEditableSource(file.path)).map(file=>file.path).sort((a,b)=>a.localeCompare(b)); +} + +export function readCachedText(manifest:ProjectManifest,path:string):string{ + const file=manifest.files.find(candidate=>candidate.path===path); + if(!file)throw new Error(`缓存中找不到文件：${path}`); + if(!isEditableSource(path))throw new Error(`不支持编辑二进制文件：${path}`); + return decoder.decode(file.data); +} + +/** 返回只更新浏览器会话内存的新工程清单，不接触用户本地文件系统。 */ +export function mergeCachedFiles(manifest:ProjectManifest,additional:ProjectManifest['files']):ProjectManifest{ + if(!additional.length)return manifest; + const byPath=new Map(manifest.files.map(file=>[file.path,file])); + for(const file of additional)byPath.set(file.path,file); + const files=Array.from(byPath.values()); + return {...manifest,files,totalBytes:files.reduce((total,item)=>total+item.size,0)}; +} + +export function upsertCachedMjcf(manifest:ProjectManifest,path:string,text:string):ProjectManifest{ + const data=encoder.encode(text),index=manifest.files.findIndex(candidate=>candidate.path===path); + const files=manifest.files.slice(); + const file={path,data,size:data.byteLength,source:'file' as const,mimeType:'application/xml'}; + if(index<0)files.push(file);else files[index]={...files[index],...file}; + const entries=manifest.entries.some(entry=>entry.path===path)?manifest.entries:[...manifest.entries,{path,format:'mjcf' as const,label:`${path} (MJCF 缓存)`}]; + return {...manifest,files,entries,totalBytes:files.reduce((total,item)=>total+item.size,0)}; +} + +export function updateCachedText(manifest:ProjectManifest,path:string,text:string):ProjectManifest{ + const index=manifest.files.findIndex(candidate=>candidate.path===path); + if(index<0)throw new Error(`缓存中找不到文件：${path}`); + if(!isEditableSource(path))throw new Error(`不支持编辑二进制文件：${path}`); + const data=encoder.encode(text),files=manifest.files.slice(); + files[index]={...files[index],data,size:data.byteLength,mimeType:files[index].mimeType||'text/plain'}; + return {...manifest,files,totalBytes:files.reduce((total,file)=>total+file.size,0)}; +} + +export function downloadBytes(data:Uint8Array,fileName:string,mimeType='application/xml'):void{ + const blob=new Blob([data as BlobPart],{type:`${mimeType};charset=utf-8`}); + const url=URL.createObjectURL(blob),anchor=document.createElement('a'); + anchor.href=url;anchor.download=fileName;anchor.style.display='none';document.body.append(anchor);anchor.click();anchor.remove(); + setTimeout(()=>URL.revokeObjectURL(url),0); +} + +export function exportedFileName(projectName:string,extension:'urdf'|'xml'):string{ + const stem=projectName.replace(/\.(?:zip|xml|urdf)$/i,'').replace(/[^\p{L}\p{N}._-]+/gu,'_')||'model'; + return `${stem}.${extension}`; +} diff --git a/wasm/web_platform/src/simulation/PhysicsAdapter.ts b/wasm/web_platform/src/simulation/PhysicsAdapter.ts index c70b3d41..d3af53e9 100644 --- a/wasm/web_platform/src/simulation/PhysicsAdapter.ts +++ b/wasm/web_platform/src/simulation/PhysicsAdapter.ts @@ -1,5 +1,5 @@ import loadMujoco, {type MainModule} from '@mujoco/mujoco'; -import type {ProjectManifest} from '../project/types'; +import type {ProjectFile,ProjectManifest} from '../project/types'; import {prepareProjectForMujoco} from '../project/importer'; import {groundConvertedMjcf,type UrdfBaseMode} from '../project/urdfToMjcf'; import {MemfsWorkspace} from '../project/workspace'; @@ -22,6 +22,8 @@ export interface PhysicsAdapter { setIgnoreJointLimits(ignore:boolean):void; setExternalForce(bodyId: number, force: [number, number, number]): void; clearExternalForce(): void; + cachedSupportFiles():ProjectFile[]; + exportMjcf(): Uint8Array; dispose(): void; } @@ -40,9 +42,11 @@ export function getMujocoModule(): Promise { export class MainThreadPhysicsAdapter implements PhysicsAdapter { session: SimulationSession | null = null; workspace: MemfsWorkspace | null = null; + private supportFiles:ProjectFile[]=[]; async load(manifest:ProjectManifest,entryPath:string,urdfMode:UrdfLoadMode='mjcf',baseMode:UrdfBaseMode='floating'):Promise { this.releaseCurrent();const module=await getMujocoModule();const workspace=new MemfsWorkspace(module,manifest.id);const prepared=prepareProjectForMujoco(manifest,entryPath); + this.supportFiles=prepared.manifest.files.filter(file=>!manifest.files.some(original=>original.path===file.path)); try{ console.info('[MuJoCo] 写入 MEMFS',prepared.manifest.files.length);workspace.mount(prepared.manifest); const entry=prepared.manifest.entries.find(candidate=>candidate.path===entryPath);let modelPath=workspace.path(entryPath);const warnings=[...prepared.warnings]; @@ -73,6 +77,14 @@ export class MainThreadPhysicsAdapter implements PhysicsAdapter { setIgnoreJointLimits(ignore:boolean):void {this.session?.setIgnoreJointLimits(ignore);} setExternalForce(bodyId:number,force:[number,number,number]):void{this.session?.setExternalForce(bodyId,force);} clearExternalForce():void{this.session?.clearExternalForce();} - private releaseCurrent():void{this.session?.dispose(); this.session=null; this.workspace?.dispose(); this.workspace=null;} + cachedSupportFiles():ProjectFile[]{return this.supportFiles.map(file=>({...file,data:file.data.slice()}));} + exportMjcf():Uint8Array{ + if(!this.session||!this.workspace)throw new Error('尚未加载可导出的模型'); + const relative='.__platform_export__.xml'; + if(this.session.module.mj_saveLastXML(this.workspace.path(relative),this.session.model)===0)throw new Error('MuJoCo 无法生成 MJCF'); + this.workspace.writeGenerated(relative,new TextEncoder().encode(this.workspace.readText(relative))); + return new TextEncoder().encode(this.workspace.readText(relative)); + } + private releaseCurrent():void{this.session?.dispose(); this.session=null; this.workspace?.dispose(); this.workspace=null;this.supportFiles=[];} dispose():void{this.releaseCurrent();} } diff --git a/wasm/web_platform/src/vite-env.d.ts b/wasm/web_platform/src/vite-env.d.ts new file mode 100644 index 00000000..c3232fa1 --- /dev/null +++ b/wasm/web_platform/src/vite-env.d.ts @@ -0,0 +1,5 @@ +/// + +declare module 'monaco-editor/esm/vs/editor/edcore.main' { + export * from 'monaco-editor'; +}