From a385addae5dd0cc6dc935cf6d8b3713099cb1fb0 Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Sun, 26 Mar 2017 14:23:15 +0100
Subject: [PATCH] implement basic paint canvas

---
 data/layout.xml        |   4 +-
 engine.vcxproj         |   2 +
 engine.vcxproj.filters |   6 +++
 engine/app.cpp         |  48 ++++++++++++++++--
 engine/app.h           |   1 +
 engine/brush.cpp       |   5 ++
 engine/brush.h         |  58 +++++++++++++++++++++
 engine/canvas.h        |  99 +++++++++++++++++-------------------
 engine/layout.cpp      |   1 -
 engine/layout.h        | 111 ++++++++++++++++-------------------------
 engine/shader.h        |   1 +
 11 files changed, 210 insertions(+), 126 deletions(-)
 create mode 100644 engine/brush.cpp
 create mode 100644 engine/brush.h

diff --git a/data/layout.xml b/data/layout.xml
index da3c70e..df67b13 100644
--- a/data/layout.xml
+++ b/data/layout.xml
@@ -322,7 +322,7 @@
       </border>
       <!-- toolbar -->
       <border id="toolbar" height="50" width="100%" pad="5" dir="row" color=".2">
-        <button id="btn-close" width="50" height="100%" margin="0 5 0 0" text="Close"/>
+        <button id="btn-close" width="50" height="100%" margin="0 5 0 0" text="Clear"/>
         <button id="btn-popup" width="50" height="100%" margin="0 5 0 0" text="Popup"/>
         <ref id="multi-button"/>
         <border width="50" margin="0 5 0 0" color=".1" thickness="1" border-color=".5" justify="center" align="center">
@@ -394,7 +394,7 @@
         </node>
         <!-- content panel -->
         <node grow="1" color=".1" pad="10">
-          <canvas grow="1"/>
+          <canvas id="paint-canvas" grow="1"/>
         </node>
       </node>
       <!-- status bar -->
diff --git a/engine.vcxproj b/engine.vcxproj
index be2ed74..f65b811 100644
--- a/engine.vcxproj
+++ b/engine.vcxproj
@@ -153,6 +153,7 @@
     <ClCompile Include="engine\app.cpp" />
     <ClCompile Include="engine\asset.cpp" />
     <ClCompile Include="engine\bezier.cpp" />
+    <ClCompile Include="engine\brush.cpp" />
     <ClCompile Include="engine\canvas.cpp" />
     <ClCompile Include="engine\font.cpp" />
     <ClCompile Include="engine\image.cpp" />
@@ -192,6 +193,7 @@
     <ClInclude Include="engine\app.h" />
     <ClInclude Include="engine\asset.h" />
     <ClInclude Include="engine\bezier.h" />
+    <ClInclude Include="engine\brush.h" />
     <ClInclude Include="engine\canvas.h" />
     <ClInclude Include="engine\font.h" />
     <ClInclude Include="engine\image.h" />
diff --git a/engine.vcxproj.filters b/engine.vcxproj.filters
index 8464ef6..9ff653e 100644
--- a/engine.vcxproj.filters
+++ b/engine.vcxproj.filters
@@ -66,6 +66,9 @@
     <ClCompile Include="engine\canvas.cpp">
       <Filter>Source Files</Filter>
     </ClCompile>
+    <ClCompile Include="engine\brush.cpp">
+      <Filter>Source Files</Filter>
+    </ClCompile>
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="engine\app.h">
@@ -107,6 +110,9 @@
     <ClInclude Include="engine\canvas.h">
       <Filter>Header Files</Filter>
     </ClInclude>
+    <ClInclude Include="engine\brush.h">
+      <Filter>Header Files</Filter>
+    </ClInclude>
   </ItemGroup>
   <ItemGroup>
     <None Include="engine\bezier" />
diff --git a/engine/app.cpp b/engine/app.cpp
index 834c1c9..f18ed78 100644
--- a/engine/app.cpp
+++ b/engine/app.cpp
@@ -47,6 +47,8 @@ void App::initShaders()
         "void main(){"
         "   frag = vec4(uv.xy, 0.0, 1.0);"
         "}";
