Render pointers out of screen (#945)

I opted to use transparency to indicate that the pointer is out of screen. It seems to be working relatively well.

Fixes #935
This commit is contained in:
Christopher Chedeau 2020-03-14 13:52:42 -07:00 committed by GitHub
parent b9c75b5bc4
commit b49f9b29e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 1 deletions

View File

@ -183,14 +183,32 @@ export function renderScene(
// Paint remote pointers
for (const clientId in sceneState.remotePointerViewportCoords) {
const { x, y } = sceneState.remotePointerViewportCoords[clientId];
let { x, y } = sceneState.remotePointerViewportCoords[clientId];
const width = 9;
const height = 14;
const isOutOfBounds =
x < 0 ||
x > normalizedCanvasWidth - width ||
y < 0 ||
y > normalizedCanvasHeight - height;
x = Math.max(x, 0);
x = Math.min(x, normalizedCanvasWidth - width);
y = Math.max(y, 0);
y = Math.min(y, normalizedCanvasHeight - height);
const color = colorForClientId(clientId);
const strokeStyle = context.strokeStyle;
const fillStyle = context.fillStyle;
const globalAlpha = context.globalAlpha;
context.strokeStyle = color;
context.fillStyle = color;
if (isOutOfBounds) {
context.globalAlpha = 0.2;
}
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + 1, y + 14);
@ -201,6 +219,7 @@ export function renderScene(
context.stroke();
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.globalAlpha = globalAlpha;
}
// Paint scrollbars