diff --git a/board.html b/board.html index 8acffc8..6410986 100644 --- a/board.html +++ b/board.html @@ -13,6 +13,10 @@
loading...
-
loading
+
+
+
(0, 0)
+
loading
+
diff --git a/index.js b/index.js index 0712a46..c184fba 100644 --- a/index.js +++ b/index.js @@ -24,7 +24,7 @@ app.get("/*", (_, res) => { res.sendFile(__dirname + "/board.html"); }); -const server = app.listen(process.env.PORT || 3000); +const server = app.listen(process.env.PORT || 2893); const io = require("socket.io")(server); io.on("connection", (socket) => { diff --git a/public/client.js b/public/client.js index 5cc6d14..2ce4cef 100644 --- a/public/client.js +++ b/public/client.js @@ -1,5 +1,6 @@ const $ = e => document.getElementById(e); const setStatus = str => $("status").innerText = str; +const setPos = (x, y) => $("position").innerText = `(${x}, ${y})`; const socket = io(); // someone's (or your) pen @@ -66,6 +67,7 @@ class Renderer { this.pan[0] += x; this.pan[1] += y; this.ctx.translate(x, y); + setPos(this.pan[0], this.pan[1]); } resize() { @@ -155,7 +157,7 @@ class ColorSelection { } } -const cursor = { pressed: false, x: 0, y: 0 }; +const cursor = { pressed: false, button: 0, x: 0, y: 0 }; const renderer = new Renderer($("canvas")); const colors = new ColorSelection($("picker")); colors.addAll([ @@ -211,24 +213,28 @@ function handle(e) { const coords = parseCoords(e); if(!coords) return; const type = parseType(e); - if(e.which === 1) { - setStatus(e.shiftKey ? "line" : "drawing"); + if (type === "drawstart") cursor.button = e.which; + + if (cursor.button === 1) { const event = parseDrawEvent(coords, type); - if(!event) return; - if(e.shiftKey && type === "drawmove") event.type = "drawline"; + if (!event) return; + setStatus(e.shiftKey ? "line" : "drawing"); + if (e.shiftKey && type === "drawmove") event.type = "drawline"; renderer.add(event); socket.emit("draw", event); - } else if(e.which === 2) { + } else if (cursor.button === 2 && cursor.pressed) { setStatus("panning"); renderer.panBy(coords.x - cursor.x, coords.y - cursor.y); renderer.redraw(); - } - if(type === "drawstart") cursor.pressed = true; - if(type === "drawend") { - setStatus("ready"); + } + + if (type === "drawstart") { + cursor.pressed = true; + } else if (type === "drawend") { cursor.pressed = false; + setStatus("ready"); } - + cursor.x = coords.x; cursor.y = coords.y; } diff --git a/public/style.css b/public/style.css index 3b1866c..3325f86 100644 --- a/public/style.css +++ b/public/style.css @@ -39,12 +39,17 @@ body { transform: scale(0.8); } -#status { - flex: 0; +#status, #position { + margin-left: 16px; display: flex; align-items: center; } +#position { + color: #444; + display: none; +} + #loading { z-index: 9999; position: fixed;