fix(ui): flex-basis was not recalculated during layout

lc-soft · lc-soft · commit a17f98b8e558 · 2024-10-17T22:55:16.000+08:00
diff --git a/lib/ui-widgets/src/text.c b/lib/ui-widgets/src/text.c
@@ -177,8 +177,8 @@ static void ui_text_on_destroy(ui_widget_t *w)
         }
 }
 
-static void ui_text_on_auto_size(ui_widget_t *w, float *width, float *height,
-                                 ui_layout_rule_t rule)
+static void ui_text_on_autosize(ui_widget_t *w, float *width, float *height,
+                                ui_layout_rule_t rule)
 {
         float max_width, max_height;
         ui_text_t *txt = ui_widget_get_data(w, ui_text.prototype);
@@ -344,7 +344,7 @@ void ui_register_text(void)
         ui_text.prototype->init = ui_text_on_init;
         ui_text.prototype->paint = ui_text_on_paint;
         ui_text.prototype->destroy = ui_text_on_destroy;
-        ui_text.prototype->autosize = ui_text_on_auto_size;
+        ui_text.prototype->autosize = ui_text_on_autosize;
         ui_text.prototype->resize = ui_text_on_resize;
         ui_text.prototype->update = ui_text_on_update;
         ui_text.prototype->settext = ui_text_on_parse_text;
diff --git a/lib/ui/include/ui/base.h b/lib/ui/include/ui/base.h
@@ -110,9 +110,8 @@ LIBUI_PUBLIC dict_t *ui_widget_collect_references(ui_widget_t *w);
 /**
  * 执行布局前的准备操作
  * 重置布局相关属性，以让它们在布局时被重新计算
- * @param rule 父级组件所使用的布局规则
  */
-LIBUI_PUBLIC void ui_widget_reset_layout(ui_widget_t *w, ui_layout_rule_t rule);
+LIBUI_PUBLIC void ui_widget_reset_layout(ui_widget_t *w);
 
 LIBUI_PUBLIC void ui_widget_auto_reflow(ui_widget_t *w);
 
diff --git a/lib/ui/src/ui_block_layout.c b/lib/ui/src/ui_block_layout.c
@@ -104,7 +104,7 @@ static void ui_block_layout_load(ui_block_layout_context_t *ctx)
 #endif
         for (list_each(node, &ctx->widget->children)) {
                 child = node->data;
-                ui_widget_reset_layout(child, ctx->rule);
+                ui_widget_reset_layout(child);
                 if (!ui_widget_in_layout_flow(child)) {
                         list_append(&ctx->row->items, child);
                         continue;
@@ -234,7 +234,7 @@ static void ui_block_layout_update(ui_block_layout_context_t *ctx)
                                              size_str);
                         }
 #endif
-                        ui_widget_reset_layout(child, ctx->rule);
+                        ui_widget_reset_layout(child);
                         ui_widget_compute_style(child);
                         ui_widget_auto_reflow(child);
                         ui_block_layout_update_item_margin(ctx, child);
@@ -315,7 +315,7 @@ void ui_block_layout_reflow(ui_widget_t *w, ui_layout_rule_t rule)
         ctx.row = NULL;
         ctx.widget = w;
         ctx.x = w->computed_style.padding_left;
-        ctx.y = w->computed_style.padding_right;
+        ctx.y = w->computed_style.padding_top;
         ctx.content_width = 0;
         ctx.content_height = 0;
         ctx.prev_display = 0;
diff --git a/lib/ui/src/ui_debug.c b/lib/ui/src/ui_debug.c
@@ -42,7 +42,7 @@ void ui_widget_to_string(ui_widget_t *w, char *str)
 		node->status = NULL;
 		css_selector_node_update(node);
 	}
-	strcpy(str, node->fullname);
+	strcpy(str, node->fullname ? node->fullname : "<widget>");
 	css_selector_node_destroy(node);
 }
 
