added slider, mouse capture in Node, desaturated icons

data/layout.xml

@@ -163,6 +163,20 @@
       </button-custom>
     </popup-menu>
   </layout>
+  <!--brush icon-->
+  <layout id="tpl-brush-icon">
+    <button-custom width="50" height="50" margin="1" thickness="1" border-color=".0" pad="4" align="center" justify="center">
+      <image width="100%" height="100%"/>
+    </button-custom>
+  </layout>
+  <!--slider control-->
+  <layout id="tpl-slider">
+    <border pad="1" grow="1" height="100%" color="1">
+      <node width="100%" height="100%">
+        <slider-cursor width="10" height="100%" positioning="absolute" />
+      </node>
+    </border>
+  </layout>
   <!--main-->
   <layout id="main">
     <node dir="col" wrap="0" width="100%" height="100%" pad="5">
@@ -243,33 +257,15 @@
           </button-custom>
         </border>
         <!-- side bar -->
-        <node width="30%" min-width="150" height="100%" dir="col" color=".2">
+        <node width="250" height="100%" dir="col" color=".2">
           <border pad="15" margin="10 0 10 0" color=".3" width="100%" height="auto">
-            <border height="30" color=".5" align="center" justify="center">
+            <border id="slider-space" color="0" height="30" margin="0 0 10 0">
-              <text text="Emoticons" font-face="arial" font-size="11" color="1 1 1 1"/>
+              <ref id="tpl-slider" />
             </border>
-            <border color=".4" pad="5" dir="row" wrap="1">
+            <border height="30" color=".5" align="center" justify="center">
-              <button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
+              <text text="Brushes" font-face="arial" font-size="11" color="1 1 1 1"/>
-                <icon width="100%" height="100%" icon="emoticon_evilgrin"/>
+            </border>
-              </button-custom>
+            <border id="brushes" color=".4" pad="5" dir="row" wrap="1">
-              <button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
-                <icon width="100%" height="100%" icon="emoticon_smile"/>
-              </button-custom>
-              <button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
-                <icon width="100%" height="100%" icon="emoticon_surprised"/>
-              </button-custom>
-              <button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
-                <icon width="100%" height="100%" icon="emoticon_tongue"/>
-              </button-custom>
-              <button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
-                <icon width="100%" height="100%" icon="emoticon_unhappy"/>
-              </button-custom>
-              <button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
-                <icon width="100%" height="100%" icon="emoticon_waii"/>
-              </button-custom>
-              <button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
-                <icon width="100%" height="100%" icon="emoticon_wink"/>
-              </button-custom>
             </border>
           </border>
           <border pad="15" margin="0 0 10 0" color=".3" width="100%" height="auto">

engine/app.cpp

@@ -13,6 +13,25 @@ App App::I; // singleton
 #define SHADER_VERSION "#version 150\n"
 #endif
 
