From efe03a3bc71d0c232ce3aca8e7262342e731e75a Mon Sep 17 00:00:00 2001 From: Face <69168154+face-hh@users.noreply.github.com> Date: Thu, 31 Jul 2025 15:07:10 +0300 Subject: [PATCH] fix label sizing in containers, radius for div, swap manual bg draw to Panel --- Scenes/Tags/p.tscn | 9 ++--- Scenes/main.tscn | 4 +-- Scripts/AutoSizingFlexContainer.gd | 58 ++++++++++++++++++++++-------- Scripts/StyleManager.gd | 20 +++++++++-- Scripts/Tags/button.gd | 1 + Scripts/Tags/p.gd | 15 +++++--- Scripts/Tags/span.gd | 1 + Scripts/Utils/SizingUtils.gd | 6 ++-- 8 files changed, 81 insertions(+), 33 deletions(-) diff --git a/Scenes/Tags/p.tscn b/Scenes/Tags/p.tscn index 8e1f3b0..71482e2 100644 --- a/Scenes/Tags/p.tscn +++ b/Scenes/Tags/p.tscn @@ -3,15 +3,11 @@ [ext_resource type="Script" uid="uid://cg6kjvlx3an1j" path="res://Scripts/Tags/p.gd" id="1_pnbfg"] [ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_1glvj"] -[node name="P" type="VBoxContainer"] +[node name="RichTextLabel" type="RichTextLabel"] anchors_preset = 10 anchor_right = 1.0 +offset_bottom = 19.0 grow_horizontal = 2 -script = ExtResource("1_pnbfg") - -[node name="RichTextLabel" type="RichTextLabel" parent="."] -layout_mode = 2 -size_flags_horizontal = 3 focus_mode = 2 mouse_default_cursor_shape = 1 theme = ExtResource("2_1glvj") @@ -20,3 +16,4 @@ bbcode_enabled = true text = "Placeholder" fit_content = true selection_enabled = true +script = ExtResource("1_pnbfg") diff --git a/Scenes/main.tscn b/Scenes/main.tscn index 0ba8160..4be2b05 100644 --- a/Scenes/main.tscn +++ b/Scenes/main.tscn @@ -204,7 +204,7 @@ stretch_mode = 5 custom_minimum_size = Vector2(0, 5) layout_mode = 2 -[node name="SmoothScrollContainer" type="ScrollContainer" parent="VBoxContainer"] +[node name="ScrollContainer" type="ScrollContainer" parent="VBoxContainer"] layout_mode = 2 size_flags_vertical = 3 script = ExtResource("10_d1ilt") @@ -214,7 +214,7 @@ drag_with_mouse = false allow_overdragging = false metadata/_custom_type_script = "uid://bgqglerkcylxx" -[node name="WebsiteContainer" type="VBoxContainer" parent="VBoxContainer/SmoothScrollContainer"] +[node name="WebsiteContainer" type="VBoxContainer" parent="VBoxContainer/ScrollContainer"] unique_name_in_owner = true custom_minimum_size = Vector2(200, 200) layout_mode = 2 diff --git a/Scripts/AutoSizingFlexContainer.gd b/Scripts/AutoSizingFlexContainer.gd index 029f8af..b576edb 100644 --- a/Scripts/AutoSizingFlexContainer.gd +++ b/Scripts/AutoSizingFlexContainer.gd @@ -4,18 +4,45 @@ extends FlexContainer signal flex_resized -var bgcolor: Color = Color(0,0,0,0) var content_size: Vector2 = Vector2.ZERO +var background_panel: Panel = null -func set_background_color(color: Color) -> void: - bgcolor = color - queue_redraw() - -func _notification(what: int) -> void: - super._notification(what) - - if what == NOTIFICATION_DRAW and bgcolor.a > 0: - draw_rect(Rect2(Vector2.ZERO, content_size), bgcolor) +func update_background_panel(): + var needs_background = has_meta("custom_css_background_color") or has_meta("custom_css_border_radius") + + if needs_background: + if not background_panel: + background_panel = Panel.new() + background_panel.name = "BackgroundPanel" + background_panel.mouse_filter = Control.MOUSE_FILTER_IGNORE + add_child(background_panel) + move_child(background_panel, 0) # Ensure it's behind content + + # Set panel size to match container + background_panel.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT) + + # Create StyleBoxFlat for background and border radius + var style_box = StyleBoxFlat.new() + + if has_meta("custom_css_background_color"): + style_box.bg_color = get_meta("custom_css_background_color") + else: + style_box.bg_color = Color.TRANSPARENT + + if has_meta("custom_css_border_radius"): + var radius_str = get_meta("custom_css_border_radius") + var radius = StyleManager.parse_radius(radius_str) + style_box.corner_radius_top_left = radius + style_box.corner_radius_top_right = radius + style_box.corner_radius_bottom_left = radius + style_box.corner_radius_bottom_right = radius + + background_panel.add_theme_stylebox_override("panel", style_box) + + elif background_panel: + # Remove background panel if no longer needed + background_panel.queue_free() + background_panel = null # This is the overridden layout logic for the auto-sizing container func _resort() -> void: @@ -40,6 +67,10 @@ func _resort() -> void: var c = get_child(i) if not c is Control or c.is_set_as_top_level(): continue + + # Skip background panel from flex calculations + if c.name == "BackgroundPanel": + continue var cid = c.get_instance_id() var target_index = _find_index_from_flex_list(_flex_list, cid) @@ -151,10 +182,9 @@ func _resort() -> void: _draw_debug_rect(Rect2(offset, rect_size), Color(1, 0, 0, 0.8)) - if has_meta("custom_css_background_color"): - set_background_color(get_meta("custom_css_background_color")) - - queue_redraw() + # Update background panel if needed + update_background_panel() + emit_signal("flex_resized") func calculate_available_dimension(is_width: bool) -> float: diff --git a/Scripts/StyleManager.gd b/Scripts/StyleManager.gd index 933566c..6938fe0 100644 --- a/Scripts/StyleManager.gd +++ b/Scripts/StyleManager.gd @@ -46,6 +46,17 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement, elif node is VBoxContainer or node is HBoxContainer or node is Container: # Hcontainer nodes (like ul, ol) SizingUtils.apply_container_dimension_sizing(node, width, height) + elif node is HTMLP: + # Only apply sizing if element has explicit size, otherwise preserve natural sizing + var element_styles = parser.get_element_styles_internal(element, "") + if element_styles.has("width") or element_styles.has("height"): + var orig_h_flag = node.size_flags_horizontal + var orig_v_flag = node.size_flags_vertical + SizingUtils.apply_regular_control_sizing(node, width, height) + if not element_styles.has("width"): + node.size_flags_horizontal = orig_h_flag + if not element_styles.has("height"): + node.size_flags_vertical = orig_v_flag else: # regular controls SizingUtils.apply_regular_control_sizing(node, width, height) @@ -53,11 +64,14 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement, if label and label != node: label.anchors_preset = Control.PRESET_FULL_RECT - # Apply background color - if styles.has("background-color"): + # Apply background color and border radius + if styles.has("background-color") or styles.has("border-radius"): var target_node_for_bg = node if node is FlexContainer else label if target_node_for_bg: - target_node_for_bg.set_meta("custom_css_background_color", styles["background-color"]) + if styles.has("background-color"): + target_node_for_bg.set_meta("custom_css_background_color", styles["background-color"]) + if styles.has("border-radius"): + target_node_for_bg.set_meta("custom_css_border_radius", styles["border-radius"]) if target_node_for_bg.has_method("add_background_rect"): target_node_for_bg.call_deferred("add_background_rect") diff --git a/Scripts/Tags/button.gd b/Scripts/Tags/button.gd index 62b0116..1f7009e 100644 --- a/Scripts/Tags/button.gd +++ b/Scripts/Tags/button.gd @@ -1,3 +1,4 @@ +class_name HTMLButton extends Control var current_element: HTMLParser.HTMLElement diff --git a/Scripts/Tags/p.gd b/Scripts/Tags/p.gd index 13faf0a..0ea1fac 100644 --- a/Scripts/Tags/p.gd +++ b/Scripts/Tags/p.gd @@ -1,7 +1,12 @@ -extends Control - -@onready var rich_text_label: RichTextLabel = $RichTextLabel +class_name HTMLP +extends RichTextLabel func init(element: HTMLParser.HTMLElement, parser: HTMLParser = null) -> void: - var label: RichTextLabel = $RichTextLabel - label.text = "[font_size=24]%s[/font_size]" % element.get_bbcode_formatted_text(parser) + text = "[font_size=24]%s[/font_size]" % element.get_bbcode_formatted_text(parser) + + # NOTE: estimate width/height because FlexContainer removes our anchor preset (sets 0 width) + var plain_text = element.get_collapsed_text() + var estimated_height = 30 + var estimated_width = min(400, max(100, plain_text.length() * 12)) + + custom_minimum_size = Vector2(estimated_width, estimated_height) diff --git a/Scripts/Tags/span.gd b/Scripts/Tags/span.gd index c1f0dbc..52b8810 100644 --- a/Scripts/Tags/span.gd +++ b/Scripts/Tags/span.gd @@ -1,3 +1,4 @@ +class_name HTMLSpan extends RichTextLabel @onready var rich_text_label: RichTextLabel = self diff --git a/Scripts/Utils/SizingUtils.gd b/Scripts/Utils/SizingUtils.gd index d1123b8..31ddd89 100644 --- a/Scripts/Utils/SizingUtils.gd +++ b/Scripts/Utils/SizingUtils.gd @@ -26,7 +26,7 @@ static func should_skip_sizing(node: Control, element, parser) -> bool: # Button sizing rules: Skip sizing only when button has no explicit size # AND parent doesn't have explicit width (auto-inherited sizing) - if node.get_script() and node.get_script().get_path().ends_with("button.gd"): + if node is HTMLButton: # If button has explicit size, don't skip sizing if element_styles.has("width") or element_styles.has("height"): return false @@ -43,9 +43,9 @@ static func should_skip_sizing(node: Control, element, parser) -> bool: # Span sizing rules: Always skip sizing for spans since they're inline elements # (flex containers use AutoSizingFlexContainer, not span.gd) - elif node.get_script() and node.get_script().get_path().ends_with("span.gd"): + elif node is HTMLSpan: return true - + return false static func apply_container_dimension_sizing(node: Control, width, height) -> void: