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

2
src/components/Portal.tsx
View File

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

4
src/data/index.ts
View File

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