changes tdpCli* to client* and adds a canvas* to the canvas related f…

…unctions
gravitational · Aug 22, 2023 · fcb93f1 · fcb93f1
1 parent f7f11f6
commit fcb93f1
Show file tree

Hide file tree

Showing 6 changed files with 242 additions and 230 deletions.
diff --git a/web/packages/teleport/src/DesktopSession/DesktopSession.story.tsx b/web/packages/teleport/src/DesktopSession/DesktopSession.story.tsx
@@ -46,8 +46,8 @@ const props: State = {
   clipboardSharingEnabled: false,
   tdpClient: fakeClient(),
   username: 'user',
-  onWsOpen: () => {},
-  onWsClose: () => {},
+  clientOnWsOpen: () => {},
+  clientOnWsClose: () => {},
   wsConnection: 'closed',
   disconnected: false,
   setDisconnected: () => {},
@@ -58,19 +58,19 @@ const props: State = {
   },
   setDirectorySharingState: () => {},
   onShareDirectory: () => {},
-  onPngFrame: () => {},
-  onBitmapFrame: () => {},
-  screenSpec: { width: 0, height: 0 },
-  onTdpError: () => {},
-  onTdpWarning: () => {},
-  onKeyDown: () => {},
-  onKeyUp: () => {},
-  onMouseMove: () => {},
-  onMouseDown: () => {},
-  onMouseUp: () => {},
-  onMouseWheelScroll: () => {},
-  onContextMenu: () => false,
-  onClipboardData: async () => {},
+  clientOnPngFrame: () => {},
+  clientOnBitmapFrame: () => {},
+  clientScreenSpec: { width: 0, height: 0 },
+  clientOnTdpError: () => {},
+  clientOnTdpWarning: () => {},
+  canvasOnKeyDown: () => {},
+  canvasOnKeyUp: () => {},
+  canvasOnMouseMove: () => {},
+  canvasOnMouseDown: () => {},
+  canvasOnMouseUp: () => {},
+  canvasOnMouseWheelScroll: () => {},
+  canvasOnContextMenu: () => false,
+  clientOnClipboardData: async () => {},
   setTdpConnection: () => {},
   webauthn: {
     errorText: '',
@@ -134,7 +134,7 @@ export const ConnectedSettingsFalse = () => {
       wsConnection={'open'}
       disconnected={false}
       clipboardSharingEnabled={false}
-      onPngFrame={(ctx: CanvasRenderingContext2D) => {
+      clientOnPngFrame={(ctx: CanvasRenderingContext2D) => {
         fillGray(ctx.canvas);
       }}
     />
@@ -160,7 +160,7 @@ export const ConnectedSettingsTrue = () => {
         canShare: true,
         isSharing: true,
       }}
-      onPngFrame={(ctx: CanvasRenderingContext2D) => {
+      clientOnPngFrame={(ctx: CanvasRenderingContext2D) => {
         fillGray(ctx.canvas);
       }}
     />
@@ -273,7 +273,7 @@ export const Warnings = () => {
           canShare: true,
           isSharing: true,
         }}
-        onPngFrame={(ctx: CanvasRenderingContext2D) => {
+        clientOnPngFrame={(ctx: CanvasRenderingContext2D) => {
           fillGray(ctx.canvas);
         }}
         warnings={warnings}

diff --git a/web/packages/teleport/src/DesktopSession/DesktopSession.tsx b/web/packages/teleport/src/DesktopSession/DesktopSession.tsx
@@ -119,7 +119,7 @@ export function DesktopSession(props: State) {
 
   if (errorDialog.open) {
     return (
-      <Session {...props} connect={false} displayCanvas={false}>
+      <Session {...props} clientShouldConnect={false} displayCanvas={false}>
         <Dialog
           dialogCss={() => ({ width: '484px' })}
           onClose={onDialogClose}
@@ -156,7 +156,11 @@ export function DesktopSession(props: State) {
     const shouldConnect = false;
 
     return (
-      <Session {...props} connect={shouldConnect} displayCanvas={false}>
+      <Session
+        {...props}
+        clientShouldConnect={shouldConnect}
+        displayCanvas={false}
+      >
         <Dialog
           dialogCss={() => ({ width: '484px' })}
           onClose={() => {}}
@@ -193,7 +197,7 @@ export function DesktopSession(props: State) {
 
   if (disconnected) {
     return (
-      <Session {...props} connect={false} displayCanvas={false}>
+      <Session {...props} clientShouldConnect={false} displayCanvas={false}>
         <Box textAlign="center" m={10}>
           <Text>Session successfully disconnected</Text>
         </Box>
@@ -208,15 +212,19 @@ export function DesktopSession(props: State) {
     const shouldConnect = fetchAttempt.status !== 'processing';
 
     return (
-      <Session {...props} connect={shouldConnect} displayCanvas={false}>
+      <Session
+        {...props}
+        clientShouldConnect={shouldConnect}
+        displayCanvas={false}
+      >
         <Box textAlign="center" m={10}>
           <Indicator />
         </Box>
       </Session>
     );
   }
 
-  return <Session {...props} connect={true} displayCanvas={true} />;
+  return <Session {...props} clientShouldConnect={true} displayCanvas={true} />;
 }
 
 function Session({
@@ -228,22 +236,22 @@ function Session({
   setClipboardSharingEnabled,
   directorySharingState,
   setDirectorySharingState,
-  onPngFrame,
-  onBitmapFrame,
-  onClipboardData,
-  onTdpError,
-  onTdpWarning,
-  onWsClose,
-  onWsOpen,
-  onKeyDown,
-  onKeyUp,
-  onMouseMove,
-  onMouseDown,
-  onMouseUp,
-  onMouseWheelScroll,
-  onContextMenu,
-  connect,
-  screenSpec,
+  clientOnPngFrame,
+  clientOnBitmapFrame,
+  clientOnClipboardData,
+  clientOnTdpError,
+  clientOnTdpWarning,
+  clientOnWsClose,
+  clientOnWsOpen,
+  canvasOnKeyDown,
+  canvasOnKeyUp,
+  canvasOnMouseMove,
+  canvasOnMouseDown,
+  canvasOnMouseUp,
+  canvasOnMouseWheelScroll,
+  canvasOnContextMenu,
+  clientShouldConnect,
+  clientScreenSpec,
   displayCanvas,
   clipboardSharingEnabled,
   onShareDirectory,
@@ -295,23 +303,23 @@ function Session({
           display: displayCanvas ? 'flex' : 'none',
           flex: 1, // ensures the canvas fills available screen space
         }}
-        tdpCli={tdpClient}
-        tdpCliConnect={connect}
-        tdpCliScreenSpec={screenSpec}
-        tdpCliOnPngFrame={onPngFrame}
-        tdpCliOnBmpFrame={onBitmapFrame}
-        tdpCliOnClipboardData={onClipboardData}
-        tdpCliOnTdpError={onTdpError}
-        tdpCliOnTdpWarning={onTdpWarning}
-        tdpCliOnWsClose={onWsClose}
-        tdpCliOnWsOpen={onWsOpen}
-        onKeyDown={onKeyDown}
-        onKeyUp={onKeyUp}
-        onMouseMove={onMouseMove}
-        onMouseDown={onMouseDown}
-        onMouseUp={onMouseUp}
-        onMouseWheelScroll={onMouseWheelScroll}
-        onContextMenu={onContextMenu}
+        client={tdpClient}
+        clientShouldConnect={clientShouldConnect}
+        clientScreenSpec={clientScreenSpec}
+        clientOnPngFrame={clientOnPngFrame}
+        clientOnBmpFrame={clientOnBitmapFrame}
+        clientOnClipboardData={clientOnClipboardData}
+        clientOnTdpError={clientOnTdpError}
+        clientOnTdpWarning={clientOnTdpWarning}
+        clientOnWsClose={clientOnWsClose}
+        clientOnWsOpen={clientOnWsOpen}
+        canvasOnKeyDown={canvasOnKeyDown}
+        canvasOnKeyUp={canvasOnKeyUp}
+        canvasOnMouseMove={canvasOnMouseMove}
+        canvasOnMouseDown={canvasOnMouseDown}
+        canvasOnMouseUp={canvasOnMouseUp}
+        canvasOnMouseWheelScroll={canvasOnMouseWheelScroll}
+        canvasOnContextMenu={canvasOnContextMenu}
       />
     </Flex>
   );
@@ -320,6 +328,6 @@ function Session({
 type Props = State & {
   // Determines whether the tdp client that's passed to the TdpClientCanvas
   // should connect to the server.
-  connect: boolean;
+  clientShouldConnect: boolean;
   displayCanvas: boolean;
 };
diff --git a/web/packages/teleport/src/DesktopSession/useTdpClientCanvas.tsx b/web/packages/teleport/src/DesktopSession/useTdpClientCanvas.tsx
@@ -72,7 +72,10 @@ export default function useTdpClientCanvas(props: Props) {
   };
 
   // Default TdpClientEvent.TDP_PNG_FRAME handler (buffered)
-  const onPngFrame = (ctx: CanvasRenderingContext2D, pngFrame: PngFrame) => {
+  const clientOnPngFrame = (
+    ctx: CanvasRenderingContext2D,
+    pngFrame: PngFrame
+  ) => {
     // The first image fragment we see signals a successful TDP connection.
     if (!initialTdpConnectionSucceeded.current) {
       syncCanvasSizeToDisplaySize(ctx.canvas);
@@ -83,7 +86,7 @@ export default function useTdpClientCanvas(props: Props) {
   };
 
   // Default TdpClientEvent.TDP_BMP_FRAME handler (buffered)
-  const onBitmapFrame = (
+  const clientOnBitmapFrame = (
     ctx: CanvasRenderingContext2D,
     bmpFrame: BitmapFrame
   ) => {
@@ -97,7 +100,7 @@ export default function useTdpClientCanvas(props: Props) {
   };
 
   // Default TdpClientEvent.TDP_CLIPBOARD_DATA handler.
-  const onClipboardData = async (clipboardData: ClipboardData) => {
+  const clientOnClipboardData = async (clipboardData: ClipboardData) => {
     if (
       clipboardData.data &&
       (await shouldTryClipboardRW(clipboardSharingEnabled))
@@ -109,7 +112,7 @@ export default function useTdpClientCanvas(props: Props) {
   };
 
   // Default TdpClientEvent.TDP_ERROR and TdpClientEvent.CLIENT_ERROR handler
-  const onTdpError = (error: Error) => {
+  const clientOnTdpError = (error: Error) => {
     setDirectorySharingState(prevState => ({
       ...prevState,
       isSharing: false,
@@ -122,7 +125,7 @@ export default function useTdpClientCanvas(props: Props) {
   };
 
   // Default TdpClientEvent.TDP_WARNING and TdpClientEvent.CLIENT_WARNING handler
-  const onTdpWarning = (warning: string) => {
+  const clientOnTdpWarning = (warning: string) => {
     setWarnings(prevState => {
       return [
         ...prevState,
@@ -135,11 +138,11 @@ export default function useTdpClientCanvas(props: Props) {
     });
   };
 
-  const onWsClose = () => {
+  const clientOnWsClose = () => {
     setWsConnection('closed');
   };
 
-  const onWsOpen = () => {
+  const clientOnWsOpen = () => {
     setWsConnection('open');
   };
 
@@ -164,7 +167,7 @@ export default function useTdpClientCanvas(props: Props) {
     return false;
   };
 
-  const onKeyDown = (cli: TdpClient, e: KeyboardEvent) => {
+  const canvasOnKeyDown = (cli: TdpClient, e: KeyboardEvent) => {
     e.preventDefault();
     if (handleCapsLock(cli, e)) return;
     cli.sendKeyboardInput(e.code, ButtonState.DOWN);
@@ -186,14 +189,14 @@ export default function useTdpClientCanvas(props: Props) {
     }
   };
 
-  const onKeyUp = (cli: TdpClient, e: KeyboardEvent) => {
+  const canvasOnKeyUp = (cli: TdpClient, e: KeyboardEvent) => {
     e.preventDefault();
     if (handleCapsLock(cli, e)) return;
 
     cli.sendKeyboardInput(e.code, ButtonState.UP);
   };
 
-  const onMouseMove = (
+  const canvasOnMouseMove = (
     cli: TdpClient,
     canvas: HTMLCanvasElement,
     e: MouseEvent
@@ -204,7 +207,7 @@ export default function useTdpClientCanvas(props: Props) {
     cli.sendMouseMove(x, y);
   };
 
-  const onMouseDown = (cli: TdpClient, e: MouseEvent) => {
+  const canvasOnMouseDown = (cli: TdpClient, e: MouseEvent) => {
     if (e.button === 0 || e.button === 1 || e.button === 2) {
       cli.sendMouseButton(e.button, ButtonState.DOWN);
     }
@@ -215,13 +218,13 @@ export default function useTdpClientCanvas(props: Props) {
     sendLocalClipboardToRemote(cli);
   };
 
-  const onMouseUp = (cli: TdpClient, e: MouseEvent) => {
+  const canvasOnMouseUp = (cli: TdpClient, e: MouseEvent) => {
     if (e.button === 0 || e.button === 1 || e.button === 2) {
       cli.sendMouseButton(e.button, ButtonState.UP);
     }
   };
 
-  const onMouseWheelScroll = (cli: TdpClient, e: WheelEvent) => {
+  const canvasOnMouseWheelScroll = (cli: TdpClient, e: WheelEvent) => {
     e.preventDefault();
     // We only support pixel scroll events, not line or page events.
     // https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode
@@ -237,7 +240,7 @@ export default function useTdpClientCanvas(props: Props) {
 
   // Block browser context menu so as not to obscure the context menu
   // on the remote machine.
-  const onContextMenu = () => false;
+  const canvasOnContextMenu = () => false;
 
   const sendLocalClipboardToRemote = async (cli: TdpClient) => {
     if (await shouldTryClipboardRW(clipboardSharingEnabled)) {
@@ -256,21 +259,21 @@ export default function useTdpClientCanvas(props: Props) {
 
   return {
     tdpClient,
-    screenSpec: getDisplaySize(),
-    onPngFrame,
-    onBitmapFrame,
-    onTdpError,
-    onClipboardData,
-    onWsClose,
-    onWsOpen,
-    onKeyDown,
-    onKeyUp,
-    onMouseMove,
-    onMouseDown,
-    onMouseUp,
-    onMouseWheelScroll,
-    onContextMenu,
-    onTdpWarning,
+    clientScreenSpec: getDisplaySize(),
+    clientOnPngFrame,
+    clientOnBitmapFrame,
+    clientOnTdpError,
+    clientOnClipboardData,
+    clientOnWsClose,
+    clientOnWsOpen,
+    clientOnTdpWarning,
+    canvasOnKeyDown,
+    canvasOnKeyUp,
+    canvasOnMouseMove,
+    canvasOnMouseDown,
+    canvasOnMouseUp,
+    canvasOnMouseWheelScroll,
+    canvasOnContextMenu,
   };
 }