implement tip popup tip selection and change default brush color to black

data/layout.xml

@@ -120,9 +120,11 @@
   <!--brushes panel-->
   <layout id="tpl-panel-brushes">
     <node width="220" margin="0 0 10 0" rtl="ltr">
+      <!--
       <border height="30" color=".5" align="center" justify="center">
         <text text="Brushes" font-face="arial" font-size="11" color="1 1 1 1"/>
       </border>
+      -->
       <border id="brushes" color=".4" pad="5" dir="row" wrap="1" flood-events="1">
       </border>
     </node>
@@ -148,7 +150,12 @@
         <text text="Stroke" font-face="arial" font-size="11" color="1 1 1 1"/>
       </border>
       <border color=".3" pad="5" dir="col" width="100%">
-        <border color=".2" pad="3" margin="0 0 10 0"> <stroke-preview id="canvas" width="100%" height="100"/> </border>
+        <border color=".2" pad="3" margin="0 0 10 0"> 
+          <stroke-preview id="canvas" width="100%" height="100"/>
+          <button-custom id="tip-change" width="50" height="50" position="0 56" positioning="absolute" pad="3">
+            <image id="tip-change-thumb" width="100%" height="100%"/>
+          </button-custom>
+        </border>
         
         <border color=".2" height="20" justify="center" align="center"><text text="Tip Settings" font-face="arial" font-size="11"/></border>
         <node dir="row">
@@ -1100,9 +1107,11 @@ Here's a list of what's available in this release.
             <image path="data/ui/stroke.png" width="100%" height="100%" align="center" justify="flex-end"/>
           </button-custom>
           <!--<button id="btn-brush-preset" width="50" height="50" margin="0 0 5 0" text="Preset" thickness="1" border-color=".1" pad="2"/>-->
+          <!--
           <button-custom id="btn-brush" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
             <image path="data/ui/brushes.png" width="100%" height="100%" align="center" justify="flex-end"/>
           </button-custom>
+          -->
           <button-custom id="btn-color" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
             <image path="data/ui/palette.png" width="100%" height="100%" align="center" justify="flex-end"/>
           </button-custom>

src/app.cpp

@@ -568,7 +568,7 @@ void App::terminate()
     TextureManager::invalidate();
     ShaderManager::invalidate();
     layout.clear_context();
-    brushes->clear_context();
+    //brushes->clear_context();
     layers->clear_context();
     color->clear_context();
     stroke->clear_context();

src/app_layout.cpp

@@ -119,7 +119,7 @@ void App::init_sidebar()
     //color = layout[main_id]->find<NodePanelColor>("panel-color");
     //stroke = layout[main_id]->find<NodePanelStroke>("panel-stroke");
 
-    brushes = find_or_create_panel<NodePanelBrush>(panels);
+    //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);
@@ -132,11 +132,11 @@ void App::init_sidebar()
 //         stroke->m_canvas->draw_stroke();
 //     }
 
-    brushes->on_brush_changed = [this](Node* target, int index) {
+    //brushes->on_brush_changed = [this](Node* target, int index) {
-        Canvas::I->m_current_brush.m_tex_id = brushes->get_texture_id(index);
+    //    Canvas::I->m_current_brush.m_tex_id = brushes->get_texture_id(index);
-        Canvas::I->m_current_brush.id = brushes->get_brush_id(index);
+    //    Canvas::I->m_current_brush.id = brushes->get_brush_id(index);
-        stroke->m_preview->draw_stroke();
+    //    stroke->m_preview->draw_stroke();
-    };
+    //};
     presets->on_brush_changed = [this](Node* target, int index) {
         auto b = presets->get_brush(index);
         // don't change some params
@@ -154,10 +154,15 @@ void App::init_sidebar()
 //         if (canvas)
 //             canvas->m_brush = stroke->m_canvas->m_brush;
 //     };
-     stroke->on_stencil_changed = [this](Node*target, uint16_t id) {
+    stroke->on_brush_changed = [this](Node* target, int brush_id, uint16_t brush_tex) {
-         Canvas::I->m_current_brush.m_tex_stencil_id = id;
+        Canvas::I->m_current_brush.m_tex_id = brush_tex;
-         stroke->m_preview->draw_stroke();
+        Canvas::I->m_current_brush.id = brush_id;
-     };
+        stroke->m_preview->draw_stroke();
+    };
+    stroke->on_stencil_changed = [this](Node*target, uint16_t id) {
+        Canvas::I->m_current_brush.m_tex_stencil_id = id;
+        stroke->m_preview->draw_stroke();
+    };
 
     layers->on_layer_add = [this](Node*) {
         canvas->m_canvas->layer_add(layers->m_layers.back()->m_label_text.c_str());
@@ -216,14 +221,14 @@ void App::init_sidebar()
             button->set_color(panels->get_child_index(stroke.get()) == -1 ? color_button_normal : color_button_hlight);
         };
     }
