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;