Browse Source

Do not schedule RAF if it already is scheduled (somewhat fixes event spam from chrome!)

infinite
A.Olokhtonov 2 years ago
parent
commit
7c2ba5ff72
  1. 4
      client/client_recv.js
  2. 22
      client/index.html
  3. 11
      client/webgl.js
  4. 15
      client/webgl_listeners.js
  5. 2
      client/webgl_shaders.js

4
client/client_recv.js

@ -254,7 +254,7 @@ async function handle_message(state, context, d) {
const message_type = des_u8(d); const message_type = des_u8(d);
let do_draw = false; let do_draw = false;
if (config.debug_print) console.debug(message_type); // if (config.debug_print) console.debug(message_type);
switch (message_type) { switch (message_type) {
case MESSAGE.JOIN: case MESSAGE.JOIN:
@ -353,6 +353,6 @@ async function handle_message(state, context, d) {
} }
if (do_draw) { if (do_draw) {
window.requestAnimationFrame(() => draw(state, context)); schedule_draw(state, context);
} }
} }

22
client/index.html

@ -6,19 +6,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="icons/favicon.svg" id="favicon"> <link rel="shortcut icon" href="icons/favicon.svg" id="favicon">
<link rel="stylesheet" type="text/css" href="default.css?v=12"> <link rel="stylesheet" type="text/css" href="default.css?v=14">
<script type="text/javascript" src="math.js?v=12"></script> <script type="text/javascript" src="math.js?v=14"></script>
<script type="text/javascript" src="aux.js?v=12"></script> <script type="text/javascript" src="aux.js?v=14"></script>
<script type="text/javascript" src="tools.js?v=12"></script> <script type="text/javascript" src="tools.js?v=14"></script>
<script type="text/javascript" src="webgl_geometry.js?v=12"></script> <script type="text/javascript" src="webgl_geometry.js?v=14"></script>
<script type="text/javascript" src="webgl_shaders.js?v=12"></script> <script type="text/javascript" src="webgl_shaders.js?v=14"></script>
<script type="text/javascript" src="webgl_listeners.js?v=12"></script> <script type="text/javascript" src="webgl_listeners.js?v=14"></script>
<script type="text/javascript" src="webgl.js?v=12"></script> <script type="text/javascript" src="webgl.js?v=14"></script>
<script type="text/javascript" src="client_send.js?v=12"></script> <script type="text/javascript" src="client_send.js?v=14"></script>
<script type="text/javascript" src="client_recv.js?v=12"></script> <script type="text/javascript" src="client_recv.js?v=14"></script>
<script type="text/javascript" src="websocket.js?v=12"></script> <script type="text/javascript" src="websocket.js?v=14"></script>
</head> </head>
<body> <body>
<canvas id="c"></canvas> <canvas id="c"></canvas>

11
client/webgl.js

@ -1,6 +1,8 @@
document.addEventListener('DOMContentLoaded', main); document.addEventListener('DOMContentLoaded', main);
function draw(state, context) { function draw(state, context) {
state.timers.raf = false;
const gl = context.gl; const gl = context.gl;
const width = window.innerWidth; const width = window.innerWidth;
const height = window.innerHeight; const height = window.innerHeight;
@ -183,6 +185,7 @@ function main() {
'current_strokes': {}, 'current_strokes': {},
'fire_queue': [],
'queue': [], 'queue': [],
'events': [], 'events': [],
@ -199,6 +202,7 @@ function main() {
'timers': { 'timers': {
'ws_reconnect': null, 'ws_reconnect': null,
'hide_preview': null, 'hide_preview': null,
'raf': false,
}, },
'players': {}, 'players': {},
@ -239,5 +243,12 @@ function main() {
ws_connect(state, context, true); ws_connect(state, context, true);
schedule_draw(state, context);
}
function schedule_draw(state, context) {
if (!state.timers.raf) {
window.requestAnimationFrame(() => draw(state, context)); window.requestAnimationFrame(() => draw(state, context));
state.timers.raf = true;
}
} }

15
client/webgl_listeners.js

@ -63,7 +63,7 @@ function mousedown(e, state, context) {
update_dynamic_stroke(state, context, state.me, canvasp); update_dynamic_stroke(state, context, state.me, canvasp);
state.drawing = true; state.drawing = true;
window.requestAnimationFrame(() => draw(state, context)); schedule_draw(state, context);
} }
function mousemove(e, state, context) { function mousemove(e, state, context) {
@ -89,7 +89,7 @@ function mousemove(e, state, context) {
} }
if (do_draw) { if (do_draw) {
window.requestAnimationFrame(() => draw(state, context)); schedule_draw(state, context);
} }
return false; return false;
@ -120,7 +120,7 @@ function mouseup(e, state, context) {
state.drawing = false; state.drawing = false;
window.requestAnimationFrame(() => draw(state, context)); schedule_draw(state, context);
return; return;
} }
@ -151,7 +151,7 @@ function wheel(e, state, context) {
state.canvas.offset.x -= zoom_offset_x; state.canvas.offset.x -= zoom_offset_x;
state.canvas.offset.y -= zoom_offset_y; state.canvas.offset.y -= zoom_offset_y;
window.requestAnimationFrame(() => draw(state, context)); schedule_draw(state, context);
} }
function touchstart(e, state) { function touchstart(e, state) {
@ -247,7 +247,7 @@ function touchmove(e, state, context) {
update_dynamic_stroke(state, context, state.me, canvasp); update_dynamic_stroke(state, context, state.me, canvasp);
fire_event(predraw_event(canvasp.x, canvasp.y)); fire_event(predraw_event(canvasp.x, canvasp.y));
window.requestAnimationFrame(() => draw(state, context)); schedule_draw(state, context);
} }
return; return;
@ -307,7 +307,7 @@ function touchmove(e, state, context) {
state.touch.first_finger_position = first_finger_position; state.touch.first_finger_position = first_finger_position;
state.touch.second_finger_position = second_finger_position; state.touch.second_finger_position = second_finger_position;
window.requestAnimationFrame(() => draw(state, context)); schedule_draw(state, context);
return; return;
} }
@ -383,8 +383,7 @@ async function on_drop(e, state, context) {
// await queue_event(event); // await queue_event(event);
} }
window.requestAnimationFrame(() => draw(state, context)); schedule_draw(state, context);
return false; return false;
} }

2
client/webgl_shaders.js

@ -131,7 +131,7 @@ function init_webgl(state, context) {
context.canvas.width = width; context.canvas.width = width;
context.canvas.height = height; context.canvas.height = height;
window.requestAnimationFrame(() => draw(state, context)); schedule_draw(state, context);
} }
const resize_observer = new ResizeObserver(resize_canvas); const resize_observer = new ResizeObserver(resize_canvas);

Loading…
Cancel
Save