karm-ui: Added slide in animation.

skift-org · Jul 18, 2023 · 6f2283c · 6f2283c
1 parent f9653e0
commit 6f2283c
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 28 deletions.
diff --git a/src/apps/hideo-image-viewer/editor.cpp b/src/apps/hideo-image-viewer/editor.cpp
@@ -1,4 +1,5 @@
 #include <karm-fmt/case.h>
+#include <karm-ui/drag.h>
 #include <karm-ui/input.h>
 #include <karm-ui/scafold.h>
 #include <karm-ui/scroll.h>
@@ -133,11 +134,12 @@ Ui::Child editorFilters(State const &s) {
 
 Ui::Child editorControls(State const &state) {
     return vflow(
-        4,
-        editorFilterControls(state.filter),
-        editorFilters(state) |
-            Ui::spacing({8, 0, 8, 8}) |
-            Ui::hscroll());
+               4,
+               editorFilterControls(state.filter),
+               editorFilters(state) |
+                   Ui::spacing({8, 0, 8, 8}) |
+                   Ui::hscroll()) |
+           Ui::slideIn(Ui::SlideFrom::BOTTOM);
 }
 
 } // namespace ImageViewer
diff --git a/src/apps/hideo-shell/main.cpp b/src/apps/hideo-shell/main.cpp
@@ -31,7 +31,7 @@ Ui::Child statusbar() {
 Ui::Child statusbarButton(State const &state) {
     return Ui::button(
         [&](Ui::Node &n) {
-            Ui::showDialog(n, sysFlyout(state));
+            Ui::showDialog(n, sysFlyout(state) | Ui::slideIn(Ui::SlideFrom::TOP));
         },
         statusbar());
 }
@@ -40,7 +40,7 @@ Ui::Child statusbarButton(State const &state) {
 
 Ui::Child navbar() {
     return Ui::buttonHandle([](Ui::Node &n) {
-        Ui::showDialog(n, appsFlyout());
+        Ui::showDialog(n, appsFlyout() | Ui::slideIn(Ui::SlideFrom::BOTTOM));
     });
 }
 
@@ -85,26 +85,30 @@ Ui::Child taskbar(State const &) {
 
 Ui::Child panels(State const &state) {
     return Ui::stack(
-               state.activePanel == Panel::APPS ? appsPanel() | Ui::align(Layout::Align::START | Layout::Align::TOP) : Ui::empty(),
-               state.activePanel == Panel::CALENDAR ? Ui::empty() | panel() | Ui::align(Layout::Align::HCENTER | Layout::Align::TOP) : Ui::empty(),
-               state.activePanel == Panel::NOTIS ? sysPanel(state) | Ui::align(Layout::Align::END | Layout::Align::TOP) : Ui::empty()) |
+               state.activePanel == Panel::APPS ? appsPanel() | Ui::align(Layout::Align::START | Layout::Align::TOP) | Ui::slideIn(Ui::SlideFrom::TOP) : Ui::empty(),
+               state.activePanel == Panel::CALENDAR ? Ui::empty() | panel() | Ui::align(Layout::Align::HCENTER | Layout::Align::TOP) | Ui::slideIn(Ui::SlideFrom::TOP) : Ui::empty(),
+               state.activePanel == Panel::NOTIS ? sysPanel(state) | Ui::align(Layout::Align::END | Layout::Align::TOP) | Ui::slideIn(Ui::SlideFrom::TOP) : Ui::empty()) |
            Ui::spacing({8, 38});
 }
 
 /* --- Shells --------------------------------------------------------------- */
 
 Ui::Child tablet(State const &state) {
     return Ui::vflow(
-        statusbarButton(state),
-        Ui::separator(),
+        Ui::vflow(
+            statusbarButton(state),
+            Ui::separator()) |
+            Ui::slideIn(Ui::SlideFrom::TOP),
         Ui::grow(NONE),
-        navbar());
+        navbar() | Ui::slideIn(Ui::SlideFrom::BOTTOM));
 }
 
 Ui::Child desktop(State const &state) {
     return Ui::vflow(
-        taskbar(state),
-        Ui::separator(),
+        Ui::vflow(
+            taskbar(state),
+            Ui::separator()) |
+            Ui::slideIn(Ui::SlideFrom::TOP),
         Ui::grow(NONE));
 }
 

diff --git a/src/apps/hideo-shell/tray-apps.cpp b/src/apps/hideo-shell/tray-apps.cpp
@@ -22,7 +22,7 @@ Ui::Child searchInput() {
                .backgroundPaint = Ui::GRAY900,
            }) |
            Ui::button([](auto &n) {
-               Ui::showDialog(n, keyboardFlyout());
+               Ui::showDialog(n, keyboardFlyout() | Ui::slideIn(Ui::SlideFrom::BOTTOM));
            });
 }
 

