new icons

data/layout.xml

@@ -774,7 +774,7 @@
         </node>
       </border>
       <!-- toolbar -->
-      <border id="toolbar" height="50" width="100%" pad="5" dir="row" color=".2 .2 .2 .6">
+      <border id="toolbar" height="60" 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"/>
@@ -802,26 +802,44 @@
         <button id="btn-anim" width="70" height="100%" margin="1 0 0 10" text="Animate"/>
         -->
         <node dir="row" justify="center" grow="1">
-          <button id="btn-pen" width="50" height="100%" margin="0 0 0 0" text="Pen"/>
+          <button-custom id="btn-pen" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
-          <button id="btn-pick" width="50" height="100%" margin="0 0 0 0" text="Pick"/>
+            <image path="data/ui/pen.png" width="100%" height="100%" align="center" justify="flex-end"/>
-          <button id="btn-touchlock" width="50" height="100%" margin="0 0 0 0" text="Lock"/>
+          </button-custom>
+          <button-custom id="btn-pick" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <image path="data/ui/picker.png" width="100%" height="100%" align="center" justify="flex-end"/>
+          </button-custom>
+
+          <button-custom id="btn-erase" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <image path="data/ui/eraser.png" width="100%" height="100%" align="center" justify="flex-end"/>
+          </button-custom>
 
-          <button id="btn-erase" width="60" height="100%" margin="0 0 0 5" text="Eraser"/>
-          
           <button id="btn-cam" width="70" height="100%" margin="0 0 0 5" text="Parallax"/>
           
-          <button id="btn-line" width="50" height="100%" margin="0 0 0 5" text="Line"/>
+          <button-custom id="btn-line" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
-          <button id="btn-grid" width="50" height="100%" margin="0 0 0 0" text="Grid"/>
+            <image path="data/ui/line.png" width="100%" height="100%" align="center" justify="flex-end"/>
+          </button-custom>
+          <button id="btn-grid" width="50" height="100%" margin="0 0 0 5" text="Grid"/>
           <!-- <button id="btn-fill" width="50" height="100%" margin="0 0 0 0" text="Fill"/> -->
-          <button id="btn-mask-free" width="50" height="100%" margin="0 0 0 0" text="FMask"/>
+          <button-custom id="btn-mask-free" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
-          <button id="btn-mask-line" width="50" height="100%" margin="0 0 0 0" text="LMask"/>
+            <image path="data/ui/sel-free.png" width="100%" height="100%" align="center" justify="flex-end"/>
-          
+          </button-custom>
+          <button-custom id="btn-mask-line" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <image path="data/ui/sel-poly.png" width="100%" height="100%" align="center" justify="flex-end"/>
+          </button-custom>
+
           <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>
+          <button-custom id="btn-touchlock" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <image path="data/ui/notouch.png" width="100%" height="100%" align="center" justify="flex-end"/>
+          </button-custom>
         </node>
-        <button id="btn-undo" width="50" height="100%" margin="0 5 0 0" text="Undo"/>
+        <button-custom id="btn-undo" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
-        <button id="btn-redo" width="50" height="100%" margin="0 5 0 0" text="Redo"/>
+          <image path="data/ui/undo.png" width="100%" height="100%" align="center" justify="flex-end"/>
+        </button-custom>
+        <button-custom id="btn-redo" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
+          <image path="data/ui/redo.png" width="100%" height="100%" align="center" justify="flex-end"/>
+        </button-custom>
         <!--
         <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"/>

src/app.cpp

@@ -422,13 +422,13 @@ void App::update(float dt)
     static glm::vec4 color_button_normal{.1, .1, .1, 1};
     static glm::vec4 color_button_hlight{ 1, .0, .0, 1};
     CanvasModePen* mode = (CanvasModePen*)canvas->m_canvas->modes[(int)Canvas::kCanvasMode::Draw][0];
