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:
parent
b9c75b5bc4
commit
b49f9b29e5
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user