omar/panopainter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added right click, popup menu, mark for destroy

Browse Source
This commit is contained in:
omigamedev
2017-02-20 02:25:59 +00:00
parent 4e3f898d4b
commit ee5e4c2d98
8 changed files with 210 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
data/icons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 78 KiB

71
data/layout.xml
View File

@@ -6,9 +6,9 @@
</border>
</layout>
<layout id="multi-button-item">
<border height="50%" width="50%" color=".1" thickness="2" border-color=".5" justify="center" align="center">
<button-custom height="50%" width="50%" justify="center" align="center">
<text text="A" font-face="arial" font-size="11"/>
</border>
</button-custom>
</layout>
<layout id="multi-button">
<node width="50" margin="0 5 0 0" dir="row" wrap="1">
@@ -26,10 +26,10 @@
<border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
<border thickness="5" border-color=".2" pad="3">
<border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
<text text="Shit! Bug happens." font-face="arial" font-size="11"></text>
<text text="Just a test message" font-face="arial" font-size="11"></text>
</border>
<border width="400" color="0 0 0 .9" pad="10" dir="col">
<text text="Yep, it's a bug. No worries, it happens. Try Unity and see." font-face="arial" font-size="11"></text>
<text text="Longer description for the error or the message." font-face="arial" font-size="11"></text>
<node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
<button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
<button text="Cancel" width="60" height="30" pad="10"/>
@@ -38,6 +38,14 @@
</border>
</border>
</layout>
<layout id="popup-menu">
<popup-menu positioning="absolute" position="100 100" width="100" pad="2" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
<button text="Menu" height="25"/>
<button text="Menu" height="25"/>
<button text="Menu" height="25"/>
<button text="Menu" height="25"/>
</popup-menu>
</layout>
<layout id="main">
<node dir="col" wrap="0" width="100%" height="100%" pad="5">
<border margin="0 0 5 0" pad="3 0 3 3" color=".3" width="100%" height="25" dir="row" align="center">
@@ -47,20 +55,29 @@
</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="Button"/>
<button id="btn-close" width="50" height="100%" margin="0 5 0 0" text="Close"/>
<button id="btn-popup" width="50" height="100%" margin="0 5 0 0" text="Popup"/>
<ref id="multi-button"/>
<ref id="multi-button"/>
<ref id="multi-button"/>
<border width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".5" justify="center" align="center">
<text text="button" font-face="arial" font-size="11"/>
</border>
<separator width="10"/>
<border width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".5" justify="center" align="center"><text text="red" font-face="arial" font-size="11" color="1 0 0 1"/></border>
<border width="50" margin="0 5 0 0" color=".2" thickness="2" border-color=".5" justify="center" align="center"><text text="blue" font-face="arial" font-size="11" color=".4 .4 1 1"/></border>
<border width="50" margin="0 5 0 0" color=".3" thickness="2" border-color=".5" justify="center" align="center"><text text="green" font-face="arial" font-size="11" color="0 1 0 1"/></border>
<button-custom width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".5" justify="center" align="center"><text text="red" font-face="arial" font-size="11" color="1 0 0 1"/></button-custom>
<button-custom width="50" margin="0 5 0 0" color=".3" thickness="2" border-color=".5" justify="center" align="center"><text text="green" font-face="arial" font-size="11" color="0 1 0 1"/></button-custom>
<button-custom width="50" margin="0 5 0 0" color=".2" thickness="2" border-color=".5" justify="center" align="center"><text text="blue" font-face="arial" font-size="11" color=".4 .4 1 1"/></button-custom>
<separator width="10"/>
<border width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".7" pad="4">
<!--button with image-->
<button-custom width="50" margin="0 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="30 30 90 90" width="100%" height="100%" align="center" justify="flex-end">
<!--<text text="Groups" font-face="arial" font-size="11" color=".1"/>-->
</image>
</button-custom>
<button-custom width="50" margin="0 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="100%" align="center" justify="flex-end">
<!--<text text="Settings" font-face="arial" font-size="11"/>-->
</image>
</button-custom>
<!--<border width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".7" pad="4">
<image path="data/uvs.jpg" region="0 0 50 50" width="100%" height="100%" align="center" justify="flex-end">
<text text="atlas" font-face="arial" font-size="11"/>
</image>
@@ -78,14 +95,31 @@
<separator width="10"/>
<border width="50" margin="0 5 0 0"></border>
<border width="50" margin="0 5 0 0"></border>
<border width="50" margin="0 5 0 0"></border>
<border width="50" margin="0 5 0 0"></border>-->
</border>
<!-- central row -->
<node grow="1" dir="row" wrap="1" height="0">
<border width="60" color=".2" margin="0 10 0 0" dir="col" pad="4">
<border height="4" margin="-4 0 0 0"/>
<button-custom width="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="30" align="center" justify="flex-end"/>
</button-custom>
<button-custom width="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="30" align="center" justify="flex-end"/>
</button-custom>
<button-custom width="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="30" align="center" justify="flex-end"/>
</button-custom>
<button-custom width="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="30" align="center" justify="flex-end"/>
</button-custom>
</border>
<!-- side bar -->
<node width="200" height="100%" dir="col" color=".2">
<border pad="15" margin="10 0 10 0" color=".3" width="100%" height="auto">
<border height="30" color=".4" />
<border height="30" color=".5" align="center" justify="center">
<text text="Common Tools" font-face="arial" font-size="11" color="1 1 1 1"/>
</border>
<border height="30" color=".4" />
<border height="30" color=".4" />
<border height="30" color=".4" />
@@ -98,16 +132,17 @@
</border>
</node>
<!-- content panel -->
<border margin="10 0 10 10" border-color=".8" width="1" grow="1" pad="10" wrap="1" dir="col" justify="center" align="center">
<text text="hello widget" font-face="arial" font-size="30" color="0 1 1 1"/>
<text text="this is a small description of the useless big text above" font-face="arial" font-size="11" color="0 1 1 1"/>
<image id="check" margin="10 0 0 0" path="data/uvs.jpg" width="100" height="100" region="0 0 100 100"/>
<border margin="10 0 10 10" border-color=".8" color="1" width="1" grow="1" pad="10" wrap="1" dir="col" justify="center" align="center">
<text text="Viewport" font-face="arial" font-size="30" color="0 .1 .1 1"/>
<text text="Made in C++11 using OpenGL 3.1" font-face="arial" font-size="11" color="0 .1 .1 1"/>
<!--<text text="this is a small description of the useless big text above" font-face="arial" font-size="11" color="0 1 1 1"/>-->
<image id="check" margin="10 0 0 0" path="data/meme/nothing-to-do-here.jpg" width="300" height="200"/>
</border>
</node>
<!-- status bar -->
<border height="30" width="100%" color=".15" border-color=".3" dir="row" pad="0 0 0 10" align="center">
<text text="Status Bar: nothing to show here." font-face="arial" font-size="11"/>
<text text="#opengl #fromscratch #not-made-with-unity" font-face="arial" font-size="11" margin="0 0 0 10" color=".2 .5 1 1"/>
<text text="#opengl #fromscratch #c++" font-face="arial" font-size="11" margin="0 0 0 10" color=".2 .5 1 1"/>
</border>
</node>
</layout>

