From bb7e94d06bffd9ab5adf9883e10a223650741f67 Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Fri, 7 Apr 2017 21:21:43 +0100
Subject: [PATCH] drag canvas, render layers and tmp, add/select layer, opacity
 for layer, color bucket filler

---
 data/layout.xml    |   5 +++-
 data/ui/bucket.png | Bin 0 -> 1689 bytes
 data/ui/bucket.svg |   1 +
 engine/app.cpp     |  18 ++++++++++++
 engine/brush.h     |   2 +-
 engine/canvas.cpp  |  40 ++++++++++---------------
 engine/canvas.h    |   6 ++--
 engine/layout.cpp  |   4 +--
 engine/layout.h    |  72 +++++++++++++++++++++++++++++++++------------
 9 files changed, 99 insertions(+), 49 deletions(-)
 create mode 100644 data/ui/bucket.png
 create mode 100644 data/ui/bucket.svg

diff --git a/data/layout.xml b/data/layout.xml
index 1288d9b..fa9c48c 100644
--- a/data/layout.xml
+++ b/data/layout.xml
@@ -43,7 +43,7 @@
         <text id="label" text="Layer0" font-face="arial" font-size="11"/>
       </node>
       <node color=".4" width="100" pad="5">
-        <slider-h/>
+        <slider-h id="sl-opacity" value="1"/>
       </node>
     </border>
   </layout>
@@ -372,6 +372,9 @@
 
           <button id="btn-switch" width="50" height="50" margin="0 0 5 0" text="Switch"/>
           <button id="btn-close" width="50" height="50" margin="0 0 5 0" text="Clear"/>
+          <button-custom id="btn-bucket" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
+            <image path="data/ui/bucket.png" width="100%" height="100%" align="center" justify="flex-end"/>
+          </button-custom>
 
           <!--panel togglers-->
           <button-custom id="btn-stroke" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
diff --git a/data/ui/bucket.png b/data/ui/bucket.png
new file mode 100644
index 0000000000000000000000000000000000000000..71f3e9a040dce885fa9d5b1df2ee763b204e8a7a
GIT binary patch
literal 1689
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

literal 0
HcmV?d00001

diff --git a/data/ui/bucket.svg b/data/ui/bucket.svg
new file mode 100644
index 0000000..b3471f7
--- /dev/null
+++ b/data/ui/bucket.svg
@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M13.8,58.5l18,18c2.3,2.3,5.4,3.5,8.5,3.5c3.1,0,6.1-1.2,8.5-3.5l28.3-28.3c0.4-0.4,0.6-0.9,0.6-1.4s-0.2-1-0.6-1.4   L45,13.2c-0.8-0.8-2-0.8-2.8,0L27.2,28.1c-0.1,0-0.1,0-0.2,0H16.1c-3.1,0-5.6,2.7-5.6,6.1c0,3,2,5.5,4.5,6l-1.3,1.3   C9.2,46.2,9.2,53.8,13.8,58.5z M72.8,46.7L45.9,73.6c-1.5,1.5-3.5,2.3-5.7,2.3c-2.1,0-4.1-0.8-5.7-2.3l-18-18   c-1.5-1.5-2.3-3.5-2.3-5.7c0-2.1,0.8-4.1,2.3-5.7l4-4h27.8c0.7,1.5,2.2,2.5,4,2.5c2.5,0,4.5-2,4.5-4.5c0-2.5-2-4.5-4.5-4.5   c-1.7,0-3.2,1-4,2.5H24.7l18.9-18.9L72.8,46.7z M16.1,36.3c-0.9,0-1.6-1-1.6-2.1c0-1.1,0.7-2.1,1.6-2.1h7.1L19,36.3H16.1z"/><path d="M75.6,54.1c-1.1,1.5-10.9,14.4-10.9,20.7c0,6.9,5.6,12.5,12.5,12.5s12.5-5.6,12.5-12.5c0-6.3-9.8-19.3-10.9-20.7   C78,53.2,76.3,53.2,75.6,54.1z"/></g></svg>
\ No newline at end of file
diff --git a/engine/app.cpp b/engine/app.cpp
index 093c287..cc6c1ab 100644
--- a/engine/app.cpp
+++ b/engine/app.cpp
@@ -338,6 +338,24 @@ void App::initLayout()
                 on_stroke_change();
         };
 
