tezlm/board
1
0
Fork 0
Code Issues Pull requests Releases Activity

a

Browse source
This commit is contained in:
tezlm 2022-10-04 18:03:22 -07:00
parent ca51abb958
commit a9ab31ad2f
4 changed files with 30 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
board.html
View file

@ -13,6 +13,10 @@
<body> <body>
<div id="loading">loading...</div> <div id="loading">loading...</div>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<div id="bottom"><div id="picker"></div><div id="status">loading</div></div> <div id="bottom">
<div id="picker"></div>
<div id="position">(0, 0)</div>
<div id="status">loading</div>
</div>
</body> </body>
</html> </html>

2
index.js
View file

@ -24,7 +24,7 @@ app.get("/*", (_, res) => {
res.sendFile(__dirname + "/board.html"); 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); const io = require("socket.io")(server);
io.on("connection", (socket) => { io.on("connection", (socket) => {

24
public/client.js
View file

@ -1,5 +1,6 @@
const $ = e => document.getElementById(e); const $ = e => document.getElementById(e);
const setStatus = str => $("status").innerText = str; const setStatus = str => $("status").innerText = str;
const setPos = (x, y) => $("position").innerText = `(${x}, ${y})`;
const socket = io(); const socket = io();
// someone's (or your) pen // someone's (or your) pen
@ -66,6 +67,7 @@ class Renderer {
this.pan[0] += x; this.pan[0] += x;
this.pan[1] += y; this.pan[1] += y;
this.ctx.translate(x, y); this.ctx.translate(x, y);
setPos(this.pan[0], this.pan[1]);
} }
resize() { 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 renderer = new Renderer($("canvas"));
const colors = new ColorSelection($("picker")); const colors = new ColorSelection($("picker"));
colors.addAll([ colors.addAll([
@ -211,22 +213,26 @@ function handle(e) {
const coords = parseCoords(e); const coords = parseCoords(e);
if(!coords) return; if(!coords) return;
const type = parseType(e); const type = parseType(e);
if(e.which === 1) { if (type === "drawstart") cursor.button = e.which;
setStatus(e.shiftKey ? "line" : "drawing");
if (cursor.button === 1) {
const event = parseDrawEvent(coords, type); const event = parseDrawEvent(coords, type);
if(!event) return; if (!event) return;
if(e.shiftKey && type === "drawmove") event.type = "drawline"; setStatus(e.shiftKey ? "line" : "drawing");
if (e.shiftKey && type === "drawmove") event.type = "drawline";
renderer.add(event); renderer.add(event);
socket.emit("draw", event); socket.emit("draw", event);
} else if(e.which === 2) { } else if (cursor.button === 2 && cursor.pressed) {
setStatus("panning"); setStatus("panning");
renderer.panBy(coords.x - cursor.x, coords.y - cursor.y); renderer.panBy(coords.x - cursor.x, coords.y - cursor.y);
renderer.redraw(); renderer.redraw();
} }
if(type === "drawstart") cursor.pressed = true;
if(type === "drawend") { if (type === "drawstart") {
setStatus("ready"); cursor.pressed = true;
} else if (type === "drawend") {
cursor.pressed = false; cursor.pressed = false;
setStatus("ready");
} }
cursor.x = coords.x; cursor.x = coords.x;

9
public/style.css
View file

@ -39,12 +39,17 @@ body {
transform: scale(0.8); transform: scale(0.8);
} }
#status { #status, #position {
flex: 0; margin-left: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
#position {
color: #444;
display: none;
}
#loading { #loading {
z-index: 9999; z-index: 9999;
position: fixed; position: fixed;