feat(ui): implement exit animation

Author: std-microblock

src/ui/widget.cc

@@ -2,14 +2,33 @@
 #include "ui.h"
 #include <chrono>
 #include <thread>
+
+void ui::widget::update_children_basic(update_context &ctx,
+                                       std::shared_ptr<widget> &w) {
+  if (!w)
+    return;
+  // handle dying time
+  if (w->dying_time.has_value() && !*w->dying_time) {
+    w = nullptr;
+    return;
+  }
+  update_context upd = ctx.with_offset(*x, *y);
+  w->update(upd);
+}
+
+void ui::widget::render_children_basic(nanovg_context ctx,
+                                       std::shared_ptr<widget> &w) {
+  if (!w)
+    return;
+  ctx.save();
+  w->render(ctx.with_offset(*x, *y));
+  ctx.restore();
+}
+
 void ui::widget::render(nanovg_context ctx) {
   float orig_offset_x = ctx.offset_x, orig_offset_y = ctx.offset_y;
   for (auto &child : children) {
-    ctx.offset_x = *x + orig_offset_x;
-    ctx.offset_y = *y + orig_offset_y;
-    ctx.save();
-    child->render(ctx);
-    ctx.restore();
+    render_children_basic(ctx, child);
   }
 
   ctx.offset_x = orig_offset_x;
@@ -23,13 +42,18 @@ void ui::widget::update(update_context &ctx) {
   float orig_offset_x = ctx.offset_x, orig_offset_y = ctx.offset_y;
 
   for (auto &child : children) {
-    ctx.offset_x = *x + orig_offset_x;
-    ctx.offset_y = *y + orig_offset_y;
-    child->update(ctx);
+    update_children_basic(ctx, child);
   }
 
+  // Remove dead children
+  std::erase_if(children, [](auto &child) { return !child; });
+
   ctx.offset_x = orig_offset_x;
   ctx.offset_y = orig_offset_y;
+
+  if (dying_time.has_value()) {
+    *dying_time = std::max(0.f, *dying_time - ctx.delta_t);
+  }
 }
 void ui::widget::add_child(std::shared_ptr<widget> child) {
   children.push_back(std::move(child));

src/ui/widget.h

@@ -76,6 +76,11 @@ struct widget : std::enable_shared_from_this<widget> {
   virtual ~widget() = default;
   virtual float measure_height(update_context &ctx);
   virtual float measure_width(update_context &ctx);
+  // Update children with the offset.
+  // Also deal with the dying time. (If the widget is died, it will be set to nullptr)
+  void update_children_basic(update_context &ctx, std::shared_ptr<widget> &w);
+  // Render children with the offset.
+  void render_children_basic(nanovg_context ctx, std::shared_ptr<widget> &w);
 
   template <typename T> inline auto downcast() {
     return std::dynamic_pointer_cast<T>(this->shared_from_this());
@@ -108,6 +113,10 @@ struct widget : std::enable_shared_from_this<widget> {
     }
     return res;
   }
+
+  // Time until the widget is removed from the tree
+  // in milliseconds
+  std::optional<float> dying_time;
 };
 
 // A widget with child which lays out children in a row or column

src/ui_test/test.cc

@@ -183,12 +183,12 @@ struct menu_widget : public ui::widget_flex {
     bg->y->reset_to(y->dest() - bg_padding_vertical);
     bg->update(ctx);
 
-    if (ctx.mouse_clicked) {
-      std::println("Clicked on menu");
-      auto i = items;
-      ctx.rt.root->children.clear();
-      ctx.rt.root->emplace_child<menu_widget>(i, ctx.mouse_x, ctx.mouse_y);
-    }
+    // if (ctx.mouse_clicked) {
+    //   std::println("Clicked on menu");
+    //   auto i = items;
+    //   ctx.rt.root->children.clear();
+    //   ctx.rt.root->emplace_child<menu_widget>(i, ctx.mouse_x, ctx.mouse_y);
+    // }
   }
 
   void render(ui::nanovg_context ctx) override {
@@ -197,6 +197,43 @@ struct menu_widget : public ui::widget_flex {
   }
 };
 
+struct dying_widget_test : public ui::widget {
+  using super = ui::widget;
+  
+  ui::sp_anim_float opacity = anim_float(0, 200);
+
+  dying_widget_test() : super() {
+    x->animate_to(100);
+    y->animate_to(100);
+    width->animate_to(100);
+    height->animate_to(100);
+    opacity->animate_to(255);
+  }
+
+  void render(ui::nanovg_context ctx) override {
+    super::render(ctx);
+    std::println("Rendering dying widget");
+    ctx.fillColor(nvgRGBAf(1, 0, 0, *opacity / 255.f));
+    ctx.fillRect(*x, *y, *width, *height);
+  }
+
+
+  void update(ui::update_context &ctx) override {
+    super::update(ctx);
+    if (ctx.mouse_down_on(this)) {
+      dying_time = 200;
+    }
+
+    if (dying_time) {
+      opacity->animate_to(0);
+    } else if (ctx.hovered(this)) {
+      opacity->animate_to(128);
+    } else {
+      opacity->animate_to(255);
+    }    
+  }
+};
+
 int main() {
 
   if (auto res = ui::render_target::init_global(); !res) {
@@ -212,6 +249,7 @@ int main() {
   }
 
   rt.root->emplace_child<menu_widget>(items, 20, 20);
+  rt.root->emplace_child<dying_widget_test>();
 
   nvgCreateFont(rt.nvg, "Yahei", "C:\\WINDOWS\\FONTS\\msyh.ttc");