mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 16:07:47 +00:00
LibWeb: Add basic support for requestAnimationFrame()
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:
parent
424a3f5ac3
commit
39045bfde8
5 changed files with 56 additions and 2 deletions
24
Base/home/anon/www/raf.html
Normal file
24
Base/home/anon/www/raf.html
Normal 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>
|
|
@ -24,6 +24,7 @@ h1 {
|
||||||
<p>Some small test pages:</p>
|
<p>Some small test pages:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="demo.html">fun demo</a></li>
|
<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="canvas.html">canvas 2D test</a></li>
|
||||||
<li><a href="events.html">simple DOM events 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>
|
<li><a href="dom.html">simple DOM JS test</a></li>
|
||||||
|
|
|
@ -30,7 +30,19 @@ void CanvasRenderingContext2D::fill_rect(int x, int y, int width, int height)
|
||||||
if (!painter)
|
if (!painter)
|
||||||
return;
|
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()
|
OwnPtr<Gfx::Painter> CanvasRenderingContext2D::painter()
|
||||||
|
|
|
@ -28,6 +28,8 @@ public:
|
||||||
private:
|
private:
|
||||||
explicit CanvasRenderingContext2D(HTMLCanvasElement&);
|
explicit CanvasRenderingContext2D(HTMLCanvasElement&);
|
||||||
|
|
||||||
|
void did_draw(const Gfx::Rect&);
|
||||||
|
|
||||||
OwnPtr<Gfx::Painter> painter();
|
OwnPtr<Gfx::Painter> painter();
|
||||||
|
|
||||||
WeakPtr<HTMLCanvasElement> m_element;
|
WeakPtr<HTMLCanvasElement> m_element;
|
||||||
|
|
|
@ -28,6 +28,7 @@
|
||||||
#include <AK/StringBuilder.h>
|
#include <AK/StringBuilder.h>
|
||||||
#include <LibCore/Timer.h>
|
#include <LibCore/Timer.h>
|
||||||
#include <LibGUI/Application.h>
|
#include <LibGUI/Application.h>
|
||||||
|
#include <LibGUI/DisplayLink.h>
|
||||||
#include <LibGUI/MessageBox.h>
|
#include <LibGUI/MessageBox.h>
|
||||||
#include <LibJS/Interpreter.h>
|
#include <LibJS/Interpreter.h>
|
||||||
#include <LibJS/Runtime/Function.h>
|
#include <LibJS/Runtime/Function.h>
|
||||||
|
@ -360,11 +361,25 @@ JS::Interpreter& Document::interpreter()
|
||||||
(void)Core::Timer::construct(
|
(void)Core::Timer::construct(
|
||||||
arguments[1].to_i32(), [this, callback] {
|
arguments[1].to_i32(), [this, callback] {
|
||||||
const_cast<JS::Function*>(static_cast<const JS::Function*>(callback.cell()))->call(*m_interpreter, {});
|
const_cast<JS::Function*>(static_cast<const JS::Function*>(callback.cell()))->call(*m_interpreter, {});
|
||||||
}).leak_ref();
|
})
|
||||||
|
.leak_ref();
|
||||||
|
|
||||||
return JS::js_undefined();
|
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(
|
m_interpreter->global_object().put_native_property(
|
||||||
"document",
|
"document",
|
||||||
[this](JS::Object*) {
|
[this](JS::Object*) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue