drag canvas, render layers and tmp, add/select layer, opacity for layer, color bucket filler

This commit is contained in:
2017-04-07 21:21:43 +01:00
parent 2b4915154e
commit bb7e94d06b
9 changed files with 99 additions and 49 deletions

View File

@@ -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">

BIN
data/ui/bucket.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

1
data/ui/bucket.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 965 B

View File

@@ -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*) {

View File

@@ -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)
{

View File

@@ -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;

View File

@@ -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

View File

@@ -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
{

View File

@@ -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;