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

[RFC] Randomized names next to mouse pointers. (#971)

Browse source 
* [WIP] Add names next to pointers

This implements the rendering and messaging across. Still need to do the UI to set the name.

Also, not really sure what's the best place to send the name and store it.

* Add randomized names

Co-authored-by: Christopher Chedeau <vjeux@fb.com>
This commit is contained in:
Pete Hunt 2020-03-15 18:56:38 -07:00 • committed by GitHub
parent d58216f5ec
commit dcb93f75e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 136 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/renderer/renderScene.ts
View file

@ -167,6 +167,7 @@ export function renderScene(
// Paint remote pointers
for (const clientId in sceneState.remotePointerViewportCoords) {
let { x, y } = sceneState.remotePointerViewportCoords[clientId];
const username = sceneState.remotePointerUsernames[clientId];
const width = 9;
const height = 14;
@ -200,6 +201,30 @@ export function renderScene(
context.lineTo(x, y);
context.fill();
context.stroke();
if (!isOutOfBounds && username) {
const offsetX = x + width;
const offsetY = y + height;
const paddingHorizontal = 4;
const paddingVertical = 4;
const measure = context.measureText(username);
const measureHeight =
measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;
context.fillRect(
offsetX,
offsetY,
measure.width + 2 * paddingHorizontal,
measureHeight + 2 * paddingVertical,
);
context.fillStyle = "white";
context.fillText(
username,
offsetX + paddingHorizontal,
offsetY + paddingVertical + measure.actualBoundingBoxAscent,
);
}
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.globalAlpha = globalAlpha;