app: add debug property to button nodes to see their outline

bin/app/Makefile

@@ -22,7 +22,7 @@ DEBUG_FEATURES = --features=enable-filelog,enable-plugins
 
 #DEV_FEATURES = --features=enable-filelog,enable-netdebug,emulate-android
 #DEV_FEATURES = --features=enable-filelog,enable-netdebug,enable-plugins
-DEV_FEATURES = --features=schema-test-scroll-layer,enable-netdebug
+DEV_FEATURES = --features=schema-app,enable-netdebug
 
 default: build-release
 	./darkfi-app

bin/app/src/app/node.rs

@@ -110,6 +110,9 @@ pub fn create_button(name: &str) -> SceneNode {
     let prop = Property::new("priority", PropertyType::Uint32, PropertySubType::Null);
     node.add_property(prop).unwrap();
 
+    let prop = Property::new("debug", PropertyType::Bool, PropertySubType::Null);
+    node.add_property(prop).unwrap();
+
     node.add_signal("click", "Button clicked event", vec![]).unwrap();
 
     node

bin/app/src/app/schema/chat.rs

@@ -343,7 +343,7 @@ pub async fn make(
     });
     layer_node.push_task(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     layer_node.link(node);
 
     // Create shortcut to go back as well
@@ -982,7 +982,7 @@ pub async fn make(
     });
     layer_node.push_task(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     layer_node.link(node);
 
     // Create shortcut to send as well
@@ -1086,7 +1086,7 @@ pub async fn make(
     });
     layer_node.push_task(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     layer_node.link(node);
 
     // Commands help hint
@@ -1133,7 +1133,7 @@ pub async fn make(
     });
     layer_node.push_task(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     cmd_layer_node.link(node);
 
     // Create the actionbar bg

bin/app/src/app/schema/menu/contact.rs

@@ -203,7 +203,7 @@ pub async fn make(
     });
     app.tasks.lock().unwrap().push(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     layer_node.link(node);
 
     let node = create_singleline_edit("nick_edit");
@@ -614,7 +614,7 @@ pub async fn make(
     });
     app.tasks.lock().unwrap().push(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     editlayer_node.link(node);
 
     // Create the done button
@@ -641,7 +641,7 @@ pub async fn make(
     });
     app.tasks.lock().unwrap().push(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     editlayer_node.link(node);
 
     layer_node

bin/app/src/app/schema/menu/mod.rs

@@ -256,6 +256,9 @@ pub async fn make(app: &App, content: SceneNodePtr, i18n_fish: &I18nBabelFish) {
     prop.set_expr(atom, Role::App, 1, code).unwrap();
     prop.set_f32(atom, Role::App, 2, 100.).unwrap();
     prop.set_f32(atom, Role::App, 3, 100.).unwrap();
+    // Uncomment this to see the button outline
+    //node.set_property_bool(atom, Role::App, "debug", true).unwrap();
+    node.set_property_u32(atom, Role::App, "z_index", 1).unwrap();
 
     let (slot, recvr) = Slot::new("write_clicked");
     node.register("click", slot).unwrap();
@@ -271,7 +274,7 @@ pub async fn make(app: &App, content: SceneNodePtr, i18n_fish: &I18nBabelFish) {
     });
     app.tasks.lock().unwrap().push(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     mainlayer_node.link(node);
 
     // Make buttons for cancel and done
@@ -483,7 +486,7 @@ pub async fn make(app: &App, content: SceneNodePtr, i18n_fish: &I18nBabelFish) {
     });
     app.tasks.lock().unwrap().push(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     editlayer_node.link(node);
 
     // Create the done button
@@ -512,6 +515,6 @@ pub async fn make(app: &App, content: SceneNodePtr, i18n_fish: &I18nBabelFish) {
     });
     app.tasks.lock().unwrap().push(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     editlayer_node.link(node);
 }

bin/app/src/app/schema/mod.rs

@@ -473,7 +473,7 @@ pub async fn make(app: &App, window: SceneNodePtr, i18n_fish: &I18nBabelFish) {
     });
     app.tasks.lock().unwrap().push(reconnect_task);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     netlayer_node.link(node);
 
     // Navbar Settings Button
@@ -563,7 +563,7 @@ pub async fn make(app: &App, window: SceneNodePtr, i18n_fish: &I18nBabelFish) {
     });
     app.tasks.lock().unwrap().push(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     settingslayer_node.link(node);
     */
 

bin/app/src/app/schema/settings.rs

@@ -259,7 +259,7 @@ pub async fn make(app: &App, window: SceneNodePtr, i18n_fish: &I18nBabelFish) {
     });
     app.tasks.lock().unwrap().push(listen_click);
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     layer_node.link(node.clone());
 
     // Label: "SETTINGS" title
@@ -1358,7 +1358,7 @@ pub async fn make(app: &App, window: SceneNodePtr, i18n_fish: &I18nBabelFish) {
                 });
                 app.tasks.lock().unwrap().push(listen_click);
 
