diff --git a/client/default.css b/client/default.css index 9ec6b8c..896568a 100644 --- a/client/default.css +++ b/client/default.css @@ -59,9 +59,11 @@ html, body { justify-content: center; align-items: end; z-index: 10; + pointer-events: none; } .tools { + pointer-events: all; display: flex; align-items: center; justify-content: center; diff --git a/client/draw.js b/client/draw.js index 52f9d55..fb2189c 100644 --- a/client/draw.js +++ b/client/draw.js @@ -5,7 +5,7 @@ function draw_stroke(stroke) { return; } - // console.debug(points) + // if (config.debug_print) console.debug(points) storage.ctx0.beginPath(); storage.ctx0.moveTo(points[0].x, points[0].y); diff --git a/client/index.html b/client/index.html index 3605235..17f41ac 100644 --- a/client/index.html +++ b/client/index.html @@ -5,17 +5,17 @@ Desk - - - - - - - - - - - + + + + + + + + + + +
diff --git a/client/index.js b/client/index.js index a3de92f..cb63690 100644 --- a/client/index.js +++ b/client/index.js @@ -30,6 +30,7 @@ const config = { ws_reconnect_timeout: 2000, second_finger_timeout: 500, buffer_first_touchmoves: 5, + debug_print: false, }; const storage = { @@ -83,8 +84,8 @@ const storage = { 'canvas': { 'zoom': 1, - 'width': 4096, - 'height': 4096, + 'width': 1500, + 'height': 4000, 'offset_x': 0, 'offset_y': 0, }, diff --git a/client/recv.js b/client/recv.js index 8d2bec9..e69c255 100644 --- a/client/recv.js +++ b/client/recv.js @@ -120,7 +120,7 @@ function bitmap_bbox(event) { } async function handle_event(event) { - console.debug(`event type ${event.type} from user ${event.user_id}`); + if (config.debug_print) console.debug(`event type ${event.type} from user ${event.user_id}`); // TODO(@speed): do not handle locally predicted events @@ -246,7 +246,7 @@ async function handle_event(event) { async function handle_message(d) { const message_type = des_u8(d); - console.debug(message_type); + if (config.debug_print) console.debug(message_type); switch (message_type) { case MESSAGE.JOIN: @@ -263,14 +263,14 @@ async function handle_message(d) { if (message_type === MESSAGE.JOIN) { ls.setItem('sessionId', des_u32(d)); - console.debug('join in'); + if (config.debug_print) console.debug('join in'); } else { - console.debug('init in'); + if (config.debug_print) console.debug('init in'); } const event_count = des_u32(d); - console.debug(`${event_count} events in init`); + if (config.debug_print) console.debug(`${event_count} events in init`); storage.ctx0.clearRect(0, 0, storage.ctx0.canvas.width, storage.ctx0.canvas.height); elements.images.innerHTML = ''; @@ -303,7 +303,7 @@ async function handle_message(d) { case MESSAGE.ACK: { const lsn = des_u32(d); - console.debug(`ack ${lsn} in`); + if (config.debug_print) console.debug(`ack ${lsn} in`); if (lsn > storage.server_lsn) { // ACKs may arrive out of order @@ -320,7 +320,7 @@ async function handle_message(d) { const we_expect = sn - storage.sn; const first = count - we_expect; - console.debug(`syn ${sn} in`); + if (config.debug_print) console.debug(`syn ${sn} in`); for (let i = 0; i < count; ++i) { const event = des_event(d); diff --git a/client/send.js b/client/send.js index 24d89c8..85002b6 100644 --- a/client/send.js +++ b/client/send.js @@ -40,7 +40,7 @@ function ser_event(s, event) { ser_u16(s, event.width); ser_u32(s, event.color); - console.debug('original', event.points); + if (config.debug_print) console.debug('original', event.points); for (const point of event.points) { ser_u16(s, point.x); @@ -81,7 +81,7 @@ async function send_ack(sn) { ser_u8(s, MESSAGE.ACK); ser_u32(s, sn); - console.debug(`ack ${sn} out`); + if (config.debug_print) console.debug(`ack ${sn} out`); try { if (ws) await ws.send(s.buffer); @@ -92,7 +92,7 @@ async function send_ack(sn) { async function sync_queue() { if (ws === null) { - console.debug('socket has closed, stopping SYNs'); + if (config.debug_print) console.debug('socket has closed, stopping SYNs'); return; } @@ -100,7 +100,7 @@ async function sync_queue() { let count = storage.lsn - storage.server_lsn; if (count === 0) { - console.debug('server ACKed all events, clearing queue'); + if (config.debug_print) console.debug('server ACKed all events, clearing queue'); storage.queue.length = 0; return; } @@ -122,7 +122,7 @@ async function sync_queue() { ser_event(s, event); } - console.debug(`syn ${storage.lsn} out`); + if (config.debug_print) console.debug(`syn ${storage.lsn} out`); try { if (ws) await ws.send(s.buffer); diff --git a/client/tools.js b/client/tools.js index 0fb0c95..d0ce92d 100644 --- a/client/tools.js +++ b/client/tools.js @@ -4,7 +4,7 @@ function tools_switch(tool) { } storage.tools.active = tool; - storage.tools.active_element = document.querySelector(`.tool[data-tool="${tool}"`); + storage.tools.active_element = document.querySelector(`.tool[data-tool="${tool}"]`); storage.tools.active_element.classList.add('active'); } diff --git a/client/touch.css b/client/touch.css index c3836ad..63f9a49 100644 --- a/client/touch.css +++ b/client/touch.css @@ -1,2 +1,5 @@ @media (pointer:none), (pointer:coarse) { + .tool:hover { + background: #333; + } } \ No newline at end of file diff --git a/client/websocket.js b/client/websocket.js index 2f37cef..e2c1095 100644 --- a/client/websocket.js +++ b/client/websocket.js @@ -20,21 +20,35 @@ function ws_connect(first_connect = false) { function on_open() { clearTimeout(storage.timers.ws_reconnect); - console.debug('open') + if (config.debug_print) console.debug('open') } async function on_message(event) { const data = event.data; - const message_data = await data.arrayBuffer(); - const view = new DataView(message_data); - const d = deserializer_create(message_data, view); + let message_data = null; - await handle_message(d); + if ('arrayBuffer' in data) { + message_data = await data.arrayBuffer(); + const view = new DataView(message_data); + const d = deserializer_create(message_data, view); + await handle_message(d); + } else { + /* For all my Safari < 14 bros out there */ + const reader = new FileReader(); + reader.onload = async (e) => { + message_data = e.target.result; + const view = new DataView(message_data); + const d = deserializer_create(message_data, view); + await handle_message(d); + }; + + reader.readAsArrayBuffer(data); + } } function on_close() { ws = null; - console.debug('close'); + if (config.debug_print) console.debug('close'); storage.timers.ws_reconnect = setTimeout(ws_connect, config.ws_reconnect_timeout); }