Skip to content

Commit

Permalink
fix minor bugs, arrow visible
Browse files Browse the repository at this point in the history
  • Loading branch information
@deveshidwivedi
deveshidwivedi committed Jun 21, 2024
1 parent 8ed717e commit 3387d43
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 130 deletions.
84 changes: 38 additions & 46 deletions modules/room/components/SocketMouse.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,42 @@
import { useEffect, useState } from "react";
import { useBoardPosition } from "../hooks/useBoardPosition";
import {socket} from "@/common/lib/socket";
import {motion } from "framer-motion";
import {BsCursorFill} from "react-icons/bs";


const SocketMouse = ({ userId}: { userId: string }) => {

//board postn
const boardPos= useBoardPosition();
const [x, setX]= useState(boardPos.x.get());
const [y, setY]= useState(boardPos.y.get());
import { socket } from "@/common/lib/socket";
import { motion } from "framer-motion";
import { BsCursorFill } from "react-icons/bs";

const SocketMouse = ({ userId }: { userId: string }) => {
const boardPos = useBoardPosition();
const [x, setX] = useState(boardPos.x.get());
const [y, setY] = useState(boardPos.y.get());
const [pos, setPos] = useState({ x: -1, y: -1 });

//updated socket mouse, error prone

useEffect(()=>{
socket.on("mouse_moved", (newX, newY, socketIdMoved) => {
if(socketIdMoved === userId){
setPos({x: newX, y: newY});
}
});
}, [userId]);

//update x position when board position x changes
useEffect(()=>{
const unsubscribe= boardPos.x.onChange(setX);
return unsubscribe;

}, [boardPos.x]);

//update y position when board position y changes
useEffect(()=>{
const unsubscribe= boardPos.y.onChange(setY);
return unsubscribe;

}, [boardPos.y]);


return (
<motion.div className="{absolute top-0 left-0 text-blue-800 ${ pos.x === -1 && 'hidden' }}"
animate={{x: pos.x+x, y: pos.y+y}}
transition={{duration: 0.3, ease: "linear"}}
>
<BsCursorFill className="-rotate-90" />
</motion.div>
)
};
export default SocketMouse;
useEffect(() => {
socket.on("mouse_moved", (newX, newY, socketIdMoved) => {
if (socketIdMoved === userId) {
setPos({ x: newX, y: newY });
}
});
}, [userId]);

useEffect(() => {
const unsubscribe = boardPos.x.onChange(setX);
return unsubscribe;
}, [boardPos.x]);

useEffect(() => {
const unsubscribe = boardPos.y.onChange(setY);
return unsubscribe;
}, [boardPos.y]);

return (
<motion.div
className={`absolute top-0 left-0 text-blue-800 ${pos.x === -1 && 'hidden'}`}
animate={{ x: pos.x + x, y: pos.y + y }}
transition={{ duration: 0.3, ease: "linear" }}
>
<BsCursorFill className="-rotate-90" />
</motion.div>
);
};

export default SocketMouse;
166 changes: 82 additions & 84 deletions modules/room/hooks/Canvas.hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,91 +2,88 @@ import { useCallback, useEffect, useState } from "react";
import { socket } from "@/common/lib/socket";
import { useOptions } from "@/common/recoil/options";
import { drawOnUndo } from "../helpers/Canvas.helpers";
import usersAtom, { useUsers } from "@/common/recoil/users";
import usersAtom, { useUsers } from "@/common/recoil/users";
import { useBoardPosition } from "./useBoardPosition";
import { getPos } from "@/common/lib/getPos";
import { useSetRecoilState } from "recoil";


const savedMoves: [number, number][][]= [];
let moves: [number, number][]= [];
const savedMoves: [number, number][][] = [];
let moves: [number, number][] = [];

