From 317292318a6ba9218c93cab7c2cecb7d5aedc934 Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Tue, 5 Mar 2019 02:06:07 +0100
Subject: [PATCH] remove sidebar and make panels popup

---
 data/layout.xml           |  38 ++++-------
 data/ui/popup-tick-up.png | Bin 0 -> 343 bytes
 src/app.h                 |   1 -
 src/app_layout.cpp        | 130 +++++++++++++++++++++++++++-----------
 src/node.cpp              |  25 +++++++-
 src/node.h                |   5 ++
 src/node_checkbox.cpp     |   2 +-
 src/node_panel_color.cpp  |  20 ++++++
 src/node_panel_color.h    |   2 +
 src/node_panel_grid.cpp   |  20 ++++++
 src/node_panel_grid.h     |   3 +
 src/node_panel_layer.cpp  |  20 ++++++
 src/node_panel_layer.h    |   2 +
 src/node_panel_stroke.cpp |  20 ++++++
 src/node_panel_stroke.h   |   3 +
 src/node_scroll.cpp       |  29 ++++++++-
 src/node_scroll.h         |   3 +
 17 files changed, 256 insertions(+), 67 deletions(-)
 create mode 100644 data/ui/popup-tick-up.png

diff --git a/data/layout.xml b/data/layout.xml
index af89495..3f86222 100644
--- a/data/layout.xml
+++ b/data/layout.xml
@@ -24,7 +24,7 @@
   
   <!--layers panel template-->
   <layout id="tpl-panel-layers">
-    <node width="250" margin="0 0 10 0" rtl="ltr">
+    <node width="350" margin="0 0 10 0" rtl="ltr">
       <border height="30" color=".5" align="center" justify="center" margin="0 0 0 0">
         <text text="Layers" color="1 1 1 1"/>
       </border>
@@ -127,11 +127,11 @@
 
   <!--color panel-->
   <layout id="tpl-panel-color">
-    <node width="250" margin="0 0 10 0" rtl="ltr">
+    <node width="350" margin="0 0 10 0" rtl="ltr">
       <border height="30" color=".5" align="center" justify="center">
         <text text="Colors" color="1 1 1 1"/>
       </border>
-      <border color=".3" pad="5" dir="row" height="250">
+      <border color=".3" pad="5" dir="row" height="350">
         <color-quad id="quad" color="1 0 0 1" height="100%" grow="1"/>
         <node width="30" dir="col" pad="0 0 0 5"><slider-hue id="hue"/></node>
       </border>
@@ -140,14 +140,14 @@
 
   <!--stroke panel-->
   <layout id="tpl-panel-stroke">
-    <node width="250" margin="0 0 10 0" rtl="ltr">
-      <border height="30" color=".5" align="center" justify="center" dir="row">
-        <node align="center" width="1" grow="1">
+    <node width="350" margin="0 0 10 0" rtl="ltr">
+      <border height="30" color=".4" align="center" justify="flex-end" dir="row">
+        <!--<node align="center" width="1" grow="1">
           <text text="Brush Settings"/>
-        </node>
+        </node>-->
         <button id="button-unfold-all" width="30" height="18" text="+" margin="0 5 0 0"/>
       </border>
-      <border color=".3" pad="5" dir="col" width="100%">
+      <border color=".4" pad="5" dir="col" width="100%">
 
         <!-- PREVIEW -->
 
@@ -155,6 +155,8 @@
           <stroke-preview id="canvas" width="100%" height="100"/>
         </button-custom>
 
+        <scroll id="scroller" scroll-color=".3" margin="5 5 5 10" max-height="500" color=".4">
+        
         <!-- PRESET AND SHAPE -->
 
         <node dir="row">
@@ -629,14 +631,15 @@
             </node>
           </node>
         </node>
-        
+
+        </scroll>
       </border>
     </node>
   </layout>
 
   <!--grids panel-->
   <layout id="tpl-panel-grid">
-    <node width="250" margin="0 0 10 0" rtl="ltr">
+    <node width="350" margin="0 0 10 0" rtl="ltr">
       <border height="30" color=".5" align="center" justify="center">
         <text text="Grids" color="1 1 1 1"/>
       </border>
