RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 18:07:34 +00:00
Code Issues Activity Actions

LibWeb: Add basic support for requestAnimationFrame()

Browse source 
We now support rAF, driven by GUI::DisplayLink callbacks. It's a bit
strange how we keep registering new callbacks over and over.
That's something we can definitely optimize.

This allows you to update animations/whatever without doing it more
often than the browser can display.
This commit is contained in:
Andreas Kling 2020-03-22 21:15:49 +01:00
parent 424a3f5ac3
commit 39045bfde8
5 changed files with 56 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

24
Base/home/anon/www/raf.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head><title>rAF test</title></head>
<body>
<canvas id=c width=300 height=300></canvas>
<script>
c = document.getElementById('c');
x = c.getContext("2d");
x.fillStyle = 'black';
x.fillRect(0, 0, c.width, c.height);
function raf() {
x.fillStyle = 'red';
x.fillRect(
Math.random() * c.width,
Math.random() * c.height,
Math.random() * 10,
Math.random() * 10
);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>
</body>
</html>

1
Base/home/anon/www/welcome.html
View file

@ -24,6 +24,7 @@ h1 {
<p>Some small test pages:</p>
<ul>
<li><a href="demo.html">fun demo</a></li>
<li><a href="raf.html">requestAnimationFrame test</a></li>
<li><a href="canvas.html">canvas 2D test</a></li>
<li><a href="events.html">simple DOM events test</a></li>
<li><a href="dom.html">simple DOM JS test</a></li>

14
Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
View file

@ -30,7 +30,19 @@ void CanvasRenderingContext2D::fill_rect(int x, int y, int width, int height)
if (!painter)
return;
painter->fill_rect({ x, y, width, height }, m_fill_style);
Gfx::Rect rect(x, y, width, height);
painter->fill_rect(rect, m_fill_style);
did_draw(rect);
}
void CanvasRenderingContext2D::did_draw(const Gfx::Rect&)
{
// FIXME: Make use of the rect to reduce the invalidated area when possible.
if (!m_element)
return;
if (!m_element->layout_node())
return;
m_element->layout_node()->set_needs_display();
}
OwnPtr<Gfx::Painter> CanvasRenderingContext2D::painter()

2
Libraries/LibWeb/DOM/CanvasRenderingContext2D.h
View file

@ -28,6 +28,8 @@ public:
private:
explicit CanvasRenderingContext2D(HTMLCanvasElement&);
void did_draw(const Gfx::Rect&);
OwnPtr<Gfx::Painter> painter();
WeakPtr<HTMLCanvasElement> m_element;

17
Libraries/LibWeb/DOM/Document.cpp
View file

@ -28,6 +28,7 @@
#include <AK/StringBuilder.h>
#include <LibCore/Timer.h>
#include <LibGUI/Application.h>
#include <LibGUI/DisplayLink.h>
#include <LibGUI/MessageBox.h>
#include <LibJS/Interpreter.h>
#include <LibJS/Runtime/Function.h>
@ -360,11 +361,25 @@ JS::Interpreter& Document::interpreter()
(void)Core::Timer::construct(
arguments[1].to_i32(), [this, callback] {
const_cast<JS::Function*>(static_cast<const JS::Function*>(callback.cell()))->call(*m_interpreter, {});
}).leak_ref();
})
.leak_ref();
return JS::js_undefined();
});
m_interpreter->global_object().put_native_function("requestAnimationFrame", [this](JS::Object*, const Vector<JS::Value>& arguments) -> JS::Value {
if (arguments.size() < 1)
return JS::js_undefined();
ASSERT(arguments[0].is_object());
ASSERT(arguments[0].as_object()->is_function());
auto callback = make_handle(const_cast<JS::Object*>(arguments[0].as_object()));
i32 link_id = GUI::DisplayLink::register_callback([this, callback](i32 link_id) {
const_cast<JS::Function*>(static_cast<const JS::Function*>(callback.cell()))->call(*m_interpreter, {});
GUI::DisplayLink::unregister_callback(link_id);
});
return JS::Value(link_id);
});
m_interpreter->global_object().put_native_property(
"document",
[this](JS::Object*) {