export const useDraw = (
ctx: CanvasRenderingContext2D | undefined,
blocked: boolean,
handleEnd: () => void
) => {
const users= useUsers();
const users = useUsers();
const options = useOptions();
const [drawing, setDrawing] = useState(false);

const boardPosition= useBoardPosition();
const boardPosition = useBoardPosition();
const movedX = boardPosition.x;
const movedY = boardPosition.y;

useEffect(()=>{
if(ctx){
ctx.lineJoin= "round";
ctx.lineCap= "round";
ctx.lineWidth= options.lineWidth;
ctx.strokeStyle= options.lineColor;
}
useEffect(() => {
if (ctx) {
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.lineWidth = options.lineWidth;
ctx.strokeStyle = options.lineColor;
}
});

const handleUndo = useCallback(()=> {
if(ctx){
const handleUndo = useCallback(() => {
if (ctx) {
savedMoves.pop();

socket.emit("undo");

drawOnUndo(ctx, savedMoves, users);
handleEnd();
}
}, [ctx, handleEnd, users]);

useEffect (()=>{
useEffect(() => {
const handleUndoKeyboard = (e: KeyboardEvent) => {
if(e.key === 'z' && e.ctrlKey){
if (e.key === 'z' && e.ctrlKey) {
handleUndo();
}
}
};

document.addEventListener('keydown', handleUndoKeyboard);
return () => {
document.removeEventListener('keydown', handleUndoKeyboard);

};
}, [handleUndo]);

const handleStartDrawing = (x: number, y: number) =>{
if(!ctx || blocked) return ;
const handleStartDrawing = (x: number, y: number) => {
if (!ctx || blocked) return;

setDrawing(true);
setDrawing(true);

ctx.beginPath();
ctx.lineTo(getPos(x, movedX), getPos(x, movedY));
ctx.stroke();
ctx.beginPath();
ctx.lineTo(getPos(x, movedX), getPos(y, movedY));
ctx.stroke();
};
const handleEndDrawing = () =>{
if(!ctx || blocked) return ;
setDrawing(false);
ctx.closePath();

const handleEndDrawing = () => {
if (!ctx || blocked) return;
setDrawing(false);
ctx.closePath();

savedMoves.push(moves);


socket.emit("draw", moves, options);
moves=[];
moves = [];
handleEnd();
};
const handleDraw= (x:number, y:number) =>{
if(!ctx || !drawing || blocked){
return;
}

ctx.lineTo(getPos(x,movedX), getPos(y, movedY));

const handleDraw = (x: number, y: number) => {
if (!ctx || !drawing || blocked) return;

ctx.lineTo(getPos(x, movedX), getPos(y, movedY));
ctx.stroke();
moves.push([getPos(x,movedX), getPos(y, movedY)]);
moves.push([getPos(x, movedX), getPos(y, movedY)]);
};

return {
Expand All @@ -96,56 +93,57 @@ export const useDraw = (
handleUndo,
drawing,
}
};

};
// Hook to listen for user draw & undo events
export const useSocketDraw = (
ctx: CanvasRenderingContext2D | undefined,
handleEnd: () => void
) => {
const setUsers = useSetRecoilState(usersAtom);

//hook to listen for user draw & undo events
export const useSocketDraw = (
ctx: CanvasRenderingContext2D | undefined,
handleEnd: () => void
) => {

const setUsers = useSetRecoilState(usersAtom);

useEffect(()=>{
socket.on("user_draw", (newMoves, options, userId)=> {
if(ctx){
ctx.lineWidth= options.lineWidth;
ctx.strokeStyle= options.lineColor;
ctx.beginPath();

newMoves.forEach(([x,y])=> {
ctx.lineTo(x,y);
});
ctx.stroke();
ctx.closePath();
handleEnd();
setUsers((prevUsers)=> {
const newUsers= {...prevUsers};
newUsers[userId] = [...newUsers[userId], newMoves];
return newUsers;
});
}
});
useEffect(() => {
socket.on("user_draw", (newMoves, options, userId) => {
if (ctx) {
ctx.lineWidth = options.lineWidth;
ctx.strokeStyle = options.lineColor;
ctx.beginPath();

socket.on("user_undo", (userId)=>{
setUsers((prevUsers)=>{
const newUsers= {...prevUsers};
newUsers[userId]= newUsers[userId].slice(0, -1);

if(ctx){
drawOnUndo(ctx, savedMoves, newUsers);
handleEnd();
newMoves.forEach(([x, y]) => {
ctx.lineTo(x, y);
});
ctx.stroke();
ctx.closePath();
handleEnd();
setUsers((prevUsers) => {
const newUsers = { ...prevUsers };
// newUsers[userId] is initialized as an array
if (!Array.isArray(newUsers[userId])) {
newUsers[userId] = [];
}
newUsers[userId] = [...newUsers[userId], newMoves];
return newUsers;
});
});
}
});

return () => {
socket.off("user_draw");
socket.off("user_undo");
};

socket.on("user_undo", (userId) => {
setUsers((prevUsers) => {
const newUsers = { ...prevUsers };
if (Array.isArray(newUsers[userId])) {
newUsers[userId] = newUsers[userId].slice(0, -1);
}
if (ctx) {
drawOnUndo(ctx, savedMoves, newUsers);
handleEnd();
}
return newUsers;
});
});

};

return () => {
socket.off("user_draw");
socket.off("user_undo");
};
}, [ctx, handleEnd, setUsers]);
};

0 comments on commit 3387d43

Please sign in to comment.