+    
+    // TEXTURE ATLAS
     static const char* shader_atlas_v =
         SHADER_VERSION
         "uniform mat4 mvp;"
@@ -67,6 +69,8 @@ void App::initShaders()
         "void main(){"
         "   frag = texture(tex, uv);"
         "}";
+    
+    // SOLID COLOR
     static const char* shader_color_v =
         SHADER_VERSION
         "uniform mat4 mvp;"
@@ -81,6 +85,8 @@ void App::initShaders()
         "void main(){"
         "   frag = col;"
         "}";
+    
+    // COLOR QUAD
     static const char* shader_color_quad_v =
         SHADER_VERSION
         "uniform mat4 mvp;"
@@ -100,6 +106,8 @@ void App::initShaders()
         "   vec4 gradient_x = mix(col, vec4(1.0, 1.0, 1.0, 1.0), uv.x);"
         "   frag = mix(gradient_x, vec4(0.0, 0.0, 0.0, 1.0), uv.y);"
         "}";
+    
+    // HUE
     static const char* shader_color_hue_v =
         SHADER_VERSION
         "uniform mat4 mvp;"
@@ -123,6 +131,8 @@ void App::initShaders()
         "void main(){"
         "   frag = vec4(hsv2rgb(vec3(uv.y, 1.0, 1.0)), 1.0);"
         "}";
+
+    // FONT
     static const char* shader_font_v =
         SHADER_VERSION
         "uniform mat4 mvp;"
@@ -144,6 +154,29 @@ void App::initShaders()
         "   frag = vec4(col.rgb, a);"
         "}";
 
+    // STROKE
+    static const char* shader_stroke_v =
+        SHADER_VERSION
+        "uniform mat4 mvp;"
+        "in vec4 pos;"
+        "in vec2 uvs;"
+        "out vec3 uv;"
+        "void main(){"
+        "   uv = vec3(uvs, pos.w);"
+        "   gl_Position = mvp * vec4(pos.xyz, 1.0);"
+        "}";
+    static const char* shader_stroke_f =
+        SHADER_VERSION
+        "uniform sampler2D tex;"
+        "uniform vec4 col;"
+        "uniform float alpha;"
+        "in vec3 uv;"
+        "out vec4 frag;"
+        "void main(){"
+        "   float a = (1.0 - texture(tex, uv.xy).r) * alpha;"
+        "   frag = vec4(col.rgb, a);"
+        "}";
+
     LOG("initializing shaders");
     if (!ShaderManager::create(kShader::Texture, shader_v, shader_f))
         LOG("Failed to create shader Texture");
@@ -159,6 +192,8 @@ void App::initShaders()
         LOG("Failed to create shader Font");
     if (!ShaderManager::create(kShader::Atlas, shader_atlas_v, shader_atlas_f))
         LOG("Failed to create shader Atlas");
+    if (!ShaderManager::create(kShader::Stroke, shader_stroke_v, shader_stroke_f))
+        LOG("Failed to create shader Stroke");
     LOG("shaders initialized");
 }
 
@@ -193,6 +228,7 @@ void App::initLayout()
         LOG("initializing layout components");
         sidebar = layout[main_id]->find<NodeBorder>("sidebar");
         panels = layout[main_id]->find<Node>("panels");
+        canvas = layout[main_id]->find<NodeCanvas>("paint-canvas");
 
         //brushes = layout[main_id]->find<NodePanelBrush>("panel-brush");
         //layers = layout[main_id]->find<NodePanelLayer>("panel-layer");
@@ -225,20 +261,23 @@ void App::initLayout()
 
         brushes->on_brush_changed = [this](Node* target, int index) {
             auto tid = brushes->get_texture_id(index);
-            stroke->m_canvas->m_tex_id = tid;
+            stroke->m_canvas->m_brush.m_tex_id = tid;
             stroke->m_canvas->draw_stroke();
+            canvas->m_brush = stroke->m_canvas->m_brush;
             if (on_brush_select)
                 on_brush_select(index);
         };
 
         color->on_color_changed = [this](Node* target, glm::vec4 color) {
-            stroke->m_canvas->m_tip_color = color;
+            stroke->m_canvas->m_brush.m_tip_color = color;
             stroke->m_canvas->draw_stroke();
+            canvas->m_brush = stroke->m_canvas->m_brush;
             if (on_color_change)
                 on_color_change(color);
         };
 
         stroke->on_stroke_change = [this](Node*target) {
+            canvas->m_brush = stroke->m_canvas->m_brush;
             if (on_stroke_change)
                 on_stroke_change();
         };