@@ -63,7 +63,7 @@ void ui_widget_size_to_string(ui_widget_t *w, char str[40])
 		break;
 	}
 	switch (w->computed_style.type_bits.height) {
-	case CSS_WIDTH_SET:
+	case CSS_HEIGHT_SET:
 		snprintf(height_str, 16, "%g%s", w->computed_style.height,
 			 get_css_unit_str(w->computed_style.unit_bits.height));
 		break;
diff --git a/lib/ui/src/ui_diff.c b/lib/ui/src/ui_diff.c
@@ -55,28 +55,38 @@ void ui_style_diff_begin(ui_style_diff_t *diff, ui_widget_t *w)
 void ui_style_diff_end(ui_style_diff_t *diff, ui_widget_t *w)
 {
         ui_mutation_record_t *record;
-        bool layout_changed = IS_PROP_TYPE_CHANGED(display) ||
-                              IS_PROP_TYPE_CHANGED(position) ||
-                              diff->padding_box.width != w->padding_box.width ||
-                              diff->padding_box.height != w->padding_box.height;
+        bool flow_changed =
+            IS_PROP_TYPE_CHANGED(display) || IS_PROP_TYPE_CHANGED(position);
+        bool inner_changed = diff->padding_box.width != w->padding_box.width ||
+                             diff->padding_box.height != w->padding_box.height;
 
-        if (layout_changed || (ui_widget_has_flex_display(w) &&
-                               (IS_PROP_TYPE_CHANGED(flex_wrap) ||
-                                IS_PROP_TYPE_CHANGED(flex_direction) ||
-                                IS_PROP_TYPE_CHANGED(justify_content) ||
-                                IS_PROP_TYPE_CHANGED(align_content) ||
-                                IS_PROP_TYPE_CHANGED(align_items)))) {
+        if (flow_changed || inner_changed ||
+            (ui_widget_has_flex_display(w) &&
+             (IS_PROP_TYPE_CHANGED(flex_wrap) ||
+              IS_PROP_TYPE_CHANGED(flex_direction) ||
+              IS_PROP_TYPE_CHANGED(justify_content) ||
+              IS_PROP_TYPE_CHANGED(align_content) ||
+              IS_PROP_TYPE_CHANGED(align_items)))) {
                 ui_widget_request_reflow(w);
         }
-        if (w->parent && ui_widget_in_layout_flow(w)) {
-                if (layout_changed || IS_LENGTH_PROP_CHANGED(margin_left) ||
+        if (ui_widget_has_class(w, "file-info-panel")) {
+                logger_debug("[ui-diff] [.file-info-panel] flow_changed=%d\n",
+                             flow_changed);
+        }
+        if (w->parent && (flow_changed || ui_widget_in_layout_flow(w))) {
+                if (flow_changed || inner_changed ||
+                    IS_LENGTH_PROP_CHANGED(margin_left) ||
                     IS_LENGTH_PROP_CHANGED(margin_right) ||
                     IS_LENGTH_PROP_CHANGED(margin_top) ||
                     IS_LENGTH_PROP_CHANGED(margin_bottom) ||
                     (ui_widget_has_flex_display(w->parent) &&
                      (IS_PROP_TYPE_CHANGED(flex_grow) ||
                       IS_PROP_TYPE_CHANGED(flex_shrink) ||
                       IS_PROP_TYPE_CHANGED(flex_basis)))) {
+                        if (ui_widget_has_class(w, "file-info-panel")) {
+                                logger_debug("[ui-diff] [.file-info-panel] "
+                                             "parent reflow\n");
+                        }
                         ui_widget_request_reflow(w->parent);
                 }
         }
diff --git a/lib/ui/src/ui_flexbox_layout.c b/lib/ui/src/ui_flexbox_layout.c
@@ -97,26 +97,48 @@ static void ui_flexbox_layout_next_line(ui_flexbox_layout_context_t *ctx)
         list_append(&ctx->lines, ctx->line);
 }
 
-LIBUI_INLINE float ui_compute_row_item_main_size(css_computed_style_t *s)
+float ui_compute_row_item_main_size(ui_widget_t *item)
 {
+        css_computed_style_t *s = &item->computed_style;
+        float spacing = css_padding_x(s) + css_border_x(s);
+
+        if (s->type_bits.flex_basis == CSS_FLEX_BASIS_CONTENT) {
+                CSS_SET_FIXED_LENGTH(
+                    s, flex_basis,
+                    css_convert_content_box_width(s, item->max_content_width));
+        }
         if (css_computed_box_sizing(s) == CSS_BOX_SIZING_BORDER_BOX) {
-                if (s->flex_basis < css_padding_x(s) + css_border_x(s)) {
-                        return 0;
+                if (s->flex_basis < spacing) {
+                        s->flex_basis = spacing;
                 }
-                return s->flex_basis - css_padding_x(s) - css_border_x(s);
+                return s->flex_basis + css_margin_x(s);
         }
-        return s->flex_basis;
+        if (s->flex_basis < 0) {
+                s->flex_basis = 0;
+        }
+        return s->flex_basis + css_margin_x(s) + spacing;
 }
 
-LIBUI_INLINE float ui_compute_column_item_main_size(css_computed_style_t *s)
+float ui_compute_column_item_main_size(ui_widget_t *item)
 {
+        css_computed_style_t *s = &item->computed_style;
+        float spacing = css_padding_y(s) + css_border_y(s);
+
+        if (s->type_bits.flex_basis == CSS_FLEX_BASIS_CONTENT) {
+                CSS_SET_FIXED_LENGTH(s, flex_basis,
+                                     css_convert_content_box_height(
+                                         s, item->max_content_height));
+        }
         if (css_computed_box_sizing(s) == CSS_BOX_SIZING_BORDER_BOX) {
-                if (s->flex_basis < css_padding_y(s) + css_border_y(s)) {
-                        return 0;
+                if (s->flex_basis < spacing) {
+                        s->flex_basis = spacing;
                 }
-                return s->flex_basis - css_padding_y(s) - css_border_y(s);
+                return s->flex_basis + css_margin_y(s);
+        }
+        if (s->flex_basis < 0) {
+                s->flex_basis = 0;
         }
-        return s->flex_basis;
+        return s->flex_basis + css_margin_y(s) + spacing;
 }
 
 static void ui_flexbox_layout_load_rows(ui_flexbox_layout_context_t *ctx)
@@ -142,25 +164,14 @@ static void ui_flexbox_layout_load_rows(ui_flexbox_layout_context_t *ctx)
                 if (cs->type_bits.display == CSS_DISPLAY_NONE) {
                         continue;
                 }
-                ui_widget_reset_layout(child, ctx->rule);
                 if (!ui_widget_in_layout_flow(child)) {
                         list_append(&ctx->line->items, child);
                         continue;
                 }
+                ui_widget_reset_layout(child);
                 ui_widget_compute_style(child);
                 ui_widget_auto_reflow(child);
-                switch (cs->type_bits.flex_basis) {
-                case CSS_FLEX_BASIS_CONTENT:
-                        CSS_SET_FIXED_LENGTH(cs, flex_basis,
-                                             css_convert_content_box_width(
-                                                 cs, child->max_content_width));
-                        break;
-                default:
-                        break;
-                }
-                main_size = ui_compute_row_item_main_size(cs) +
-                            css_margin_x(cs) + css_padding_x(cs) +
-                            css_border_x(cs);
+                main_size = ui_compute_row_item_main_size(child);
 #ifdef UI_DEBUG_ENABLED
                 {
                         UI_WIDGET_STR(child, str);
@@ -226,22 +237,14 @@ static void ui_flexbox_layout_load_columns(ui_flexbox_layout_context_t *ctx)
                 if (cs->type_bits.display == CSS_DISPLAY_NONE) {
                         continue;
                 }
-                ui_widget_reset_layout(child, ctx->rule);
                 if (!ui_widget_in_layout_flow(child)) {
                         list_append(&ctx->line->items, child);
                         continue;
                 }
+                ui_widget_reset_layout(child);
                 ui_widget_compute_style(child);
                 ui_widget_auto_reflow(child);
-                if (cs->type_bits.flex_basis == CSS_FLEX_BASIS_CONTENT) {
-                        CSS_SET_FIXED_LENGTH(
-                            cs, flex_basis,
-                            css_convert_content_box_height(
-                                cs, child->max_content_height));
-                }
-                main_size = ui_compute_column_item_main_size(cs) +
-                            css_margin_y(cs) + css_padding_y(cs) +
-                            css_border_y(cs);
+                main_size = ui_compute_column_item_main_size(child);
 #ifdef UI_DEBUG_ENABLED
                 {
                         UI_WIDGET_STR(child, str);
@@ -368,22 +371,22 @@ static void ui_flexbox_layout_update_row(ui_flexbox_layout_context_t *ctx)
 
         for (list_each(node, &ctx->line->items)) {
                 child = node->data;
+                if (!ui_widget_in_layout_flow(child)) {
+                        continue;
+                }
                 s = &child->computed_style;
-                ui_widget_reset_layout(child, ctx->rule);
+                ui_widget_reset_layout(child);
                 ui_widget_compute_style(child);
-                main_size = ui_compute_row_item_main_size(s);
-                if (css_computed_box_sizing(s) == CSS_BOX_SIZING_BORDER_BOX) {
-                        main_size += css_border_x(s) + css_padding_x(s);
-                }
+                main_size = ui_compute_row_item_main_size(child);
                 // 根据项目的 flex-grow 和 flex-shrink，调整它的宽度
                 if (space >= 0) {
                         if (s->type_bits.flex_grow > 0) {
                                 CSS_SET_FIXED_LENGTH(
-                                    s, width, main_size + k * s->flex_grow);
+                                    s, width, s->flex_basis + k * s->flex_grow);
                         }
                 } else if (s->type_bits.flex_shrink > 0) {
-                        CSS_SET_FIXED_LENGTH(s, width,
-                                             main_size + k * s->flex_shrink);
+                        CSS_SET_FIXED_LENGTH(
+                            s, width, s->flex_basis + k * s->flex_shrink);
                 }
                 // 计算拉伸的高度
                 if (align_items == CSS_ALIGN_ITEMS_STRETCH &&
@@ -394,7 +397,7 @@ static void ui_flexbox_layout_update_row(ui_flexbox_layout_context_t *ctx)
                                                         css_margin_y(s)));
                 }
                 ui_widget_auto_reflow(child);
-                main_axis += child->outer_box.width;
+                main_axis += main_size;
         }
         ctx->line->main_size = main_axis;
         space = ctx->widget->content_box.width - main_axis;
@@ -431,8 +434,11 @@ static void ui_flexbox_layout_update_row(ui_flexbox_layout_context_t *ctx)
 #ifdef UI_DEBUG_ENABLED
         {
                 UI_WIDGET_STR(ctx->widget, str);
-                UI_DEBUG_MSG("%s: main_axis_start = %g, free_space = %g, justify_content = %d",
-                             str, main_axis, space, ctx->widget->computed_style.type_bits.justify_content);
+                UI_DEBUG_MSG(
+                    "%s: main_axis_start = %g, free_space = %g, "
+                    "justify_content = %d",
+                    str, main_axis, space,
+                    ctx->widget->computed_style.type_bits.justify_content);
         }
 #endif
         for (list_each(node, &ctx->line->items)) {
@@ -441,6 +447,7 @@ static void ui_flexbox_layout_update_row(ui_flexbox_layout_context_t *ctx)
                 child->layout_x = main_axis;
                 child->layout_y = ctx->line->cross_axis;
                 if (!ui_widget_in_layout_flow(child)) {
+                        ui_widget_reset_layout(child);
                         ui_widget_compute_style(node->data);
                         ui_widget_auto_reflow(node->data);
                         ui_widget_update_box_position(node->data);
@@ -497,22 +504,23 @@ static void ui_flexbox_layout_update_column(ui_flexbox_layout_context_t *ctx)
 
         for (list_each(node, &ctx->line->items)) {
                 child = node->data;
+                if (!ui_widget_in_layout_flow(child)) {
+                        continue;
+                }
                 s = &child->computed_style;
-                ui_widget_reset_layout(child, ctx->rule);
+                ui_widget_reset_layout(child);
                 ui_widget_compute_style(child);
-                main_size = ui_compute_column_item_main_size(s);
-                if (css_computed_box_sizing(s) == CSS_BOX_SIZING_BORDER_BOX) {
-                        main_size += css_border_y(s) + css_padding_y(s);
-                }
+                main_size = ui_compute_column_item_main_size(child);
                 // 根据项目的 flex-grow 和 flex-shrink，调整它的高度
                 if (space >= 0) {
                         if (s->type_bits.flex_grow > 0) {
                                 CSS_SET_FIXED_LENGTH(
-                                    s, height, main_size + k * s->flex_grow);
+                                    s, height,
+                                    s->flex_basis + k * s->flex_grow);
                         }
                 } else if (s->type_bits.flex_shrink > 0) {
-                        CSS_SET_FIXED_LENGTH(s, height,
-                                             main_size + k * s->flex_shrink);
+                        CSS_SET_FIXED_LENGTH(
+                            s, height, s->flex_basis + k * s->flex_shrink);
                 }
                 // 计算拉伸的宽度
                 if (align_items == CSS_ALIGN_ITEMS_STRETCH &&
@@ -523,7 +531,7 @@ static void ui_flexbox_layout_update_column(ui_flexbox_layout_context_t *ctx)
                                                         css_margin_x(s)));
                 }
                 ui_widget_auto_reflow(child);
-                main_axis += child->outer_box.height;
+                main_axis += main_size;
         }
         ctx->line->main_size = main_axis;
         space = ctx->widget->content_box.height - main_axis;
@@ -563,6 +571,7 @@ static void ui_flexbox_layout_update_column(ui_flexbox_layout_context_t *ctx)
                 child->layout_y = main_axis;
                 child->layout_x = ctx->line->cross_axis;
                 if (!ui_widget_in_layout_flow(child)) {
+                        ui_widget_reset_layout(child);
                         ui_widget_compute_style(node->data);
                         ui_widget_auto_reflow(node->data);
                         ui_widget_update_box_position(node->data);
diff --git a/lib/ui/src/ui_updater.c b/lib/ui/src/ui_updater.c
@@ -311,8 +311,7 @@ static void ui_widget_update_size(ui_widget_t *w)
         css_computed_style_t *src = &w->specified_style;
         css_computed_style_t *dest = &w->computed_style;
 
-        CSS_COPY_LENGTH(dest, src, width);
-        CSS_COPY_LENGTH(dest, src, height);
+        ui_widget_reset_layout(w);
         ui_widget_compute_style(w);
         ui_widget_update_box_size(w);
         ui_widget_reflow(w);
diff --git a/lib/ui/src/ui_widget_layout.c b/lib/ui/src/ui_widget_layout.c

Original file line number	Diff line number	Diff line change
`@@ -177,8 +177,8 @@ static void ui_text_on_destroy(ui_widget_t *w)`
`177`	`177`	`}`
`178`	`178`	`}`
`179`	`179`
`180`		`-static void ui_text_on_auto_size(ui_widget_t w, float width, float *height,`
`181`		`- ui_layout_rule_t rule)`
	`180`	`+static void ui_text_on_autosize(ui_widget_t w, float width, float *height,`
	`181`	`+ ui_layout_rule_t rule)`
`182`	`182`	`{`
`183`	`183`	`float max_width, max_height;`
`184`	`184`	`ui_text_t *txt = ui_widget_get_data(w, ui_text.prototype);`
`@@ -344,7 +344,7 @@ void ui_register_text(void)`
`344`	`344`	`ui_text.prototype->init = ui_text_on_init;`
`345`	`345`	`ui_text.prototype->paint = ui_text_on_paint;`
`346`	`346`	`ui_text.prototype->destroy = ui_text_on_destroy;`
`347`		`- ui_text.prototype->autosize = ui_text_on_auto_size;`
	`347`	`+ ui_text.prototype->autosize = ui_text_on_autosize;`
`348`	`348`	`ui_text.prototype->resize = ui_text_on_resize;`
`349`	`349`	`ui_text.prototype->update = ui_text_on_update;`
`350`	`350`	`ui_text.prototype->settext = ui_text_on_parse_text;`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ void ui_widget_to_string(ui_widget_t w, char str)`
`42`	`42`	`node->status = NULL;`
`43`	`43`	`css_selector_node_update(node);`
`44`	`44`	`}`
`45`		`- strcpy(str, node->fullname);`
	`45`	`+ strcpy(str, node->fullname ? node->fullname : "<widget>");`
`46`	`46`	`css_selector_node_destroy(node);`
`47`	`47`	`}`
`48`	`48`
`@@ -63,7 +63,7 @@ void ui_widget_size_to_string(ui_widget_t *w, char str[40])`
`63`	`63`	`break;`
`64`	`64`	`}`
`65`	`65`	`switch (w->computed_style.type_bits.height) {`
`66`		`- case CSS_WIDTH_SET:`
	`66`	`+ case CSS_HEIGHT_SET:`
`67`	`67`	`snprintf(height_str, 16, "%g%s", w->computed_style.height,`
`68`	`68`	`get_css_unit_str(w->computed_style.unit_bits.height));`
`69`	`69`	`break;`