improve sliders and remove slider cursor, fix stroke preview

data/layout.xml

@@ -33,31 +33,6 @@
     </button-custom>
   </layout>
 
-  <!--slider control-->
-  <layout id="tpl-slider-h">
-    <border pad="1" color="1">
-      <node height="100%">
-        <slider-cursor id="cursor" width="10" height="100%" positioning="absolute" />
-      </node>
-    </border>
-  </layout>
-  
-  <layout id="tpl-slider-v">
-    <border pad="1" grow="1" height="100%" color="1" dir="row">
-      <node height="100%" grow="1">
-        <slider-cursor id="cursor" height="10" width="100%" positioning="absolute" />
-      </node>
-    </border>
-  </layout>
-  
-  <layout id="tpl-slider-hue">
-    <border pad="1" grow="1" height="100%" color="1" dir="row">
-      <node height="100%" grow="1">
-        <slider-cursor id="cursor" height="10" width="100%" positioning="absolute" />
-      </node>
-    </border>
-  </layout>
-
   <!--layer template-->
   <layout id="tpl-layer">
     <border height="30" border-color="1" thickness="1" color=".4" dir="row" margin="1 0 1 0">
@@ -143,8 +118,8 @@
             <node height="20" justify="center"><text text="Mixer" font-face="arial" font-size="11"/></node>
           </node>
           <border dir="col" align="center" grow="1" width="1">
-            <node height="20" pad="1" width="100%"><slider-h id="tip-size"/></node>
+            <node height="20" pad="1" width="100%"><slider-h id="tip-size" value=".5"/></node>
-            <node height="20" pad="1" width="100%"><slider-h id="tip-flow"/></node>
+            <node height="20" pad="1" width="100%"><slider-h id="tip-flow" value=".25"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="tip-spacing"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="tip-angle"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="tip-mix"/></node>

engine/app.cpp

@@ -318,16 +318,16 @@ void App::init()
     glEnable(GL_DEBUG_OUTPUT); 
 #endif
 
-    initShaders();
-    initAssets();
-    initLayout();
-
     glEnable(GL_TEXTURE_2D);
     glDisable(GL_DEPTH_TEST);
 
     glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
     glBlendEquation(GL_FUNC_ADD);
 
+    initShaders();
+    initAssets();
+    initLayout();
+
     //int n;
     //glGetIntegerv(GL_NUM_EXTENSIONS, &n);
     //for (int i = 0; i < n; i++)
@@ -351,7 +351,9 @@ void App::update(float dt)
     glViewport(0, 0, (GLsizei)width, (GLsizei)height);
     glClear(GL_COLOR_BUFFER_BIT);
 
-    //layout.reload();
+#ifndef __ANDROID__
+    layout.reload();
+#endif
     if (auto* main = layout[main_id])
         main->update(width, height, zoom);
 

engine/layout.cpp

@@ -431,7 +431,6 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
         CASE(kWidget::TextInput, NodeTextInput);
         CASE(kWidget::Button , NodeButton);
         CASE(kWidget::ButtonCustom, NodeButtonCustom);
-        CASE(kWidget::SliderCursor, NodeSliderCursor);
         CASE(kWidget::SliderH, NodeSliderH);
         CASE(kWidget::SliderV, NodeSliderV);
         CASE(kWidget::SliderHue, NodeSliderHue);

engine/layout.h

@@ -43,6 +43,9 @@ enum class kAttribute : uint16_t
     FloodEvents = const_hash("flood-events"),
     Icon        = const_hash("icon"),
     Selected    = const_hash("selected"),
+    Template    = const_hash("template"),
+    Value       = const_hash("value"),
+    Range       = const_hash("range"),
 };
 
 enum class kWidget : uint16_t
@@ -56,7 +59,6 @@ enum class kWidget : uint16_t
     Icon      = const_hash("icon"),
     Button    = const_hash("button"),
     ButtonCustom = const_hash("button-custom"),
