diff --git a/modules/room/components/Canvas.tsx b/modules/room/components/Canvas.tsx index b6daaae..275dd96 100644 --- a/modules/room/components/Canvas.tsx +++ b/modules/room/components/Canvas.tsx @@ -3,7 +3,7 @@ import { useViewportSize } from "@/common/hooks/useViewportSize"; import { useMotionValue, motion } from "framer-motion"; import { useRef, useState, useEffect } from "react"; import { useKeyPressEvent } from "react-use"; -import { useDraw } from "../hooks/Canvas.hooks"; +import { useDraw, useSocketDraw } from "../hooks/Canvas.hooks"; import { socket } from "@/common/lib/socket"; import { drawFromSocket } from "../helpers/Canvas.helpers"; import Minimap from "./Minimap"; @@ -43,11 +43,9 @@ const Canvas = () => { } }; - const { handleDraw, handleEndDrawing, handleStartDrawing, drawing } = useDraw( + const { handleDraw, handleEndDrawing, handleStartDrawing, drawing, handleUndo } = useDraw( ctx, dragging, - -x.get(), - -y.get(), copyCanvasToSmall ); @@ -66,31 +64,12 @@ const Canvas = () => { } }, [dragging]); - useEffect(() => { - let movesToDrawLater: [number, number][] = []; - let optionsToUseLater: CtxOptions = { - lineColor: "", - lineWidth: 0, - }; - socket.on("socket_draw", (movesToDraw, socketOptions) => { - if (ctx && !drawing) { - drawFromSocket(movesToDraw, socketOptions, ctx, copyCanvasToSmall); - } else { - movesToDrawLater = movesToDraw; - optionsToUseLater = socketOptions; - } - }); - - return () => { - socket.off("socket_draw"); - if (movesToDrawLater.length && ctx) { - drawFromSocket(movesToDrawLater, optionsToUseLater, ctx, copyCanvasToSmall); - } - }; - }, [drawing, ctx]); - + useSocketDraw(ctx, copyCanvasToSmall); return ( -