fullscreen drawing

js/draw.js

@@ -1,101 +1,101 @@
+"use strict";
 (() => {
-  const canvas = document.getElementById("drawCanvas");
-  const ctx = canvas.getContext("2d");
-
-  ctx.lineWidth = 2;
-  ctx.lineCap = "round";
-  ctx.strokeStyle = "white";
-
-  let drawing = false;
-  let lineId = 0;
-
-  const socketUrl =
-    (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
-    window.location.host +
-    "/draw/ws";
-
-  let socket = new WebSocket(socketUrl);
-
-  socket.onerror = console.error;
-  socket.onclose = console.warn;
-
-  setTimeout(() => socket.send("ping"), 200);
-
-  // const queue = []
-
-  const sendMessage = (id, x, y) => {
-    // queue.push(`${id},${x},${y}`)
-
-    // console.log(queue)
-
-    if (socket.readyState !== socket.OPEN) {
-      socket = new WebSocket(socketUrl);
+    const drawElement = document.getElementById("drawDiv");
+    if (!drawElement) {
+        throw new Error("canvas not found");
     }
-
-    socket.send(id + "," + x + "," + y);
-  };
-
-  const drawStart = () => {
-    ctx.beginPath();
-    lineId++;
-    drawing = true;
-  };
-
-  const drawStop = () => {
-    drawing = false;
-    ctx.closePath();
-  };
-
-  const drawMove = (e) => {
-    if (!drawing) return;
-    ctx.lineTo(e.offsetX, e.offsetY);
-    sendMessage(lineId, e.offsetX, e.offsetY);
-    ctx.stroke();
-  };
-
-  const touchStart = (e) => drawStart(e.touches[0]);
-  const touchMove = (e) => {
-    drawMove({
-      offsetX: e.touches[0].clientX - canvas.offsetLeft,
-      offsetY: e.touches[0].clientY - canvas.offsetTop,
+    const drawEmitter = mitt();
+    let drawing = false;
+    const socketUrl = "/draw/ws";
+    let socket = new WebSocket(socketUrl);
+    socket.onerror = console.error;
+    socket.onclose = console.warn;
+    const serializeDraw = ({ from, to }) => `${from.x},${from.y},${to.x},${to.y}`;
+    const deserializeDraw = (message) => {
+        const parts = message.split(",");
+        return {
+            from: {
+                x: Number(parts[0]),
+                y: Number(parts[1]),
+            },
+            to: {
+                x: Number(parts[2]),
+                y: Number(parts[3]),
+            },
+        };
+    };
+    drawEmitter.on("draw", (e) => sendMessage(e));
+    const sendMessage = (e) => {
+        if (socket.readyState !== socket.OPEN) {
+            socket = new WebSocket(socketUrl);
+        }
+        socket.send(serializeDraw(e));
+    };
+    const mouseDown = () => {
+        drawing = true;
+        previous = null;
+    };
+    const mouseUp = () => {
+        drawing = false;
+    };
+    let previous = null;
+    const mouseMove = (e) => {
+        if (!drawing)
+            return;
+        if (previous) {
+            drawEmitter.emit("draw", {
+                from: previous,
+                to: { x: e.offsetX, y: e.offsetY },
+            });
+        }
+        previous = { x: e.offsetX, y: e.offsetY };
+    };
+    const touchMove = (e) => {
+        e.preventDefault();
+        mouseMove({
+            offsetX: e.touches[0].clientX - drawElement.offsetLeft,
+            offsetY: e.touches[0].clientY - drawElement.offsetTop,
+        });
+    };
+    drawElement.addEventListener("mousedown", mouseDown);
+    drawElement.addEventListener("mouseup", mouseUp);
+    drawElement.addEventListener("mousemove", mouseMove);
+    drawElement.addEventListener("touchstart", mouseDown);
+    drawElement.addEventListener("touchend", mouseUp);
+    drawElement.addEventListener("touchmove", touchMove);
+    const receiveCanvas = document.getElementById("receiveCanvas");
+    const recCtx = receiveCanvas?.getContext("2d");
+    if (!recCtx || !receiveCanvas) {
+        throw new Error("canvas not found");
+    }
+    //@ts-expect-error
+    window.ctx = recCtx;
+    setTimeout(() => {
+        recCtx.lineWidth = 2;
+        recCtx.lineCap = "round";
+        recCtx.strokeStyle = "white";
+    }, 10);
+    socket.addEventListener("message", (event) => {
+        if (event.data === "ping" || event.data.startsWith('pong'))
+            return;
+        const { from, to } = deserializeDraw(event.data);
+        recCtx.beginPath();
+        recCtx.moveTo(from.x, from.y);
+        recCtx.lineTo(to.x, to.y);
+        recCtx.closePath();
+        recCtx.stroke();
+        console.log(from, to);
     });
-    e.preventDefault();
-  };
-  const touchEnd = (e) => drawStop(e.changedTouches[0]);
-
-  canvas.addEventListener("mousedown", drawStart);
-  canvas.addEventListener("mouseup", drawStop);
-  canvas.addEventListener("mousemove", drawMove);
-
-  canvas.addEventListener("touchstart", touchStart);
-  canvas.addEventListener("touchend", touchEnd);
-  canvas.addEventListener("touchmove", touchMove);
-
-  const receiveCanvas = document.getElementById("receiveCanvas");
-  const recCtx = receiveCanvas.getContext("2d");
-  recCtx.lineWidth = 2;
-  recCtx.lineCap = "round";
-  recCtx.strokeStyle = "white";
-
-  let receiveLineId = 0;
-
-  socket.addEventListener("message", function (event) {
-    const parts = event.data.split(",");
-    if (parts[0] != receiveLineId) {
-      recCtx.closePath();
-      recCtx.beginPath();
-      receiveLineId = parts[0];
-      recCtx.moveTo(parts[1], parts[2]);
-    } else {
-      recCtx.lineTo(parts[1], parts[2]);
-      recCtx.stroke();
-    }
-  });
-
-  setInterval(() => {
-    if (socket.readyState !== socket.OPEN) {
-      socket = new WebSocket(socketUrl);
-    }
-    socket.send("ping");
-  }, 10000);
+    setInterval(() => {
+        if (socket.readyState !== socket.OPEN) {
+            socket = new WebSocket(socketUrl);
+        }
+        socket.send("ping");
+    }, 10000);
+    const resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries.at(0);
+        receiveCanvas.height = entry?.contentRect.height ?? 500;
+        receiveCanvas.width = entry?.contentRect.width ?? 500;
+    });
+    resizeObserver.observe(drawElement);
 })();