BIN
data/meme/nothing-to-do-here.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

19
engine/app.cpp
View File

@@ -216,7 +216,7 @@ void App::resize(float w, float h)
void App::mouse_down(int button, float x, float y)
{
MouseEvent e;
e.m_type = kEventType::MouseDownL;
e.m_type = button ? kEventType::MouseDownR : kEventType::MouseDownL;
e.m_pos = { x, y };
layout[main_id].on_event(&e);
printf("mouse click %f %f\n", x, y);
@@ -228,6 +228,20 @@ void App::mouse_down(int button, float x, float y)
// n->m_color = glm::vec4(.5, .5, .5, .5);
// layout[main_id].add_child(n);
// layout[main_id].update(width, height);
if (popup)
{
layout[main_id].remove_child(popup);
popup = nullptr;
}
if (button == 1)
{
popup = (NodePopupMenu*)layout[const_hash("popup-menu")].m_children[0]->clone();
popup->SetPositioning(YGPositionTypeAbsolute);
popup->SetPosition(x, y);
layout[main_id].add_child(popup);
layout[main_id].update(width, height);
}
layout[main_id].update();
}
void App::mouse_move(float x, float y)
{
@@ -239,7 +253,8 @@ void App::mouse_move(float x, float y)
void App::mouse_up(int button, float x, float y)
{
MouseEvent e;
e.m_type = kEventType::MouseUpL;
e.m_type = button ? kEventType::MouseUpR : kEventType::MouseUpL;
e.m_pos = { x, y };
layout[main_id].on_event(&e);
layout[main_id].update();
}

1
engine/app.h
View File

@@ -12,6 +12,7 @@ class App
Texture2D tex;
LayoutManager layout;
NodeMessageBox* msgbox;
NodePopupMenu* popup = nullptr;
const uint16_t main_id = const_hash("main");
public:
static App I;

55
engine/layout.cpp
View File

@@ -8,9 +8,15 @@ Sampler NodeImage::m_sampler;
kEventResult Node::on_event(Event* e)
{
for (auto& c : m_children)
if (c->on_event(e) == kEventResult::Consumed)
return kEventResult::Consumed;
kEventResult ret = kEventResult::Available;
for (auto it = m_children.rbegin(); it != m_children.rend(); ++it)
if ((*it)->on_event(e) == kEventResult::Consumed)
if (m_flood_events)
ret = kEventResult::Consumed;
else
return kEventResult::Consumed;
if (ret == kEventResult::Consumed)
return ret;
switch (e->m_cat)
{
case kEventCategory::MouseEvent:
@@ -35,7 +41,8 @@ kEventResult Node::on_event(Event* e)
handle_event(&e2);
}
m_mouse_inside = inside;
handle_event(e);
if (inside)
ret = handle_event(e);
if (inside_old == true && inside == false)
{
MouseEvent e2 = *me;
@@ -51,7 +58,7 @@ kEventResult Node::on_event(Event* e)
return kEventResult::Consumed;
break;
}
return kEventResult::Available;
return ret;
}
void Node::add_child(Node* n)
@@ -77,8 +84,14 @@ void Node::update(float width, float height)
YGNodeStyleSetWidth(y_node, width);
YGNodeStyleSetHeight(y_node, height);
YGNodeCalculateLayout(y_node, YGUndefined, YGUndefined, YGDirectionLTR);
glm::mat4 proj = glm::ortho(0.f, width, height, 0.f, -1.f, 1.f);
update_internal({ 0, 0 }, proj);
m_proj = glm::ortho(0.f, width, height, 0.f, -1.f, 1.f);
update_internal({ 0, 0 }, m_proj);
}
void Node::update()
{
YGNodeCalculateLayout(y_node, YGUndefined, YGUndefined, YGDirectionLTR);
update_internal({ 0, 0 }, m_proj);
}
void Node::update_internal(const glm::vec2& origin, const glm::mat4& proj)
@@ -88,7 +101,7 @@ void Node::update_internal(const glm::vec2& origin, const glm::mat4& proj)
float w = YGNodeLayoutGetWidth(y_node);
float h = YGNodeLayoutGetHeight(y_node);
m_pos = glm::floor(origin + glm::vec2(x, y));
m_size = glm::ceil(glm::vec2(w, h));
m_size = glm::floor(glm::vec2(w, h));
if (parent)
{
@@ -114,6 +127,16 @@ void Node::update_internal(const glm::vec2& origin, const glm::mat4& proj)
glm::mat4 pos = glm::translate(glm::vec3(m_pos, 0));
m_mvp = proj * pos * scale * pivot;
m_proj = proj;
for (int i = 0; i < m_children.size(); i++)
{
if (m_children[i]->m_destroyed)
{
remove_child(m_children[i].get());
i--;
}
}
for (auto& c : m_children)
c->update_internal(m_pos, proj);
}
@@ -346,6 +369,20 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
n->load_internal(x_child);
break;
}
case kWidget::ButtonCustom:
{
auto n = new NodeButtonCustom();
add_child(n);
n->load_internal(x_child);
break;
}
case kWidget::PopupMenu:
{
auto n = new NodePopupMenu();
add_child(n);
n->load_internal(x_child);
break;
}
case kWidget::Ref:
{
auto ids = x_child->Attribute("id");
@@ -365,6 +402,7 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
}
x_child = x_child->NextSiblingElement();
}
loaded();
}
Node* Node::clone()
@@ -392,6 +430,7 @@ void Node::clone_copy(Node* dest) const
dest->m_pos = m_pos;
dest->m_size = m_size;
dest->m_clip = m_clip;
dest->m_flood_events = m_flood_events;
}
void Node::clone_children(Node* dest) const

