[fix][update] fixed container pixel align docknization with a custom theme field; now all triggers are working on scrollbar

mrsrina · mrsrina · commit bc3f455c83f8 · 2025-04-10T14:30:28.000-03:00
diff --git a/.gitignore b/.gitignore
@@ -9,7 +9,9 @@ test/cmake-build-cache
 lib/
 .sublime-project.sublime-workspace
 *.sublime-workspace
+
 ekg-ui-library.sublime-workspace
 ekg-sandbox
+ekg-docs
 ekg-cmake-install
 a.out # idk wha damn is this
diff --git a/.hdoc.toml b/.hdoc.toml
@@ -10,8 +10,8 @@ compile_commands = "cmake-build/compile_commands.json"
 
 [pages]
 
-homepage = "docs/homepage.md"
+homepage = "ekg-docs/readme.md"
 paths = [
-  "docs/gettingstarted.md",
-  "docs/devlog.md"
-]
+  "ekg-docs/model/*.md",
+  "ekg-docs/tutorial/*.md"
+]
diff --git a/include/ekg/io/design.hpp b/include/ekg/io/design.hpp
@@ -23,9 +23,8 @@ namespace ekg {
     std::string_view description {};
     std::string_view path {};
   public:
-    bool symmetric_layout {};
-    float min_widget_size {5};
-    float layout_offset {2.0f};
+    ekg::pixel_t layout_offset {2.0f};
+    ekg::pixel_thickness_t layout_margin_thickness {2};
 
     ekg::button_theme_t button {};
     ekg::checkbox_theme_t checkbox {};
diff --git a/include/ekg/math/floating_point.hpp b/include/ekg/math/floating_point.hpp
@@ -6,8 +6,6 @@
 
 namespace ekg {
   constexpr float pi {3.1415927f};
-  constexpr float pixel {1.0000000f};
-  constexpr float pixel_div_2 {0.5000000f};
 
   constexpr bool fequalsf(float compare, float compared) {
     return (
diff --git a/include/ekg/math/geometry.hpp b/include/ekg/math/geometry.hpp
@@ -6,6 +6,12 @@
 #include <string>
 
 namespace ekg {
+  typedef int32_t pixel_thickness_t;
+  typedef float pixel_t;
+
+  constexpr float one_pixel {1.0000000f};
+  constexpr float half_pixel {0.5000000f};
+
   enum dock {
     none   = 2 << 1,
     free   = 2 << 2,
@@ -26,6 +32,12 @@ namespace ekg {
     horizontal = 2 << 14
   };
 
+  template<typename t>
+  struct vec1_t {
+  public:
+    t x {};
+  };
+
   template<typename t>
   struct vec2_t {
     union {
diff --git a/include/ekg/ui/frame/frame.hpp b/include/ekg/ui/frame/frame.hpp
@@ -12,7 +12,7 @@ namespace ekg {
     ekg::vec4_t<float> background {};
     ekg::vec4_t<float> border {};
     ekg::vec4_t<float> outline {};
-    float margin_actions_offset {};
+    ekg::pixel_thickness_t actions_margin_pixel_thickness {};
 
     /**
      * [0] ekg::frame_t;
diff --git a/include/ekg/ui/scrollbar/scrollbar.hpp b/include/ekg/ui/scrollbar/scrollbar.hpp
@@ -13,7 +13,7 @@ namespace ekg {
     ekg::vec4_t<float> outline {};
     ekg::vec4_t<float> highlight {};
     ekg::vec4_t<float> active {};
-    int32_t pixel_thickness {};
+    ekg::pixel_thickness_t pixel_thickness {};
     float min_bar_size {};
 
     /**
diff --git a/include/ekg/ui/types.hpp b/include/ekg/ui/types.hpp
@@ -39,6 +39,11 @@ namespace ekg::ui {
      **/
     ekg::vec4_t<bool> is_scrolling {};
 
+    /**
+     * The nearest-bar pixel-thicnkess;
+     **/
+    ekg::pixel_thickness_t nearest_scroll_bar_thickness {};
+
     bool is_active {};
     bool is_focused {};
 
diff --git a/src/layout/docknize.cpp b/src/layout/docknize.cpp
@@ -260,27 +260,32 @@ void ekg::layout::docknize_widget(
 
   ekg::rect_t<float> container_rect {abs_parent_rect};
   ekg::theme_t &current_global_theme {ekg::theme()};
-  float initial_offset {static_cast<float>(current_global_theme.scrollbar.pixel_thickness)};
+
+  float margin {static_cast<float>(current_global_theme.layout_margin_thickness) * 2.0f};
+  container_rect.w -= margin;
+  container_rect.h -= margin;
+
+  /**
+   * Pixel correction to make margin aligned and symmetric. 
+   **/
+  container_rect.w -= (
+    static_cast<ekg::pixel_thickness_t>(abs_parent_rect.w - container_rect.w)
+    -
+    current_global_theme.layout_margin_thickness
+  );
 
   if (
     p_widget_parent->states.is_scrolling.z
     ||
     p_widget_parent->states.is_scrolling.w
   ) {
-    initial_offset *= static_cast<float>(!current_global_theme.symmetric_layout);
-    container_rect.w -= initial_offset * static_cast<float>(p_widget_parent->states.is_scrolling.z);
-    container_rect.h -= initial_offset * static_cast<float>(p_widget_parent->states.is_scrolling.w);
-  }
-
-  initial_offset = (
-    static_cast<float>(current_global_theme.scrollbar.pixel_thickness)
-    *
-    static_cast<float>(current_global_theme.symmetric_layout)
-  );
+    float nearest_scroll_bar_thickness {
+      static_cast<float>(p_widget_parent->states.nearest_scroll_bar_thickness)
+    };
 
-  float container_size_offset {(initial_offset + current_global_theme.layout_offset) * 2.0f};
-  container_rect.w -= container_size_offset;
-  container_rect.h -= container_size_offset;
+    container_rect.w -= nearest_scroll_bar_thickness * static_cast<float>(p_widget_parent->states.is_scrolling.w);
+    container_rect.h -= nearest_scroll_bar_thickness * static_cast<float>(p_widget_parent->states.is_scrolling.z);
+  }
 
   ekg::ui::abstract *p_widgets {};
   ekg::flags_t flags {};
@@ -291,8 +296,8 @@ void ekg::layout::docknize_widget(
   int32_t count {};
 
   ekg::rect_t<float> parent_offset {
-    current_global_theme.layout_offset + initial_offset,
-    current_global_theme.layout_offset + initial_offset,
+    margin,
+    margin,
     0.0f,
     0.0f
   };
@@ -334,7 +339,7 @@ void ekg::layout::docknize_widget(
   );
 
   float align {};
-  float imperfect_pixel_max_bounding {pixel_perfect_projection.x + ekg::pixel * 5.0f};
+  float imperfect_pixel_max_bounding {pixel_perfect_projection.x + ekg::one_pixel * 5.0f};
   float projected_pixel_perfect_width {pixel_perfect_projection.x + pixel_perfect_projection.w};
   float unsolved_pixel_position {};
 
diff --git a/src/service/theme.cpp b/src/service/theme.cpp
@@ -60,11 +60,10 @@ void ekg::service::theme::init() {
     .description = "Pasted dark-theme... mwm",
   };
 
-  dark_theme.symmetric_layout = true;
   dark_theme.frame.background = ekg::color<int32_t>(43, 43, 43, 255);
   dark_theme.frame.outline = ekg::color<int32_t>(190, 190, 190, 0);
   dark_theme.frame.outline = ekg::color<int32_t>(30, 40, 60, 100);
-  dark_theme.frame.margin_actions_offset = 18;
+  dark_theme.frame.actions_margin_pixel_thickness = 18;
   dark_theme.button.background = ekg::color<int32_t>(85, 85, 85, 50);
   dark_theme.button.text = ekg::color<int32_t>(202, 202, 202, 255);
   dark_theme.button.outline = ekg::color<int32_t>(202, 207, 222, 0);
@@ -132,11 +131,10 @@ void ekg::service::theme::init() {
     .description = "Pasted light-theme... moow",
   };
 
-  light_theme.symmetric_layout = true;
   light_theme.frame.background = ekg::color<int32_t>(242, 242, 242, 255);
   light_theme.frame.outline = ekg::color<int32_t>(190, 190, 190, 0);
   light_theme.frame.outline = ekg::color<int32_t>(202, 207, 222, 150);
-  light_theme.frame.margin_actions_offset = 18;
+  light_theme.frame.actions_margin_pixel_thickness = 18;
   light_theme.button.text = ekg::color<int32_t>(141, 141, 141, 255);
   light_theme.button.background = ekg::color<int32_t>(204, 204, 204, 50);
   light_theme.button.active = ekg::color<int32_t>(44, 166, 255, 100);
@@ -204,11 +202,10 @@ void ekg::service::theme::init() {
     .description = "Pasted light-theme... moow",
   };
 
-  light_pinky_theme.symmetric_layout = true;
   light_pinky_theme.frame.background = ekg::color<int32_t>(242, 242, 242, 255);
   light_pinky_theme.frame.outline = ekg::color<int32_t>(190, 190, 190, 0);
   light_pinky_theme.frame.outline = ekg::color<int32_t>(202, 207, 222, 150);
-  light_pinky_theme.frame.margin_actions_offset = 18;
+  light_pinky_theme.frame.actions_margin_pixel_thickness = 18;
   light_pinky_theme.button.text = ekg::color<int32_t>(141, 141, 141, 255);
   light_pinky_theme.button.background = ekg::color<int32_t>(204, 204, 204, 50);
   light_pinky_theme.button.active = ekg::color<int32_t>(245, 169, 184, 100);
@@ -276,11 +273,10 @@ void ekg::service::theme::init() {
     .description = "Pasted dark-theme... mooo mwm",
   };
 
-  dark_pinky_theme.symmetric_layout = true;
   dark_pinky_theme.frame.background = ekg::color<int32_t>(43, 43, 43, 255);
   dark_pinky_theme.frame.outline = ekg::color<int32_t>(190, 190, 190, 0);
   dark_pinky_theme.frame.outline = ekg::color<int32_t>(30, 40, 60, 100);
-  dark_pinky_theme.frame.margin_actions_offset = 18;
+  dark_pinky_theme.frame.actions_margin_pixel_thickness = 18;
   dark_pinky_theme.button.background = ekg::color<int32_t>(85, 85, 85, 50);
   dark_pinky_theme.button.text = ekg::color<int32_t>(202, 202, 202, 255);
   dark_pinky_theme.button.outline = ekg::color<int32_t>(202, 207, 222, 0);
diff --git a/src/ui/button/button_widget.cpp b/src/ui/button/button_widget.cpp
@@ -25,7 +25,7 @@ void ekg::ui::button::on_reload() {
     aligned_dimension
   );
 
-  this->descriptor.rect.scaled_height = ekg::clamp_min<float>(this->descriptor.rect.scaled_height, ekg::pixel);
+  this->descriptor.rect.scaled_height = ekg::clamp_min<float>(this->descriptor.rect.scaled_height, ekg::one_pixel);
   
   if (this->properties.must_refresh_size) {
     this->descriptor.rect.w = ekg::clamp_min<float>(aligned_dimension.w, this->descriptor.rect.w);
diff --git a/src/ui/checkbox/checkbox_widget.cpp b/src/ui/checkbox/checkbox_widget.cpp
@@ -30,7 +30,7 @@ void ekg::ui::checkbox::on_reload() {
     aligned_dimension
   );
 
-  this->descriptor.rect.scaled_height = ekg::clamp_min<float>(this->descriptor.rect.scaled_height, ekg::pixel);
+  this->descriptor.rect.scaled_height = ekg::clamp_min<float>(this->descriptor.rect.scaled_height, ekg::one_pixel);
   
   if (this->properties.must_refresh_size) {
     this->descriptor.rect.w = ekg::clamp_min<float>(aligned_dimension.w, this->descriptor.rect.w);
diff --git a/src/ui/frame/frame_widget.cpp b/src/ui/frame/frame_widget.cpp
@@ -46,8 +46,8 @@ void ekg::ui::frame::on_event(ekg::io::stage stage) {
         ) {
 
         ekg::vec2_t<float> margin {
-          this->descriptor.theme.margin_actions_offset,
-          this->descriptor.theme.margin_actions_offset
+          static_cast<float>(this->descriptor.theme.actions_margin_pixel_thickness),
+          static_cast<float>(this->descriptor.theme.actions_margin_pixel_thickness)
         };
 
         ekg::scale_docker_by_margin<float>(
@@ -175,8 +175,8 @@ void ekg::ui::frame::on_event(ekg::io::stage stage) {
         !this->states.is_active
       ) {
         ekg::vec2_t<float> margin {
-          this->descriptor.theme.margin_actions_offset,
-          this->descriptor.theme.margin_actions_offset
+          static_cast<float>(this->descriptor.theme.actions_margin_pixel_thickness),
+          static_cast<float>(this->descriptor.theme.actions_margin_pixel_thickness)
         };
 
         const float margin_factor {4.0f};
diff --git a/src/ui/label/label_widget.cpp b/src/ui/label/label_widget.cpp
@@ -25,7 +25,7 @@ void ekg::ui::label::on_reload() {
     aligned_dimension
   );
 
-  this->descriptor.rect.scaled_height = ekg::clamp_min<float>(this->descriptor.rect.scaled_height, ekg::pixel);
+  this->descriptor.rect.scaled_height = ekg::clamp_min<float>(this->descriptor.rect.scaled_height, ekg::one_pixel);
   
   if (this->properties.must_refresh_size) {
     this->descriptor.rect.w = ekg::clamp_min<float>(aligned_dimension.w, this->descriptor.rect.w);
diff --git a/src/ui/scrollbar/scrollbar_widget.cpp b/src/ui/scrollbar/scrollbar_widget.cpp
@@ -366,6 +366,21 @@ void ekg::ui::scrollbar::on_event(ekg::io::stage stage) {
       }
 
       if (input.was_released) {
+        ekg::io::trigger(
+          (
+            input.was_pressed
+            &&
+            (
+              this->bar_horizontal_states.is_active
+              ||
+              this->bar_vertical_states.is_active
+            )
+          ),
+          ekg::action::release,
+          this->descriptor.actions,
+          &this->properties
+        );
+
         ekg::io::set<bool>(
           this->bar_horizontal_states.is_active,
           (this->states.is_scrolling.x = false)
@@ -378,8 +393,13 @@ void ekg::ui::scrollbar::on_event(ekg::io::stage stage) {
       }
 
       if (this->properties.p_parent && this->properties.p_parent->p_widget) {
-        static_cast<ekg::ui::abstract*>(this->properties.p_parent->p_widget)
-          ->states.is_scrolling = this->states.is_scrolling;
+        ekg::ui::abstract *p_parent_widget {
+          static_cast<ekg::ui::abstract*>(this->properties.p_parent->p_widget)
+        };
+
+        p_parent_widget->states.is_scrolling.z = this->states.is_scrolling.z;
+        p_parent_widget->states.is_scrolling.w = this->states.is_scrolling.w;
+        p_parent_widget->states.nearest_scroll_bar_thickness = this->descriptor.theme.pixel_thickness;
       }
 
       if ((this->states.is_active || this->states.is_absolute) && !this->states.is_high_frequency) {
@@ -437,8 +457,6 @@ void ekg::ui::scrollbar::on_event(ekg::io::stage stage) {
             ||
             this->bar_vertical_states.is_active
           )
-          &&
-          (ekg::timing_t::second > ekg::tweaks.task_latency)
         ),
         ekg::action::press,
         this->descriptor.actions,
@@ -516,6 +534,7 @@ void ekg::ui::scrollbar::on_draw() {
   }
 
   this->bar_vertical.w = static_cast<float>(this->descriptor.theme.pixel_thickness * this->states.is_scrolling.w);
+
   this->bar_vertical.x = (
     this->descriptor.p_binded_rect->x
     +
@@ -582,7 +601,7 @@ void ekg::ui::scrollbar::on_draw() {
     this->bar_vertical.w,
     this->bar_vertical.h,
     this->descriptor.theme.outline,
-    ekg::draw_mode::filled
+    ekg::draw_mode::outline
   );
 
   this->bar_horizontal.h = static_cast<float>(this->descriptor.theme.pixel_thickness * this->states.is_scrolling.z);
diff --git a/version/commit.txt b/version/commit.txt
@@ -257,3 +257,4 @@
 -- Scrollbar widget impl. on new memory-model.
 -- Scrollbar scrolling speed fix.
 -- Moved callback-actions to descriptors instead as before in properties, also actions are type-based named `ekg::actions`.
+-- Fixed pixel align on container docknization, margin layout and offset layout both are separed now.