-    layout[main_id]->find<NodeButton>("btn-pick")->set_color(
+    layout[main_id]->find<NodeButtonCustom>("btn-pick")->set_color(
          mode->m_picking ? color_button_hlight : color_button_normal);
-    layout[main_id]->find<NodeButton>("btn-pen")->set_color(
+    layout[main_id]->find<NodeButtonCustom>("btn-pen")->set_color(
         canvas->m_canvas->m_current_mode == Canvas::kCanvasMode::Draw ? color_button_hlight : color_button_normal);
-    layout[main_id]->find<NodeButton>("btn-erase")->set_color(
+    layout[main_id]->find<NodeButtonCustom>("btn-erase")->set_color(
         canvas->m_canvas->m_current_mode == Canvas::kCanvasMode::Erase ? color_button_hlight : color_button_normal);
-    layout[main_id]->find<NodeButton>("btn-touchlock")->set_color(
+    layout[main_id]->find<NodeButtonCustom>("btn-touchlock")->set_color(
          canvas->m_canvas->m_touch_lock ? color_button_hlight : color_button_normal);
 
 

src/app_layout.cpp

@@ -52,13 +52,13 @@ void App::init_toolbar_main()
             dialog_save();
         };
     }
-    if (auto* button = layout[main_id]->find<NodeButton>("btn-undo"))
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-undo"))
     {
         button->on_click = [this, button](Node*) {
             ActionManager::undo();
         };
     }
-    if (auto* button = layout[main_id]->find<NodeButton>("btn-redo"))
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-redo"))
     {
         button->on_click = [this, button](Node*) {
             ActionManager::redo();
@@ -255,30 +255,31 @@ void App::init_sidebar()
         };
     }
 }
+template<class T>
+void select_button(Node* main, T* button) {
+    main->find<NodeButtonCustom>("btn-pen")->set_color(color_button_normal);
+    main->find<NodeButtonCustom>("btn-erase")->set_color(color_button_normal);
+    main->find<NodeButtonCustom>("btn-line")->set_color(color_button_normal);
+    main->find<NodeButton>("btn-cam")->set_color(color_button_normal);
+    main->find<NodeButton>("btn-grid")->set_color(color_button_normal);
+    //main->find<NodeButton>("btn-fill")->set_color(color_button_normal);
+    main->find<NodeButtonCustom>("btn-mask-free")->set_color(color_button_normal);
+    main->find<NodeButtonCustom>("btn-mask-line")->set_color(color_button_normal);
+    button->set_color(color_button_hlight);
+};
 
 void App::init_toolbar_draw()
 {
-    static auto select_button = [] (Node* main, NodeButton* button) {
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-pen"))
-        main->find<NodeButton>("btn-pen")->set_color(color_button_normal);
-        main->find<NodeButton>("btn-erase")->set_color(color_button_normal);
-        main->find<NodeButton>("btn-line")->set_color(color_button_normal);
-        main->find<NodeButton>("btn-cam")->set_color(color_button_normal);
-        main->find<NodeButton>("btn-grid")->set_color(color_button_normal);
-        //main->find<NodeButton>("btn-fill")->set_color(color_button_normal);
-        main->find<NodeButton>("btn-mask-free")->set_color(color_button_normal);
-        main->find<NodeButton>("btn-mask-line")->set_color(color_button_normal);
-        button->set_color(color_button_hlight);
-    };
-    if (auto* button = layout[main_id]->find<NodeButton>("btn-pen"))
     {
         button->on_click = [this, button](Node*) {
             select_button(layout[main_id], button);
             Canvas::set_mode(Canvas::kCanvasMode::Draw);
         };
-        layout[main_id]->find<NodeButton>("btn-pen")->set_color(color_button_hlight);
+        button->set_color(color_button_hlight);
         Canvas::set_mode(Canvas::kCanvasMode::Draw);
     }
-    if (auto* button = layout[main_id]->find<NodeButton>("btn-pick"))
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-pick"))
     {
         button->on_click = [this](Node*) {
             CanvasModePen* mode = (CanvasModePen*)canvas->m_canvas->modes[(int)Canvas::kCanvasMode::Draw][0];
@@ -288,20 +289,20 @@ void App::init_toolbar_draw()
             }
         };
     }
-    if (auto* button = layout[main_id]->find<NodeButton>("btn-touchlock"))
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-touchlock"))
     {
         button->on_click = [this](Node*) {
             canvas->m_canvas->m_touch_lock = !canvas->m_canvas->m_touch_lock;
         };
     }
-    if (auto* button = layout[main_id]->find<NodeButton>("btn-erase"))
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-erase"))
     {
         button->on_click = [this, button](Node*) {
             select_button(layout[main_id], button);
             Canvas::set_mode(Canvas::kCanvasMode::Erase);
         };
     }
-    if (auto* button = layout[main_id]->find<NodeButton>("btn-line"))
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-line"))
     {
         button->on_click = [this, button](Node*) {
             select_button(layout[main_id], button);
@@ -329,14 +330,14 @@ void App::init_toolbar_draw()
             Canvas::set_mode(Canvas::kCanvasMode::Fill);
         };
     }
-    if (auto* button = layout[main_id]->find<NodeButton>("btn-mask-free"))
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-mask-free"))
     {
         button->on_click = [this, button](Node*) {
             select_button(layout[main_id], button);
             Canvas::set_mode(Canvas::kCanvasMode::MaskFree);
         };
     }
-    if (auto* button = layout[main_id]->find<NodeButton>("btn-mask-line"))
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-mask-line"))
     {
         button->on_click = [this, button](Node*) {
             select_button(layout[main_id], button);