From 1550dfff03c2603338f93cf6911d390e41bdfafe Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Fri, 11 Aug 2017 23:26:19 +0100
Subject: [PATCH] refactor ui initialization each group in a function, new
 document dialog, fix parallax camera and drawing order clipping problem

---
 data/layout.xml             |  70 ++-
 engine.vcxproj              |   1 +
 engine.vcxproj.filters      |   3 +
 engine/app.h                |  11 +
 engine/app_dialogs.cpp      |  85 ++++
 engine/app_layout.cpp       | 914 ++++++++++++++++++------------------
 engine/node_canvas.cpp      |  28 +-
 engine/node_dialog_open.cpp |  35 ++
 engine/node_dialog_open.h   |  15 +
 9 files changed, 689 insertions(+), 473 deletions(-)
 create mode 100644 engine/app_dialogs.cpp

diff --git a/data/layout.xml b/data/layout.xml
index 7acc790..fdd9b88 100644
--- a/data/layout.xml
+++ b/data/layout.xml
@@ -239,6 +239,27 @@
       </border>
     </border>
   </layout>
+  
+  <!-- NewDoc Dialog Popup -->
+  <layout id="dialog-newdoc">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
+      <border thickness="1" border-color=".2" pad="3">
+        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Create New Pano Project" font-face="arial" font-size="11"></text>
+        </border>
+        <border width="400" color="0 0 0 .9" pad="10" dir="col">
+          <node dir="row">
+            <text text="Project name: " font-face="arial" font-size="11"/>
+            <text-input id="txt-input" width="100" height="20" color=".3"/>
+          </node>
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <button id="btn-ok" text="Create Project" width="100" height="30" margin="0 10 0 0"/>
+            <button id="btn-cancel" text="Cancel" width="60" height="30" pad="10"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
 
   <!--settings window-->
   <layout id="settings">
@@ -307,6 +328,7 @@
   <!--file menu-->
   <layout id="file-menu">
     <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
+      <!--
       <button-custom height="30" align="center" color=".2" pad="0 20 0 10" dir="row">
         <checkbox width="20" height="20"/>
         <node pad="5" width="100%">
@@ -319,21 +341,22 @@
           <slider-h/>
         </node>
       </button-custom>
-      <button-custom text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
+      -->
+      <button-custom id="file-newdoc" text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
         <icon icon="page_add" width="20"/>
         <text text="New Panodoc" margin="0 0 0 5" font-face="arial" font-size="11"/>
       </button-custom>
-      <button-custom text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
+      <button-custom id="file-open" text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <icon icon="page_add" width="20"/>
+        <text text="Open" margin="0 0 0 5" font-face="arial" font-size="11"/>
+      </button-custom>
+      <button-custom id="file-save" text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
         <icon icon="disk" width="20"/>
         <text text="Save" margin="0 0 0 5" font-face="arial" font-size="11"/>
       </button-custom>
-      <button-custom text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
-        <icon icon="disk_multiple" width="20"/>
-        <text text="Save as.." margin="0 0 0 5" font-face="arial" font-size="11"/>
-      </button-custom>
-      <button-custom text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
-        <icon icon="add" width="20"/>
-        <text text="Add reference" margin="0 0 0 5" font-face="arial" font-size="11"/>
+      <button-custom id="file-export" text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <icon icon="disk" width="20"/>
+        <text text="Export PNG" margin="0 0 0 5" font-face="arial" font-size="11"/>
       </button-custom>
       <button-custom text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
         <icon width="20"/>
@@ -397,6 +420,7 @@
           <text text="Layers" font-face="arial" font-size="11"/>
         </button-custom>
         <node height="100%" color="1" grow="1" align="center" justify="flex-end" dir="row">
+          <text id="txt-docname" text="Document: no-name" font-face="arial" font-size="11" margin="0 20 0 0" color=".6 .6 .6 1"/>
           <text id="txt-memory" text="History memory: 0.00 Mb" font-face="arial" font-size="11" margin="0 5 0 0" color=".6 .6 .6 1"/>
           <button-custom id="btn-clean-memory" margin="0 20 0 0">
             <icon icon="delete" width="20"/>
@@ -406,22 +430,30 @@
       </border>
       <!-- toolbar -->
       <border id="toolbar" height="50" width="100%" pad="5" dir="row" color=".2 .2 .2 .6">
+        <!--
         <button id="btn-open" width="50" height="100%" margin="0 5 0 0" text="Open"/>
         <button id="btn-save" width="50" height="100%" margin="0 5 0 0" text="Save"/>
         <button id="btn-export" width="50" height="100%" margin="0 5 0 0" text="Export"/>
         <button id="btn-anim" width="50" height="100%" margin="0 5 0 0" text="Anim"/>
         <button id="btn-clear" width="50" height="100%" margin="0 5 0 15" text="Clear"/>
-        <button-custom id="btn-bucket" width="50" height="100%" margin="0 20 0 0" thickness="1" border-color="0 0 0 1" pad="2">
-          <image path="data/ui/bucket.png" width="100%" height="100%" align="center" justify="flex-end"/>
-        </button-custom>
+        -->
         <button id="btn-undo" width="50" height="100%" margin="0 5 0 0" text="Undo"/>
-        <button id="btn-pen" width="50" height="100%" margin="0 0 0 0" text="Pen"/>
-        <button id="btn-pick" width="50" height="100%" margin="0 0 0 0" text="Pick"/>
-        <button id="btn-erase" width="60" height="100%" margin="0 0 0 0" text="Erase"/>
-        <button id="btn-line" width="50" height="100%" margin="0 0 0 0" text="Line"/>
-        <button id="btn-cam" width="70" height="100%" margin="0 0 0 0" text="Camera"/>
-        <button id="btn-grid" width="50" height="100%" margin="0 0 0 0" text="Grid"/>
-        <button id="btn-fill" width="50" height="100%" margin="0 0 0 0" text="Fill"/>
+        <node dir="row" justify="center" grow="1">
+          <button id="btn-pen" width="50" height="100%" margin="0 0 0 0" text="Pen"/>
+          <button id="btn-pick" width="50" height="100%" margin="0 0 0 0" text="Pick"/>
+          
+          <button id="btn-erase" width="60" height="100%" margin="0 0 0 5" text="Erase"/>
+          
+          <button id="btn-cam" width="70" height="100%" margin="0 0 0 5" text="Camera"/>
+          
+          <button id="btn-line" width="50" height="100%" margin="0 0 0 5" text="Line"/>
+          <button id="btn-grid" width="50" height="100%" margin="0 0 0 0" text="Grid"/>
+          <button id="btn-fill" width="50" height="100%" margin="0 0 0 0" text="Fill"/>
+          
+          <button-custom id="btn-bucket" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <image path="data/ui/bucket.png" width="100%" height="100%" align="center" justify="flex-end"/>
+          </button-custom>
+        </node>
         <!--
         <button-custom id="btn-layer" width="50" height="100%" margin="0 5 0 0" thickness="1" border-color="0 0 0 1" pad="6" align="center" justify="center">
           <icon width="100%" height="100%" icon="disk"/>