-    SliderCursor = const_hash("slider-cursor"),
     SliderH   = const_hash("slider-h"),
     SliderV   = const_hash("slider-v"),
     SliderHue = const_hash("slider-hue"),
@@ -1047,22 +1049,57 @@ public:
     }
 };
 
-class NodeSliderCursor : public NodeButtonCustom
+class NodeSliderH : public NodeBorder
 {
-    glm::vec2 drag_start;
-    glm::vec2 drag_diff;
     bool dragging = false;
-    glm::vec2 old_pos;
 public:
     glm::vec2 m_mask{ 1, 0 };
     glm::vec2 m_value;
-    std::function<void(Node* target, glm::vec2 value)> on_value_changed;
+    std::function<void(Node* target, float value)> on_value_changed;
-    virtual Node* clone_instantiate() const override { return new NodeSliderCursor(); }
+    virtual Node* clone_instantiate() const override { return new NodeSliderH(); }
     virtual void clone_copy(Node* dest) const override
     {
-        NodeButtonCustom::clone_copy(dest);
+        NodeBorder::clone_copy(dest);
-        NodeSliderCursor* n = static_cast<NodeSliderCursor*>(dest);
+        NodeSliderH* n = static_cast<NodeSliderH*>(dest);
-        n->m_mask = m_mask;
+        n->m_value = m_value;
+    }
+    virtual void init() override
+    {
+        SetPadding(1, 1, 1, 1);
+        SetWidthP(100);
+        SetHeightP(100);
+        m_color = glm::vec4(1);
+    }
+    virtual void draw() override
+    {
+        NodeBorder::draw();
+
+        using namespace ui;
+        auto sz = GetSize();
+        glm::vec2 cur_size = sz * (1.f - m_mask) + m_mask * glm::vec2(10);
+        glm::mat4 scale = glm::scale(glm::vec3(cur_size, 1.f));
+        glm::mat4 pos = glm::translate(glm::vec3(m_value * m_mask * sz + m_pos + sz * .5f * (1.f - m_mask), 0));
+        auto mvp = m_proj * pos * scale;
+
+        ui::ShaderManager::use(kShader::Color);
+        ui::ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
+        ui::ShaderManager::u_vec4(kShaderUniform::Col, { 0, 0, 0, 1 });
+        m_plane.draw_fill();
+    }
+    void set_value(float value)
+    {
+    }
+    virtual void parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr) override
+    {
+        NodeBorder::parse_attributes(ka, attr);
+        switch (ka)
+        {
+        case kAttribute::Value:
+            m_value = glm::vec2(attr->FloatValue());
+            break;
+        default:
+            break;
+        }
     }
     virtual kEventResult handle_event(Event* e) override
     {
@@ -1070,10 +1107,15 @@ public:
         switch (e->m_type)
         {
         case kEventType::MouseDownL:
-            old_pos = GetPosition();
-            drag_start = ((MouseEvent*)e)->m_pos;
             dragging = true;
             mouse_capture();
+            {
+                auto sz = GetSize();
+                auto pos = glm::clamp(((MouseEvent*)e)->m_pos - m_pos, { 0, 0 }, sz) * m_mask;
+                m_value = pos / glm::max({ 1, 1 }, sz);
+                if (on_value_changed)
+                    on_value_changed(this, glm::length(m_value));
+            }
             break;
         case kEventType::MouseUpL:
             mouse_release();
@@ -1082,13 +1124,11 @@ public:
         case kEventType::MouseMove:
             if (dragging)
             {
-                auto sz = parent->GetSize() - GetSize();
+                auto sz = GetSize();
-                drag_diff = old_pos + (((MouseEvent*)e)->m_pos - drag_start) * m_mask;
+                auto pos = glm::clamp(((MouseEvent*)e)->m_pos - m_pos, { 0, 0 }, sz) * m_mask;
-                auto pos = glm::clamp(drag_diff, { 0, 0 }, sz);
+                m_value = pos / glm::max({ 1, 1 }, sz);
-                SetPosition(pos.x, pos.y);
-                m_value = pos / glm::max({ 1,1 }, sz); // avoid div0
                 if (on_value_changed)
-                    on_value_changed(this, m_value);
+                    on_value_changed(this, glm::length(m_value));
             }
             break;
         default:
@@ -1098,97 +1138,36 @@ public:
     }
 };
 