@@ -1587,21 +1590,6 @@ Here's a list of what's available in this release.
             </button-custom>            
           </node>
         </border>
-        <!-- side bar -->
-        <node height="100%" dir="row" shrink="1">
-          <scroll id="panels" pad="5 5 5 5" margin="0 0 0 0" color=".3 .3 .3 .4" height="100%" dir="col" wrap="0" shrink="1">
-            <!--Stroke-->
-            <!--<panel-stroke id="panel-stroke"/>-->
-            <!--Brushes-->
-            <!--<panel-brush id="panel-brush"/>-->
-            <!--Layers-->
-            <!--<panel-layer id="panel-layer"/>-->
-            <!--Colors-->
-            <!--<panel-color id="panel-color"/>-->
-            <!--Grids-->
-            <!--<panel-grid/>-->
-          </scroll>
-        </node>
         
         <!--quick bar-->
         <node justify="center" align="center">
diff --git a/data/ui/popup-tick-up.png b/data/ui/popup-tick-up.png
new file mode 100644
index 0000000000000000000000000000000000000000..e607a186f3eba6b372c4ac512b928535f5558952
GIT binary patch
literal 343
zcmeAS@N?(olHy`uVBq!ia0vp^4nVBH!VDw>HYaZfQY`6?zK#qG8~eHcB(j1elRbib
z85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#NP(nJuC&U#<r=_KNdU^s$
zUteE8KfmnkY#<vb-sOK`Gmv5{3GxeO=t%mOmV5q_>>Hp6W0JSK3quF1tOt<8S>O>_
z%)r1c1j3A$?$-SQ3buQ?IEGl9u03;6(7}PH<)QIn2HO`7tn;QUU~*%>WOvT;Wa{Ss
zuiw>Z-rS}5@mS~kzlG<%Z0N|55m<PHH{cPY#zaP^Jq(Im0z&cvLZTcU@*Etj4o=Jy
z3>Xx27&_PrT(~U`G4eiaY-4Cp6iDFU&|qTj;%M-4aZq(yAYd54!IaX(I5VPkTfD37
Wn{LLx&kTW1V(@hJb6Mw<&;$T>%Vcf<

literal 0
HcmV?d00001

diff --git a/src/app.h b/src/app.h
index b5e88d2..c86dc69 100644
--- a/src/app.h
+++ b/src/app.h
@@ -68,7 +68,6 @@ public:
     NodePanelQuick* quick;
     NodeCanvas* canvas;
     Node* current_panel = nullptr;
-    NodeScroll* panels;
     const uint16_t main_id = const_hash("main");
     const std::array<int, 6> res_map{ 512, 1024, 1536, 2048, 4096, 8192 };
     const std::array<std::string, 6> res_map_str{ "2K", "4K", "6K", "8K", "16K", "32K" };
diff --git a/src/app_layout.cpp b/src/app_layout.cpp
index 7c1edc1..95753d9 100644
--- a/src/app_layout.cpp
+++ b/src/app_layout.cpp
@@ -85,30 +85,20 @@ void App::init_toolbar_main()
     }
 }
 
-template <class T> std::shared_ptr<T> find_or_create_panel(NodeScroll* panels)
+template <class T> std::shared_ptr<T> create_panel(LayoutManager& manager)
 {
     std::shared_ptr<T> ret;
-    auto node_find = std::find_if(panels->m_children.begin(), panels->m_children.end(),
-        [](const std::shared_ptr<Node>&p) { return (bool)std::dynamic_pointer_cast<T>(p); });
-    if (node_find != panels->m_children.end())
-    {
-        ret = std::static_pointer_cast<T>(*node_find);
-    }
-    else
-    {
-        ret = std::make_shared<T>();
-        ret->m_manager = panels->m_manager;
-        ret->init();
-        ret->create();
-        ret->loaded();
-    }
+    ret = std::make_shared<T>();
+    ret->m_manager = &manager;
+    ret->init();
+    ret->create();
+    ret->loaded();
     return ret;
 }
 
 void App::init_sidebar()
 {
     sidebar = layout[main_id]->find<NodeBorder>("sidebar");
-    panels = layout[main_id]->find<NodeScroll>("panels");
     canvas = layout[main_id]->find<NodeCanvas>("paint-canvas");
     quick = layout[main_id]->find<NodePanelQuick>("panel-quick");
 
@@ -118,10 +108,10 @@ void App::init_sidebar()
     //stroke = layout[main_id]->find<NodePanelStroke>("panel-stroke");
 
     //brushes = find_or_create_panel<NodePanelBrush>(panels);
-    layers = find_or_create_panel<NodePanelLayer>(panels);
-    color = find_or_create_panel<NodePanelColor>(panels);
-    stroke = find_or_create_panel<NodePanelStroke>(panels);
-    grid = find_or_create_panel<NodePanelGrid>(panels);
+    layers = create_panel<NodePanelLayer>(layout);
+    color = create_panel<NodePanelColor>(layout);
+    stroke = create_panel<NodePanelStroke>(layout);
+    grid = create_panel<NodePanelGrid>(layout);
     //presets = find_or_create_panel<NodePanelBrushPreset>(panels);
 
     canvas->m_canvas->on_mode_changed = [this](kCanvasMode prev, kCanvasMode mode) {
@@ -230,9 +220,28 @@ void App::init_sidebar()
     if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-stroke"))
     {
         button->on_click = [this, button](Node*) {
-            panels->get_child_index(stroke.get()) == -1 ? panels->add_child(stroke) : panels->remove_child(stroke.get());
-            panels->fix_scroll();
-            button->set_active(panels->get_child_index(stroke.get()) != -1);
+            auto screen = layout[main_id]->m_size;
+            glm::vec2 pos = button->m_pos + glm::vec2(button->m_size.x * 0.5f, button->m_size.y);
+            layout[main_id]->add_child(stroke);
+            auto tick = layout[main_id]->add_child<NodeImage>();
+            tick->SetPositioning(YGPositionTypeAbsolute);
+            tick->SetSize(32, 16);
+            tick->SetPosition(pos.x - 16, pos.y);
+            tick->set_image("data/ui/popup-tick-up.png");
+            layout[main_id]->update();
+
+            stroke->SetPosition(pos.x - stroke->m_size.x / 2.f, pos.y + 16);
+            stroke->SetPositioning(YGPositionTypeAbsolute);
+            stroke->m_capture_children = false;
+            stroke->m_mouse_ignore = false;
+            stroke->mouse_capture();
+            auto scroll = stroke->find<NodeScroll>("scroller");
+            scroll->SetMaxHeight(glm::max(100.f, screen.y - pos.y - 200.f));
+            layout[main_id]->update();
+
+            stroke->on_popup_close = [this, tick](Node*) {
+                tick->destroy();
+            };
         };
     }
     //if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-brush"))
@@ -254,27 +263,76 @@ void App::init_sidebar()
     if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-color"))
     {
         button->on_click = [this, button](Node*) {
-            panels->get_child_index(color.get()) == -1 ? panels->add_child(color) : panels->remove_child(color.get());
-            panels->fix_scroll();
-            button->set_active(panels->get_child_index(color.get()) != -1);
-//             auto pick = layout[main_id]->add_child<NodeColorPicker>();
-//             pick->m_color_cur->m_color = Canvas::I->m_current_brush->m_tip_color;
+            auto screen = layout[main_id]->m_size;
+            glm::vec2 pos = button->m_pos + glm::vec2(button->m_size.x * 0.5f, button->m_size.y);
+            layout[main_id]->add_child(color);
+            auto tick = layout[main_id]->add_child<NodeImage>();
+            tick->SetPositioning(YGPositionTypeAbsolute);
+            tick->SetSize(32, 16);
+            tick->SetPosition(pos.x - 16, pos.y);
+            tick->set_image("data/ui/popup-tick-up.png");
+            layout[main_id]->update();
+
+            color->SetPosition(pos.x - color->m_size.x / 2.f, pos.y + 16);
+            color->SetPositioning(YGPositionTypeAbsolute);
+            color->m_capture_children = false;
+            color->m_mouse_ignore = false;
+            color->mouse_capture();
+            layout[main_id]->update();
+
+            color->on_popup_close = [this, tick](Node*) {
+                tick->destroy();
+            };
         };
     }
     if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-layer"))
     {
         button->on_click = [this, button](Node*) {
-            panels->get_child_index(layers.get()) == -1 ? panels->add_child(layers) : panels->remove_child(layers.get());
-            panels->fix_scroll();
-            button->set_active(panels->get_child_index(layers.get()) != -1);
+            auto screen = layout[main_id]->m_size;
+            glm::vec2 pos = button->m_pos + glm::vec2(button->m_size.x * 0.5f, button->m_size.y);
+            layout[main_id]->add_child(layers);
+            auto tick = layout[main_id]->add_child<NodeImage>();
+            tick->SetPositioning(YGPositionTypeAbsolute);
+            tick->SetSize(32, 16);
+            tick->SetPosition(pos.x - 16, pos.y);
+            tick->set_image("data/ui/popup-tick-up.png");
+            layout[main_id]->update();
+
+            layers->SetPosition(pos.x - layers->m_size.x / 2.f, pos.y + 16);
+            layers->SetPositioning(YGPositionTypeAbsolute);
+            layers->m_capture_children = false;
+            layers->m_mouse_ignore = false;
+            layers->mouse_capture();
+            layout[main_id]->update();
+
+            layers->on_popup_close = [this, tick](Node*) {
+                tick->destroy();
+            };
         };
     }
     if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-grids-panel"))
     {
         button->on_click = [this, button](Node*) {
-            panels->get_child_index(grid.get()) == -1 ? panels->add_child(grid) : panels->remove_child(grid.get());
-            panels->fix_scroll();
-            button->set_active(panels->get_child_index(grid.get()) != -1);
+            auto screen = layout[main_id]->m_size;
+            glm::vec2 pos = button->m_pos + glm::vec2(button->m_size.x * 0.5f, button->m_size.y);
+            layout[main_id]->add_child(grid);
+            auto tick = layout[main_id]->add_child<NodeImage>();
+            tick->SetPositioning(YGPositionTypeAbsolute);
+            tick->SetSize(32, 16);
+            tick->SetPosition(pos.x - 16, pos.y);
+            tick->set_image("data/ui/popup-tick-up.png");
+            layout[main_id]->update();
+
+            grid->SetPosition(pos.x - grid->m_size.x / 2.f, pos.y + 16);
+            grid->SetPositioning(YGPositionTypeAbsolute);
+            grid->m_capture_children = false;
+            grid->m_mouse_ignore = false;
+            grid->mouse_capture();
+            layout[main_id]->update();
+
+            grid->on_popup_close = [this, tick](Node*) {
+                tick->destroy();
+            };
         };
     }
 }
@@ -954,10 +1012,6 @@ void App::initLayout()
     {
         LOG("restore layout");
         layout.restore_context();
-        //if (panels->get_child_index(brushes.get()) == -1) brushes->restore_context();
-        if (panels->get_child_index(layers.get()) == -1) layers->restore_context();
-        if (panels->get_child_index(color.get()) == -1) color->restore_context();
-        if (panels->get_child_index(stroke.get()) == -1) stroke->restore_context();
     }
     else
         layout.load("data/layout.xml");
diff --git a/src/node.cpp b/src/node.cpp
index be48950..b1fcb49 100644
--- a/src/node.cpp
+++ b/src/node.cpp
@@ -361,7 +361,10 @@ glm::vec4 Node::get_children_rect() const
         return glm::vec4(0);
     glm::vec4 ret = m_children[0]->m_clip_uncut;
     for (auto& c : m_children)
-        ret = rect_union(ret, c->m_clip_uncut);
+    {
+        if (c->m_display)
+            ret = rect_union(ret, c->m_clip_uncut);
+    }
     return ret;
 }
 
@@ -548,6 +551,26 @@ void Node::SetSize(glm::vec2 value)
     m_size = value;
 }
 
+void Node::SetMaxWidth(float value)
+{
+    YGNodeStyleSetMaxWidth(y_node, value);
+}
+
+void Node::SetMaxWidthP(float value)
+{
+    YGNodeStyleSetMaxWidthPercent(y_node, value);
+}
+
+void Node::SetMaxHeight(float value)
+{
+    YGNodeStyleSetMaxHeight(y_node, value);
+}
+
+void Node::SetMaxHeightP(float value)
+{
+    YGNodeStyleSetMaxHeightPercent(y_node, value);
+}
+
 void Node::SetPadding(float t, float r, float b, float l)
 {
     YGNodeStyleSetPadding(y_node, YGEdgeTop, t);
diff --git a/src/node.h b/src/node.h
index 4c5dc6f..6f1b02f 100644
--- a/src/node.h
+++ b/src/node.h
@@ -47,6 +47,7 @@ enum class kAttribute : uint16_t
     RTL = const_hash("rtl"),
     AutoSize = const_hash("autosize"),
     MouseCapture = const_hash("mouse-capture"),
+    ScrollColor = const_hash("scroll-color"),
 };
 
 enum class kWidget : uint16_t
@@ -141,6 +142,10 @@ public:
     void SetHeightP(float value);
     void SetSize(glm::vec2 value);
     void SetSize(float w, float h);
+    void SetMaxWidth(float value);
+    void SetMaxWidthP(float value);
+    void SetMaxHeight(float value);
+    void SetMaxHeightP(float value);
 
     void SetPadding(float t, float r, float b, float l);
     glm::vec4 GetPadding() const;
diff --git a/src/node_checkbox.cpp b/src/node_checkbox.cpp
index f776d3b..e7cfd93 100644
--- a/src/node_checkbox.cpp
+++ b/src/node_checkbox.cpp
@@ -27,7 +27,7 @@ void NodeCheckBox::init()
     add_child(m_outer);
     m_outer->add_child(m_inner);
     m_outer->init();
-    m_outer->m_color = { .3, .3, .3, 1 };
+    m_outer->m_color = { .4, .4, .4, 1 };
     m_outer->SetAlign(YGAlignCenter);
     m_outer->SetJustify(YGJustifyCenter);
     m_outer->SetPadding(5, 5, 5, 5);
diff --git a/src/node_panel_color.cpp b/src/node_panel_color.cpp
index 2daf157..42b18f0 100644
--- a/src/node_panel_color.cpp
+++ b/src/node_panel_color.cpp
@@ -53,6 +53,26 @@ void NodePanelColor::set_color(glm::vec3 rgb)
     m_base_color = glm::vec4(rgb, 1);
 }
 
