From 7c2ba5ff7226f3b126b91bfbb3b33f861efdef5c Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Sun, 16 Apr 2023 21:33:28 +0300 Subject: [PATCH] Do not schedule RAF if it already is scheduled (somewhat fixes event spam from chrome!) --- client/client_recv.js | 4 ++-- client/index.html | 22 +++++++++++----------- client/webgl.js | 13 ++++++++++++- client/webgl_listeners.js | 15 +++++++-------- client/webgl_shaders.js | 2 +- 5 files changed, 33 insertions(+), 23 deletions(-) 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);