smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add idle detection to collaboration feature (#2877)

Browse source 
* Start idle detection implementation

* First working version

* Add screen state

* Add type safety

* Better rendering, enum types, localization

* Add origin trial token

* Fix

* Refactor idle detection to no longer use IdleDetector API

* Cleanup some leftovers

* Fix

* Apply suggestions from code review

* Three state: active 🟢, idle 💤, away ⚫️

* Address feedback from code review
Thanks, @lipis

* Deal with unmount

Co-authored-by: Panayiotis Lipiridis <lipiridis@gmail.com>
This commit is contained in:
Thomas Steiner 2021-02-04 11:55:43 +01:00 • committed by GitHub
parent 15f698dc21
commit 1837147c55
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 156 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/renderer/renderScene.ts
View file

@ -48,6 +48,7 @@ import {
TransformHandleType,
} from "../element/transformHandles";
import { viewportCoordsToSceneCoords } from "../utils";
import { UserIdleState } from "../excalidraw-app/collab/types";
const strokeRectWithRotation = (
context: CanvasRenderingContext2D,
@ -445,7 +446,9 @@ export const renderScene = (
const globalAlpha = context.globalAlpha;
context.strokeStyle = stroke;
context.fillStyle = background;
if (isOutOfBounds) {
const userState = sceneState.remotePointerUserStates[clientId];
if (isOutOfBounds || userState === UserIdleState.AWAY) {
context.globalAlpha = 0.2;
}
@ -478,19 +481,25 @@ export const renderScene = (
context.stroke();
const username = sceneState.remotePointerUsernames[clientId];
const usernameAndIdleState = `${username ? `${username} ` : ""}${
userState === UserIdleState.AWAY
? "⚫️"
: userState === UserIdleState.IDLE
? "💤"
: "🟢"
}`;
if (!isOutOfBounds && username) {
if (!isOutOfBounds && usernameAndIdleState) {
const offsetX = x + width;
const offsetY = y + height;
const paddingHorizontal = 4;
const paddingVertical = 4;
const measure = context.measureText(username);
const measure = context.measureText(usernameAndIdleState);
const measureHeight =
measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;
// Border
context.fillStyle = stroke;
context.globalAlpha = globalAlpha;
context.fillRect(
offsetX - 1,
offsetY - 1,
@ -506,8 +515,9 @@ export const renderScene = (
measureHeight + 2 * paddingVertical,
);
context.fillStyle = oc.white;
context.fillText(
username,
usernameAndIdleState,
offsetX + paddingHorizontal,
offsetY + paddingVertical + measure.actualBoundingBoxAscent,
);