-class NodeSliderH : public NodeBorder
+class NodeSliderV : public NodeSliderH
 {
 public:
-    NodeSliderCursor* m_cursor;
-    std::function<void(Node* target, float value)> on_value_changed;
-    virtual Node* clone_instantiate() const override { return new NodeSliderH(); }
-    virtual void clone_finalize(Node* dest) const override
-    {
-        NodeSliderH* n = static_cast<NodeSliderH*>(dest);
-        n->init_controls();
-    }
-    virtual void init() override
-    {
-        const auto& m_template = (NodeBorder*)init_template("tpl-slider-h");
-        m_color = m_template->m_color;
-        m_border_color = m_template->m_border_color;
-        m_thinkness = m_template->m_thinkness;
-        init_controls();
-    }
-    void init_controls()
-    {
-        m_cursor = find<NodeSliderCursor>("cursor");
-        m_cursor->m_mask = { 1, 0 };
-        m_cursor->on_value_changed = [this](Node*, glm::vec2 value) {
-            if (on_value_changed)
-                on_value_changed(this, value.x);
-        };
-    }
-};
-
-class NodeSliderV : public NodeBorder
-{
-public:
-    NodeSliderCursor* m_cursor;
-    std::function<void(Node* target, float value)> on_value_changed;
     virtual Node* clone_instantiate() const override { return new NodeSliderV(); }
-    virtual void clone_finalize(Node* dest) const override
+    NodeSliderV() { m_mask = { 0, 1 }; }
-    {
-        NodeSliderV* n = static_cast<NodeSliderV*>(dest);
-        n->init_controls();
-    }
-    virtual void init() override
-    {
-        const auto& m_template = (NodeBorder*)init_template("tpl-slider-v");
-        m_color = m_template->m_color;
-        m_border_color = m_template->m_border_color;
-        m_thinkness = m_template->m_thinkness;
-        init_controls();
-    }
-    void init_controls()
-    {
-        m_cursor = find<NodeSliderCursor>("cursor");
-        m_cursor->m_mask = { 0, 1 };
-        m_cursor->on_value_changed = [this](Node*, glm::vec2 value) {
-            if (on_value_changed)
-                on_value_changed(this, value.y);
-        };
-    }
 };
 
-class NodeSliderHue : public NodeBorder
+class NodeSliderHue : public NodeSliderV
 {
 public:
-    NodeSliderCursor* m_cursor;
     glm::vec4 m_color;
-    std::function<void(Node* target, glm::vec4 color)> on_value_changed;
+    std::function<void(Node* target, glm::vec4 color)> on_hue_changed;
     virtual Node* clone_instantiate() const override { return new NodeSliderHue(); }
     virtual void clone_finalize(Node* dest) const override
     {
+        NodeSliderV::clone_finalize(dest);
         NodeSliderHue* n = static_cast<NodeSliderHue*>(dest);
         n->init_controls();
     }
     virtual void init() override
     {
-        const auto& m_template = (NodeBorder*)init_template("tpl-slider-hue");
+        NodeSliderV::init();
-        m_color = m_template->m_color;
-        m_border_color = m_template->m_border_color;
-        m_thinkness = m_template->m_thinkness;
         init_controls();
     }
     void init_controls()
     {
-        m_cursor = find<NodeSliderCursor>("cursor");
+        on_value_changed = [this](Node*, float value) {
-        m_cursor->m_mask = { 0, 1 };
+            m_color = glm::vec4(convert_hsv2rgb({ value, 1, 1 }), 1);
-        m_cursor->m_thinkness = 1;
+            if (on_hue_changed)
-        m_cursor->m_color = glm::vec4(0);
+                on_hue_changed(this, m_color);
-        m_cursor->m_border_color = glm::vec4(0, 0, 0, 1);
-        m_cursor->on_value_changed = [this](Node*, glm::vec2 value) {
-            m_color = glm::vec4(convert_hsv2rgb({ value.y, 1, 1 }), 1);
-            if (on_value_changed)
-                on_value_changed(this, m_color);
         };
     }
     virtual void draw() override
@@ -1198,6 +1177,8 @@ public:
         ui::ShaderManager::u_mat4(kShaderUniform::MVP, m_mvp);
         //ui::ShaderManager::u_vec4(kShaderUniform::Col, m_color);
         m_plane.draw_fill();
+        NodeBorder::m_color = glm::vec4(0);
+        NodeSliderH::draw();
     }
 };
 