diff --git a/engine.vcxproj b/engine.vcxproj
index c57b0bc..182e3b0 100644
--- a/engine.vcxproj
+++ b/engine.vcxproj
@@ -154,6 +154,7 @@
   <ItemGroup>
     <ClCompile Include="engine\action.cpp" />
     <ClCompile Include="engine\app.cpp" />
+    <ClCompile Include="engine\app_dialogs.cpp" />
     <ClCompile Include="engine\app_events.cpp" />
     <ClCompile Include="engine\app_layout.cpp" />
     <ClCompile Include="engine\app_shaders.cpp" />
diff --git a/engine.vcxproj.filters b/engine.vcxproj.filters
index 3097ac9..55711fa 100644
--- a/engine.vcxproj.filters
+++ b/engine.vcxproj.filters
@@ -198,6 +198,9 @@
     <ClCompile Include="engine\node_dialog_layer_rename.cpp">
       <Filter>Source Files\ui</Filter>
     </ClCompile>
+    <ClCompile Include="engine\app_dialogs.cpp">
+      <Filter>Source Files</Filter>
+    </ClCompile>
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="engine\app.h">
diff --git a/engine/app.h b/engine/app.h
index 788e39e..168f359 100644
--- a/engine/app.h
+++ b/engine/app.h
@@ -88,4 +88,15 @@ public:
     bool key_down(kKey key);
     bool key_up(kKey key);
     bool key_char(char key);
+
+    void init_toolbar_main();
+    void init_toolbar_draw();
+    void init_sidebar();
+    void init_menu_file();
+    void init_menu_edit();
+    void init_menu_layer();
+    void dialog_newdoc();
+    void dialog_save();
+    void dialog_open();
+    void dialog_export();
 };
diff --git a/engine/app_dialogs.cpp b/engine/app_dialogs.cpp
new file mode 100644
index 0000000..be61723
--- /dev/null
+++ b/engine/app_dialogs.cpp
@@ -0,0 +1,85 @@
+#include "pch.h"
+#include "app.h"
+#include "node_dialog_open.h"
+
+void App::dialog_newdoc()
+{
+    if (canvas)
+    {
+        auto dialog = std::make_shared<NodeDialogNewDoc>();
+        dialog->m_manager = &layout;
+        dialog->init();
+        dialog->create();
+        dialog->loaded();
+
+        layout[main_id]->add_child(dialog);
+        layout[main_id]->update();
+
+        dialog->btn_ok->on_click = [this, dialog](Node*)
+        {
+            layers->clear();
+            canvas->m_canvas->m_layers.clear();
+            canvas->m_canvas->m_order.clear();
+            ActionManager::clear();
+            dialog->destroy();
+        };
+    }
+}
+
+void App::dialog_open()
+{
+    if (canvas)
+    {
+        // load thumbnail test
+        auto dialog = std::make_shared<NodeDialogOpen>();
+        dialog->m_manager = &layout;
+        dialog->data_path = data_path;
+        dialog->init();
+        dialog->create();
+        dialog->loaded();
+
+        layout[main_id]->add_child(dialog);
+        layout[main_id]->update();
+
+        dialog->btn_ok->on_click = [this, dialog](Node*)
+        {
+            layers->clear();
+            canvas->m_canvas->project_open(dialog->selected_path);
+            if (auto docname = layout[main_id]->find<NodeText>("txt-docname"))
+                docname->set_text(("Document: " + dialog->selected_file).c_str());
+            for (auto& i : canvas->m_canvas->m_order)
+                layers->add_layer(canvas->m_canvas->m_layers[i].m_name.c_str());
+            dialog->destroy();
+            ActionManager::clear();
+        };
+    }
+}
+
+void App::dialog_save()
+{
+    if (canvas)
+    {
+        auto dialog = std::make_shared<NodeDialogSave>();
+        dialog->m_manager = &layout;
+        dialog->init();
+        dialog->create();
+        dialog->loaded();
+
+        layout[main_id]->add_child(dialog);
+        layout[main_id]->update();
+
+        dialog->btn_ok->on_click = [this, dialog](Node*)
+        {
+            canvas->m_canvas->project_save(data_path + "/" + dialog->input->m_string + ".pano");
+            dialog->destroy();
+        };
+    }
+}
+
+void App::dialog_export()
+{
+    if (canvas)
+    {
+        canvas->m_canvas->export_equirectangular(data_path);
+    }
+}
diff --git a/engine/app_layout.cpp b/engine/app_layout.cpp
index f485794..f03dfee 100644
--- a/engine/app_layout.cpp
+++ b/engine/app_layout.cpp
@@ -2,9 +2,464 @@
 #include "app.h"
 #include "node_icon.h"
 #include "node_dialog_open.h"
+#include "node_text.h"
 
 using namespace ui;
 
