fix label sizing in containers, radius for div, swap manual bg draw to Panel
This commit is contained in:
@@ -3,15 +3,11 @@
|
|||||||
[ext_resource type="Script" uid="uid://cg6kjvlx3an1j" path="res://Scripts/Tags/p.gd" id="1_pnbfg"]
|
[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"]
|
[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
|
anchors_preset = 10
|
||||||
anchor_right = 1.0
|
anchor_right = 1.0
|
||||||
|
offset_bottom = 19.0
|
||||||
grow_horizontal = 2
|
grow_horizontal = 2
|
||||||
script = ExtResource("1_pnbfg")
|
|
||||||
|
|
||||||
[node name="RichTextLabel" type="RichTextLabel" parent="."]
|
|
||||||
layout_mode = 2
|
|
||||||
size_flags_horizontal = 3
|
|
||||||
focus_mode = 2
|
focus_mode = 2
|
||||||
mouse_default_cursor_shape = 1
|
mouse_default_cursor_shape = 1
|
||||||
theme = ExtResource("2_1glvj")
|
theme = ExtResource("2_1glvj")
|
||||||
@@ -20,3 +16,4 @@ bbcode_enabled = true
|
|||||||
text = "Placeholder"
|
text = "Placeholder"
|
||||||
fit_content = true
|
fit_content = true
|
||||||
selection_enabled = true
|
selection_enabled = true
|
||||||
|
script = ExtResource("1_pnbfg")
|
||||||
|
|||||||
@@ -204,7 +204,7 @@ stretch_mode = 5
|
|||||||
custom_minimum_size = Vector2(0, 5)
|
custom_minimum_size = Vector2(0, 5)
|
||||||
layout_mode = 2
|
layout_mode = 2
|
||||||
|
|
||||||
[node name="SmoothScrollContainer" type="ScrollContainer" parent="VBoxContainer"]
|
[node name="ScrollContainer" type="ScrollContainer" parent="VBoxContainer"]
|
||||||
layout_mode = 2
|
layout_mode = 2
|
||||||
size_flags_vertical = 3
|
size_flags_vertical = 3
|
||||||
script = ExtResource("10_d1ilt")
|
script = ExtResource("10_d1ilt")
|
||||||
@@ -214,7 +214,7 @@ drag_with_mouse = false
|
|||||||
allow_overdragging = false
|
allow_overdragging = false
|
||||||
metadata/_custom_type_script = "uid://bgqglerkcylxx"
|
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
|
unique_name_in_owner = true
|
||||||
custom_minimum_size = Vector2(200, 200)
|
custom_minimum_size = Vector2(200, 200)
|
||||||
layout_mode = 2
|
layout_mode = 2
|
||||||
|
|||||||
@@ -4,18 +4,45 @@ extends FlexContainer
|
|||||||
|
|
||||||
signal flex_resized
|
signal flex_resized
|
||||||
|
|
||||||
var bgcolor: Color = Color(0,0,0,0)
|
|
||||||
var content_size: Vector2 = Vector2.ZERO
|
var content_size: Vector2 = Vector2.ZERO
|
||||||
|
var background_panel: Panel = null
|
||||||
|
|
||||||
func set_background_color(color: Color) -> void:
|
func update_background_panel():
|
||||||
bgcolor = color
|
var needs_background = has_meta("custom_css_background_color") or has_meta("custom_css_border_radius")
|
||||||
queue_redraw()
|
|
||||||
|
if needs_background:
|
||||||
func _notification(what: int) -> void:
|
if not background_panel:
|
||||||
super._notification(what)
|
background_panel = Panel.new()
|
||||||
|
background_panel.name = "BackgroundPanel"
|
||||||
if what == NOTIFICATION_DRAW and bgcolor.a > 0:
|
background_panel.mouse_filter = Control.MOUSE_FILTER_IGNORE
|
||||||
draw_rect(Rect2(Vector2.ZERO, content_size), bgcolor)
|
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
|
# This is the overridden layout logic for the auto-sizing container
|
||||||
func _resort() -> void:
|
func _resort() -> void:
|
||||||
@@ -40,6 +67,10 @@ func _resort() -> void:
|
|||||||
var c = get_child(i)
|
var c = get_child(i)
|
||||||
if not c is Control or c.is_set_as_top_level():
|
if not c is Control or c.is_set_as_top_level():
|
||||||
continue
|
continue
|
||||||
|
|
||||||
|
# Skip background panel from flex calculations
|
||||||
|
if c.name == "BackgroundPanel":
|
||||||
|
continue
|
||||||
|
|
||||||
var cid = c.get_instance_id()
|
var cid = c.get_instance_id()
|
||||||
var target_index = _find_index_from_flex_list(_flex_list, cid)
|
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))
|
_draw_debug_rect(Rect2(offset, rect_size), Color(1, 0, 0, 0.8))
|
||||||
|
|
||||||
|
|
||||||
if has_meta("custom_css_background_color"):
|
# Update background panel if needed
|
||||||
set_background_color(get_meta("custom_css_background_color"))
|
update_background_panel()
|
||||||
|
|
||||||
queue_redraw()
|
|
||||||
emit_signal("flex_resized")
|
emit_signal("flex_resized")
|
||||||
|
|
||||||
func calculate_available_dimension(is_width: bool) -> float:
|
func calculate_available_dimension(is_width: bool) -> float:
|
||||||
|
|||||||
@@ -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:
|
elif node is VBoxContainer or node is HBoxContainer or node is Container:
|
||||||
# Hcontainer nodes (like ul, ol)
|
# Hcontainer nodes (like ul, ol)
|
||||||
SizingUtils.apply_container_dimension_sizing(node, width, height)
|
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:
|
else:
|
||||||
# regular controls
|
# regular controls
|
||||||
SizingUtils.apply_regular_control_sizing(node, width, height)
|
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:
|
if label and label != node:
|
||||||
label.anchors_preset = Control.PRESET_FULL_RECT
|
label.anchors_preset = Control.PRESET_FULL_RECT
|
||||||
|
|
||||||
# Apply background color
|
# Apply background color and border radius
|
||||||
if styles.has("background-color"):
|
if styles.has("background-color") or styles.has("border-radius"):
|
||||||
var target_node_for_bg = node if node is FlexContainer else label
|
var target_node_for_bg = node if node is FlexContainer else label
|
||||||
if target_node_for_bg:
|
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"):
|
if target_node_for_bg.has_method("add_background_rect"):
|
||||||
target_node_for_bg.call_deferred("add_background_rect")
|
target_node_for_bg.call_deferred("add_background_rect")
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
class_name HTMLButton
|
||||||
extends Control
|
extends Control
|
||||||
|
|
||||||
var current_element: HTMLParser.HTMLElement
|
var current_element: HTMLParser.HTMLElement
|
||||||
|
|||||||
@@ -1,7 +1,12 @@
|
|||||||
extends Control
|
class_name HTMLP
|
||||||
|
extends RichTextLabel
|
||||||
@onready var rich_text_label: RichTextLabel = $RichTextLabel
|
|
||||||
|
|
||||||
func init(element: HTMLParser.HTMLElement, parser: HTMLParser = null) -> void:
|
func init(element: HTMLParser.HTMLElement, parser: HTMLParser = null) -> void:
|
||||||
var label: RichTextLabel = $RichTextLabel
|
text = "[font_size=24]%s[/font_size]" % element.get_bbcode_formatted_text(parser)
|
||||||
label.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)
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
class_name HTMLSpan
|
||||||
extends RichTextLabel
|
extends RichTextLabel
|
||||||
|
|
||||||
@onready var rich_text_label: RichTextLabel = self
|
@onready var rich_text_label: RichTextLabel = self
|
||||||
|
|||||||
@@ -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
|
# Button sizing rules: Skip sizing only when button has no explicit size
|
||||||
# AND parent doesn't have explicit width (auto-inherited sizing)
|
# 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 button has explicit size, don't skip sizing
|
||||||
if element_styles.has("width") or element_styles.has("height"):
|
if element_styles.has("width") or element_styles.has("height"):
|
||||||
return false
|
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
|
# Span sizing rules: Always skip sizing for spans since they're inline elements
|
||||||
# (flex containers use AutoSizingFlexContainer, not span.gd)
|
# (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 true
|
||||||
|
|
||||||
return false
|
return false
|
||||||
|
|
||||||
static func apply_container_dimension_sizing(node: Control, width, height) -> void:
|
static func apply_container_dimension_sizing(node: Control, width, height) -> void:
|
||||||
|
|||||||
Reference in New Issue
Block a user