+kEventResult NodePanelColor::handle_event(Event* e)
+{
+    switch (e->m_type)
+    {
+    case kEventType::MouseUpL:
+        if (!m_mouse_inside)
+        {
+            mouse_release();
+            parent->remove_child(this);
+            if (on_popup_close)
+                on_popup_close(this);
+        }
+        break;
+    default:
+        return kEventResult::Available;
+        break;
+    }
+    return kEventResult::Available;
+}
+
 void NodePanelColor::added(Node* parent)
 {
     set_color(Canvas::I->m_current_brush->m_tip_color);
diff --git a/src/node_panel_color.h b/src/node_panel_color.h
index 02fdf49..310af3c 100644
--- a/src/node_panel_color.h
+++ b/src/node_panel_color.h
@@ -12,10 +12,12 @@ public:
     glm::vec4 m_color;
     glm::vec2 m_cursor;
     std::function<void(Node* target, glm::vec4 color)> on_color_changed;
+    std::function<void(Node* target)> on_popup_close;
     virtual Node* clone_instantiate() const override;
     virtual void clone_finalize(Node* dest) const override;
     virtual void init() override;
     virtual void added(Node* parent) override;
+    virtual kEventResult handle_event(Event* e) override;
     void init_controls();
     void set_color(glm::vec3 rgb);
 };
