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

Add collaborators names (#1223)

Browse source 
* add random usernames

* add username state

* add username input

* ability to set names

* fix tests

* set username oon mobile

* remove auto generated names

* remove commented code

* always string

* updaate snapshots

* maintain username when clearing canvas

* Update src/renderer/renderScene.ts

Co-Authored-By: Lipis <lipiridis@gmail.com>

* add border

* fix styles

Co-authored-by: Pete Hunt <petehunt@users.noreply.github.com>
Co-authored-by: Faustino Kialungila <faustino.kialungila@gmail.com>
Co-authored-by: Lipis <lipiridis@gmail.com>
This commit is contained in:
Kostas Bariotis 2020-04-07 14:02:42 +01:00 • committed by GitHub
parent 0c3d34261e
commit 67805bc7a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 154 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/renderer/renderScene.ts
View file

@ -330,6 +330,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;
@ -383,6 +384,41 @@ 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;
// Border
context.fillStyle = stroke;
context.globalAlpha = globalAlpha;
context.fillRect(
offsetX - 1,
offsetY - 1,
measure.width + 2 * paddingHorizontal + 2,
measureHeight + 2 * paddingVertical + 2,
);
// Background
context.fillStyle = background;
context.fillRect(
offsetX,
offsetY,
measure.width + 2 * paddingHorizontal,
measureHeight + 2 * paddingVertical,
);
context.fillStyle = "#ffffff";
context.fillText(
username,
offsetX + paddingHorizontal,
offsetY + paddingVertical + measure.actualBoundingBoxAscent,
);
}
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.globalAlpha = globalAlpha;