npm - mujoco-react - Versions diffs - 8.0.0 → 8.1.1 - Mend

mujoco-react 8.0.0 → 8.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +77 -64
package/dist/index.d.ts +27 -7
package/dist/index.js +191 -76
package/dist/index.js.map +1 -1
package/package.json +1 -1
package/src/components/TrajectoryPlayer.tsx +16 -2
package/src/core/SceneLoader.ts +77 -51
package/src/hooks/useTrajectoryPlayer.ts +152 -29
package/src/index.ts +2 -0
package/src/types.ts +9 -1

package/dist/index.js CHANGED Viewed

@@ -391,6 +391,18 @@ function sceneObjectToXml(obj) {
   const condim = obj.condim ? ` condim="${obj.condim}"` : "";
   return `<body name="${obj.name}" pos="${pos}">${joint}<geom type="${obj.type}" size="${size}" rgba="${rgba}" contype="1" conaffinity="1"${mass}${friction}${solref}${solimp}${condim}/></body>`;
 }
+function ensureDir(mujoco, fname) {
+  const dirParts = fname.split("/");
+  dirParts.pop();
+  let currentPath = "/working";
+  for (const part of dirParts) {
+    currentPath += "/" + part;
+    try {
+      mujoco.FS.mkdir(currentPath);
+    } catch {
+    }
+  }
+}
 async function loadScene(mujoco, config, onProgress) {
   try {
     mujoco.FS.unmount("/working");
@@ -402,66 +414,75 @@ async function loadScene(mujoco, config, onProgress) {
   }
   const baseUrl = config.src.endsWith("/") ? config.src : config.src + "/";
   const downloaded = /* @__PURE__ */ new Set();
-  const queue = [config.sceneFile];
+  const xmlQueue = [config.sceneFile];
+  const assetFiles = [];
   const parser = new DOMParser();
-  while (queue.length > 0) {
-    const fname = queue.shift();
+  while (xmlQueue.length > 0) {
+    const fname = xmlQueue.shift();
     if (downloaded.has(fname)) continue;
     downloaded.add(fname);
+    if (!fname.endsWith(".xml")) {
+      assetFiles.push(fname);
+      continue;
+    }
     onProgress?.(`Downloading ${fname}...`);
     const res = await fetch(baseUrl + fname);
     if (!res.ok) {
       console.warn(`Failed to fetch ${fname}: ${res.status} ${res.statusText}`);
       continue;
     }
-    const dirParts = fname.split("/");
-    dirParts.pop();
-    let currentPath = "/working";
-    for (const part of dirParts) {
-      currentPath += "/" + part;
-      try {
-        mujoco.FS.mkdir(currentPath);
-      } catch {
-      }
-    }
-    if (fname.endsWith(".xml")) {
-      let text = await res.text();
-      for (const patch of config.xmlPatches ?? []) {
-        if (fname.endsWith(patch.target) || fname === patch.target) {
-          if (patch.replace) {
-            const [from, to] = patch.replace;
-            if (text.includes(from)) {
-              text = text.replace(from, to);
-            } else {
-              const preview = from.length > 80 ? `${from.slice(0, 80)}...` : from;
-              console.warn(`XML patch replace pattern not found in ${fname}: "${preview}"`);
-            }
+    let text = await res.text();
+    for (const patch of config.xmlPatches ?? []) {
+      if (fname.endsWith(patch.target) || fname === patch.target) {
+        if (patch.replace) {
+          const [from, to] = patch.replace;
+          if (text.includes(from)) {
+            text = text.replace(from, to);
+          } else {
+            const preview = from.length > 80 ? `${from.slice(0, 80)}...` : from;
+            console.warn(`XML patch replace pattern not found in ${fname}: "${preview}"`);
           }
-          if (patch.inject && patch.injectAfter) {
-            const idx = text.indexOf(patch.injectAfter);
-            if (idx !== -1) {
-              const tagEnd = text.indexOf(">", idx + patch.injectAfter.length);
-              if (tagEnd !== -1) {
-                text = text.slice(0, tagEnd + 1) + patch.inject + text.slice(tagEnd + 1);
-              } else {
-                console.warn(`XML patch inject failed in ${fname}: could not find tag end after "${patch.injectAfter}"`);
-              }
+        }
+        if (patch.inject && patch.injectAfter) {
+          const idx = text.indexOf(patch.injectAfter);
+          if (idx !== -1) {
+            const tagEnd = text.indexOf(">", idx + patch.injectAfter.length);
+            if (tagEnd !== -1) {
+              text = text.slice(0, tagEnd + 1) + patch.inject + text.slice(tagEnd + 1);
             } else {
-              const preview = patch.injectAfter.length > 80 ? `${patch.injectAfter.slice(0, 80)}...` : patch.injectAfter;
-              console.warn(`XML patch inject anchor not found in ${fname}: "${preview}"`);
+              console.warn(`XML patch inject failed in ${fname}: could not find tag end after "${patch.injectAfter}"`);
             }
+          } else {
+            const preview = patch.injectAfter.length > 80 ? `${patch.injectAfter.slice(0, 80)}...` : patch.injectAfter;
+            console.warn(`XML patch inject anchor not found in ${fname}: "${preview}"`);
           }
         }
       }
-      if (fname === config.sceneFile && config.sceneObjects?.length) {
-        const xml = config.sceneObjects.map((obj) => sceneObjectToXml(obj)).join("");
-        text = text.replace("</worldbody>", xml + "</worldbody>");
-      }
-      mujoco.FS.writeFile(`/working/${fname}`, text);
-      scanDependencies(text, fname, parser, downloaded, queue);
-    } else {
-      const buffer = new Uint8Array(await res.arrayBuffer());
-      mujoco.FS.writeFile(`/working/${fname}`, buffer);
+    }
+    if (fname === config.sceneFile && config.sceneObjects?.length) {
+      const xml = config.sceneObjects.map((obj) => sceneObjectToXml(obj)).join("");
+      text = text.replace("</worldbody>", xml + "</worldbody>");
+    }
+    ensureDir(mujoco, fname);
+    mujoco.FS.writeFile(`/working/${fname}`, text);
+    scanDependencies(text, fname, parser, downloaded, xmlQueue);
+  }
+  if (assetFiles.length > 0) {
+    onProgress?.(`Downloading ${assetFiles.length} assets...`);
+    const results = await Promise.all(
+      assetFiles.map(async (fname) => {
+        const res = await fetch(baseUrl + fname);
+        if (!res.ok) {
+          console.warn(`Failed to fetch ${fname}: ${res.status} ${res.statusText}`);
+          return null;
+        }
+        return { fname, buffer: new Uint8Array(await res.arrayBuffer()) };
+      })
+    );
+    for (const result of results) {
+      if (!result) continue;
+      ensureDir(mujoco, result.fname);
+      mujoco.FS.writeFile(`/working/${result.fname}`, result.buffer);
     }
   }
   onProgress?.("Loading model...");
@@ -956,7 +977,7 @@ function MujocoSimProvider({
     const arr = values instanceof Float64Array ? values : new Float64Array(values);
     data.qvel.set(arr.subarray(0, Math.min(arr.length, mjModelRef.current?.nv ?? 0)));
   }, []);
-  const getQpos = useCallback(() => {
+  const getQpos2 = useCallback(() => {
     return mjDataRef.current ? new Float64Array(mjDataRef.current.qpos) : new Float64Array(0);
   }, []);
   const getQvel = useCallback(() => {
@@ -976,7 +997,7 @@ function MujocoSimProvider({
       }
     }
   }, []);
-  const getCtrl = useCallback(() => {
+  const getCtrl2 = useCallback(() => {
     return mjDataRef.current ? new Float64Array(mjDataRef.current.ctrl) : new Float64Array(0);
   }, []);
   const applyForce = useCallback((bodyName, force, point) => {
@@ -1384,10 +1405,10 @@ function MujocoSimProvider({
       restoreState,
       setQpos,
       setQvel,
-      getQpos,
+      getQpos: getQpos2,
       getQvel,
       setCtrl,
-      getCtrl,
+      getCtrl: getCtrl2,
       applyForce,
       applyTorque: applyTorqueApi,
       setExternalForce,
@@ -1430,10 +1451,10 @@ function MujocoSimProvider({
       restoreState,
       setQpos,
       setQvel,
-      getQpos,
+      getQpos2,
       getQvel,
       setCtrl,
-      getCtrl,
+      getCtrl2,
       applyForce,
       applyTorqueApi,
       setExternalForce,
@@ -3098,60 +3119,133 @@ function ContactListener({
   });
   return null;
 }
+function getQpos(input, idx) {
+  const item = input[idx];
+  if (!item) return null;
+  if (Array.isArray(item)) return item;
+  return item.qpos;
+}
+function getCtrl(input, idx) {
+  const item = input[idx];
+  if (!item || Array.isArray(item)) return null;
+  return item.ctrl ?? null;
+}
 function useTrajectoryPlayer(trajectory, options = {}) {
   const { mjModelRef, mjDataRef, mujocoRef, pausedRef } = useMujocoContext();
-  const fps = options.fps ?? 30;
-  const loop = options.loop ?? false;
-  const playingRef = useRef(false);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const stateRef = useRef("idle");
   const frameRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
+  const speedRef = useRef(options.speed ?? 1);
+  const wasPausedRef = useRef(false);
+  const trajectoryRef = useRef(trajectory);
+  trajectoryRef.current = trajectory;
+  const setState = useCallback((next) => {
+    if (stateRef.current === next) return;
+    stateRef.current = next;
+    optionsRef.current.onStateChange?.(next);
+  }, []);
   const play = useCallback(() => {
-    playingRef.current = true;
-    pausedRef.current = true;
+    const traj = trajectoryRef.current;
+    if (traj.length === 0) return;
+    const mode = optionsRef.current.mode ?? "kinematic";
+    if (stateRef.current === "completed") {
+      frameRef.current = 0;
+    }
+    if (mode === "kinematic") {
+      wasPausedRef.current = pausedRef.current;
+      pausedRef.current = true;
+    }
     lastFrameTimeRef.current = performance.now();
-  }, [pausedRef]);
+    setState("playing");
+  }, [pausedRef, setState]);
   const pause = useCallback(() => {
-    playingRef.current = false;
-  }, []);
+    if (stateRef.current !== "playing") return;
+    setState("paused");
+  }, [setState]);
   const seek = useCallback((frameIdx) => {
-    frameRef.current = Math.max(0, Math.min(frameIdx, trajectory.length - 1));
+    const traj = trajectoryRef.current;
+    if (traj.length === 0) return;
+    frameRef.current = Math.max(0, Math.min(frameIdx, traj.length - 1));
     const model = mjModelRef.current;
     const data = mjDataRef.current;
-    if (!model || !data || !trajectory[frameRef.current]) return;
-    const qpos = trajectory[frameRef.current];
+    if (!model || !data) return;
+    const qpos = getQpos(traj, frameRef.current);
+    if (!qpos) return;
     for (let i = 0; i < Math.min(qpos.length, model.nq); i++) {
       data.qpos[i] = qpos[i];
     }
     mujocoRef.current.mj_forward(model, data);
-  }, [trajectory, mjModelRef, mjDataRef, mujocoRef]);
+  }, [mjModelRef, mjDataRef, mujocoRef]);
   const reset = useCallback(() => {
+    const mode = optionsRef.current.mode ?? "kinematic";
+    if (mode === "kinematic" && stateRef.current !== "idle") {
+      pausedRef.current = wasPausedRef.current;
+    }
     frameRef.current = 0;
-    playingRef.current = false;
-    pausedRef.current = false;
-  }, [pausedRef]);
+    setState("idle");
+  }, [pausedRef, setState]);
+  const setSpeed = useCallback((s) => {
+    speedRef.current = s;
+  }, []);
+  const complete = useCallback(() => {
+    const mode = optionsRef.current.mode ?? "kinematic";
+    if (mode === "kinematic") {
+      pausedRef.current = wasPausedRef.current;
+    }
+    setState("completed");
+    optionsRef.current.onComplete?.();
+  }, [pausedRef, setState]);
   useFrame(() => {
-    if (!playingRef.current || trajectory.length === 0) return;
+    if (stateRef.current !== "playing") return;
+    if ((optionsRef.current.mode ?? "kinematic") !== "kinematic") return;
+    const traj = trajectoryRef.current;
+    if (traj.length === 0) return;
     const now = performance.now();
+    const fps = optionsRef.current.fps ?? 30;
+    const frameInterval = 1e3 / (fps * speedRef.current);
     const elapsed = now - lastFrameTimeRef.current;
-    const frameInterval = 1e3 / fps;
     if (elapsed < frameInterval) return;
     lastFrameTimeRef.current = now;
     const model = mjModelRef.current;
     const data = mjDataRef.current;
     if (!model || !data) return;
-    const qpos = trajectory[frameRef.current];
+    const qpos = getQpos(traj, frameRef.current);
     if (!qpos) return;
     for (let i = 0; i < Math.min(qpos.length, model.nq); i++) {
       data.qpos[i] = qpos[i];
     }
     mujocoRef.current.mj_forward(model, data);
     frameRef.current++;
-    if (frameRef.current >= trajectory.length) {
-      if (loop) {
+    if (frameRef.current >= traj.length) {
+      if (optionsRef.current.loop) {
+        frameRef.current = 0;
+      } else {
+        complete();
+      }
+    }
+  });
+  useBeforePhysicsStep((model, data) => {
+    if (stateRef.current !== "playing") return;
+    if ((optionsRef.current.mode ?? "kinematic") !== "physics") return;
+    const traj = trajectoryRef.current;
+    if (traj.length === 0) return;
+    const fps = optionsRef.current.fps ?? 30;
+    const targetFrame = Math.floor(data.time * fps * speedRef.current);
+    frameRef.current = Math.min(targetFrame, traj.length - 1);
+    const ctrl = getCtrl(traj, frameRef.current);
+    if (ctrl) {
+      for (let i = 0; i < Math.min(ctrl.length, model.nu); i++) {
+        data.ctrl[i] = ctrl[i];
+      }
+    }
+    if (frameRef.current >= traj.length - 1) {
+      if (optionsRef.current.loop) {
+        data.time = 0;
         frameRef.current = 0;
       } else {
-        playingRef.current = false;
-        pausedRef.current = false;
+        complete();
       }
     }
   });
@@ -3160,14 +3254,21 @@ function useTrajectoryPlayer(trajectory, options = {}) {
     pause,
     seek,
     reset,
+    setSpeed,
+    get state() {
+      return stateRef.current;
+    },
     get frame() {
       return frameRef.current;
     },
     get playing() {
-      return playingRef.current;
+      return stateRef.current === "playing";
     },
     get totalFrames() {
       return trajectory.length;
+    },
+    get progress() {
+      return trajectory.length > 1 ? frameRef.current / (trajectory.length - 1) : 0;
     }
   };
 }
@@ -3176,14 +3277,28 @@ function useTrajectoryPlayer(trajectory, options = {}) {
 function TrajectoryPlayer({
   trajectory,
   fps = 30,
+  speed = 1,
   loop = false,
   playing = false,
-  onFrame
+  mode = "kinematic",
+  onFrame,
+  onComplete,
+  onStateChange
 }) {
-  const player = useTrajectoryPlayer(trajectory, { fps, loop });
+  const player = useTrajectoryPlayer(trajectory, {
+    fps,
+    speed,
+    loop,
+    mode,
+    onComplete,
+    onStateChange
+  });
   const onFrameRef = useRef(onFrame);
   onFrameRef.current = onFrame;
   const lastReportedFrameRef = useRef(-1);
+  useEffect(() => {
+    player.setSpeed(speed);
+  }, [speed, player]);
   useEffect(() => {
     if (playing) {
       player.play();