Move mithril redraws to rafScheduler
Mithril redraw executes once every 16ms, not once per animation frame.
If a mithril redraw takes more than 16ms, we can end up with multiple
redraws per animation frame. See mithril code here:
https://github.com/MithrilJS/mithril.js/blob/v1_1_x/api/redraw.js
Multiple redraw jank screenshot:
https://screenshot.googleplex.com/97PPSGxh69D
Devtools trace: http://bit.ly/2BG5oEN
This CL moves mithril redraws to rafScheduler. rafScheduler now has
scheduleRedraw and scheduleFullRedraw.
In the animation frame callback, we want to do a synchronous mithril
redraw. m.redraw.sync is available in tip of tree mithril, but not in
the latest stable version 1.1.6. Until that's available, we use m.render
to do the synchronous redraw.
Since rafScheduler now runs mithril redraws, it can also directly run
the canvas redraws right after, and we do not need CanvasRedrawTrigger
to hook canvas redraws to mithril redraws.
Change-Id: I06e42b1d6aa17dbef428b66d3f0d20f8fea7edfa
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index acbb92e..62d28fd 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -49,11 +49,11 @@
return m('.track-content', {
onmousemove: (e: MouseEvent) => {
attrs.track.onMouseMove({x: e.layerX, y: e.layerY});
- globals.rafScheduler.scheduleOneRedraw();
+ globals.rafScheduler.scheduleRedraw();
},
onmouseout: () => {
attrs.track.onMouseOut();
- globals.rafScheduler.scheduleOneRedraw();
+ globals.rafScheduler.scheduleRedraw();
},
}, );
}
