From 14faef4146db7b804e7fa3b50f937fc0a68bd0e1 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Mon, 28 Aug 2023 01:32:47 +0300 Subject: [PATCH] Better draw->move cancellation. Instead of not registering short strokes, cancel them for all users if we registered a second finger during the time window. --- client/aux.js | 4 ++++ client/client_recv.js | 9 ++++++++ client/client_send.js | 10 +++++++++ client/index.html | 24 ++++++++++---------- client/index.js | 3 ++- client/webgl_geometry.js | 1 + client/webgl_listeners.js | 47 ++++++++++++--------------------------- server/deserializer.js | 4 ++++ server/enums.js | 1 + server/send.js | 4 ++++ server/serializer.js | 4 ++++ 11 files changed, 65 insertions(+), 46 deletions(-) diff --git a/client/aux.js b/client/aux.js index d12921d..aab8c57 100644 --- a/client/aux.js +++ b/client/aux.js @@ -41,6 +41,10 @@ function event_size(event) { break; } + case EVENT.CLEAR: { + break; + } + case EVENT.SET_COLOR: { size += 4; break; diff --git a/client/client_recv.js b/client/client_recv.js index b8d16b4..9a0c533 100644 --- a/client/client_recv.js +++ b/client/client_recv.js @@ -57,6 +57,10 @@ function des_event(d) { break; } + case EVENT.CLEAR: { + break; + } + case EVENT.SET_COLOR: { event.color = des_u32(d); break; @@ -150,6 +154,11 @@ function handle_event(state, context, event) { break; } + case EVENT.CLEAR: { + geometry_clear_player(state, context, event.user_id); + break; + } + case EVENT.SET_COLOR: { state.players[event.user_id].color = event.color; break; diff --git a/client/client_send.js b/client/client_send.js index 6de9600..b95d104 100644 --- a/client/client_send.js +++ b/client/client_send.js @@ -57,6 +57,10 @@ function ser_event(s, event) { break; } + case EVENT.CLEAR: { + break; + } + case EVENT.SET_COLOR: { ser_u32(s, event.color); break; @@ -285,3 +289,9 @@ function stroke_event(state) { 'color': stroke.color, }; } + +function clear_event(state) { + return { + 'type': EVENT.CLEAR + }; +} \ No newline at end of file diff --git a/client/index.html b/client/index.html index b9eb262..46f8448 100644 --- a/client/index.html +++ b/client/index.html @@ -7,20 +7,20 @@ - + - - - - - - - - + + + + + + + + - - - + + +
diff --git a/client/index.js b/client/index.js index b78d821..b8e804a 100644 --- a/client/index.js +++ b/client/index.js @@ -25,9 +25,10 @@ const EVENT = Object.freeze({ PREDRAW: 10, SET_COLOR: 11, SET_WIDTH: 12, + CLEAR: 13, // clear predraw events from me (because I started a pan instead of drawing) STROKE: 20, - RULER: 21, /* gets re-written with EVENT.STROKE before sending to server */ + RULER: 21, // gets re-written with EVENT.STROKE before sending to server UNDO: 30, REDO: 31, diff --git a/client/webgl_geometry.js b/client/webgl_geometry.js index 134723f..44f1439 100644 --- a/client/webgl_geometry.js +++ b/client/webgl_geometry.js @@ -169,6 +169,7 @@ function geometry_clear_player(state, context, player_id) { if (!state.online) return; state.players[player_id].points.length = 0; recompute_dynamic_data(state, context); + schedule_draw(state, context); } function add_image(context, image_id, bitmap, p) { diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js index 6004479..c1a9e88 100644 --- a/client/webgl_listeners.js +++ b/client/webgl_listeners.js @@ -252,14 +252,9 @@ function wheel(e, state, context) { schedule_draw(state, context); } -function touchstart(e, state) { +function touchstart(e, state, context) { e.preventDefault(); - if (state.touch.drawing) { - // Ingore subsequent touches if we are already drawing - return; - } - // First finger(s) down? if (state.touch.ids.length === 0) { if (e.changedTouches.length === 1) { @@ -269,6 +264,7 @@ function touchstart(e, state) { state.touch.moves = 0; state.touch.buffered.length = 0; state.touch.ids.push(e.changedTouches[0].identifier); + state.touch.drawing = true; setTimeout(() => { state.touch.waiting_for_second_finger = false; @@ -283,6 +279,9 @@ function touchstart(e, state) { // There are touches already if (state.touch.waiting_for_second_finger) { if (e.changedTouches.length === 1) { + geometry_clear_player(state, context, state.me); // Hide predraws of this stroke that is not means to be + fire_event(state, clear_event(state)); // Tell others to hide predraws of this stroke + state.touch.ids.push(e.changedTouches[0].identifier); for (const touch of e.touches) { @@ -317,35 +316,17 @@ function touchmove(e, state, context) { return; } - if (!state.touch.drawing) { - // Buffer this move - state.touch.moves += 1; - - if (state.touch.moves > config.buffer_first_touchmoves) { - // Start drawing, no more waiting - state.touch.waiting_for_second_finger = false; - state.touch.drawing = true; - } else { - state.touch.buffered.push(canvasp); - } - } else { - // Handle buffered moves - if (state.touch.buffered.length > 0) { - geometry_clear_player(state, context, state.me); - - for (const p of state.touch.buffered) { - geometry_add_point(state, context, state.me, p); - fire_event(state, predraw_event(p.x, p.y)); - } + state.touch.moves += 1; - state.touch.buffered.length = 0; - } + if (state.touch.moves > config.buffer_first_touchmoves) { + // At this point touch with second finger will NOT start a pan + state.touch.waiting_for_second_finger = false; + } - geometry_add_point(state, context, state.me, canvasp); - fire_event(state, predraw_event(canvasp.x, canvasp.y)); + geometry_add_point(state, context, state.me, canvasp); + fire_event(state, predraw_event(canvasp.x, canvasp.y)); - schedule_draw(state, context); - } + schedule_draw(state, context); return; } @@ -416,7 +397,7 @@ function touchend(e, state, context) { if (state.touch.ids[0] == touch.identifier) { // const event = stroke_event(); // await queue_event(event); - + const stroke = geometry_prepare_stroke(state); if (stroke) { diff --git a/server/deserializer.js b/server/deserializer.js index b269417..feafca4 100644 --- a/server/deserializer.js +++ b/server/deserializer.js @@ -56,6 +56,10 @@ export function event(d) { break; } + case EVENT.CLEAR: { + break; + } + case EVENT.SET_COLOR: { event.color = u32(d); break; diff --git a/server/enums.js b/server/enums.js index 60da7d5..f12285f 100644 --- a/server/enums.js +++ b/server/enums.js @@ -8,6 +8,7 @@ export const EVENT = Object.freeze({ PREDRAW: 10, SET_COLOR: 11, SET_WIDTH: 12, + CLEAR: 13, STROKE: 20, UNDO: 30, REDO: 31, diff --git a/server/send.js b/server/send.js index 4ffd469..cc5d3ef 100644 --- a/server/send.js +++ b/server/send.js @@ -15,6 +15,10 @@ function event_size(event) { break; } + case EVENT.CLEAR: { + break; + } + case EVENT.SET_COLOR: { size += 4; break; diff --git a/server/serializer.js b/server/serializer.js index 5f4099c..c7d6d7f 100644 --- a/server/serializer.js +++ b/server/serializer.js @@ -47,6 +47,10 @@ export function event(s, event) { break; } + case EVENT.CLEAR: { + break; + } + case EVENT.SET_COLOR: { u32(s, event.color); break;