diff --git a/src/node_panel_grid.cpp b/src/node_panel_grid.cpp
index ea10590..94ce3dc 100644
--- a/src/node_panel_grid.cpp
+++ b/src/node_panel_grid.cpp
@@ -316,6 +316,26 @@ void NodePanelGrid::draw_heightmap(const glm::mat4& proj, const glm::mat4& camer
     }
 }
 
+kEventResult NodePanelGrid::handle_event(Event* e)
+{
+    switch (e->m_type)
+    {
+    case kEventType::MouseUpL:
+        if (!m_mouse_inside)
+        {
+            mouse_release();
+            parent->remove_child(this);
+            if (on_popup_close)
+                on_popup_close(this);
+        }
+        break;
+    default:
+        return kEventResult::Available;
+        break;
+    }
+    return kEventResult::Available;
+}
+
 void NodePanelGrid::bake_uvs()
 {
     if (!m_hm_image.m_data)
diff --git a/src/node_panel_grid.h b/src/node_panel_grid.h
index 4bdef47..b2f76a9 100644
--- a/src/node_panel_grid.h
+++ b/src/node_panel_grid.h
@@ -37,6 +37,8 @@ class NodePanelGrid : public Node
 public:
     enum class ShadeMode : uint8_t { Transparent, Flat, Solid, Textured };
 
+    std::function<void(Node* target)> on_popup_close;
+
     NodeSliderH* m_groud_opacity;
     NodeSliderH* m_groud_value;
     NodeComboBox* m_groud_resolution;
@@ -74,6 +76,7 @@ public:
     virtual Node* clone_instantiate() const override;
     virtual void clone_finalize(Node* dest) const override;
     virtual void init() override;
+    virtual kEventResult handle_event(Event* e) override;
     void init_controls();
     int get_samples() const;
     int get_texres() const;
diff --git a/src/node_panel_layer.cpp b/src/node_panel_layer.cpp
index 12ba2f4..2009327 100644
--- a/src/node_panel_layer.cpp
+++ b/src/node_panel_layer.cpp
@@ -287,3 +287,23 @@ void NodePanelLayer::update_attributes()
     m_alpha_lock->set_value(l->m_alpha_locked);
     m_blend_mode->set_index(l->m_blend_mode);
 }