+static std::vector<std::string> FindAllBrushes(std::string folder)
+{
+    std::vector<std::string> names;
+    std::string search_path = folder + "*.png";
+    WIN32_FIND_DATAA fd;
+    HANDLE hFind = ::FindFirstFileA(search_path.c_str(), &fd);
+    if (hFind != INVALID_HANDLE_VALUE) {
+        do {
+            // read all (real) files in current folder
+            // , delete '!' read other 2 default folder . and ..
+            if (!(fd.dwFileAttributes & FILE_ATTRIBUTE_DIRECTORY)) {
+                names.push_back(fd.cFileName);
+            }
+        } while (::FindNextFileA(hFind, &fd));
+        ::FindClose(hFind);
+    }
+    return names;
+}
+
 
 void App::create()
 {
@@ -150,6 +169,23 @@ void App::initLayout()
 
     layout.on_loaded = [&] {
         LOG("initializing layout updating after load");
+        static auto icons = FindAllBrushes("data\\Icons\\");
+        if (auto* container = layout[main_id]->find<NodeBorder>("brushes"))
+        {
+            if (auto* tpl = layout[const_hash("tpl-brush-icon")])
+            {
+                for (auto& i : icons)
+                {
+                    NodeButtonCustom* btn = (NodeButtonCustom*)tpl->m_children[0]->clone();
+                    NodeImage* img = (NodeImage*)btn->m_children[0].get();
+                    img->m_path = "data\\Icons\\" + i;
+                    img->m_tex_id = const_hash(img->m_path.c_str());
+                    img->create();
+                    container->add_child(btn);
+                }
+            }
+        }
+
         layout[main_id]->update(width, height, zoom);
         LOG("initializing layout components");
         sidebar = layout[main_id]->find<NodeBorder>("sidebar");

engine/layout.cpp

@@ -12,6 +12,9 @@ std::map<std::string, glm::vec4> NodeIcon::m_icons;
 
 kEventResult Node::on_event(Event* e)
 {
+    if (current_mouse_capture)
+        return current_mouse_capture->on_event(e);
+
     kEventResult ret = kEventResult::Available;
     for (auto it = m_children.rbegin(); it != m_children.rend(); ++it)
     {
@@ -42,7 +45,7 @@ kEventResult Node::on_event(Event* e)
         case kEventType::MouseDownR:
         case kEventType::MouseUpL:
         case kEventType::MouseUpR:
-            if (inside && handle_event(e) == kEventResult::Consumed)
+            if ((inside || m_mouse_captured) && handle_event(e) == kEventResult::Consumed)
                 return kEventResult::Consumed;
             break;
         case kEventType::MouseMove:
@@ -53,7 +56,7 @@ kEventResult Node::on_event(Event* e)
                 handle_event(&e2);
             }
             m_mouse_inside = inside;
-            if (inside)
+            if (inside || m_mouse_captured)
                 ret = handle_event(e);
             if (inside_old == true && inside == false)
             {
@@ -399,6 +402,13 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
             n->load_internal(x_child);
             break;
         }
+        case kWidget::SliderCursor:
+        {
+            auto n = new NodeSliderCursor();
+            add_child(n);
+            n->load_internal(x_child);
+            break;
+        }
         case kWidget::PopupMenu:
         {
             auto n = new NodePopupMenu();

engine/layout.h

@@ -51,6 +51,7 @@ enum class kWidget : uint16_t
     Icon      = const_hash("icon"),
     Button    = const_hash("button"),
     ButtonCustom = const_hash("button-custom"),
+    SliderCursor = const_hash("slider-cursor"),
     PopupMenu = const_hash("popup-menu"),
     Viewport  = const_hash("viewport"),
     Ref       = const_hash("ref"),
@@ -126,6 +127,8 @@ public:
     uint16_t m_nodeID;
     std::string m_nodeID_s;
     std::vector<std::unique_ptr<Node>> m_children;
+    Node* current_mouse_capture = nullptr;
+    bool m_mouse_captured = false;
 
     glm::mat4 m_proj;
     glm::mat4 m_mvp;
@@ -204,6 +207,11 @@ public:
     void SetPositioning(YGPositionType value) { YGNodeStyleSetPositionType(y_node, value); }
     void SetAspectRatio(float ar) { YGNodeStyleSetAspectRatio(y_node, ar); }
 
+    glm::vec2 GetPosition() { return{ YGNodeLayoutGetLeft(y_node), YGNodeLayoutGetTop(y_node) }; }
+    float GetWidth() { return YGNodeLayoutGetWidth(y_node); }
+    float GetHeight() { return YGNodeLayoutGetHeight(y_node); }
+    glm::vec2 GetSize() { return { GetWidth(), GetHeight() }; }
+
     glm::vec4 rect_intersection(glm::vec4 a, glm::vec4 b)
     {
         // convert from [x,y,w,h] to [x1,y1,x2,y1]
@@ -257,6 +265,8 @@ public:
     virtual void loaded() { }
     void add_child(Node* n);
     void remove_child(Node* n);
+    void mouse_capture() { root()->current_mouse_capture = this; m_mouse_captured = true; }
+    void mouse_release() { root()->current_mouse_capture = nullptr;  m_mouse_captured = false; }
 
 //     class iterator
 //     {
@@ -876,3 +886,47 @@ public:
         return kEventResult::Consumed;
     }
 };
+
+class NodeSliderCursor : public NodeButtonCustom
+{
+public:
+    glm::vec2 drag_start;
+    glm::vec2 drag_diff;
+    bool dragging = false;
+    glm::vec2 old_pos;
+    virtual Node* clone_instantiate() const override { return new NodeSliderCursor(); }
+    virtual void clone_copy(Node* dest) const override
+    {
+        NodeButtonCustom::clone_copy(dest);
+        NodeSliderCursor* n = static_cast<NodeSliderCursor*>(dest);
+    }
+    virtual kEventResult handle_event(Event* e) override
+    {
+        NodeBorder::handle_event(e);
+        switch (e->m_type)
+        {
+        case kEventType::MouseDownL:
+            drag_start = ((MouseEvent*)e)->m_pos;
+            dragging = true;
+            mouse_capture();
+            break;
+        case kEventType::MouseUpL:
+            mouse_release();
+            dragging = false;
+            break;
+        case kEventType::MouseMove:
+            if (dragging)
+            {
+                float pw = parent->GetWidth();
+                float w = GetWidth();
+                drag_diff = ((MouseEvent*)e)->m_pos - drag_start;
+                float x = glm::clamp<float>(drag_diff.x, 0, pw - w);
+                SetPosition(x, 0);
+            }
+            break;
+        default:
+            break;
+        }
+        return kEventResult::Consumed;
+    }
+};