sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: [Idle detection] Deal with users on systems that don't handle emoji (#2941)

Browse Source 
* Deal with users on systems that don't handle emoji

* Leave no trailing space

* Move function to utils, and actually call it 🤣
Chapeau, TypeScript!

* Use grinning face instead of koala

* Tweak globalAlpha
This commit is contained in:
Thomas Steiner 2021-02-05 18:34:35 +01:00 committed by GitHub
parent 6aa22bada8
commit 1a67642fd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/renderer/renderScene.ts
View File

@ -47,9 +47,11 @@ import {
TransformHandles,
TransformHandleType,
} from "../element/transformHandles";
import { viewportCoordsToSceneCoords } from "../utils";
import { viewportCoordsToSceneCoords, supportsEmoji } from "../utils";
import { UserIdleState } from "../excalidraw-app/collab/types";
const hasEmojiSupport = supportsEmoji();
const strokeRectWithRotation = (
context: CanvasRenderingContext2D,
x: number,
@ -449,7 +451,7 @@ export const renderScene = (
const userState = sceneState.remotePointerUserStates[clientId];
if (isOutOfBounds || userState === UserIdleState.AWAY) {
context.globalAlpha = 0.2;
context.globalAlpha = 0.48;
}
if (
@ -481,13 +483,24 @@ export const renderScene = (
context.stroke();
const username = sceneState.remotePointerUsernames[clientId];
const usernameAndIdleState = `${username ? `${username} ` : ""}${
userState === UserIdleState.AWAY
? "⚫️"
: userState === UserIdleState.IDLE
? "💤"
: "🟢"
}`;
let usernameAndIdleState;
if (hasEmojiSupport) {
usernameAndIdleState = `${username ? `${username} ` : ""}${
userState === UserIdleState.AWAY
? "⚫️"
: userState === UserIdleState.IDLE
? "💤"
: "🟢"
}`;
} else {
usernameAndIdleState = `${username ? `${username}` : ""}${
userState === UserIdleState.AWAY
? ` (${UserIdleState.AWAY})`
: userState === UserIdleState.IDLE
? ` (${UserIdleState.IDLE})`
: ""
}`;
}
if (!isOutOfBounds && usernameAndIdleState) {
const offsetX = x + width;

17
src/utils.ts
View File

@ -369,3 +369,20 @@ export const getVersion = () => {
DEFAULT_VERSION
);
};
// Adapted from https://github.com/Modernizr/Modernizr/blob/master/feature-detects/emoji.js
export const supportsEmoji = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) {
return false;
}
const offset = 12;
ctx.fillStyle = "#f00";
ctx.textBaseline = "top";
ctx.font = "32px Arial";
// Modernizr used 🐨, but it is sort of supported on Windows 7.
// Luckily 😀 isn't supported.
ctx.fillText("😀", 0, 0);
return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
};