diff --git a/src/ui/desktop/apps/guacamole/GuacamoleDisplay.tsx b/src/ui/desktop/apps/guacamole/GuacamoleDisplay.tsx index 34b3cc7c..06955ae6 100644 --- a/src/ui/desktop/apps/guacamole/GuacamoleDisplay.tsx +++ b/src/ui/desktop/apps/guacamole/GuacamoleDisplay.tsx @@ -55,6 +55,7 @@ export const GuacamoleDisplay = forwardRef(null); // Outer container for measuring size const displayRef = useRef(null); // Inner div for guacamole canvas const clientRef = useRef(null); + const scaleRef = useRef(1); // Track current scale factor for mouse const [isConnected, setIsConnected] = useState(false); const [isConnecting, setIsConnecting] = useState(false); const [connectionError, setConnectionError] = useState(null); @@ -193,6 +194,7 @@ export const GuacamoleDisplay = forwardRef 0 && displayHeight > 0 && cWidth > 0 && cHeight > 0) { const scale = Math.min(cWidth / displayWidth, cHeight / displayHeight); + scaleRef.current = scale; display.scale(scale); } }; @@ -203,10 +205,28 @@ export const GuacamoleDisplay = forwardRef { - client.sendMouseState(state); + const sendMouseState = (state: Guacamole.Mouse.State) => { + // Adjust coordinates based on scale factor and round to integers + const scale = scaleRef.current; + const adjustedX = Math.round(state.x / scale); + const adjustedY = Math.round(state.y / scale); + + // Create adjusted state - guacamole expects integer coordinates + const adjustedState = new Guacamole.Mouse.State( + adjustedX, + adjustedY, + state.left, + state.middle, + state.right, + state.up, + state.down + ) as Guacamole.Mouse.State; + + client.sendMouseState(adjustedState); }; + mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = sendMouseState; // Set up keyboard input const keyboard = new Guacamole.Keyboard(document); @@ -302,6 +322,7 @@ export const GuacamoleDisplay = forwardRef 0 && displayHeight > 0 && cWidth > 0 && cHeight > 0) { const scale = Math.min(cWidth / displayWidth, cHeight / displayHeight); + scaleRef.current = scale; display.scale(scale); } }