-    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-brush"))
+    //if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-brush"))
-    {
+    //{
-        button->on_click = [this, button](Node*) {
+    //    button->on_click = [this, button](Node*) {
-            panels->get_child_index(brushes.get()) == -1 ? panels->add_child(brushes) : panels->remove_child(brushes.get());
+    //        panels->get_child_index(brushes.get()) == -1 ? panels->add_child(brushes) : panels->remove_child(brushes.get());
-            panels->fix_scroll();
+    //        panels->fix_scroll();
-            button->set_color(panels->get_child_index(brushes.get()) == -1 ? color_button_normal : color_button_hlight);
+    //        button->set_color(panels->get_child_index(brushes.get()) == -1 ? color_button_normal : color_button_hlight);
-        };
+    //    };
-    }
+    //}
     if (auto* button = layout[main_id]->find<NodeButton>("btn-brush-preset"))
     {
         button->on_click = [this, button](Node*) {
@@ -803,14 +808,15 @@ void App::initLayout()
         }
 
         Brush b;
-        int br_idx = brushes->find_brush("Round-Hard");
+        int br_idx = stroke->m_brush_popup->find_brush("Round-Hard");
-        b.m_tex_id = brushes->get_texture_id(br_idx);
+        b.m_tex_id = stroke->m_brush_popup->get_texture_id(br_idx);
-        b.id = brushes->get_brush_id(br_idx);
+        b.id = stroke->m_brush_popup->get_brush_id(br_idx);
         b.m_tip_size = .1f;
         b.m_tip_flow = .5f;
         b.m_tip_spacing = .1f;
         b.m_tip_opacity = 1.f;
         Canvas::I->m_current_brush = b;
+        stroke->m_brush_thumb->set_image(stroke->m_brush_popup->get_thumb_path(br_idx));
 
         brush_update();
         
@@ -887,7 +893,7 @@ 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(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();

src/brush.h

@@ -9,7 +9,7 @@ public:
     std::string m_name;
     uint16_t m_tex_id = 0;
     uint16_t m_tex_stencil_id = const_hash("data/paper.jpg");
-    glm::vec4 m_tip_color{1, 0, 0, 1};
+    glm::vec4 m_tip_color{0, 0, 0, 1};
     float m_tip_size = 0;
     float m_tip_spacing = 0;
     float m_tip_flow = 0;

src/node_panel_brush.cpp

@@ -62,6 +62,7 @@ void NodePanelBrush::init()
             brush->loaded();
             brush->set_icon(path.c_str());
             brush->m_brushID = count++;
+            brush->thumb_path = path;
             brush->high_path = path_hi;
             brush->brush_name = i;
             brush->high_id = const_hash(path_hi.c_str());
@@ -71,6 +72,24 @@ void NodePanelBrush::init()
     }
 }
 
+kEventResult NodePanelBrush::handle_event(Event* e)
+{
+    switch (e->m_type)
+    {
+    case kEventType::MouseUpL:
+        if (!m_mouse_inside)
+        {
+            mouse_release();
+            destroy();
+        }
+        break;
+    default:
+        return kEventResult::Available;
+        break;
+    }
+    return kEventResult::Consumed;
+}
+
 void NodePanelBrush::handle_click(Node* target)
 {
     if (target == m_current)
@@ -101,6 +120,11 @@ uint16_t NodePanelBrush::get_texture_id(int index) const
     return m_brushes[index]->high_id;
 }
 