-                let node = node.setup(Button::new).await;
+                let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
                 setting_layer_node.link(node.clone());
             }
         }
@@ -1404,7 +1404,7 @@ pub async fn make(app: &App, window: SceneNodePtr, i18n_fish: &I18nBabelFish) {
             prop.set_f32(atom, Role::App, 3, SETTING_LABEL_LINESPACE).unwrap();
             node.set_property_u32(atom, Role::App, "z_index", 3).unwrap();
 
-            let node = node.setup(Button::new).await;
+            let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
             setting_layer_node.link(node.clone());
 
             // Handle confirm button click
@@ -1457,7 +1457,7 @@ pub async fn make(app: &App, window: SceneNodePtr, i18n_fish: &I18nBabelFish) {
         prop.set_f32(atom, Role::App, 3, SETTING_LABEL_LINESPACE).unwrap();
         node.set_property_u32(atom, Role::App, "z_index", 3).unwrap();
 
-        let node = node.setup(Button::new).await;
+        let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
         setting_layer_node.link(node.clone());
 
         // Handle reset button click

bin/app/src/app/schema/test.rs

@@ -177,7 +177,7 @@ pub async fn make(app: &App, window: SceneNodePtr, i18n_fish: &I18nBabelFish) {
     //let slot_click = Slot { name: "button_clicked".to_string(), notify: sender };
     //node.register("click", slot_click).unwrap();
 
-    let node = node.setup(Button::new).await;
+    let node = node.setup(|me| Button::new(me, app.renderer.clone())).await;
     layer_node.link(node);
 
     // Create another mesh

bin/app/src/ui/button.rs

@@ -18,6 +18,7 @@
 
 use async_trait::async_trait;
 use miniquad::{MouseButton, TouchPhase};
+use rand::{rngs::OsRng, Rng};
 use std::sync::{
     atomic::{AtomicBool, Ordering},
     Arc,
@@ -25,7 +26,8 @@ use std::sync::{
 use tracing::instrument;
 
 use crate::{
-    gfx::{Point, Rectangle},
+    gfx::{gfxtag, DrawCall, DrawInstruction, DrawMesh, Point, Rectangle, RenderApi, Renderer},
+    mesh::MeshBuilder,
     prop::{PropertyAtomicGuard, PropertyBool, PropertyRect, PropertyUint32, Role},
     scene::{Pimpl, SceneNodeWeak},
 };
@@ -39,26 +41,36 @@ pub type ButtonPtr = Arc<Button>;
 
 pub struct Button {
     node: SceneNodeWeak,
+    renderer: Renderer,
 
     is_active: PropertyBool,
     rect: PropertyRect,
     priority: PropertyUint32,
+    z_index: PropertyUint32,
+    debug: PropertyBool,
+    dc_key: u64,
 
     mouse_btn_held: AtomicBool,
 }
 
 impl Button {
-    pub async fn new(node: SceneNodeWeak) -> Pimpl {
+    pub async fn new(node: SceneNodeWeak, renderer: Renderer) -> Pimpl {
         let node_ref = &node.upgrade().unwrap();
         let is_active = PropertyBool::wrap(node_ref, Role::Internal, "is_active", 0).unwrap();
         let rect = PropertyRect::wrap(node_ref, Role::Internal, "rect").unwrap();
         let priority = PropertyUint32::wrap(node_ref, Role::Internal, "priority", 0).unwrap();
+        let z_index = PropertyUint32::wrap(node_ref, Role::Internal, "z_index", 0).unwrap();
+        let debug = PropertyBool::wrap(node_ref, Role::Internal, "debug", 0).unwrap();
 
         let self_ = Arc::new(Self {
             node,
+            renderer,
             is_active,
             rect,
             priority,
+            z_index,
+            debug,
+            dc_key: OsRng.gen(),
             mouse_btn_held: AtomicBool::new(false),
         });
 
@@ -81,7 +93,27 @@ impl UIObject for Button {
         if let Err(e) = self.rect.eval(atom, &parent_rect) {
             warn!(target: "ui::button", "Rect eval failure: {e}");
         }
-        None
+
+        if !self.debug.get() {
+            return None;
+        }
+
+        let rect = self.rect.get();
+        let mut mesh = MeshBuilder::new(gfxtag!("button_debug"));
+        mesh.draw_outline(&rect, [1., 0., 0., 1.], 1.);
+
+        Some(DrawUpdate {
+            key: self.dc_key,
+            draw_calls: vec![(
+                self.dc_key,
+                DrawCall::new(
+                    vec![DrawInstruction::Draw(mesh.alloc(&self.renderer).draw_untextured())],
+                    vec![],
+                    self.z_index.get(),
+                    "button_debug",
+                ),
+            )],
+        })
     }
 
     async fn handle_mouse_btn_down(&self, btn: MouseButton, mouse_pos: Point) -> bool {