diff --git a/client/client_recv.js b/client/client_recv.js
index 4789658..04afcf3 100644
--- a/client/client_recv.js
+++ b/client/client_recv.js
@@ -254,7 +254,7 @@ async function handle_message(state, context, d) {
const message_type = des_u8(d);
let do_draw = false;
- if (config.debug_print) console.debug(message_type);
+ // if (config.debug_print) console.debug(message_type);
switch (message_type) {
case MESSAGE.JOIN:
@@ -353,6 +353,6 @@ async function handle_message(state, context, d) {
}
if (do_draw) {
- window.requestAnimationFrame(() => draw(state, context));
+ schedule_draw(state, context);
}
}
diff --git a/client/index.html b/client/index.html
index 0b8e6cc..c43ce2f 100644
--- a/client/index.html
+++ b/client/index.html
@@ -6,19 +6,19 @@
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
+
+
+
diff --git a/client/webgl.js b/client/webgl.js
index 0c5b5a1..8fb0dec 100644
--- a/client/webgl.js
+++ b/client/webgl.js
@@ -1,6 +1,8 @@
document.addEventListener('DOMContentLoaded', main);
function draw(state, context) {
+ state.timers.raf = false;
+
const gl = context.gl;
const width = window.innerWidth;
const height = window.innerHeight;
@@ -183,6 +185,7 @@ function main() {
'current_strokes': {},
+ 'fire_queue': [],
'queue': [],
'events': [],
@@ -199,6 +202,7 @@ function main() {
'timers': {
'ws_reconnect': null,
'hide_preview': null,
+ 'raf': false,
},
'players': {},
@@ -239,5 +243,12 @@ function main() {
ws_connect(state, context, true);
- window.requestAnimationFrame(() => draw(state, context));
+ schedule_draw(state, context);
+}
+
+function schedule_draw(state, context) {
+ if (!state.timers.raf) {
+ window.requestAnimationFrame(() => draw(state, context));
+ state.timers.raf = true;
+ }
}
\ No newline at end of file
diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js
index 9f9b259..5fcd94f 100644
--- a/client/webgl_listeners.js
+++ b/client/webgl_listeners.js
@@ -63,7 +63,7 @@ function mousedown(e, state, context) {
update_dynamic_stroke(state, context, state.me, canvasp);
state.drawing = true;
- window.requestAnimationFrame(() => draw(state, context));
+ schedule_draw(state, context);
}
function mousemove(e, state, context) {
@@ -89,7 +89,7 @@ function mousemove(e, state, context) {
}
if (do_draw) {
- window.requestAnimationFrame(() => draw(state, context));
+ schedule_draw(state, context);
}
return false;
@@ -120,7 +120,7 @@ function mouseup(e, state, context) {
state.drawing = false;
- window.requestAnimationFrame(() => draw(state, context));
+ schedule_draw(state, context);
return;
}
@@ -151,7 +151,7 @@ function wheel(e, state, context) {
state.canvas.offset.x -= zoom_offset_x;
state.canvas.offset.y -= zoom_offset_y;
- window.requestAnimationFrame(() => draw(state, context));
+ schedule_draw(state, context);
}
function touchstart(e, state) {
@@ -247,7 +247,7 @@ function touchmove(e, state, context) {
update_dynamic_stroke(state, context, state.me, canvasp);
fire_event(predraw_event(canvasp.x, canvasp.y));
- window.requestAnimationFrame(() => draw(state, context));
+ schedule_draw(state, context);
}
return;
@@ -307,7 +307,7 @@ function touchmove(e, state, context) {
state.touch.first_finger_position = first_finger_position;
state.touch.second_finger_position = second_finger_position;
- window.requestAnimationFrame(() => draw(state, context));
+ schedule_draw(state, context);
return;
}
@@ -383,8 +383,7 @@ async function on_drop(e, state, context) {
// await queue_event(event);
}
- window.requestAnimationFrame(() => draw(state, context));
-
+ schedule_draw(state, context);
return false;
}
\ No newline at end of file
diff --git a/client/webgl_shaders.js b/client/webgl_shaders.js
index 88d59eb..6708062 100644
--- a/client/webgl_shaders.js
+++ b/client/webgl_shaders.js
@@ -131,7 +131,7 @@ function init_webgl(state, context) {
context.canvas.width = width;
context.canvas.height = height;
- window.requestAnimationFrame(() => draw(state, context));
+ schedule_draw(state, context);
}
const resize_observer = new ResizeObserver(resize_canvas);