+void App::init_toolbar_main()
+{
+
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-export"))
+    {
+        button->on_click = [this, button](Node*) {
+            if (canvas)
+            {
+                canvas->m_canvas->export_equirectangular(data_path);
+            }
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-anim"))
+    {
+        button->on_click = [this, button](Node*) {
+            if (canvas)
+            {
+                canvas->m_canvas->export_anim(data_path);
+            }
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-open"))
+    {
+        button->on_click = [this, button](Node*) {
+            dialog_open();
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-save"))
+    {
+        button->on_click = [this, button](Node*) {
+            dialog_save();
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-undo"))
+    {
+        button->on_click = [this, button](Node*) {
+            if (!ActionManager::empty())
+                ActionManager::undo();
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-clean-memory"))
+    {
+        button->on_click = [this](Node*) {
+            ActionManager::clear();
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-clear"))
+    {
+        button->on_click = [this](Node*) {
+            //exit(0); 
+            if (canvas)
+                canvas->m_canvas->clear({ 0, 0, 0, 0 });
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-popup"))
+    {
+        button->on_click = [this](Node*) {
+            msgbox = new NodeMessageBox();
+            msgbox->m_manager = &layout;
+            msgbox->init();
+            layout[main_id]->add_child(msgbox);
+            layout[main_id]->update();
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-settings"))
+    {
+        button->on_click = [this](Node*) {
+            settings = new NodeSettings();
+            settings->m_manager = &layout;
+            settings->init();
+            layout[main_id]->add_child(settings);
+            layout[main_id]->update();
+        };
+    }
+}
+
+void App::init_sidebar()
+{
+    sidebar = layout[main_id]->find<NodeBorder>("sidebar");
+    panels = layout[main_id]->find<Node>("panels");
+    canvas = layout[main_id]->find<NodeCanvas>("paint-canvas");
+    canvas->data_path = data_path;
+
+    //brushes = layout[main_id]->find<NodePanelBrush>("panel-brush");
+    //layers = layout[main_id]->find<NodePanelLayer>("panel-layer");
+    //color = layout[main_id]->find<NodePanelColor>("panel-color");
+    //stroke = layout[main_id]->find<NodePanelStroke>("panel-stroke");
+
+    brushes = std::make_shared<NodePanelBrush>();
+    brushes->m_manager = &layout;
+    brushes->init();
+    brushes->create();
+    brushes->loaded();
+
+    layers = std::make_shared<NodePanelLayer>();
+    layers->m_manager = &layout;
+    layers->init();
+    layers->create();
+    layers->loaded();
+
+    color = std::make_shared<NodePanelColor>();
+    color->m_manager = &layout;
+    color->init();
+    color->create();
+    color->loaded();
+
+    stroke = std::make_shared<NodePanelStroke>();
+    stroke->m_manager = &layout;
+    stroke->init();
+    stroke->create();
+    stroke->loaded();
+
+    if (canvas)
+    {
+        stroke->m_canvas->m_brush.m_tip_color = color->m_color;
+        stroke->m_canvas->draw_stroke();
+        canvas->m_brush = stroke->m_canvas->m_brush;
+    }
+
+    brushes->on_brush_changed = [this](Node* target, int index) {
+        auto tid = brushes->get_texture_id(index);
+        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_brush.m_tip_color = color;
+        //             stroke->m_canvas->draw_stroke();
+        if (canvas)
+            canvas->m_brush = stroke->m_canvas->m_brush;
+        if (on_color_change)
+            on_color_change(color);
+    };
+
+    stroke->on_stroke_change = [this](Node*target) {
+        if (canvas)
+            canvas->m_brush = stroke->m_canvas->m_brush;
+        if (on_stroke_change)
+            on_stroke_change();
+    };
+
+    layers->on_layer_add = [this](Node*) {
+        canvas->m_canvas->layer_add(layers->m_layers.back()->m_label_text.c_str());
+    };
+
+    layers->on_layer_change = [this](Node*, int old_idx, int new_idx) {
+        canvas->m_canvas->m_current_layer_idx = canvas->m_canvas->m_order[new_idx];
+    };
+
+    layers->on_layer_order = [this](Node*, int old_idx, int new_idx) {
+        canvas->m_canvas->layer_order(old_idx, new_idx);
+    };
+
+    layers->on_layer_delete = [this](Node*, int idx) {
+        canvas->m_canvas->layer_remove(canvas->m_canvas->m_order[idx]);
+    };
+
+    layers->on_layer_opacity_changed = [this](Node*, int idx, float value) {
+        canvas->m_canvas->m_layers[canvas->m_canvas->m_order[idx]].m_opacity = value;
+    };
+
+    layers->on_layer_visibility_changed = [this](Node*, int idx, bool visible) {
+        canvas->m_canvas->m_layers[canvas->m_canvas->m_order[idx]].m_alpha_locked = visible;
+    };
+
+    layers->on_layer_highlight_changed = [this](Node*, int idx, bool highlight) {
+        canvas->m_canvas->m_layers[canvas->m_canvas->m_order[idx]].m_hightlight = highlight;
+    };
+}
+
+void App::init_toolbar_draw()
+{
+
+    static glm::vec4 color_button_normal{ .1, .1, .1, 1 };
+    static glm::vec4 color_button_hlight{ 1, .0, .0, 1 };
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-pen"))
+    {
+        button->on_click = [this](Node*) {
+            layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_hlight);
+            layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
+            Canvas::set_mode(Canvas::kCanvasMode::Draw);
+        };
+        layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_hlight);
+        Canvas::set_mode(Canvas::kCanvasMode::Draw);
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-pick"))
+    {
+        button->on_click = [this](Node*) {
+            CanvasModePen* mode = (CanvasModePen*)canvas->m_canvas->modes[(int)Canvas::kCanvasMode::Draw][0];
+            if (mode && canvas->m_canvas->m_current_mode == Canvas::kCanvasMode::Draw)
+            {
+                mode->m_picking = !mode->m_picking;
+            }
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-erase"))
+    {
+        button->on_click = [this](Node*) {
+            layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_hlight);
+            layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
+            Canvas::set_mode(Canvas::kCanvasMode::Erase);
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-line"))
+    {
+        button->on_click = [this](Node*) {
+            layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_hlight);
+            layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
+            Canvas::set_mode(Canvas::kCanvasMode::Line);
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-cam"))
+    {
+        button->on_click = [this](Node*) {
+            layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_hlight);
+            layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
+            Canvas::set_mode(Canvas::kCanvasMode::Camera);
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-grid"))
+    {
+        button->on_click = [this](Node*) {
+            layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_hlight);
+            layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
+            Canvas::set_mode(Canvas::kCanvasMode::Grid);
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButton>("btn-fill"))
+    {
+        button->on_click = [this](Node*) {
+            layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
+            layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_hlight);
+            Canvas::set_mode(Canvas::kCanvasMode::Fill);
+        };
+    }
+    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, button](Node*) {
+            panels->get_child_index(stroke.get()) == -1 ? panels->add_child(stroke) : panels->remove_child(stroke.get());
+            button->set_color(panels->get_child_index(stroke.get()) == -1 ? color_button_normal : color_button_hlight);
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-brush"))
+    {
+        button->on_click = [this, button](Node*) {
+            panels->get_child_index(brushes.get()) == -1 ? panels->add_child(brushes) : panels->remove_child(brushes.get());
+            button->set_color(panels->get_child_index(brushes.get()) == -1 ? color_button_normal : color_button_hlight);
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-color"))
+    {
+        button->on_click = [this, button](Node*) {
+            panels->get_child_index(color.get()) == -1 ? panels->add_child(color) : panels->remove_child(color.get());
+            button->set_color(panels->get_child_index(color.get()) == -1 ? color_button_normal : color_button_hlight);
+        };
+    }
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-layer"))
+    {
+        button->on_click = [this, button](Node*) {
+            panels->get_child_index(layers.get()) == -1 ? panels->add_child(layers) : panels->remove_child(layers.get());
+            button->set_color(panels->get_child_index(layers.get()) == -1 ? color_button_normal : color_button_hlight);
+        };
+    }
+}
+
+void App::init_menu_file()
+{
+    if (auto* menu_file = layout[main_id]->find<NodeButtonCustom>("menu-file"))
+    {
+        menu_file->on_click = [=](Node*) {
+            glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
+            popup = (NodePopupMenu*)layout[const_hash("file-menu")]->m_children[0]->clone();
+            popup->SetPositioning(YGPositionTypeAbsolute);
+            popup->SetPosition(pos.x, pos.y);
+            layout[main_id]->add_child(popup);
+            layout[main_id]->update();
+            popup->mouse_capture();
+            popup->m_mouse_ignore = false;
+            popup->m_flood_events = true;
+            popup->m_capture_children = false;
+
+            popup->find<NodeButtonCustom>("file-newdoc")->on_click = [this](Node*) {
+                dialog_newdoc();
+                popup->mouse_release();
+                popup->destroy();
+            };
+            popup->find<NodeButtonCustom>("file-open")->on_click = [this](Node*) {
+                dialog_open();
+                popup->mouse_release();
+                popup->destroy();
+            };
+            popup->find<NodeButtonCustom>("file-save")->on_click = [this](Node*) {
+                dialog_save();
+                popup->mouse_release();
+                popup->destroy();
+            };
+            popup->find<NodeButtonCustom>("file-export")->on_click = [this](Node*) {
+                dialog_export();
+                popup->mouse_release();
+                popup->destroy();
+            };
+        };
+    }
+}
+
+void App::init_menu_edit()
+{
+    if (auto* menu_file = layout[main_id]->find<NodeButtonCustom>("menu-edit"))
+    {
+        menu_file->on_click = [=](Node*) {
+            glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
+            popup = (NodePopupMenu*)layout[const_hash("edit-menu")]->m_children[0]->clone();
+            popup->SetPositioning(YGPositionTypeAbsolute);
+            popup->SetPosition(pos.x, pos.y);
+            layout[main_id]->add_child(popup);
+            layout[main_id]->update();
+            popup->mouse_capture();
+            popup->m_mouse_ignore = false;
+            popup->m_flood_events = true;
+            popup->m_capture_children = false;
+        };
+    }
+}
+
+void App::init_menu_layer()
+{
+    if (auto* menu_file = layout[main_id]->find<NodeButtonCustom>("menu-layers"))
+    {
+        menu_file->on_click = [=](Node*) {
+            glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
+            popup = (NodePopupMenu*)layout[const_hash("layers-menu")]->m_children[0]->clone();
+            popup->SetPositioning(YGPositionTypeAbsolute);
+            popup->SetPosition(pos.x, pos.y);
+            layout[main_id]->add_child(popup);
+            layout[main_id]->update();
+            popup->mouse_capture();
+            popup->m_mouse_ignore = false;
+            popup->m_flood_events = true;
+            popup->m_capture_children = false;
+            popup->find<NodeButtonCustom>("clear-grids")->on_click = [this](Node*) {
+                CanvasModeGrid* mode = (CanvasModeGrid*)ui::Canvas::modes[(int)ui::Canvas::kCanvasMode::Grid][0];
+                mode->clear();
+                popup->mouse_release();
+                popup->destroy();
+            };
+
+            popup->find<NodeButtonCustom>("layer-rename")->on_click = [this](Node*) {
+                auto open_dialog = std::make_shared<NodeDialogLayerRename>();
+                open_dialog->m_manager = &layout;
+                open_dialog->data_path = data_path;
+                open_dialog->init();
+                open_dialog->create();
+                open_dialog->loaded();
+
+                layout[main_id]->add_child(open_dialog);
+                layout[main_id]->update();
+                    
+                open_dialog->btn_ok->on_click = [this,open_dialog](Node*)
+                {
+                    layers->m_current_layer->set_name(open_dialog->get_name().c_str());
+                    canvas->m_canvas->m_layers[canvas->m_canvas->m_current_layer_idx].m_name = open_dialog->get_name();
+                    open_dialog->destroy();
+                };
+
+                popup->mouse_release();
+                popup->destroy();
+            };
+            if (layers->m_current_layer)
+                popup->find<NodeButtonCustom>("layer-rename")->
+                    find<NodeText>("menu-label")->
+                    set_text(("Rename Layer " + layers->m_current_layer->m_label_text).c_str());
+            else
+                popup->find<NodeButtonCustom>("layer-rename")->
+                    find<NodeText>("menu-label")->
+                    set_text("Rename Layer (Select a layer)");
+
+            popup->find<NodeButtonCustom>("layer-merge")->on_click = [this](Node*) {
+                const auto& order = canvas->m_canvas->m_order;
+                //layers->get_child_index(layers->)
+                int current_idx_order = std::distance(order.begin(), std::find(order.begin(), order.end(), canvas->m_canvas->m_current_layer_idx));
+                if (current_idx_order > 0)
+                {
+                    int dest_layer_idx = order[current_idx_order - 1];
+                    canvas->m_canvas->layer_merge(canvas->m_canvas->m_current_layer_idx, dest_layer_idx);
+                    canvas->m_canvas->layer_remove(canvas->m_canvas->m_current_layer_idx);
+                    layers->clear();
+                    for (auto& i : canvas->m_canvas->m_order)
+                        layers->add_layer(canvas->m_canvas->m_layers[i].m_name.c_str());
+                    layers->m_current_layer = layers->m_layers[current_idx_order - 1];
+                    layers->m_current_layer->m_selected = true;
+                }
+                popup->mouse_release();
+                popup->destroy();
+            };
+            if (layers->m_current_layer)
+            {
+                const auto& order = canvas->m_canvas->m_order;
+                int current_idx_order = std::distance(order.begin(), std::find(order.begin(), order.end(), canvas->m_canvas->m_current_layer_idx));
+                if (current_idx_order > 0)
+                {
+                    int down_layer_idx = order[current_idx_order - 1];
+                    popup->find<NodeButtonCustom>("layer-merge")->
+                        find<NodeText>("menu-label")->
+                        set_text(("Merge with " + canvas->m_canvas->m_layers[down_layer_idx].m_name).c_str());
+                }
+                else
+                {
+                    popup->find<NodeButtonCustom>("layer-merge")->
+                        find<NodeText>("menu-label")->
+                        set_text("Merge Layer (Select upper layers)");
+                }
+            }
+            else
+                popup->find<NodeButtonCustom>("layer-merge")->
+                find<NodeText>("menu-label")->
+                set_text("Merge Layer (Select a layer)");
+
+        };
+    }
+}
+
 void App::initLayout()
 {
     LOG("initializing layout statics");
@@ -18,460 +473,22 @@ void App::initLayout()
         layout[main_id]->update(width, height, zoom);
 
         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");
-        canvas->data_path = data_path;
-
-        //brushes = layout[main_id]->find<NodePanelBrush>("panel-brush");
-        //layers = layout[main_id]->find<NodePanelLayer>("panel-layer");
-        //color = layout[main_id]->find<NodePanelColor>("panel-color");
-        //stroke = layout[main_id]->find<NodePanelStroke>("panel-stroke");
-
-        brushes = std::make_shared<NodePanelBrush>();
-        brushes->m_manager = &layout;
-        brushes->init();
-        brushes->create();
-        brushes->loaded();
-
-        layers = std::make_shared<NodePanelLayer>();
-        layers->m_manager = &layout;
-        layers->init();
-        layers->create();
-        layers->loaded();
-
-        color = std::make_shared<NodePanelColor>();
-        color->m_manager = &layout;
-        color->init();
-        color->create();
-        color->loaded();
-
-        stroke = std::make_shared<NodePanelStroke>();
-        stroke->m_manager = &layout;
-        stroke->init();
-        stroke->create();
-        stroke->loaded();
-
-        if (canvas)
-        {
-            stroke->m_canvas->m_brush.m_tip_color = color->m_color;
-            stroke->m_canvas->draw_stroke();
-            canvas->m_brush = stroke->m_canvas->m_brush;
-        }
-
-        brushes->on_brush_changed = [this](Node* target, int index) {
-            auto tid = brushes->get_texture_id(index);
-            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_brush.m_tip_color = color;
-//             stroke->m_canvas->draw_stroke();
-            if (canvas)
-                canvas->m_brush = stroke->m_canvas->m_brush;
-            if (on_color_change)
-                on_color_change(color);
-        };
-
-        stroke->on_stroke_change = [this](Node*target) {
-            if (canvas)
-                canvas->m_brush = stroke->m_canvas->m_brush;
-            if (on_stroke_change)
-                on_stroke_change();
-        };
-
-        layers->on_layer_add = [this](Node*) {
-            canvas->m_canvas->layer_add(layers->m_layers.back()->m_label_text.c_str());
-        };
-
-        layers->on_layer_change = [this](Node*, int old_idx, int new_idx) {
-            canvas->m_canvas->m_current_layer_idx = canvas->m_canvas->m_order[new_idx];
-        };
-        
-        layers->on_layer_order = [this](Node*, int old_idx, int new_idx) {
-            canvas->m_canvas->layer_order(old_idx, new_idx);
-        };
-
-        layers->on_layer_delete = [this](Node*, int idx) {
-            canvas->m_canvas->layer_remove(canvas->m_canvas->m_order[idx]);
-        };
-
-        layers->on_layer_opacity_changed = [this](Node*, int idx, float value) {
-            canvas->m_canvas->m_layers[canvas->m_canvas->m_order[idx]].m_opacity = value;
-        };
-
-        layers->on_layer_visibility_changed = [this](Node*, int idx, bool visible) {
-            canvas->m_canvas->m_layers[canvas->m_canvas->m_order[idx]].m_alpha_locked = visible;
-        };
-
-        layers->on_layer_highlight_changed = [this](Node*, int idx, bool highlight) {
-            canvas->m_canvas->m_layers[canvas->m_canvas->m_order[idx]].m_hightlight = highlight;
-        };
+ 
+        init_sidebar();
 
         canvas->m_canvas->layer_add("Default");
         layers->add_layer("Default");
+        init_toolbar_draw();
+        init_toolbar_main();
+        init_menu_file();
+        init_menu_edit();
+        init_menu_layer();
 
-        static glm::vec4 color_button_normal{.1, .1, .1, 1};
-        static glm::vec4 color_button_hlight{ 1, .0, .0, 1};
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-pen"))
-        {
-            button->on_click = [this](Node*) {
-                layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_hlight);
-                layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
-                Canvas::set_mode(Canvas::kCanvasMode::Draw);
-            };
-            layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_hlight);
-            Canvas::set_mode(Canvas::kCanvasMode::Draw);
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-pick"))
-        {
-            button->on_click = [this](Node*) {
-                CanvasModePen* mode = (CanvasModePen*)canvas->m_canvas->modes[(int)Canvas::kCanvasMode::Draw][0];
-                if (mode && canvas->m_canvas->m_current_mode == Canvas::kCanvasMode::Draw)
-                {
-                    mode->m_picking = !mode->m_picking;
-                }
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-erase"))
-        {
-            button->on_click = [this](Node*) {
-                layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_hlight);
-                layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
-                Canvas::set_mode(Canvas::kCanvasMode::Erase);
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-line"))
-        {
-            button->on_click = [this](Node*) {
-                layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_hlight);
-                layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
-                Canvas::set_mode(Canvas::kCanvasMode::Line);
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-cam"))
-        {
-            button->on_click = [this](Node*) {
-                layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_hlight);
-                layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
-                Canvas::set_mode(Canvas::kCanvasMode::Camera);
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-grid"))
-        {
-            button->on_click = [this](Node*) {
-                layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_hlight);
-                layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_normal);
-                Canvas::set_mode(Canvas::kCanvasMode::Grid);
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-fill"))
-        {
-            button->on_click = [this](Node*) {
-                layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-erase")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-line")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-cam")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-grid")->set_color(color_button_normal);
-                layout[main_id]->find<NodeButton>("btn-fill")->set_color(color_button_hlight);
-                Canvas::set_mode(Canvas::kCanvasMode::Fill);
-            };
-        }
-        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, button](Node*) {
-                panels->get_child_index(stroke.get()) == -1 ? panels->add_child(stroke) : panels->remove_child(stroke.get());
-                button->set_color(panels->get_child_index(stroke.get()) == -1 ? color_button_normal : color_button_hlight);
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-brush"))
-        {
-            button->on_click = [this, button](Node*) {
-                panels->get_child_index(brushes.get()) == -1 ? panels->add_child(brushes) : panels->remove_child(brushes.get());
-                button->set_color(panels->get_child_index(brushes.get()) == -1 ? color_button_normal : color_button_hlight);
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-color"))
-        {
-            button->on_click = [this, button](Node*) {
-                panels->get_child_index(color.get()) == -1 ? panels->add_child(color) : panels->remove_child(color.get());
-                button->set_color(panels->get_child_index(color.get()) == -1 ? color_button_normal : color_button_hlight);
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-layer"))
-        {
-            button->on_click = [this, button](Node*) {
-                panels->get_child_index(layers.get()) == -1 ? panels->add_child(layers) : panels->remove_child(layers.get());
-                button->set_color(panels->get_child_index(layers.get()) == -1 ? color_button_normal : color_button_hlight);
-            };
-        }
-
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-export"))
-        {
-            button->on_click = [this,button](Node*) {
-                if (canvas)
-                {
-                    canvas->m_canvas->export_equirectangular(data_path);
-                }
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-anim"))
-        {
-            button->on_click = [this,button](Node*) {
-                if (canvas)
-                {
-                    canvas->m_canvas->export_anim(data_path);
-                }
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-open"))
-        {
-            button->on_click = [this,button](Node*) {
-                if (canvas)
-                {
-                    // load thumbnail test
-                    auto open_dialog = std::make_shared<NodeDialogOpen>();
-                    open_dialog->m_manager = &layout;
-                    open_dialog->data_path = data_path;
-                    open_dialog->init();
-                    open_dialog->create();
-                    open_dialog->loaded();
-
-                    layout[main_id]->add_child(open_dialog);
-                    layout[main_id]->update();
-                    
-                    open_dialog->btn_ok->on_click = [this,open_dialog](Node*)
-                    {
-                        layers->clear();
-                        canvas->m_canvas->project_open(open_dialog->selected_path);
-                        for (auto& i : canvas->m_canvas->m_order)
-                            layers->add_layer(canvas->m_canvas->m_layers[i].m_name.c_str());
-                        open_dialog->destroy();
-                        ActionManager::clear();
-                    };
-                }
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-save"))
-        {
-            button->on_click = [this,button](Node*) {
-                if (canvas)
-                {
-                    auto dialog = std::make_shared<NodeDialogSave>();
-                    dialog->m_manager = &layout;
-                    dialog->init();
-                    dialog->create();
-                    dialog->loaded();
-
-                    layout[main_id]->add_child(dialog);
-                    layout[main_id]->update();
-
-                    dialog->btn_ok->on_click = [this, dialog](Node*)
-                    {
-                        canvas->m_canvas->project_save(data_path + "/" + dialog->input->m_string + ".pano");
-                        dialog->destroy(); 
-                    };
-                }
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-undo"))
-        {
-            button->on_click = [this,button](Node*) {
-                if (!ActionManager::empty())
-                    ActionManager::undo();
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-clean-memory"))
-        {
-            button->on_click = [this](Node*) {
-                ActionManager::clear();
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-clear"))
-        {
-            button->on_click = [this](Node*) { 
-                //exit(0); 
-                if (canvas)
-                    canvas->m_canvas->clear({ 0, 0, 0, 0 });
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButton>("btn-popup"))
-        {
-            button->on_click = [this](Node*) {
-                msgbox = new NodeMessageBox();
-                msgbox->m_manager = &layout;
-                msgbox->init();
-                layout[main_id]->add_child(msgbox);
-                layout[main_id]->update();
-            };
-        }
-        if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-settings"))
-        {
-            button->on_click = [this](Node*) {
-                settings = new NodeSettings();
-                settings->m_manager = &layout;
-                settings->init();
-                layout[main_id]->add_child(settings);
-                layout[main_id]->update();
-            };
-        }
-        if (auto* menu_file = layout[main_id]->find<NodeButtonCustom>("menu-file"))
-        {
-            menu_file->on_click = [=](Node*) {
-                glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
-                popup = (NodePopupMenu*)layout[const_hash("file-menu")]->m_children[0]->clone();
-                popup->SetPositioning(YGPositionTypeAbsolute);
-                popup->SetPosition(pos.x, pos.y);
-                layout[main_id]->add_child(popup);
-                layout[main_id]->update();
-                popup->mouse_capture();
-                popup->m_mouse_ignore = false;
-                popup->m_flood_events = true;
-                popup->m_capture_children = false;
-            };
-        }
-        if (auto* menu_file = layout[main_id]->find<NodeButtonCustom>("menu-edit"))
-        {
-            menu_file->on_click = [=](Node*) {
-                glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
-                popup = (NodePopupMenu*)layout[const_hash("edit-menu")]->m_children[0]->clone();
-                popup->SetPositioning(YGPositionTypeAbsolute);
-                popup->SetPosition(pos.x, pos.y);
-                layout[main_id]->add_child(popup);
-                layout[main_id]->update();
-                popup->mouse_capture();
-                popup->m_mouse_ignore = false;
-                popup->m_flood_events = true;
-                popup->m_capture_children = false;
-            };
-        }
-        if (auto* menu_file = layout[main_id]->find<NodeButtonCustom>("menu-layers"))
-        {
-            menu_file->on_click = [=](Node*) {
-                glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
-                popup = (NodePopupMenu*)layout[const_hash("layers-menu")]->m_children[0]->clone();
-                popup->SetPositioning(YGPositionTypeAbsolute);
-                popup->SetPosition(pos.x, pos.y);
-                layout[main_id]->add_child(popup);
-                layout[main_id]->update();
-                popup->mouse_capture();
-                popup->m_mouse_ignore = false;
-                popup->m_flood_events = true;
-                popup->m_capture_children = false;
-                popup->find<NodeButtonCustom>("clear-grids")->on_click = [this](Node*) {
-                    CanvasModeGrid* mode = (CanvasModeGrid*)ui::Canvas::modes[(int)ui::Canvas::kCanvasMode::Grid][0];
-                    mode->clear();
-                    popup->mouse_release();
-                    popup->destroy();
-                };
-
-                popup->find<NodeButtonCustom>("layer-rename")->on_click = [this](Node*) {
-                    auto open_dialog = std::make_shared<NodeDialogLayerRename>();
-                    open_dialog->m_manager = &layout;
-                    open_dialog->data_path = data_path;
-                    open_dialog->init();
-                    open_dialog->create();
-                    open_dialog->loaded();
-
-                    layout[main_id]->add_child(open_dialog);
-                    layout[main_id]->update();
-                    
-                    open_dialog->btn_ok->on_click = [this,open_dialog](Node*)
-                    {
-                        layers->m_current_layer->set_name(open_dialog->get_name().c_str());
-                        canvas->m_canvas->m_layers[canvas->m_canvas->m_current_layer_idx].m_name = open_dialog->get_name();
-                        open_dialog->destroy();
-                    };
-
-                    popup->mouse_release();
-                    popup->destroy();
-                };
-                if (layers->m_current_layer)
-                    popup->find<NodeButtonCustom>("layer-rename")->
-                        find<NodeText>("menu-label")->
-                        set_text(("Rename Layer " + layers->m_current_layer->m_label_text).c_str());
-                else
-                    popup->find<NodeButtonCustom>("layer-rename")->
-                        find<NodeText>("menu-label")->
-                        set_text("Rename Layer (Select a layer)");
-
-                popup->find<NodeButtonCustom>("layer-merge")->on_click = [this](Node*) {
-                    const auto& order = canvas->m_canvas->m_order;
-                    //layers->get_child_index(layers->)
-                    int current_idx_order = std::distance(order.begin(), std::find(order.begin(), order.end(), canvas->m_canvas->m_current_layer_idx));
-                    if (current_idx_order > 0)
-                    {
-                        int dest_layer_idx = order[current_idx_order - 1];
-                        canvas->m_canvas->layer_merge(canvas->m_canvas->m_current_layer_idx, dest_layer_idx);
-                        canvas->m_canvas->layer_remove(canvas->m_canvas->m_current_layer_idx);
-                        layers->clear();
-                        for (auto& i : canvas->m_canvas->m_order)
-                            layers->add_layer(canvas->m_canvas->m_layers[i].m_name.c_str());
-                        layers->m_current_layer = layers->m_layers[current_idx_order - 1];
-                        layers->m_current_layer->m_selected = true;
-                    }
-                    popup->mouse_release();
-                    popup->destroy();
-                };
-                if (layers->m_current_layer)
-                {
-                    const auto& order = canvas->m_canvas->m_order;
-                    int current_idx_order = std::distance(order.begin(), std::find(order.begin(), order.end(), canvas->m_canvas->m_current_layer_idx));
-                    if (current_idx_order > 0)
-                    {
-                        int down_layer_idx = order[current_idx_order - 1];
-                        popup->find<NodeButtonCustom>("layer-merge")->
-                            find<NodeText>("menu-label")->
-                            set_text(("Merge with " + canvas->m_canvas->m_layers[down_layer_idx].m_name).c_str());
-                    }
-                    else
-                    {
-                        popup->find<NodeButtonCustom>("layer-merge")->
-                            find<NodeText>("menu-label")->
-                            set_text("Merge Layer (Select upper layers)");
-                    }
-                }
-                else
-                    popup->find<NodeButtonCustom>("layer-merge")->
-                    find<NodeText>("menu-label")->
-                    set_text("Merge Layer (Select a layer)");
-
-            };
-        }
+        // hacky thing to make the toolbar buttons not steal events when moving cursor fast
         if (auto* toolbar = layout[main_id]->find<Node>("toolbar"))
-        {
             toolbar->m_flood_events = true;
-        }
+
+/*
         if (auto* slider = layout[main_id]->find<NodeSliderH>("frames-slider"))
         {
             slider->on_value_changed = [this](Node*, float value)
@@ -495,6 +512,7 @@ void App::initLayout()
                 }
             };
         }
+*/
     };
     LOG("initializing layout xml");
     if (layout.m_loaded)
diff --git a/engine/node_canvas.cpp b/engine/node_canvas.cpp
index 4433750..c85f9af 100644
--- a/engine/node_canvas.cpp
+++ b/engine/node_canvas.cpp
@@ -79,24 +79,40 @@ void NodeCanvas::draw()
     m_sampler.bind(0);
     m_sampler.bind(1);
     auto blend = glIsEnabled(GL_BLEND);
+    auto depth = glIsEnabled(GL_DEPTH_TEST);
 
-    glEnable(GL_BLEND);
-    //glEnable(GL_DEPTH_TEST);
+    glDisable(GL_BLEND);
+    glDisable(GL_DEPTH_TEST);
     glClear(GL_DEPTH_BUFFER_BIT);
+
     for (int plane_index = 0; plane_index < 6; plane_index++)
     {
-        auto plane_mvp = proj * camera * glm::scale(glm::vec3(m_canvas->m_order.size())) * m_canvas->m_plane_transform[plane_index] * glm::translate(glm::vec3(0, 0, -1));
+        auto plane_mvp = proj * camera * 
+            glm::scale(glm::vec3(m_canvas->m_order.size() + 500)) * 
+            m_canvas->m_plane_transform[plane_index] * 
+            glm::translate(glm::vec3(0, 0, -1));
 
         ui::ShaderManager::use(kShader::Checkerboard);
         ui::ShaderManager::u_mat4(kShaderUniform::MVP, plane_mvp);
         m_face_plane.draw_fill();
+    }
 
-        for (auto layer_index : m_canvas->m_order)
+    glEnable(GL_BLEND);
+    glEnable(GL_DEPTH_TEST);
+    glClear(GL_DEPTH_BUFFER_BIT);
+
+    for (auto layer_index : m_canvas->m_order)
+    {
+        for (int plane_index = 0; plane_index < 6; plane_index++)
         {
             if (m_canvas->m_layers[layer_index].m_opacity == .0f)
                 continue;
+
             int z = (int)m_canvas->m_order.size() - layer_index;
-            auto plane_mvp_z = proj * camera * glm::scale(glm::vec3(z)) * m_canvas->m_plane_transform[plane_index] * glm::translate(glm::vec3(0, 0, -1));
+            auto plane_mvp_z = proj * camera * 
+                glm::scale(glm::vec3(z + 1)) * 
+                m_canvas->m_plane_transform[plane_index] * 
+                glm::translate(glm::vec3(0, 0, -1));
             
             if (m_canvas->m_state == ui::Canvas::kCanvasMode::Erase && m_canvas->m_show_tmp && m_canvas->m_current_layer_idx == layer_index)
             {
@@ -159,7 +175,6 @@ void NodeCanvas::draw()
 //            }
         }
     }
-    glDisable(GL_DEPTH_TEST);
 
     for (auto& mode : *m_canvas->m_mode)
         mode->on_Draw(ortho_proj, proj, camera);
@@ -184,6 +199,7 @@ void NodeCanvas::draw()
 //         m_line.draw_stroke();
 
     blend ? glEnable(GL_BLEND) : glDisable(GL_BLEND);
+    depth ? glEnable(GL_DEPTH_TEST) : glDisable(GL_DEPTH_TEST);
     m_sampler.unbind();
     glViewport(vp[0], vp[1], vp[2], vp[3]);
     glClearColor(cc[0], cc[1], cc[2], cc[3]);
diff --git a/engine/node_dialog_open.cpp b/engine/node_dialog_open.cpp
index ab35ebb..acabb30 100644
--- a/engine/node_dialog_open.cpp
+++ b/engine/node_dialog_open.cpp
@@ -41,6 +41,7 @@ void NodeDialogOpen::init_controls()
         node->init();
         node->m_text->set_text(n.c_str());
         node->m_path = data_path + "/" + n;
+        node->m_file_name = n;
         node->on_selected = [&](NodeDialogOpenItem* target) {
             static NodeDialogOpenItem* current = nullptr;
             if (target == current)
@@ -50,6 +51,7 @@ void NodeDialogOpen::init_controls()
             image_tex->tex.destroy();
             image_tex->tex.create(thumb);
             selected_path = target->m_path;
+            selected_file = target->m_file_name;
             if (current)
                 current->m_selected = false;
             current = target;
@@ -156,4 +158,37 @@ void NodeDialogSave::init_controls()
 void NodeDialogSave::loaded()
 {
 
+}
+
+//////////////////////////////////////////////////////////////////
+
+Node* NodeDialogNewDoc::clone_instantiate() const
+{
+    return new NodeDialogNewDoc;
+}
+void NodeDialogNewDoc::clone_finalize(Node* dest) const
+{
+    NodeDialogNewDoc* n = static_cast<NodeDialogNewDoc*>(dest);
+    n->init_controls();
+}
+void NodeDialogNewDoc::init()
+{
+    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-newdoc"));
+    m_color = tpl->m_color;
+    m_border_color = tpl->m_border_color;
+    m_thinkness = tpl->m_thinkness;
+    init_controls();
+}
+void NodeDialogNewDoc::init_controls()
+{
+    btn_ok = find<NodeButton>("btn-ok");
+    btn_cancel = find<NodeButton>("btn-cancel");
+    btn_cancel->on_click = [this](Node*) {
+        destroy();
+    };
+    input = find<NodeTextInput>("txt-input");
+}
+void NodeDialogNewDoc::loaded()
+{
+
 }
\ No newline at end of file
diff --git a/engine/node_dialog_open.h b/engine/node_dialog_open.h
index d04eb46..97abe1d 100644
--- a/engine/node_dialog_open.h
+++ b/engine/node_dialog_open.h
@@ -15,6 +15,7 @@ public:
     glm::vec4 m_color_hover = glm::vec4(.5, .5, .5, 1);
     bool m_selected = false;
     std::string m_path;
+    std::string m_file_name;
     std::function<void(NodeDialogOpenItem* target)> on_selected;
     virtual Node* clone_instantiate() const override;
     virtual void clone_finalize(Node* dest) const override;
@@ -32,6 +33,7 @@ public:
     NodeButton* btn_ok;
     Node* container;
     std::string selected_path;
+    std::string selected_file;
     std::string data_path;
     virtual Node* clone_instantiate() const override;
     virtual void clone_finalize(Node* dest) const override;
@@ -53,3 +55,16 @@ public:
     void init_controls();
     virtual void loaded() override;
 };
+
+class NodeDialogNewDoc : public NodeBorder
+{
+public:
+    NodeButton* btn_cancel;
+    NodeButton* btn_ok;
+    NodeTextInput* input;
+    virtual Node* clone_instantiate() const override;
+    virtual void clone_finalize(Node* dest) const override;
+    virtual void init() override;
+    void init_controls();
+    virtual void loaded() override;
+};