+        layers->on_layer_add = [this](Node*) {
+            canvas->m_canvas->layer_add("asd");
+        };
+
+        layers->on_layer_change = [this](Node*, int old_idx, int new_idx) {
+            canvas->m_canvas->m_current_layer_idx = new_idx;
+        };
+
+        layers->on_layer_opacity_changed = [this](Node*, int idx, float value) {
+            canvas->m_canvas->m_layers[idx].m_opacity = value;
+        };
+
+        if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-bucket"))
+        {
+            button->on_click = [this](Node*) {
+                canvas->m_canvas->clear(canvas->m_brush.m_tip_color);
+            };
+        }
         if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-stroke"))
         {
             button->on_click = [this](Node*) {
diff --git a/engine/brush.h b/engine/brush.h
index 7415398..8f24c81 100644
--- a/engine/brush.h
+++ b/engine/brush.h
@@ -76,7 +76,7 @@ public:
     RTT m_rtt;
     bool m_visible = true;
     bool m_locked = false;
-    float m_alpha = 1.f;
+    float m_opacity = 1.f;
     std::string m_name;
     bool create(int width, int height, std::string name)
     {
diff --git a/engine/canvas.cpp b/engine/canvas.cpp
index f3651c8..103b7bd 100644
--- a/engine/canvas.cpp
+++ b/engine/canvas.cpp
@@ -2,25 +2,16 @@
 #include "log.h"
 #include "canvas.h"
 
-void ui::Canvas::clear()
+void ui::Canvas::clear(const glm::vec4& c/*={0,0,0,1}*/)
 {
-    m_fb.bindFramebuffer();
-
-    GLint vp[4];
     GLfloat cc[4];
-    glGetIntegerv(GL_VIEWPORT, vp);
+    m_layers[m_current_layer_idx].m_rtt.bindFramebuffer();
     glGetFloatv(GL_COLOR_CLEAR_VALUE, cc);
-
-    glClearColor(1, 1, 1, 0);
+    glClearColor(c.r, c.g, c.b, c.a);
     glClear(GL_COLOR_BUFFER_BIT);
     glViewport(0, 0, m_width, m_height);
-
-    //
-
-    glViewport(vp[0], vp[1], vp[2], vp[3]);
     glClearColor(cc[0], cc[1], cc[2], cc[3]);
-
-    m_fb.unbindFramebuffer();
+    m_layers[m_current_layer_idx].m_rtt.unbindFramebuffer();
 }
 void ui::Canvas::stroke_end()
 {
@@ -45,6 +36,7 @@ void ui::Canvas::stroke_draw()
     glViewport(0, 0, m_width, m_height);
 
     auto proj = glm::ortho(0.f, (float)m_width, 0.f, (float)m_height, -1.f, 1.f);
+
     auto m_brush = m_current_stroke->m_brush;
     auto samples = m_current_stroke->compute_samples();
     auto& tex = TextureManager::get(m_brush.m_tex_id);
@@ -107,7 +99,7 @@ void ui::Canvas::stroke_draw()
 
             glm::vec2 pad(1);
             glm::ivec2 tex_pos = glm::clamp(glm::floor(bb_min) - pad , { 0, 0 }, { m_width, m_height });
-            glm::ivec2 tex_sz  = glm::clamp(glm::ceil(bb_sz ) + pad*2.f, { 0, 0 }, { m_width, m_height });
+            glm::ivec2 tex_sz  = glm::clamp(glm::ceil(bb_sz ) + pad*2.f, { 0, 0 }, (glm::vec2)(glm::ivec2(m_width, m_height) - tex_pos));
             glCopyTexSubImage2D(GL_TEXTURE_2D, 0, 
                 tex_pos.x, tex_pos.y,
                 tex_pos.x, tex_pos.y,
@@ -140,7 +132,7 @@ void ui::Canvas::stroke_commit()
         return;
     m_dirty = false;
 
-    m_fb.bindFramebuffer();
+    m_layers[m_current_layer_idx].m_rtt.bindFramebuffer();
 
     // copy to tmp2 for layer blending
     m_tex2.bind();
@@ -164,7 +156,7 @@ void ui::Canvas::stroke_commit()
     ShaderManager::use(ui::kShader::StrokeLayer);
     ShaderManager::u_int(kShaderUniform::Tex, 0);
     ShaderManager::u_int(kShaderUniform::TexBG, 1);
-    ShaderManager::u_float(kShaderUniform::Alpha, m_current_stroke->m_brush.m_tip_opacity); // TODO: if using opacity in commit, update blending to match the preview when rendering m_tmp in NodeCanvas
+    ShaderManager::u_float(kShaderUniform::Alpha, m_current_stroke->m_brush.m_tip_opacity);
     ShaderManager::u_mat4(kShaderUniform::MVP, glm::ortho(-.5f, .5f, -.5f, .5f, -1.f, 1.f));
     m_plane.draw_fill();
     m_sampler.unbind();
@@ -178,7 +170,7 @@ void ui::Canvas::stroke_commit()
     glViewport(vp[0], vp[1], vp[2], vp[3]);
     glClearColor(cc[0], cc[1], cc[2], cc[3]);
 
-    m_fb.unbindFramebuffer();
+    m_layers[m_current_layer_idx].m_rtt.unbindFramebuffer();
 }
 void ui::Canvas::stroke_update(glm::vec2 point, float pressure)
 {
@@ -205,21 +197,21 @@ void ui::Canvas::resize(int width, int height)
 {
     m_width = width;
     m_height = height;
-    m_tmp.create(width, height);
-    m_fb.create(width, height);
-    m_tex.create(width, height);
-    m_tex2.create(width, height);
+//     m_tmp.create(width, height);
+//     m_fb.create(width, height);
+//     m_tex.create(width, height);
+//     m_tex2.create(width, height);
 }
 bool ui::Canvas::create(int width, int height)
 {
     m_width = width;
     m_height = height;
     m_tmp.create(width, height);
-    m_fb.create(width, height);
+    //m_fb.create(width, height);
     m_tex.create(width, height);
     m_tex2.create(width, height); // TODO: destroy before recreating
-    m_sampler.create(GL_LINEAR, GL_CLAMP_TO_EDGE);
-    m_sampler_bg.create(GL_NEAREST, GL_CLAMP_TO_EDGE);
+    m_sampler.create();
+    m_sampler_bg.create();
     m_plane.create<1>(1, 1);
     m_mesh.create();
     return true;
diff --git a/engine/canvas.h b/engine/canvas.h
index 50256d8..b6ae10a 100644
--- a/engine/canvas.h
+++ b/engine/canvas.h
@@ -11,18 +11,18 @@ class Canvas
 {
     Plane m_plane;
     BrushMesh m_mesh;
-    int m_current_layer_idx = 0;
     bool m_dirty = false;
 public:
     int m_width;
     int m_height;
     bool m_use_instanced = false;
+    int m_current_layer_idx = 0;
     Stroke* m_current_stroke = nullptr;
     bool m_show_tmp = false;
     std::vector<Layer> m_layers;
     std::vector<Stroke> m_strokes;
     RTT m_tmp;
-    RTT m_fb;
+    //RTT m_fb;
     Texture2D m_tex;
     Texture2D m_tex2;
     Sampler m_sampler;
@@ -36,7 +36,7 @@ public:
     void stroke_draw();
     void stroke_end();
     void stroke_commit();
-    void clear();
+    void clear(const glm::vec4& color = { 0, 0, 0, 1 });
 };
 
 NS_END
diff --git a/engine/layout.cpp b/engine/layout.cpp
index 6255da8..4cac4f3 100644
--- a/engine/layout.cpp
+++ b/engine/layout.cpp
@@ -213,8 +213,8 @@ void Node::update_internal(const glm::vec2& origin, const glm::mat4& proj)
         float pl = 0;//YGNodeLayoutGetPadding(parent->y_node, YGEdgeLeft);
         glm::vec2 off_p(pl, pt);
         glm::vec2 off_s(pr, pb);
-        m_clip = glm::vec4(m_pos - off_p, m_size + off_p + off_s);
-        m_clip = rect_intersection(m_clip, parent->m_clip);
+        m_clip_uncut = glm::vec4(m_pos - off_p, m_size + off_p + off_s);
+        m_clip = rect_intersection(m_clip_uncut, parent->m_clip);
     }
     else
     {
diff --git a/engine/layout.h b/engine/layout.h
index 8155b0c..76a9d6d 100644
--- a/engine/layout.h
+++ b/engine/layout.h
@@ -175,6 +175,7 @@ public:
     glm::vec2 m_pos;
     glm::vec2 m_size;
     glm::vec4 m_clip;
+    glm::vec4 m_clip_uncut;
     std::string m_name;
     bool m_display = true;
     Node(const Node&) = delete;
@@ -212,6 +213,7 @@ public:
     void SetHeight(float value) { YGNodeStyleSetHeight(y_node, value); }
     void SetHeightP(float value) { YGNodeStyleSetHeightPercent(y_node, value); }
     void SetSize(glm::vec2 value) { SetWidth(value.x); SetHeight(value.y); }
+    void SetSize(float w, float h) { SetWidth(w); SetHeight(h); }
 
     void SetPadding(float t, float r, float b, float l) 
     {
@@ -232,6 +234,10 @@ public:
         YGNodeStyleSetPosition(y_node, YGEdgeTop, t);
         YGNodeStyleSetPosition(y_node, YGEdgeLeft, l);
     }
+    void SetPosition(const glm::vec2 pos)
+    {
+        SetPosition(pos.x, pos.y);
+    }
 
     void SetFlexGrow(float value) { YGNodeStyleSetFlexGrow(y_node, value); }
     void SetFlexShrink(float value) { YGNodeStyleSetFlexShrink(y_node, value); }
@@ -1259,6 +1265,7 @@ class NodeLayer : public NodeBorder
 {
 public:
     std::function<void(NodeLayer* target)> on_selected;
+    std::function<void(NodeLayer* target, float opacity)> on_opacity_changed;
     bool m_selected = false;
     glm::vec4 m_color_normal = glm::vec4(.4, .4, .4, 1);
     glm::vec4 m_color_selected = glm::vec4(.3, .3, .3, 1);
@@ -1266,6 +1273,7 @@ public:
     std::string m_label_text;
     NodeText* m_label;
     NodeCheckBox* m_visibility;
+    NodeSliderH* m_opacity;
     virtual Node* clone_instantiate() const override { return new NodeLayer(); }
     virtual void clone_children(Node* dest) const override
     {
@@ -1289,6 +1297,7 @@ public:
         m_thinkness = m_template->m_thinkness;
         m_label = find<NodeText>("label");
         m_visibility = find<NodeCheckBox>("cb");
+        m_opacity = find<NodeSliderH>("sl-opacity");
     }
     virtual void parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr) override
     {
@@ -1309,6 +1318,10 @@ public:
         NodeBorder::loaded();
         if (!m_label_text.empty())
             m_label->set_text(m_label_text.c_str());
+        m_opacity->on_value_changed = [this](Node*, float value) {
+            if (on_opacity_changed)
+                on_opacity_changed(this, value);
+        };
     }
     virtual kEventResult handle_event(Event* e) override
     {
@@ -1354,6 +1367,7 @@ class NodePanelLayer : public Node
     int id_counter = 0;
 public:
     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 index)> on_layer_delete;
     std::function<void(Node* target)> on_layer_add;
     NodeLayer* m_current_layer = nullptr;
@@ -1411,6 +1425,7 @@ public:
         l->loaded();
         l->set_name(name);
         l->on_selected = std::bind(&NodePanelLayer::handle_layer_selected, this, std::placeholders::_1);
+        l->on_opacity_changed = std::bind(&NodePanelLayer::handle_layer_opacity, this, std::placeholders::_1, std::placeholders::_2);
         m_layers.push_back(l);
         if (on_layer_add)
             on_layer_add(this);
@@ -1429,6 +1444,11 @@ public:
         if (on_layer_change)
             on_layer_change(this, -1, i);
     }
+    void handle_layer_opacity(NodeLayer* target, float value)
+    {
+        if (on_layer_opacity_changed)
+            on_layer_opacity_changed(this, m_layers_container->get_child_index(target), value);
+    }
     void handle_layer_selected(NodeLayer* target)
     {
         if (m_current_layer)
@@ -1850,6 +1870,9 @@ public:
 class NodeCanvas : public Node
 {
     bool m_dragging = false;
+    bool m_draggingR = false;
+    glm::vec2 m_dragR_start;
+    glm::vec2 m_pan_start;
 public:
     std::unique_ptr<ui::Canvas> m_canvas;
     ui::Brush m_brush;
@@ -1860,8 +1883,12 @@ public:
         m_mouse_ignore = false;
         m_canvas = std::make_unique<ui::Canvas>();
         m_canvas->create(512, 512);
+        m_canvas->layer_add("asd");
         m_canvas->clear();
         m_sampler.create();
+        SetPositioning(YGPositionTypeAbsolute);
+        SetPosition(100, 100);
+        SetSize({ 512, 512 });
     }
     virtual void draw() override
     {
@@ -1874,10 +1901,10 @@ public:
         glGetIntegerv(GL_VIEWPORT, vp);
         glGetFloatv(GL_COLOR_CLEAR_VALUE, cc);
 
-        glClearColor(1, 1, 1, 1);
+        glClearColor(0, 0, 0, 1);
         glClear(GL_COLOR_BUFFER_BIT);
         float zoom = root()->m_zoom;
-        auto box = m_clip * zoom;
+        auto box = m_clip_uncut * zoom;
         glm::ivec4 c = (glm::ivec4)glm::vec4(box.x, (int)(vp[3] - box.y - box.w), box.z, box.w);
         glViewport(c.x, c.y, c.z, c.w);
 
@@ -1889,34 +1916,31 @@ public:
             glm::translate(glm::vec3(.5f, .5f, 0.f)); // pivot
 
         m_sampler.bind(0);
-        ui::ShaderManager::use(kShader::Texture);
+        ui::ShaderManager::use(kShader::TextureAlpha);
         ui::ShaderManager::u_int(kShaderUniform::Tex, 0);
         ui::ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
         
         auto blend = glIsEnabled(GL_BLEND);
         
         glEnable(GL_BLEND);
-        m_canvas->m_fb.bindTexture();
-        NodeBorder::m_plane.draw_fill();
-        m_canvas->m_fb.unbindTexture();
-
-        if (m_canvas->m_show_tmp)
+        for (int i = 0; i < m_canvas->m_layers.size(); i++)
         {
-            glEnable(GL_BLEND);
-            ui::ShaderManager::use(kShader::TextureAlpha);
-            ui::ShaderManager::u_int(kShaderUniform::Tex, 0);
-            ui::ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
-            ui::ShaderManager::u_float(kShaderUniform::Alpha, m_canvas->m_current_stroke->m_brush.m_tip_opacity);
-            m_canvas->m_tmp.bindTexture();
+            ui::ShaderManager::u_float(kShaderUniform::Alpha, m_canvas->m_layers[i].m_opacity);
+            m_canvas->m_layers[i].m_rtt.bindTexture();
             NodeBorder::m_plane.draw_fill();
-            m_canvas->m_tmp.unbindTexture();
+            m_canvas->m_layers[i].m_rtt.unbindTexture();
+            if (m_canvas->m_show_tmp && m_canvas->m_current_layer_idx == i)
+            {
+                glEnable(GL_BLEND);
+                ui::ShaderManager::u_float(kShaderUniform::Alpha, m_canvas->m_current_stroke->m_brush.m_tip_opacity);
+                m_canvas->m_tmp.bindTexture();
+                NodeBorder::m_plane.draw_fill();
+                m_canvas->m_tmp.unbindTexture();
+            }
         }
         
         blend ? glEnable(GL_BLEND) : glDisable(GL_BLEND);
-
         m_sampler.unbind();
-
-
         glViewport(vp[0], vp[1], vp[2], vp[3]);
         glClearColor(cc[0], cc[1], cc[2], cc[3]);
     }
@@ -1948,9 +1972,21 @@ public:
             m_dragging = false;
             mouse_release();
             break;
+        case kEventType::MouseDownR:
+            m_draggingR = true;
+            m_dragR_start = me->m_pos;
+            m_pan_start = GetPosition();
+            mouse_capture();
+            break;
+        case kEventType::MouseUpR:
+            m_draggingR = false;
+            mouse_release();
+            break;
         case kEventType::MouseMove:
             if (m_dragging)
                 m_canvas->stroke_update(cur, 1.f);
+            if (m_draggingR)
+                SetPosition(m_pan_start + me->m_pos - m_dragR_start);
             break;
         default:
             break;