feat(js): flex grow, text max width

Author: std-microblock

dependencies/breeze-ui.lua

@@ -4,9 +4,8 @@ package("breeze-glfw")
     add_versions("latest", "master")
 
 package("breeze-ui")
-    -- add_urls("https://github.com/std-microblock/breeze-ui.git")
-    -- add_versions("2025.10.08+9", "2a84657f33791b33059405983ea5d9d4ea52094c")
-    set_sourcedir("E:/breeze-ui")
+    add_urls("https://github.com/std-microblock/breeze-ui.git")
+    add_versions("2025.10.09+2", "6cda70342717701f7074e3d57356e18ae29a0474")
     add_deps("breeze-glfw", "nanovg", "glad", "nanosvg")
     add_configs("shared", {description = "Build shared library.", default = false, type = "boolean", readonly = true})
 

src/shell/script/binding_qjs.h

@@ -57,7 +57,9 @@ export class js_text_widget extends js_widget {
     set text(value: string);
 	get font_size(): number;
     set font_size(value: number);
-	get color(): [number, number, number, number];
+	get max_width(): number;
+    set max_width(value: number);
+	get color(): [number, number, number, number] | undefined;
     set color(value: [number, number, number, number] | undefined);
 }
 }
@@ -75,6 +77,8 @@ export class js_flex_layout_widget extends js_widget {
     set padding_top(value: number);
 	get padding_bottom(): number;
     set padding_bottom(value: number);
+	get flex_grow(): number;
+    set flex_grow(value: number);
 	get padding(): [number, number, number, number];
 	get on_click(): ((arg1: number) => void);
     set on_click(value: ((arg1: number) => void));
@@ -762,14 +766,14 @@ export class menu_controller {
      *  This method is only available for detached menu controllers
      * @param x: number
      * @param y: number
-     * @returns Promise<number>
+     * @returns void
      */
-    show_at(x: number, y: number): Promise<number>
+    show_at(x: number, y: number): void
 	/**
      *  This method is only available for detached menu controllers
-      @returns Promise<number>
+      @returns void
      */
-    show_at_cursor(): Promise<number>
+    show_at_cursor(): void
 }
 export class clipboard {
 	/**

src/shell/script/binding_types.d.ts

@@ -1,3 +1,4 @@
+#include "shell/script/binding_types_breeze_ui.h"
 #include "binding_types.hpp"
 #include "breeze_ui/animator.h"
 #include "breeze_ui/ui.h"
@@ -41,6 +42,7 @@ namespace mb_shell::js {
             return;                                                            \
         auto lock = $rt_lock();                                                \
         widget->prop_name = value;                                             \
+        widget->needs_repaint = true;                                          \
     }
 
 // Macro for callback function getter/setter pairs
@@ -112,60 +114,10 @@ breeze_ui::js_widget::children() const {
     return result;
 }
 
-std::string breeze_ui::js_text_widget::get_text() const {
-    auto text_widget = std::dynamic_pointer_cast<ui::text_widget>($widget);
-    if (!text_widget)
-        return "";
-    return text_widget->text;
-}
-
-void breeze_ui::js_text_widget::set_text(std::string text) {
-    auto text_widget = std::dynamic_pointer_cast<ui::text_widget>($widget);
-    if (!text_widget)
-        return;
-    auto lock = $rt_lock();
-    text_widget->text = text;
-    text_widget->needs_repaint = true;
-}
-
-int breeze_ui::js_text_widget::get_font_size() const {
-    auto text_widget = std::dynamic_pointer_cast<ui::text_widget>($widget);
-    if (!text_widget)
-        return 0;
-    return text_widget->font_size;
-}
-
-void breeze_ui::js_text_widget::set_font_size(int size) {
-    auto text_widget = std::dynamic_pointer_cast<ui::text_widget>($widget);
-    if (!text_widget)
-        return;
-    auto lock = $rt_lock();
-    text_widget->font_size = size;
-    text_widget->needs_repaint = true;
-}
-
-std::tuple<float, float, float, float>
-breeze_ui::js_text_widget::get_color() const {
-    auto text_widget = std::dynamic_pointer_cast<ui::text_widget>($widget);
-    if (!text_widget)
-        return {0.0f, 0.0f, 0.0f, 0.0f};
-    auto color_array = *text_widget->color;
-    return {color_array[0], color_array[1], color_array[2], color_array[3]};
-}
-
-void breeze_ui::js_text_widget::set_color(
-    std::optional<std::tuple<float, float, float, float>> color) {
-    auto text_widget = std::dynamic_pointer_cast<ui::text_widget>($widget);
-    if (!text_widget)
-        return;
-    if (color.has_value()) {
-        text_widget->color.animate_to(
-            {std::get<0>(color.value()), std::get<1>(color.value()),
-             std::get<2>(color.value()), std::get<3>(color.value())});
-    } else {
-        text_widget->color.animate_to({0.0f, 0.0f, 0.0f, 0.0f});
-    }
-}
+IMPL_SIMPLE_PROP(breeze_ui::js_text_widget, ui::text_widget, text, std::string);
+IMPL_SIMPLE_PROP(breeze_ui::js_text_widget, ui::text_widget, font_size, int);
+IMPL_SIMPLE_PROP(breeze_ui::js_text_widget, ui::text_widget, max_width, float);
+IMPL_COLOR_PROP(breeze_ui::js_text_widget, ui::text_widget, color);
 
 void breeze_ui::js_widget::append_child_after(std::shared_ptr<js_widget> child,
                                               int after_index) {
@@ -317,40 +269,44 @@ struct widget_js_base : public ui::flex_widget {
                 ctx.rt.post_loop_thread_task(
                     [=, callback = this->on_update]() mutable {
                         callback(ctx);
-                    }, true);
+                    },
+                    true);
             }
 
             if (ctx.hovered(this) && ctx.mouse_clicked && on_click) {
                 ctx.rt.post_loop_thread_task(
-                    [callback = this->on_click]() mutable { callback(0); }, true);
+                    [callback = this->on_click]() mutable { callback(0); },
+                    true);
             }
 
             if (ctx.hovered(this) && !previous_hovered && on_mouse_enter) {
                 ctx.rt.post_loop_thread_task(
                     [=, callback = this->on_mouse_enter]() mutable {
                         callback();
-                    }, true);
+                    },
+                    true);
             } else if (!ctx.hovered(this) && previous_hovered &&
                        on_mouse_leave) {
                 ctx.rt.post_loop_thread_task(
                     [=, callback = this->on_mouse_leave]() mutable {
                         callback();
-                    }, true);
+                    },
+                    true);
             }
 
             previous_hovered = ctx.hovered(this);
             if (ctx.mouse_down_on(this) && on_mouse_down) {
                 ctx.rt.post_loop_thread_task(
                     [=, callback = this->on_mouse_down]() mutable {
                         callback();
-                    }, true);
+                    },
+                    true);
             }
 
             if (ctx.mouse_up && on_mouse_up) {
                 ctx.rt.post_loop_thread_task(
-                    [=, callback = this->on_mouse_up]() mutable {
-                        callback();
-                    }, true);
+                    [=, callback = this->on_mouse_up]() mutable { callback(); },
+                    true);
             }
 
             if (ctx.mouse_x != prev_mouse_x || ctx.mouse_y != prev_mouse_y) {
@@ -506,7 +462,8 @@ IMPL_ANIMATED_PROP(breeze_ui::js_flex_layout_widget, widget_js_base,
 
 IMPL_SIMPLE_PROP(breeze_ui::js_flex_layout_widget, widget_js_base, auto_size,
                  bool)
-
+IMPL_SIMPLE_PROP(breeze_ui::js_flex_layout_widget, widget_js_base, flex_grow,
+                 float)
 IMPL_SIMPLE_PROP(breeze_ui::js_flex_layout_widget, widget_js_base, gap, float)
 std::string breeze_ui::js_flex_layout_widget::get_justify_content() const {
     auto widget = std::dynamic_pointer_cast<ui::flex_widget>($widget);

src/shell/script/binding_types_breeze_ui.cc

@@ -64,7 +64,9 @@ struct breeze_ui {
         void set_text(std::string text);
         int get_font_size() const;
         void set_font_size(int size);
-        std::tuple<float, float, float, float> get_color() const;
+        float get_max_width() const;
+        void set_max_width(float w);
+        std::optional<std::tuple<float, float, float, float>> get_color() const;
         void
         set_color(std::optional<std::tuple<float, float, float, float>> color);
     };
@@ -81,6 +83,7 @@ struct breeze_ui {
         DEFINE_PROP(float, padding_right)
         DEFINE_PROP(float, padding_top)
         DEFINE_PROP(float, padding_bottom)
+        DEFINE_PROP(float, flex_grow)
         std::tuple<float, float, float, float> get_padding() const;
         void set_padding(float left, float right, float top, float bottom);
 

src/shell/script/binding_types_breeze_ui.h

@@ -33,6 +33,7 @@ declare module 'react' {
         height?: number;
         autoSize?: boolean;
         gap?: number;
+        flexGrow?: number;
       },
       text: {
         text?: string[] | string;
@@ -44,6 +45,7 @@ declare module 'react' {
         y?: number;
         width?: number;
         height?: number;
+        maxWidth?: number;
       },
       img: {
         svg?: string;

src/shell/script/script.js

@@ -108,6 +108,7 @@ const componentMap = {
             },
             fontSize: getSetFactory('font_size'),
             color: getSetFactoryColor('color'),
+            maxWidth: getSetFactory('max_width'),
             ...commonProps
         }
     },
@@ -136,6 +137,7 @@ const componentMap = {
             justifyContent: getSetFactory('justify_content'),
             alignItems: getSetFactory('align_items'),
             gap: getSetFactory('gap'),
+            flexGrow: getSetFactory('flex_grow'),
             ...commonProps
         }
     },