+std::string NodePanelBrush::get_thumb_path(int index) const
+{
+    return m_brushes[index]->thumb_path;
+}
+
 int NodePanelBrush::get_brush_id(int index) const
 {
     return m_brushes[index]->m_brushID;
@@ -174,6 +198,7 @@ void NodePanelBrushPreset::init()
             brush->loaded();
 //            brush->set_icon(path.c_str());
             brush->m_brushID = count++;
+            brush->thumb_path = path;
             brush->high_path = path_hi;
             brush->high_id = const_hash(path_hi.c_str());
             brush->m_brush.m_tex_id = const_hash(path.c_str());

src/node_panel_brush.h

@@ -12,6 +12,7 @@ public:
     bool m_selected = false;
     std::string brush_name;
     std::string high_path;
+    std::string thumb_path;
     uint16_t high_id;
     NodeImage* img;
     virtual Node* clone_instantiate() const override;
@@ -29,10 +30,12 @@ public:
     std::function<void(Node* target, int id)> on_brush_changed;
     virtual Node* clone_instantiate() const override;
     virtual void init() override;
+    virtual kEventResult handle_event(Event* e) override;
     void handle_click(Node* target);
     std::vector<std::string> FindAllBrushes(const std::string& folder);
     int find_brush(const std::string& name) const;
     uint16_t get_texture_id(int index) const;
+    std::string get_thumb_path(int index) const;
     int get_brush_id(int index) const;
     void select_brush(int brush_id);
 };
@@ -45,6 +48,7 @@ public:
     int m_brushID;
     Brush m_brush;
     std::string high_path;
+    std::string thumb_path;
     uint16_t high_id;
     bool m_selected = false;
     NodeStrokePreview* m_preview;

src/node_panel_stroke.cpp

@@ -98,6 +98,35 @@ void NodePanelStroke::init_controls()
             }
         });
     };
+
+    m_brush_popup = std::make_shared<NodePanelBrush>();
+    m_brush_popup->m_manager = m_manager;
+    m_brush_popup->init();
+    m_brush_popup->create();
+    m_brush_popup->loaded();
+    m_brush_popup->SetPositioning(YGPositionTypeAbsolute);
+    m_brush_popup->SetSize(400, 400);
+    m_brush_popup->m_mouse_ignore = false;
+    m_brush_popup->m_flood_events = true;
+    m_brush_popup->m_capture_children = false;
+
+    m_brush_thumb = find<NodeImage>("tip-change-thumb");
+    m_brush_button = find<NodeButtonCustom>("tip-change");
+    m_brush_button->on_click = [this](Node*) {
+        glm::vec2 pos = m_brush_button->m_pos + glm::vec2(m_brush_button->m_size.x, 0);
+        root()->add_child(m_brush_popup);
+        m_brush_popup->SetPosition(pos.x, pos.y);
+        m_brush_popup->mouse_capture();
+        root()->update();
+
+        m_brush_popup->on_brush_changed = [this](Node*, int index) {
+            if (on_brush_changed)
+                on_brush_changed(this, m_brush_popup->get_brush_id(index), m_brush_popup->get_texture_id(index));
+            m_brush_thumb->set_image(m_brush_popup->get_thumb_path(index));
+            m_brush_popup->mouse_release();
+            m_brush_popup->parent->remove_child(m_brush_popup.get());
+        };
+    };
 }
 
 void NodePanelStroke::init_slider(NodeSliderH*& target, const char* id, float Brush::* prop)

src/node_panel_stroke.h

@@ -5,6 +5,9 @@
 #include "brush.h"
 #include "node_checkbox.h"
 #include "node_combobox.h"
+#include "node_button_custom.h"
+#include "node_image.h"
+#include "node_panel_brush.h"
 
 class NodePanelStroke : public Node
 {
@@ -36,8 +39,12 @@ public:
     NodeCheckBox* m_tip_hue_pressure;
     NodeCheckBox* m_tip_sat_pressure;
     NodeCheckBox* m_tip_val_pressure;
+    NodeButtonCustom* m_brush_button;
+    NodeImage* m_brush_thumb;
+    std::shared_ptr<NodePanelBrush> m_brush_popup;
     std::function<void(Node* target)> on_stroke_change;
     std::function<void(Node* target, uint16_t id)> on_stencil_changed;
+    std::function<void(Node* target, int brush_id, uint16_t brush_tex)> on_brush_changed;
     std::map<NodeSliderH*, std::function<float(float)>> m_curves;
     
     virtual Node* clone_instantiate() const override;