132
engine/layout.h
View File

@@ -39,12 +39,14 @@ enum class kAttribute : uint16_t
enum class kWidget : uint16_t
{
Border = const_hash("border"),
Shape = const_hash("shape"),
Text = const_hash("text"),
Image = const_hash("image"),
Button = const_hash("button"),
Ref = const_hash("ref"),
Border = const_hash("border"),
Shape = const_hash("shape"),
Text = const_hash("text"),
Image = const_hash("image"),
Button = const_hash("button"),
ButtonCustom = const_hash("button-custom"),
PopupMenu = const_hash("popup-menu"),
Ref = const_hash("ref"),
};
enum class kShapeType : uint16_t
@@ -90,23 +92,6 @@ public:
glm::vec2 m_pos;
};
class Widget
{
public:
glm::mat4 mvp;
glm::mat4 proj;
glm::mat4 scale;
glm::mat4 pos;
glm::vec4 clip;
bool m_mouse_inside = false;
virtual Widget* clone() = 0;
virtual void create() { }
virtual void draw() { }
virtual void parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr) { }
virtual void update() { }
virtual kEventResult on_event(Event* e) { return kEventResult::Available; }
};
class LayoutManager
{
std::map<uint16_t, std::unique_ptr<class Node>> m_layouts;
@@ -134,6 +119,8 @@ public:
glm::mat4 m_proj;
glm::mat4 m_mvp;
bool m_mouse_inside = false;
bool m_flood_events = false;
bool m_destroyed = false;
glm::vec2 m_pos;
glm::vec2 m_size;
@@ -213,6 +200,7 @@ public:
}
void update(float width, float height);
void update();
void update_internal(const glm::vec2& origin, const glm::mat4& proj);
virtual void parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr);
void load_internal(const tinyxml2::XMLElement* x_node);
@@ -227,6 +215,7 @@ public:
for (auto& c : m_children)
c->watch(observer);
}
void destroy() { m_destroyed = true; }
template<class T = Node> T* find(const char* ids)
{
@@ -243,6 +232,7 @@ public:
virtual kEventResult handle_event(Event* e) { return kEventResult::Available; }
virtual void create() { }
virtual void init() { }
virtual void loaded() { }
void add_child(Node* n);
void remove_child(Node* n);
@@ -557,6 +547,12 @@ public:
m_border->create();
m_text->create();
}
virtual void loaded() override
{
m_border->m_thinkness = 1;
m_border->m_border_color = glm::vec4(0, 0, 0, 1);
m_border->m_color = color_normal;
}
virtual void parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr) override
{
switch (ka)
@@ -612,11 +608,6 @@ public:
Node* m_template;
NodeButton* btnOk;
virtual Node* clone_instantiate() const override { return new NodeMessageBox(); }
virtual void clone_copy(Node* dest) const override
{
Node::clone_copy(dest);
NodeMessageBox* n = static_cast<NodeMessageBox*>(dest);
}
virtual void init() override
{
SetPosition(0, 0);
@@ -626,23 +617,72 @@ public:
m_template = (*m_manager)[const_hash("message-box")].m_children[0]->clone();
add_child(m_template);
btnOk = m_template->find<NodeButton>("btn-ok");
btnOk->on_click = [&] { parent->remove_child(this); };
// btnOk = (NodeButton*)n;
// btnOk->m_display = false;
}
virtual void create() override
{
}
virtual void draw() override
{
//m_template->draw();
}
// virtual kEventResult handle_event(Event* e) override
// {
// return kEventResult::Available;
// }
virtual kEventResult on_event(Event* e)
{
return Node::on_event(e);
btnOk->on_click = [&] { destroy(); };
}
};
class NodePopupMenu : public Node
{
public:
virtual Node* clone_instantiate() const override { return new NodePopupMenu(); }
virtual void init() override
{
m_flood_events = true;
SetPadding(10, 10, 10, 10);
SetPosition(0, 0);
SetWidth(100);
SetHeight(400);
SetPositioning(YGPositionTypeAbsolute);
}
virtual kEventResult handle_event(Event* e) override
{
return kEventResult::Consumed;
}
};
class NodeButtonCustom : public NodeBorder
{
public:
glm::vec4 color_normal{ .1, .1, .1, 1 };
glm::vec4 color_hover{ .2, .2, .2, 1 };
glm::vec4 color_down{ .3, .3, .3, 1 };
std::function<void()> on_click;
virtual Node* clone_instantiate() const override { return new NodeButtonCustom(); }
virtual void clone_copy(Node* dest) const override
{
Node::clone_copy(dest);
NodeButtonCustom* n = static_cast<NodeButtonCustom*>(dest);
n->color_normal = color_normal;
n->color_hover = color_hover;
n->color_down = color_down;
}
virtual void loaded() override
{
m_thinkness = 1;
m_border_color = glm::vec4(0, 0, 0, 1);
m_color = color_normal;
}
virtual kEventResult handle_event(Event* e) override
{
switch (e->m_type)
{
case kEventType::MouseEnter:
m_color = color_hover;
break;
case kEventType::MouseLeave:
m_color = color_normal;
break;
case kEventType::MouseDownL:
m_color = color_down;
break;
case kEventType::MouseUpL:
m_color = color_normal;
if (m_mouse_inside && on_click != nullptr)
on_click();
break;
default:
break;
}
return kEventResult::Consumed;
}
};

6
engine/main.cpp
View File

@@ -470,6 +470,12 @@ LRESULT CALLBACK WndProc(HWND hWnd, UINT msg, WPARAM wp, LPARAM lp)
case WM_LBUTTONUP:
App::I.mouse_up(0, LOWORD(lp), HIWORD(lp));
break;
case WM_RBUTTONDOWN:
App::I.mouse_down(1, LOWORD(lp), HIWORD(lp));
break;
case WM_RBUTTONUP:
App::I.mouse_up(1, LOWORD(lp), HIWORD(lp));
break;
}
return DefWindowProc(hWnd, msg, wp, lp);
}