open presets from the brush preview, fix scrollbar redraw

data/layout.xml

@@ -63,7 +63,7 @@
   <!--brush-presets panel-->
   <layout id="tpl-panel-brush-preset">
     <node rtl="ltr">
-      <scroll id="brushes" color=".4" pad="5 20 5 5" dir="row" wrap="1" flood-events="1" grow="1" height="1"/>
+      <scroll id="brushes" color=".4" pad="5 20 5 5" dir="col" wrap="0" flood-events="1" grow="1" height="1"/>
       <border height="40" color=".5" dir="row" align="center" flood-events="1">
         <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
           <icon width="30" icon="add"/>
@@ -86,7 +86,7 @@
   </layout>
   <!--brush-presets-item icon-->
   <layout id="tpl-brush-preset">
-    <button-custom width="100%" height="70" margin="1" pad="5" align="center" justify="center" dir="row">
+    <button-custom width="300" height="70" margin="1" pad="5" align="center" justify="center" dir="row">
       <border color="1" width="40" height="60" align="center" justify="center">
         <image id="thumb" width="40" height="40"/>
       </border>
@@ -145,18 +145,15 @@
 
         <!-- PREVIEW -->
 
-        <border color=".2" pad="3" margin="0 0 0 0"> 
+        <button-custom id="preset-button" color=".2" pad="5" margin="0 0 0 0"> 
           <stroke-preview id="canvas" width="100%" height="100"/>
-        </border>
+        </button-custom>
 
         <!-- PRESET AND SHAPE -->
 
         <node dir="row">
           <node width="36%" dir="col">
             <!--<node height="20" justify="center" margin="5 0 5 0"><text text="Shade"/></node>-->
-            <node height="30" justify="center" margin="5 0 0 0">
-              <text text="Preset"/>
-            </node>
             <node height="40" justify="center" margin="5 0 0 0">
               <text text="Shape"/>
             </node>
@@ -166,7 +163,6 @@
           </node>
           <node dir="col" align="center" grow="1" width="1" flood-events="1">
             <!--<node height="20" pad="1" width="100%" margin="5 0 5 0"><slider-h id="tip-shade" value="1"/></node>-->
-            <button id="preset-button" text="Select Preset" width="100%" height="30" margin="5 0 0 0" dir="row"/>
             <node dir="row" margin="5 0 0 0">
               <button-custom id="tip-change" width="40" height="40" dir="row" pad="4">
                 <image id="tip-change-thumb" width="32" height="100%"/>

src/node_panel_stroke.cpp

@@ -252,7 +252,7 @@ void NodePanelStroke::init_controls()
     m_presets_popup->create();
     m_presets_popup->loaded();
     m_presets_popup->SetPositioning(YGPositionTypeAbsolute);
-    m_presets_popup->SetSize(300, 400);
+    m_presets_popup->SetSize(YGUndefined, 400);
     m_presets_popup->m_mouse_ignore = false;
     m_presets_popup->m_flood_events = true;
     m_presets_popup->m_capture_children = false;
@@ -272,7 +272,7 @@ void NodePanelStroke::init_controls()
 
     // BRUSH PRESETS
 
-    m_preset_button = find<NodeButton>("preset-button");
+    m_preset_button = find<NodeButtonCustom>("preset-button");
     m_preset_button->on_click = [this](Node*) {
         auto screen = root()->m_size;
         glm::vec2 pos = m_preset_button->m_pos + glm::vec2(m_preset_button->m_size.x, 0);
@@ -283,7 +283,7 @@ void NodePanelStroke::init_controls()
         tick->SetPosition(pos.x, pos.y + (m_preset_button->m_size.y - 32) * 0.5f);
         tick->set_image("data/ui/popup-tick.png");
         float hh = m_presets_popup->m_container->m_children.size() > 10 ? App::I.height / App::I.zoom * .75f : 400.f;
-        m_presets_popup->SetSize(300, glm::max(hh, 400.f));
+        m_presets_popup->SetHeight(glm::max(hh, 400.f));
         root()->update();
         if ((pos.y + m_presets_popup->m_size.y) > screen.y) 
             pos.y = screen.y - m_presets_popup->m_size.y;

src/node_panel_stroke.h

@@ -48,7 +48,7 @@ public:
     NodeImage* m_brush_thumb;
     NodeImage* m_dual_brush_thumb;
     NodeImage* m_pattern_thumb;
-    NodeButton* m_preset_button;
+    NodeButtonCustom* m_preset_button;
 
     NodeCheckBox* m_tip_invert;
     NodeCheckBox* m_tip_flipx;

src/node_scroll.cpp

@@ -34,7 +34,10 @@ void NodeScroll::on_tick(float dt)
     float sz = m_size.y - (pad[0] + pad[2]);
     float new_pad = rect.w == 0 || rect.w <= sz ? 5 : 35;
     if (pad[1] != new_pad)
+    {
         YGNodeStyleSetPadding(y_node, YGEdgeRight, new_pad);
+        app_redraw();
+    }
 }
 
 void NodeScroll::draw()