+
+kEventResult NodePanelLayer::handle_event(Event* e)
+{
+    switch (e->m_type)
+    {
+    case kEventType::MouseUpL:
+        if (!m_mouse_inside)
+        {
+            mouse_release();
+            parent->remove_child(this);
+            if (on_popup_close)
+                on_popup_close(this);
+        }
+        break;
+    default:
+        return kEventResult::Available;
+        break;
+    }
+    return kEventResult::Available;
+}
diff --git a/src/node_panel_layer.h b/src/node_panel_layer.h
index 81de575..f057a31 100644
--- a/src/node_panel_layer.h
+++ b/src/node_panel_layer.h
@@ -39,6 +39,7 @@ class NodePanelLayer : public Node
     NodeButtonCustom* btn_duplicate;
     int id_counter = 0;
 public:
+    std::function<void(Node* target)> on_popup_close;
     std::function<void(Node* target, int old_idx, int new_idx)> on_layer_change;
     std::function<void(Node* target, int idx, float value)> on_layer_opacity_changed;
     std::function<void(Node* target, int idx, bool visible)> on_layer_visibility_changed;
@@ -57,6 +58,7 @@ public:
     NodeComboBox* m_blend_mode;
     virtual Node* clone_instantiate() const override;
     virtual void init() override;
