@opengeni/react 7.1.2 → 7.2.0-canary.36239117573001

package/dist/{chunk-2O2HXRGP.js → chunk-Y6DMQTLA.js}

@@ -48,6 +48,7 @@ import {
 import {
   useCallback as useCallback4,
   useEffect as useEffect4,
+  useLayoutEffect,
   useMemo as useMemo2,
   useRef as useRef4,
   useState as useState4
@@ -1080,7 +1081,7 @@ function ComputerViewer({
     },
     ...webSocketFactory ? { webSocketFactory } : {}
   });
-  const displayedFrame = frames.frame && frames.frame.computerSessionId === selection?.sessionId && frames.frame.targetId === computer.selectedTarget?.id ? frames.frame : null;
+  const displayedFrame = frames.frame && frames.frame.computerSessionId === selection?.sessionId && frames.frame.targetId === computer.selectedTarget?.id && frames.frame.targetGeneration === computer.selectedTarget?.targetGeneration ? frames.frame : null;
   const rfbStream = frames.attachment?.stream.kind === "direct_rfb" ? frames.attachment.stream : null;
   const rfbCapability = useMemo2(() => {
     if (!rfbStream || !frames.attachment) return null;
@@ -1190,11 +1191,15 @@ function ComputerViewer({
   ]);
   const perform = useCallback4(
     async (action, frame) => {
+      let receipt;
       if (action.type === "pointer") {
         if (!frame) throw new Error("Desktop view is not ready for pointer input.");
-        await actFromFrame(action, frame);
+        receipt = await actFromFrame(action, frame);
       } else {
-        await act(action);
+        receipt = await act(action);
+      }
+      if (receipt.state !== "completed") {
+        throw new Error(receipt.error?.message ?? "Desktop input did not complete.");
       }
     },
     [act, actFromFrame]
@@ -1355,7 +1360,13 @@ function ComputerViewer({
             onReadClipboard: computer.readClipboard,
             onReconnect: generationLossSelected || generationLossFrames ? () => void 0 : frames.reconnect,
             onError: (cause) => notifyError(cause, "Desktop input failed.")
-          }
+          },
+          JSON.stringify([
+            selection?.sessionId,
+            computer.selectedTarget?.id,
+            computer.selectedTarget?.targetGeneration,
+            frames.attachment?.controllerGeneration
+          ])
         ),
         showControls ? /* @__PURE__ */ jsx(
           ComputerSemanticPanel,
@@ -1608,7 +1619,11 @@ function ComputerViewport(props) {
   const readClipboardRef = useRef4(props.onReadClipboard);
   const errorRef = useRef4(props.onError);
   const actionTailRef = useRef4(Promise.resolve());
+  const actionQueueEpochRef = useRef4(0);
   const queuedFrameRef = useRef4(null);
+  const currentFrameRef = useRef4(props.frame);
+  const paintedFrameRef = useRef4(null);
+  const [paintedFrame, setPaintedFrame] = useState4(null);
   const decodingFrameRef = useRef4(false);
   const mountedRef = useRef4(true);
   actionRef.current = props.onAction;
@@ -1616,6 +1631,17 @@ function ComputerViewport(props) {
   errorRef.current = props.onError;
   const streamFailed = props.connectionState === "error";
   const rawInputEnabled = !streamFailed && !props.machineLocked && (!props.backgroundActions || props.target?.kind === "screen" || props.target?.focused === true);
+  const clearBufferedInput = useCallback4(() => {
+    if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+    if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
+    if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
+    clickTimerRef.current = null;
+    wheelRef.current = null;
+    pendingTextRef.current = null;
+    pointerStartRef.current = null;
+    lastClickRef.current = null;
+    if (inputRef.current) inputRef.current.value = "";
+  }, []);
   const paintQueuedFrames = useCallback4(() => {
     if (decodingFrameRef.current) return;
     decodingFrameRef.current = true;
@@ -1632,8 +1658,10 @@ function ComputerViewport(props) {
               const bitmap = await createImageBitmap(blob);
               try {
                 const canvas2 = canvasRef.current;
-                if (mountedRef.current && canvas2) {
+                if (mountedRef.current && canvas2 && currentFrameRef.current && sameComputerTarget(frame, currentFrameRef.current)) {
                   paintCanvas(canvas2, bitmap, frame.width, frame.height);
+                  paintedFrameRef.current = frame;
+                  setPaintedFrame(frame);
                 }
               } finally {
                 bitmap.close();
@@ -1643,11 +1671,14 @@ function ComputerViewport(props) {
             objectUrl = URL.createObjectURL(blob);
             const image = await loadImage(objectUrl);
             const canvas = canvasRef.current;
-            if (mountedRef.current && canvas) {
+            if (mountedRef.current && canvas && currentFrameRef.current && sameComputerTarget(frame, currentFrameRef.current)) {
               paintCanvas(canvas, image, frame.width, frame.height);
+              paintedFrameRef.current = frame;
+              setPaintedFrame(frame);
             }
           } catch (cause) {
-            if (mountedRef.current) errorRef.current(cause);
+            if (mountedRef.current && currentFrameRef.current && sameComputerTarget(frame, currentFrameRef.current))
+              errorRef.current(cause);
           } finally {
             if (objectUrl) URL.revokeObjectURL(objectUrl);
           }
@@ -1658,34 +1689,54 @@ function ComputerViewport(props) {
       }
     })();
   }, []);
-  useEffect4(() => {
+  useLayoutEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
+      actionQueueEpochRef.current += 1;
       queuedFrameRef.current = null;
+      clearBufferedInput();
     };
-  }, []);
-  useEffect4(() => {
-    if (!props.frame) return;
+  }, [clearBufferedInput]);
+  useLayoutEffect(() => {
+    if (currentFrameRef.current && !props.frame) {
+      actionQueueEpochRef.current += 1;
+      clearBufferedInput();
+    }
+    currentFrameRef.current = props.frame;
+    if (!props.frame) {
+      queuedFrameRef.current = null;
+      paintedFrameRef.current = null;
+      setPaintedFrame(null);
+      return;
+    }
     queuedFrameRef.current = props.frame;
     paintQueuedFrames();
-  }, [paintQueuedFrames, props.frame]);
-  useEffect4(
-    () => () => {
-      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
-      if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
-      if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
-    },
-    []
-  );
+  }, [clearBufferedInput, paintQueuedFrames, props.frame]);
+  useLayoutEffect(() => {
+    if (!rawInputEnabled) {
+      actionQueueEpochRef.current += 1;
+      clearBufferedInput();
+    }
+  }, [clearBufferedInput, rawInputEnabled]);
   const enqueue = useCallback4(
     (action, frame, after) => {
+      const epoch = actionQueueEpochRef.current;
+      const dispatch = actionRef.current;
+      const isCurrent = () => mountedRef.current && epoch === actionQueueEpochRef.current;
       actionTailRef.current = actionTailRef.current.catch(() => void 0).then(async () => {
-        await actionRef.current(action, frame);
-        await after?.();
-      }).catch((cause) => errorRef.current(cause));
+        if (!isCurrent()) return;
+        await dispatch(action, frame);
+        if (!isCurrent()) return;
+        await after?.(isCurrent);
+      }).catch((cause) => {
+        if (!isCurrent()) return;
+        actionQueueEpochRef.current += 1;
+        clearBufferedInput();
+        errorRef.current(cause);
+      });
     },
-    []
+    [clearBufferedInput]
   );
   const point = useCallback4(
     (frame, clientX, clientY) => computerPoint(canvasRef.current, frame, clientX, clientY),
@@ -1715,14 +1766,35 @@ function ComputerViewport(props) {
       pending.frame
     );
   }, [enqueue]);
+  const flushPendingWheel = useCallback4(() => {
+    const batch = wheelRef.current;
+    if (!batch) return;
+    if (batch.timer) clearTimeout(batch.timer);
+    wheelRef.current = null;
+    enqueue(
+      {
+        type: "pointer",
+        frameId: batch.frame.frameId,
+        action: "scroll",
+        x: batch.x,
+        y: batch.y,
+        deltaX: batch.deltaX,
+        deltaY: batch.deltaY
+      },
+      batch.frame
+    );
+  }, [enqueue]);
   const pointerDown = (event) => {
-    if (!props.frame || props.mutating || !rawInputEnabled || event.button !== 0) return;
+    const frame = paintedFrameRef.current;
+    if (!frame || props.mutating || !rawInputEnabled || event.button !== 0) return;
+    event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     pointerStartRef.current = {
       x: event.clientX,
       y: event.clientY,
       pointerId: event.pointerId,
-      frame: props.frame
+      frame
     };
     event.currentTarget.setPointerCapture?.(event.pointerId);
     inputRef.current?.focus({ preventScroll: true });
@@ -1788,8 +1860,9 @@ function ComputerViewport(props) {
   const contextMenu = (event) => {
     event.preventDefault();
     if (!rawInputEnabled) return;
-    const frame = props.frame;
+    const frame = paintedFrameRef.current;
     if (!frame) return;
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
     const at = point(frame, event.clientX, event.clientY);
@@ -1809,43 +1882,30 @@ function ComputerViewport(props) {
   };
   const wheel = (event) => {
     if (!rawInputEnabled) return;
-    const frame = props.frame;
+    const frame = paintedFrameRef.current;
     if (!frame) return;
     const at = point(frame, event.clientX, event.clientY);
     if (!at) return;
     flushPendingText();
     flushPendingClick();
     event.preventDefault();
-    const pending = wheelRef.current;
-    if (pending?.timer) clearTimeout(pending.timer);
+    let pending = wheelRef.current;
+    if (pending && (!sameComputerTarget(pending.frame, frame) || Math.hypot(pending.x - at.x, pending.y - at.y) > 6)) {
+      flushPendingWheel();
+      pending = null;
+    }
     wheelRef.current = {
       x: at.x,
       y: at.y,
-      deltaX: (pending && sameFrameFence(pending.frame, frame) ? pending.deltaX : 0) + event.deltaX,
-      deltaY: (pending && sameFrameFence(pending.frame, frame) ? pending.deltaY : 0) + event.deltaY,
+      deltaX: (pending?.deltaX ?? 0) + event.deltaX,
+      deltaY: (pending?.deltaY ?? 0) + event.deltaY,
       frame,
-      timer: setTimeout(() => {
-        const batch = wheelRef.current;
-        wheelRef.current = null;
-        if (batch) {
-          enqueue(
-            {
-              type: "pointer",
-              frameId: batch.frame.frameId,
-              action: "scroll",
-              x: batch.x,
-              y: batch.y,
-              deltaX: batch.deltaX,
-              deltaY: batch.deltaY
-            },
-            batch.frame
-          );
-        }
-      }, 45)
+      timer: pending?.timer ?? setTimeout(flushPendingWheel, 45)
     };
   };
   const keyDown = (event) => {
     if (!rawInputEnabled) return;
+    flushPendingWheel();
     const command = event.metaKey || event.ctrlKey;
     if (props.clipboardEnabled && command && !event.altKey && ["c", "v"].includes(event.key.toLowerCase())) {
       flushPendingText();
@@ -1861,10 +1921,13 @@ function ComputerViewport(props) {
   const copy = (event) => {
     if (!props.clipboardEnabled || !rawInputEnabled) return;
     event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
-    enqueue({ type: "clipboard", operation: "copy" }, null, async () => {
-      const clipboard = await readClipboardRef.current();
+    const readClipboard = readClipboardRef.current;
+    enqueue({ type: "clipboard", operation: "copy" }, null, async (isCurrent) => {
+      const clipboard = await readClipboard();
+      if (!isCurrent()) return;
       if (!clipboard.text) return;
       if (!await copyTextToClipboard(clipboard.text)) {
         throw new Error("Desktop text could not be copied to the local clipboard");
@@ -1874,16 +1937,22 @@ function ComputerViewport(props) {
   const paste = (event) => {
     if (!props.clipboardEnabled || !rawInputEnabled) return;
     event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
     const text = event.clipboardData.getData("text/plain");
-    enqueue({ type: "clipboard", operation: "write", text }, null, async () => {
-      assertExactComputerClipboard(await readClipboardRef.current(), text);
-      await actionRef.current({ type: "clipboard", operation: "paste" }, null);
+    const readClipboard = readClipboardRef.current;
+    const dispatch = actionRef.current;
+    enqueue({ type: "clipboard", operation: "write", text }, null, async (isCurrent) => {
+      const clipboard = await readClipboard();
+      if (!isCurrent()) return;
+      assertExactComputerClipboard(clipboard, text);
+      await dispatch({ type: "clipboard", operation: "paste" }, null);
     });
   };
   const input = (value) => {
     if (!value || !rawInputEnabled) return;
+    flushPendingWheel();
     flushPendingClick();
     const pending = pendingTextRef.current;
     if (pending) {
@@ -1898,7 +1967,7 @@ function ComputerViewport(props) {
     }
     if (inputRef.current) inputRef.current.value = "";
   };
-  const showCanvas = props.frame !== null && !props.machineLocked && !streamFailed;
+  const showCanvas = props.frame !== null && paintedFrame !== null && sameComputerTarget(props.frame, paintedFrame) && !props.machineLocked && !streamFailed;
   return /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-black", children: [
     /* @__PURE__ */ jsx(
       "canvas",
@@ -2223,7 +2292,10 @@ function computerKey(event) {
   return parts.join("+");
 }
 function sameFrameFence(left, right) {
-  return left.frameId === right.frameId && left.computerSessionId === right.computerSessionId && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration;
+  return left.frameId === right.frameId && sameComputerTarget(left, right);
+}
+function sameComputerTarget(left, right) {
+  return left.computerSessionId === right.computerSessionId && left.controllerGeneration === right.controllerGeneration && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration;
 }
 function isLiveComputer2(session) {
   return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
@@ -2331,4 +2403,4 @@ export {
   ComputerViewer,
   computerKey
 };
-//# sourceMappingURL=chunk-2O2HXRGP.js.map
+//# sourceMappingURL=chunk-Y6DMQTLA.js.map