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

🎨 Use consistent naming (#2029)

Browse Source
This commit is contained in:
Warren Seine 2020-08-14 20:14:22 +02:00 committed by GitHub
parent 009eba6315
commit 4644ca1778
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/App.tsx
View File

@ -768,22 +768,22 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const pointerViewportCoords: SceneState["remotePointerViewportCoords"] = {};
const remoteSelectedElementIds: SceneState["remoteSelectedElementIds"] = {};
const pointerUsernames: { [id: string]: string } = {};
this.state.collaborators.forEach((user, socketID) => {
this.state.collaborators.forEach((user, socketId) => {
if (user.selectedElementIds) {
for (const id of Object.keys(user.selectedElementIds)) {
if (!(id in remoteSelectedElementIds)) {
remoteSelectedElementIds[id] = [];
}
remoteSelectedElementIds[id].push(socketID);
remoteSelectedElementIds[id].push(socketId);
}
}
if (!user.pointer) {
return;
}
if (user.username) {
pointerUsernames[socketID] = user.username;
pointerUsernames[socketId] = user.username;
}
pointerViewportCoords[socketID] = sceneCoordsToViewportCoords(
pointerViewportCoords[socketId] = sceneCoordsToViewportCoords(
{
sceneX: user.pointer.x,
sceneY: user.pointer.y,
@ -792,7 +792,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
this.canvas,
window.devicePixelRatio,
);
cursorButton[socketID] = user.button;
cursorButton[socketId] = user.button;
});
const elements = this.scene.getElements();
const { atLeastOneVisibleElement, scrollBars } = renderScene(
@ -1294,8 +1294,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
break;
case "MOUSE_LOCATION": {
const {
socketID,
pointerCoords,
socketId,
pointer,
button,
username,
selectedElementIds,
@ -1303,15 +1303,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
// NOTE purposefully mutating collaborators map in case of
// pointer updates so as not to trigger LayerUI rerender
this.setState((state) => {
if (!state.collaborators.has(socketID)) {
state.collaborators.set(socketID, {});
if (!state.collaborators.has(socketId)) {
state.collaborators.set(socketId, {});
}
const user = state.collaborators.get(socketID)!;
user.pointer = pointerCoords;
const user = state.collaborators.get(socketId)!;
user.pointer = pointer;
user.button = button;
user.selectedElementIds = selectedElementIds;
user.username = username;
state.collaborators.set(socketID, user);
state.collaborators.set(socketId, user);
return state;
});
break;
@ -1337,11 +1337,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
setCollaborators(sockets: string[]) {
this.setState((state) => {
const collaborators: typeof state.collaborators = new Map();
for (const socketID of sockets) {
if (state.collaborators.has(socketID)) {
collaborators.set(socketID, state.collaborators.get(socketID)!);
for (const socketId of sockets) {
if (state.collaborators.has(socketId)) {
collaborators.set(socketId, state.collaborators.get(socketId)!);
} else {
collaborators.set(socketID, {});
collaborators.set(socketId, {});
}
}
return {
@ -1352,15 +1352,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
}
private broadcastMouseLocation = (payload: {
pointerCoords: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointerCoords"];
pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
}) => {
if (this.portal.socket?.id) {
const data: SocketUpdateDataSource["MOUSE_LOCATION"] = {
type: "MOUSE_LOCATION",
payload: {
socketID: this.portal.socket.id,
pointerCoords: payload.pointerCoords,
socketId: this.portal.socket.id,
pointer: payload.pointer,
button: payload.button || "up",
selectedElementIds: this.state.selectedElementIds,
username: this.state.username,
@ -3647,14 +3647,14 @@ class App extends React.Component<ExcalidrawProps, AppState> {
if (!x || !y) {
return;
}
const pointerCoords = viewportCoordsToSceneCoords(
const pointer = viewportCoordsToSceneCoords(
{ clientX: x, clientY: y },
this.state,
this.canvas,
window.devicePixelRatio,
);
if (isNaN(pointerCoords.x) || isNaN(pointerCoords.y)) {
if (isNaN(pointer.x) || isNaN(pointer.y)) {
// sometimes the pointer goes off screen
return;
}
@ -3662,7 +3662,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
// do not broadcast when more than 1 pointer since that shows flickering on the other side
gesture.pointers.size < 2 &&
this.broadcastMouseLocation({
pointerCoords,
pointer,
button,
});
};

2
src/components/Portal.tsx
View File

@ -28,7 +28,7 @@ class Portal {
this.app.restoreUserName();
}
});
this.socket.on("new-user", async (_socketID: string) => {
this.socket.on("new-user", async (_socketId: string) => {
this.app.broadcastScene(SCENE.INIT, /* syncAll */ true);
});
this.socket.on("room-user-change", (clients: string[]) => {

4
src/data/index.ts
View File

@ -52,8 +52,8 @@ export type SocketUpdateDataSource = {
MOUSE_LOCATION: {
type: "MOUSE_LOCATION";
payload: {
socketID: string;
pointerCoords: { x: number; y: number };
socketId: string;
pointer: { x: number; y: number };
button: "down" | "up";
selectedElementIds: AppState["selectedElementIds"];
username: string;