diff --git a/src/libs/karm-ui/anim.cpp b/src/libs/karm-ui/anim.cpp
@@ -0,0 +1,62 @@
+#include "anim.h"
+
+namespace Karm::Ui {
+
+/* --- Slide In ------------------------------------------------------------- */
+
+struct SlideIn : public ProxyNode<SlideIn> {
+    SlideFrom _from;
+    Easedf _slide{};
+
+    SlideIn(SlideFrom from, Ui::Child child)
+        : ProxyNode(std::move(child)),
+          _from(from) {
+    }
+
+    Math::Vec2f outside() {
+        switch (_from) {
+        case SlideFrom::START:
+            return {(f64)-bound().width, 0};
+
+        case SlideFrom::END:
+            return {(f64)bound().width, 0};
+
+        case SlideFrom::TOP:
+            return {0, (f64)-bound().height};
+
+        case SlideFrom::BOTTOM:
+            return {0, (f64)bound().height};
+        }
+    }
+
+    void paint(Gfx::Context &g, Math::Recti r) override {
+        g.save();
+
+        g.clip(bound());
+        auto anim = lerp(outside(), Math::Vec2f{}, _slide.value());
+        g.origin(anim.cast<isize>());
+        r.xy = r.xy - anim.cast<isize>();
+        child().paint(g, r);
+
+        g.restore();
+    }
+
+    void event(Events::Event &e) override {
+        if (_slide.needRepaint(*this, e))
+            Ui::shouldRepaint(*this, bound());
+
+        Ui::ProxyNode<SlideIn>::event(e);
+    }
+
+    void attach(Node *parent) override {
+        Ui::ProxyNode<SlideIn>::attach(parent);
+        _slide.animate(*this, 1.0, 0.25, Math::Easing::cubicOut);
+    }
+};
+
+Child slideIn(SlideFrom from, Ui::Child child) {
+    return makeStrong<SlideIn>(from, std::move(child));
+}
+
+
+} // namespace Karm::Ui
diff --git a/src/libs/karm-ui/anim.h b/src/libs/karm-ui/anim.h
@@ -155,8 +155,21 @@ using Eased2i = Eased2<isize>;
 
 using Eased2f = Eased2<f64>;
 
-struct Layer : public ProxyNode<Layer> {
-    Opt<Media::Image> _buffer;
+/* --- Slide In ------------------------------------------------------------- */
+
+enum struct SlideFrom {
+    START,
+    END,
+    TOP,
+    BOTTOM,
 };
 
+Child slideIn(SlideFrom from, Child child);
+
+inline auto slideIn(SlideFrom from) {
+    return [=](Child child) {
+        return slideIn(from, child);
+    };
+}
+
 } // namespace Karm::Ui
diff --git a/src/libs/karm-ui/drag.cpp b/src/libs/karm-ui/drag.cpp
@@ -134,7 +134,6 @@ struct DragRegion : public ProxyNode<DragRegion> {
 
             if (m.type == Events::MouseEvent::MOVE) {
                 if (_grabbed) {
-
                     DragEvent de = {.type = DragEvent::DRAG, .delta = m.delta};
                     bubble(de);
 

diff --git a/src/libs/karm-ui/host.h b/src/libs/karm-ui/host.h
@@ -218,6 +218,7 @@ struct Host : public Node {
             logWarn("Layout took {}ms", elapsed.toMSecs());
             logDebug("There is {} nodes alive", debugNodeCount);
         }
+        _shouldAnimate = true;
     }
 
     Res<> run() {
@@ -236,13 +237,6 @@ struct Host : public Node {
 
             wait(waitTime);
             lastFrame = Sys::now();
-
-            if (_shouldAnimate) {
-                _shouldAnimate = false;
-                Events::AnimateEvent e{FRAME_TIME};
-                event(e);
-            }
-
             pump();
 
             if (_shouldLayout) {
@@ -251,6 +245,12 @@ struct Host : public Node {
                 _dirty.pushBack(bound());
             }
 
+            if (_shouldAnimate) {
+                _shouldAnimate = false;
+                Events::AnimateEvent e{FRAME_TIME};
+                event(e);
+            }
+
             if (_dirty.len() > 0) {
                 paint();
                 _dirty.clear();

diff --git a/src/libs/karm-ui/row.cpp b/src/libs/karm-ui/row.cpp
@@ -1,5 +1,6 @@
 #include "row.h"
 
+#include "drag.h"
 #include "scroll.h"
 
 namespace Karm::Ui {
@@ -170,7 +171,8 @@ Child navTree(Mdi::Icon i, String title, Child child) {
                         icon(state.value() ? Mdi::CHEVRON_UP : Mdi::CHEVRON_DOWN, 18)))),
 
             state.value()
-                ? child | spacing({32, 0, 0, 0})
+                ? child | spacing({32, 0, 0, 0}) |
+                      slideIn(SlideFrom::TOP)
                 : empty());
     });
 }
@@ -187,7 +189,8 @@ Child treeRow(Opt<Child> leading, String title, Opt<String> subtitle, Child chil
                 icon(state.value() ? Mdi::CHEVRON_UP : Mdi::CHEVRON_DOWN, 24)),
             state.value() ? spacing(
                                 {38, 0, 0, 0},
-                                child)
+                                child) |
+                                slideIn(SlideFrom::TOP)
                           : empty());
     });
 }