+    virtual kEventResult handle_event(Event* e) override;
     void add_layer();
     NodeLayer* add_layer(const char* name);
     NodeLayer* get_layer_at(int index);
diff --git a/src/node_panel_stroke.cpp b/src/node_panel_stroke.cpp
index 89472ce..903fbb7 100644
--- a/src/node_panel_stroke.cpp
+++ b/src/node_panel_stroke.cpp
@@ -661,3 +661,23 @@ void NodePanelStroke::handle_checkbox(bool Brush::* prop, Node *target, bool val
     if (on_stroke_change)
         on_stroke_change(this);
 }
+
+kEventResult NodePanelStroke::handle_event(Event* e)
+{
+    switch (e->m_type)
+    {
+    case kEventType::MouseUpL:
+        if (!m_mouse_inside)
+        {
+            mouse_release();
+            parent->remove_child(this);
+            if (on_popup_close)
+                on_popup_close(this);
+        }
+        break;
+    default:
+        return kEventResult::Available;
+        break;
+    }
+    return kEventResult::Available;
+}
diff --git a/src/node_panel_stroke.h b/src/node_panel_stroke.h
index 8f180b2..0595b89 100644
--- a/src/node_panel_stroke.h
+++ b/src/node_panel_stroke.h
@@ -91,6 +91,7 @@ public:
     std::function<void(Node* target, const std::string& path, const std::string& thumb)> on_brush_changed;
     std::function<void(Node* target, const std::string& path, const std::string& thumb)> on_dual_changed;
     //std::function<void(Node* target, const std::string& path, const std::string& thumb)> on_texture_changed;