@@ -1637,7 +1618,9 @@ class NodePanelColor : public Node
 public:
     NodeColorQuad* m_quad;
     NodeSliderHue* m_hue;
+    glm::vec4 m_base_color;
     glm::vec4 m_color;
+    glm::vec2 m_cursor;
     std::function<void(Node* target, glm::vec4 color)> on_color_changed;
     virtual Node* clone_instantiate() const override { return new NodePanelColor(); }
     virtual void clone_finalize(Node* dest) const override
@@ -1654,17 +1637,20 @@ public:
     {
         m_quad = find<NodeColorQuad>("quad");
         m_hue = find<NodeSliderHue>("hue");
-        m_hue->on_value_changed = [this](Node*, glm::vec4 color) {
+        m_hue->on_hue_changed = [this](Node*, glm::vec4 hue_color) {
-            m_color = m_quad->m_color = color;
+            m_base_color = m_quad->m_color = hue_color;
+            auto x = glm::mix(m_base_color, glm::vec4(1, 1, 1, 1), m_cursor.x);
+            m_color = glm::mix(x, glm::vec4(0, 0, 0, 1), m_cursor.y);
             if (on_color_changed)
-                on_color_changed(this, color);
+                on_color_changed(this, m_color);
         };
         m_quad->on_value_changed = [this](Node*, glm::vec2 pos)
         {
-            auto x = glm::mix(m_color, glm::vec4(1, 1, 1, 1), pos.x);
+            auto x = glm::mix(m_base_color, glm::vec4(1, 1, 1, 1), pos.x);
-            auto color = glm::mix(x, glm::vec4(0, 0, 0, 1), pos.y);
+            m_color = glm::mix(x, glm::vec4(0, 0, 0, 1), pos.y);
+            m_cursor = pos;
             if (on_color_changed)
-                on_color_changed(this, color);
+                on_color_changed(this, m_color);
         };
     }
 };
@@ -1845,12 +1831,14 @@ public:
         init_slider(m_jitter_angle, "jitter-angle", &NodeCanvas2D::m_jitter_angle);
         init_slider(m_jitter_spread, "jitter-spread", &NodeCanvas2D::m_jitter_spread);
         init_slider(m_jitter_flow, "jitter-flow", &NodeCanvas2D::m_jitter_flow);
+        //m_canvas->draw_stroke();
     }
     void init_slider(NodeSliderH*& slider, const char* id, float NodeCanvas2D::* prop)
     {
         slider = find<NodeSliderH>(id);
         slider->on_value_changed = std::bind(&NodePanelStroke::handle_slide, 
             this, prop, std::placeholders::_1, std::placeholders::_2);
+        m_canvas->*prop = slider->m_value.x;
     }
     void handle_slide(float NodeCanvas2D::* prop, Node* target, float value)
     {