@@ -306,7 +345,10 @@ void App::initLayout()
 
         if (auto* button = layout[main_id]->find<NodeButton>("btn-close"))
         {
-            button->on_click = [](Node*) { exit(0); };
+            button->on_click = [this](Node*) { 
+                //exit(0); 
+                canvas->m_canvas->clear();
+            };
         }
         if (auto* button = layout[main_id]->find<NodeButton>("btn-popup"))
         {
diff --git a/engine/app.h b/engine/app.h
index edb0956..98c5c7f 100644
--- a/engine/app.h
+++ b/engine/app.h
@@ -24,6 +24,7 @@ public:
     std::shared_ptr<NodePanelLayer> layers;
     std::shared_ptr<NodePanelColor> color;
     std::shared_ptr<NodePanelStroke> stroke;
+    NodeCanvas* canvas;
     Node* current_panel = nullptr;
     Node* panels;
     std::function<void(int)> on_brush_select;
diff --git a/engine/brush.cpp b/engine/brush.cpp
new file mode 100644
index 0000000..15d3c66
--- /dev/null
+++ b/engine/brush.cpp
@@ -0,0 +1,5 @@
+#include "pch.h"
+#include "brush.h"
+
+
+
diff --git a/engine/brush.h b/engine/brush.h
new file mode 100644
index 0000000..afefedc
--- /dev/null
+++ b/engine/brush.h
@@ -0,0 +1,58 @@
+#pragma once
+#include "rtt.h"
+
+NS_START
+
+class Brush
+{
+public:
+    int id;
+    std::string m_name;
+    uint16_t m_tex_id;
+    glm::vec4 m_tip_color;
+    float m_tip_size;
+    float m_tip_spacing;
+    float m_tip_flow;
+    float m_tip_angle;
+    float m_jitter_scale;
+    float m_jitter_angle;
+    float m_jitter_spread;
+    float m_jitter_flow;
+};
+
+class Stroke
+{
+public:
+    struct Keypoint
+    {
+        glm::vec2 pos;
+        float pressure;
+    };
+    int m_layer;
+    float m_dist;
+    ui::Brush m_brush;
+    std::vector<Keypoint> m_keypoints;
+    void add_point(glm::vec2 pos, float pressure)
+    {
+        m_keypoints.emplace_back();
+        m_keypoints.back().pos = pos;
+        m_keypoints.back().pressure = pressure;
+    }
+};
+
+class Layer
+{
+public:
+    RTT m_rtt;
+    bool m_visible = true;
+    bool m_locked = false;
+    float m_alpha = 1.f;
+    std::string m_name;
+    bool create(int width, int height, std::string name)
+    {
+        m_rtt.create(width, height);
+        return true;
+    }
+};
+
+NS_END
diff --git a/engine/canvas.h b/engine/canvas.h
index 89d3f8a..952eaa2 100644
--- a/engine/canvas.h
+++ b/engine/canvas.h
@@ -3,52 +3,10 @@
 #include "texture.h"
 #include "shader.h"
 #include "shape.h"
+#include "brush.h"
 
 NS_START
 
-class Brush
-{
-public:
-    std::string m_name;
-    int id;
-    uint16_t m_texture_id;
-};
-
-class Stroke
-{
-public:
-    struct Keypoint
-    {
-        glm::vec2 pos;
-        float pressure;
-    };
-    int m_layer;
-    float m_dist;
-    std::shared_ptr<Brush> m_brush;
-    std::vector<Keypoint> m_keypoints;
-    void add_point(glm::vec2 pos, float pressure)
-    {
-        m_keypoints.emplace_back();
-        m_keypoints.back().pos = pos;
-        m_keypoints.back().pressure = pressure;
-    }
-};
-
-class Layer
-{
-public:
-    RTT m_rtt;
-    bool m_visible = true;
-    bool m_locked = false;
-    float m_alpha = 1.f;
-    std::string m_name;
-    bool create(int width, int height, std::string name)
-    {
-        m_rtt.create(width, height);
-        return true;
-    }
-};
-
 class Canvas
 {
 public:
@@ -62,7 +20,8 @@ public:
     RTT m_fb;
     Sampler m_sampler;
     Plane m_plane;
-    bool create(int width, int height) 
+    std::minstd_rand prng;
+    bool create(int width, int height)
     {
         m_width = width;
         m_height = height;
@@ -78,8 +37,9 @@ public:
         m_layers.emplace_back();
         m_layers.back().create(m_width, m_height, name);
     }
-    void stroke_start(glm::vec2 point, float pressure, std::shared_ptr<Brush> brush)
+    void stroke_start(glm::vec2 point, float pressure, const ui::Brush& brush)
     {
+        prng.seed(0);
         m_strokes.emplace_back();
         m_strokes.back().m_brush = brush;
         m_strokes.back().add_point(point, pressure);
@@ -97,21 +57,56 @@ public:
         glGetFloatv(GL_COLOR_CLEAR_VALUE, cc);
 
         glViewport(0, 0, m_width, m_height);
+        glEnable(GL_BLEND);
 
-        auto mvp = glm::ortho(0.f, (float)m_width, (float)m_height, 0.f, -1.f, 1.f) *
-            glm::translate(glm::vec3(point, 0)) *
-            glm::scale(glm::vec3(30, 30, 1));
+        //auto mvp = glm::ortho(0.f, (float)m_width, (float)m_height, 0.f, -1.f, 1.f) *
+        //    glm::translate(glm::vec3(point, 0)) *
+        //    glm::scale(glm::vec3(30, 30, 1));
+        //auto& tex = TextureManager::get(m_current_stroke->m_brush.m_tex_id);
+        //tex.bind();
+        //m_sampler.bind(0);
+        //ui::ShaderManager::use(kShader::Stroke);
+        //ui::ShaderManager::u_int(kShaderUniform::Tex, 0);
+        //ui::ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
+        //ui::ShaderManager::u_float(kShaderUniform::Alpha, 1.f);
+        //ui::ShaderManager::u_vec4(kShaderUniform::Col, { 0, 0, 0, 1 });
+        //m_plane.draw_fill();
+        //m_sampler.unbind();
+        //tex.unbind();
 
-        auto& tex = TextureManager::get(m_current_stroke->m_brush->m_texture_id);
+        auto proj = glm::ortho(0.f, (float)m_width, (float)m_height, 0.f, -1.f, 1.f);
+        auto m_brush = m_current_stroke->m_brush;
+
+        auto rnd_nor = [&] { return float((double)prng() / (double)prng.max()); };              // normalized [0, +1]
+        auto rnd_neg = [&] { return float((double)prng() / (double)prng.max() * 2.0 - 1.0); };  // normalized [-1, +1]
+        auto rnd_rad = [&] { return float((double)prng() / (double)prng.max() * M_PI * 2.0); }; // normalized [0, 2pi]
+        auto rnd_vec = [&] { float rad = rnd_rad(); return glm::vec2(cosf(rad), sinf(rad)); };  // normalized direction vector
+
+        float angle = (m_brush.m_tip_angle + rnd_nor() * m_brush.m_jitter_angle) * (float)(M_PI * 2.0);
+        glm::vec2 pos = point + (rnd_vec() * m_brush.m_jitter_spread * 100.f);
+        float size = 100.f * m_brush.m_tip_size * (1.f - rnd_nor() * m_brush.m_jitter_scale);
+        float flow = m_brush.m_tip_flow * (1.f - rnd_nor() * m_brush.m_jitter_flow);
+
+        //alpha += glm::max(m_brush.m_tip_spacing * .2f, .01f);
+        auto mvp = proj *
+            //glm::translate(glm::vec3(i * 40 * m_tip_spacing, m_rtt.getHeight() / 2, 0)) *
+            glm::translate(glm::vec3(pos, 0)) *
+            glm::scale(glm::vec3(size, size, 1)) *
+            glm::eulerAngleZ(angle);
+       
+        auto& tex = TextureManager::get(m_brush.m_tex_id);
         tex.bind();
         m_sampler.bind(0);
-        ui::ShaderManager::use(kShader::Texture);
-        ui::ShaderManager::u_int(kShaderUniform::Tex, 0);
-        ui::ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
+        ShaderManager::use("stroke");
+        ShaderManager::u_vec4(kShaderUniform::Col, m_brush.m_tip_color);
+        ShaderManager::u_int(kShaderUniform::Tex, 0);
+        ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
+        ShaderManager::u_float(kShaderUniform::Alpha, flow);
         m_plane.draw_fill();
         m_sampler.unbind();
         tex.unbind();
 
+        glDisable(GL_BLEND);
 
         glViewport(vp[0], vp[1], vp[2], vp[3]);
         glClearColor(cc[0], cc[1], cc[2], cc[3]);
diff --git a/engine/layout.cpp b/engine/layout.cpp
index 5b80eff..4034a02 100644
--- a/engine/layout.cpp
+++ b/engine/layout.cpp
@@ -9,7 +9,6 @@ Plane NodeBorder::m_plane;
 Plane NodeImage::m_plane;
 Sampler NodeImage::m_sampler;
 std::map<std::string, glm::vec4> NodeIcon::m_icons;
-ui::Shader NodeStrokePreview::m_shader;
 
 kEventResult Node::on_event(Event* e)
 {
diff --git a/engine/layout.h b/engine/layout.h
index f362263..5295d2c 100644
--- a/engine/layout.h
+++ b/engine/layout.h
@@ -1664,43 +1664,8 @@ class NodeStrokePreview : public NodeBorder
 {
     RTT m_rtt;
     Sampler m_sampler;
-    static ui::Shader m_shader;
 public:
-    uint16_t m_tex_id;
-    glm::vec4 m_tip_color;
-    float m_tip_size;
-    float m_tip_spacing;
-    float m_tip_flow;
-    float m_tip_angle;
-    float m_jitter_scale;
-    float m_jitter_angle;
-    float m_jitter_spread;
-    float m_jitter_flow;
-    static void static_init()
-    {
-        static const char* shader_v =
-            SHADER_VERSION
-            "uniform mat4 mvp;"
-            "in vec4 pos;"
-            "in vec2 uvs;"
-            "out vec3 uv;"
-            "void main(){"
-            "   uv = vec3(uvs, pos.w);"
-            "   gl_Position = mvp * vec4(pos.xyz, 1.0);"
-            "}";
-        static const char* shader_f =
-            SHADER_VERSION
-            "uniform sampler2D tex;"
-            "uniform vec4 col;"
-            "uniform float alpha;"
-            "in vec3 uv;"
-            "out vec4 frag;"
-            "void main(){"
-            "   float a = (1.0 - texture(tex, uv.xy).r) * alpha;"
-            "   frag = vec4(col.rgb, a);"
-            "}";
-        m_shader.create(shader_v, shader_f);
-    }
+    ui::Brush m_brush;
     virtual Node* clone_instantiate() const override { return new NodeStrokePreview(); }
     virtual void clone_copy(Node* dest) const override
     {
@@ -1719,7 +1684,7 @@ public:
     {
         m_sampler.create();
         TextureManager::load("data/Icons/Round-Hard.png");
-        m_tex_id = const_hash("data/Icons/Round-Hard.png");
+        m_brush.m_tex_id = const_hash("data/Icons/Round-Hard.png");
     }
     void draw_stroke()
     {
@@ -1740,13 +1705,13 @@ public:
             glViewport(0, 0, m_rtt.getWidth(), m_rtt.getHeight());
             glEnable(GL_BLEND);
             glm::mat4 proj = glm::ortho<float>(0, (float)m_rtt.getWidth(), 0, (float)m_rtt.getHeight(), -1, 1);
-            auto& t = TextureManager::get(m_tex_id);
+            auto& t = TextureManager::get(m_brush.m_tex_id);
             float alpha = 0;
 
             std::minstd_rand prng;
-            m_shader.use();
-            m_shader.u_vec4(kShaderUniform::Col, m_tip_color);
-            m_shader.u_int(kShaderUniform::Tex, 0);
+            ShaderManager::use("stroke");
+            ShaderManager::u_vec4(kShaderUniform::Col, m_brush.m_tip_color);
+            ShaderManager::u_int(kShaderUniform::Tex, 0);
             t.bind();
             m_sampler.bind(0);
             while (alpha < 1.f)
@@ -1756,19 +1721,19 @@ public:
                 auto rnd_rad = [&] { return float((double)prng() / (double)prng.max() * M_PI * 2.0); }; // normalized [0, 2pi]
                 auto rnd_vec = [&] { float rad = rnd_rad(); return glm::vec2(cosf(rad), sinf(rad)); };  // normalized direction vector
 
-                float angle = (m_tip_angle + rnd_nor() * m_jitter_angle) * (float)(M_PI * 2.0);
-                glm::vec2 pos = BezierCurve::Bezier2D(kp, alpha) + (rnd_vec() * m_jitter_spread * 100.f);
-                float size = 100.f * m_tip_size * (1.f - rnd_nor() * m_jitter_scale);
-                float flow = m_tip_flow * (1.f - rnd_nor() * m_jitter_flow);
+                float angle = (m_brush.m_tip_angle + rnd_nor() * m_brush.m_jitter_angle) * (float)(M_PI * 2.0);
+                glm::vec2 pos = BezierCurve::Bezier2D(kp, alpha) + (rnd_vec() * m_brush.m_jitter_spread * 100.f);
+                float size = 100.f * m_brush.m_tip_size * (1.f - rnd_nor() * m_brush.m_jitter_scale);
+                float flow = m_brush.m_tip_flow * (1.f - rnd_nor() * m_brush.m_jitter_flow);
 
-                alpha += glm::max(m_tip_spacing * .2f, .01f);
+                alpha += glm::max(m_brush.m_tip_spacing * .2f, .01f);
                 auto mvp = proj * 
                     //glm::translate(glm::vec3(i * 40 * m_tip_spacing, m_rtt.getHeight() / 2, 0)) *
                     glm::translate(glm::vec3(pos, 0)) *
                     glm::scale(glm::vec3(size, size, 1)) * 
                     glm::eulerAngleZ(angle);
-                m_shader.u_mat4(kShaderUniform::MVP, mvp);
-                m_shader.u_float(kShaderUniform::Alpha, flow);
+                ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
+                ShaderManager::u_float(kShaderUniform::Alpha, flow);
                 m_plane.draw_fill();
             }
             m_sampler.unbind();
@@ -1828,26 +1793,26 @@ public:
     {
         m_canvas = find<NodeStrokePreview>("canvas");
         
-        init_slider(m_tip_size, "tip-size", &NodeStrokePreview::m_tip_size);
-        init_slider(m_tip_spacing, "tip-spacing", &NodeStrokePreview::m_tip_spacing);
-        init_slider(m_tip_flow, "tip-flow", &NodeStrokePreview::m_tip_flow);
-        init_slider(m_tip_angle, "tip-angle", &NodeStrokePreview::m_tip_angle);
-        init_slider(m_jitter_scale, "jitter-scale", &NodeStrokePreview::m_jitter_scale);
-        init_slider(m_jitter_angle, "jitter-angle", &NodeStrokePreview::m_jitter_angle);
-        init_slider(m_jitter_spread, "jitter-spread", &NodeStrokePreview::m_jitter_spread);
-        init_slider(m_jitter_flow, "jitter-flow", &NodeStrokePreview::m_jitter_flow);
+        init_slider(m_tip_size, "tip-size", &ui::Brush::m_tip_size);
+        init_slider(m_tip_spacing, "tip-spacing", &ui::Brush::m_tip_spacing);
+        init_slider(m_tip_flow, "tip-flow", &ui::Brush::m_tip_flow);
+        init_slider(m_tip_angle, "tip-angle", &ui::Brush::m_tip_angle);
+        init_slider(m_jitter_scale, "jitter-scale", &ui::Brush::m_jitter_scale);
+        init_slider(m_jitter_angle, "jitter-angle", &ui::Brush::m_jitter_angle);
+        init_slider(m_jitter_spread, "jitter-spread", &ui::Brush::m_jitter_spread);
+        init_slider(m_jitter_flow, "jitter-flow", &ui::Brush::m_jitter_flow);
         //m_canvas->draw_stroke();
     }
-    void init_slider(NodeSliderH*& slider, const char* id, float NodeStrokePreview::* prop)
+    void init_slider(NodeSliderH*& slider, const char* id, float ui::Brush::* 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;
+        m_canvas->m_brush.*prop = slider->m_value.x;
     }
-    void handle_slide(float NodeStrokePreview::* prop, Node* target, float value)
+    void handle_slide(float ui::Brush::* prop, Node* target, float value)
     {
-        m_canvas->*prop = value;
+        m_canvas->m_brush.*prop = value;
         m_canvas->draw_stroke();
         if (on_stroke_change)
             on_stroke_change(this);
@@ -1859,6 +1824,7 @@ class NodeCanvas : public Node
     bool m_dragging = false;
 public:
     std::unique_ptr<ui::Canvas> m_canvas;
+    ui::Brush m_brush;
     virtual Node* clone_instantiate() const override { return new NodeCanvas(); }
     virtual void init() override
     {
@@ -1880,14 +1846,16 @@ public:
 
         glClearColor(1, 0, 0, 1);
         glClear(GL_COLOR_BUFFER_BIT);
-        auto box = m_clip * root()->m_zoom;
+        float zoom = root()->m_zoom;
+        auto box = m_clip * 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);
 
         glm::vec2 sz = { m_canvas->m_width, m_canvas->m_height };
         auto mvp = glm::ortho(0.f, box.z, box.w, 0.f, -1.f, 1.f) *
-            glm::translate(glm::vec3((m_size - sz) * 0.5f, 0)) *
-            glm::scale(glm::vec3(sz, 1)) *
+            //glm::translate(glm::vec3((m_size - sz) * 0.5f, 0)) * // center
+            glm::translate(glm::vec3(0)) * // corner
+            glm::scale(glm::vec3(sz * zoom, 1)) *
             glm::translate(glm::vec3(.5f, .5f, 0.f)); // pivot
 
         m_canvas->m_fb.bindTexture();
@@ -1905,28 +1873,35 @@ public:
     }
     virtual void handle_resize(glm::vec2 old_size, glm::vec2 new_size) override
     {
+        if (new_size.x > m_canvas->m_width)
+        {
+            m_canvas->create(new_size.x, new_size.y);
+            m_canvas->clear();
+        }
     }
     virtual kEventResult handle_event(Event* e) override
     {
-        MouseEvent* me = static_cast<MouseEvent*>(e);
         Node::handle_event(e);
+        MouseEvent* me = static_cast<MouseEvent*>(e);
+        auto loc = me->m_pos - m_pos;
+        auto cur = glm::vec2(loc.x, m_canvas->m_height - loc.y - 1);
         switch (e->m_type)
         {
         case kEventType::MouseDownL:
         {
-            auto b = std::make_shared<ui::Brush>();
-            b->m_texture_id = const_hash("data/Icons/Round-Brush.png");
-            m_canvas->stroke_start(me->m_pos, 1.f, b);
+            m_canvas->stroke_start(cur, 1.f, m_brush);
             m_dragging = true;
+            mouse_capture();
             break;
         }
         case kEventType::MouseUpL:
             m_canvas->stroke_end();
             m_dragging = false;
+            mouse_release();
             break;
         case kEventType::MouseMove:
             if (m_dragging)
-                m_canvas->stroke_update(me->m_pos, 1.f);
+                m_canvas->stroke_update(cur, 1.f);
             break;
         default:
             break;
diff --git a/engine/shader.h b/engine/shader.h
index 2263547..7b58f3a 100644
--- a/engine/shader.h
+++ b/engine/shader.h
@@ -36,6 +36,7 @@ enum class kShader : uint16_t
     UVs         = const_hash("uvs"),
     Font        = const_hash("font"),
     Atlas       = const_hash("atlas"),
+    Stroke      = const_hash("stroke"),
 };
 
 class ShaderManager