+    std::function<void(Node* target)> on_popup_close;
 
     struct SliderCurve
     {
@@ -104,6 +105,8 @@ public:
     virtual Node* clone_instantiate() const override;
     virtual void clone_finalize(Node* dest) const override;
     virtual void init() override;
+    virtual kEventResult handle_event(Event* e) override;
+
     bool import_abr(const std::string& path);
     void init_controls();
     void update_controls();
diff --git a/src/node_scroll.cpp b/src/node_scroll.cpp
index aa264ee..aef12b1 100644
--- a/src/node_scroll.cpp
+++ b/src/node_scroll.cpp
@@ -26,6 +26,33 @@ void NodeScroll::fix_scroll()
     m_pos_offset_childred = m_offset;
 }
 
+void NodeScroll::clone_copy(Node* dest) const
+{
+    NodeBorder::clone_copy(dest);
+    auto n = static_cast<NodeScroll*>(dest);
+    n->m_scrollbar_color = m_scrollbar_color;
+}
+
+void NodeScroll::parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr)
+{
+    NodeBorder::parse_attributes(ka, attr);
+    switch (ka)
+    {
+    case kAttribute::ScrollColor:
+    {
+        glm::vec4 col;
+        int n = sscanf(attr->Value(), "%f %f %f %f", &col.x, &col.y, &col.z, &col.w);
+        if (n == 1)
+            m_scrollbar_color = glm::vec4(col.x, col.x, col.x, 1);
+        else
+            m_scrollbar_color = col;
+        break;
+    }
+    default:
+        break;
+    }
+}
+
 void NodeScroll::on_tick(float dt)
 {
     auto pad = GetPadding();
@@ -57,7 +84,7 @@ void NodeScroll::draw()
         * glm::scale(glm::vec3(pr, h, 1)) 
         * glm::translate(glm::vec3(.5, .5, 0))
     );
-    ShaderManager::u_vec4(kShaderUniform::Col, { .3, .3, .3, 1 });
+    ShaderManager::u_vec4(kShaderUniform::Col, m_scrollbar_color);
     m_plane.draw_fill();
 }
 
diff --git a/src/node_scroll.h b/src/node_scroll.h
index a05a276..96f33b5 100644
--- a/src/node_scroll.h
+++ b/src/node_scroll.h
@@ -9,11 +9,14 @@ class NodeScroll : public NodeBorder
     glm::vec2 m_offset_start = glm::vec2(0);
     glm::vec2 m_offset = glm::vec2(0);
     glm::vec2 m_mask = glm::vec2(1, 0);
+    glm::vec4 m_scrollbar_color = { .3, .3, .3, 1 };
 public:
     NodeScroll();
     virtual Node* clone_instantiate() const override;
+    virtual void clone_copy(Node* dest) const override;
     virtual kEventResult handle_event(Event* e) override;
     virtual void draw() override;
     virtual void on_tick(float dt) override;
+    virtual void parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr) override;
     void fix_scroll();
 };