non-flex div background (padding, corner radius)

This commit is contained in:
Face
2025-07-31 16:13:21 +03:00
parent efe03a3bc7
commit b59a98ed3a
17 changed files with 153 additions and 72 deletions

View File

@@ -7,3 +7,5 @@ bg_color = Color(0.152476, 0.152476, 0.152476, 1)
draw_center = false
corner_radius_top_left = 15
corner_radius_top_right = 15
corner_radius_bottom_right = 15
corner_radius_bottom_left = 15

View File

@@ -6,3 +6,5 @@ content_margin_right = 8.0
bg_color = Color(0, 0, 0, 1)
corner_radius_top_left = 15
corner_radius_top_right = 15
corner_radius_bottom_right = 15
corner_radius_bottom_left = 15

View File

@@ -6,3 +6,5 @@ content_margin_right = 8.0
bg_color = Color(0.138034, 0.138034, 0.138034, 1)
corner_radius_top_left = 15
corner_radius_top_right = 15
corner_radius_bottom_right = 15
corner_radius_bottom_left = 15

View File

@@ -6,3 +6,5 @@ content_margin_right = 8.0
bg_color = Color(0.109804, 0.109804, 0.109804, 1)
corner_radius_top_left = 15
corner_radius_top_right = 15
corner_radius_bottom_right = 15
corner_radius_bottom_left = 15

View File

@@ -2,8 +2,6 @@
[ext_resource type="Script" uid="uid://ckks1ccehq6al" path="res://Scripts/Tags/div.gd" id="1_div"]
[node name="Div" type="VBoxContainer"]
anchors_preset = 10
anchor_right = 1.0
grow_horizontal = 2
[node name="div" type="VBoxContainer"]
offset_right = 1920.0
script = ExtResource("1_div")

View File

@@ -66,7 +66,7 @@ SpinBox/styles/down_background_pressed = SubResource("StyleBoxEmpty_xxc4c")
SpinBox/styles/up_background_hovered = SubResource("StyleBoxEmpty_unki5")
SpinBox/styles/up_background_pressed = SubResource("StyleBoxEmpty_3wmat")
[node name="Input" type="Control"]
[node name="input" type="Control"]
layout_mode = 3
anchors_preset = 15
anchor_right = 1.0

View File

@@ -1,22 +1,9 @@
[gd_scene load_steps=3 format=3 uid="uid://bli1234568aa"]
[gd_scene load_steps=2 format=3 uid="uid://bli1234568aa"]
[ext_resource type="Script" uid="uid://ps8duq0aw3tu" path="res://Scripts/Tags/li.gd" id="1_li"]
[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
[node name="LI" type="VBoxContainer"]
[node name="li" type="VBoxContainer"]
anchors_preset = 10
anchor_right = 1.0
grow_horizontal = 2
script = ExtResource("1_li")
[node name="RichTextLabel" type="RichTextLabel" parent="."]
layout_mode = 2
size_flags_horizontal = 3
focus_mode = 2
mouse_default_cursor_shape = 1
theme = ExtResource("2_theme")
theme_override_colors/default_color = Color(0, 0, 0, 1)
bbcode_enabled = true
text = "Placeholder"
fit_content = true
selection_enabled = true

View File

@@ -2,7 +2,7 @@
[ext_resource type="Script" uid="uid://bbkebg4aihve3" path="res://Scripts/Tags/ol.gd" id="1_ol"]
[node name="OL" type="VBoxContainer"]
[node name="ol" type="VBoxContainer"]
anchors_preset = 10
anchor_right = 1.0
grow_horizontal = 2

View File

@@ -3,7 +3,7 @@
[ext_resource type="Script" uid="uid://ps8duq0aw3tu" path="res://Scripts/Tags/li.gd" id="1_option"]
[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
[node name="Option" type="Control"]
[node name="option" type="Control"]
layout_mode = 3
anchors_preset = 10
anchor_right = 1.0

View File

@@ -3,7 +3,7 @@
[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="RichTextLabel" type="RichTextLabel"]
[node name="p" type="RichTextLabel"]
anchors_preset = 10
anchor_right = 1.0
offset_bottom = 19.0

View File

@@ -3,7 +3,7 @@
[ext_resource type="Script" uid="uid://bmu8q4rm1wopd" path="res://Scripts/Tags/select.gd" id="1_select"]
[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_xq313"]
[node name="Select" type="Control"]
[node name="select" type="Control"]
layout_mode = 3
anchors_preset = 10
anchor_right = 1.0

View File

@@ -4,7 +4,7 @@
[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
[ext_resource type="Script" uid="uid://c5xpoyqcg1p8k" path="res://Scripts/ResizableTextEdit.gd" id="3_kbdk1"]
[node name="Textarea" type="Control"]
[node name="textarea" type="Control"]
layout_mode = 3
anchors_preset = 10
anchor_right = 1.0

View File

@@ -5,44 +5,6 @@ extends FlexContainer
signal flex_resized
var content_size: Vector2 = Vector2.ZERO
var background_panel: Panel = null
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:
@@ -69,7 +31,7 @@ func _resort() -> void:
continue
# Skip background panel from flex calculations
if c.name == "BackgroundPanel":
if BackgroundUtils.is_background_panel(c):
continue
var cid = c.get_instance_id()
@@ -183,7 +145,7 @@ func _resort() -> void:
# Update background panel if needed
update_background_panel()
BackgroundUtils.update_background_panel(self)
emit_signal("flex_resized")

View File

@@ -1,6 +1,5 @@
# NOTE: some weird warning, wcyd
@tool
extends FlexContainer
class_name HTMLDiv
extends VBoxContainer
func init(_element: HTMLParser.HTMLElement):
pass

View File

@@ -0,0 +1,117 @@
class_name BackgroundUtils
extends RefCounted
static func create_stylebox_from_styles(styles: Dictionary = {}, container: Control = null) -> StyleBoxFlat:
var style_box = StyleBoxFlat.new()
# Background color
var bg_color = null
if styles.has("background-color"):
bg_color = styles["background-color"]
elif container and container.has_meta("custom_css_background_color"):
bg_color = container.get_meta("custom_css_background_color")
if bg_color:
style_box.bg_color = bg_color
else:
style_box.bg_color = Color.TRANSPARENT
# Border radius
var border_radius = null
if styles.has("border-radius"):
border_radius = styles["border-radius"]
elif container and container.has_meta("custom_css_border_radius"):
border_radius = container.get_meta("custom_css_border_radius")
if border_radius:
var radius = StyleManager.parse_radius(border_radius)
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
# Padding as content margins
var has_padding = false
if styles.size() > 0:
has_padding = styles.has("padding") or styles.has("padding-top") or styles.has("padding-right") or styles.has("padding-bottom") or styles.has("padding-left")
elif container:
has_padding = container.has_meta("padding") or container.has_meta("padding-top") or container.has_meta("padding-right") or container.has_meta("padding-bottom") or container.has_meta("padding-left")
if has_padding:
# General padding
var padding_val = null
if styles.has("padding"):
padding_val = StyleManager.parse_size(styles["padding"])
elif container and container.has_meta("padding"):
padding_val = StyleManager.parse_size(container.get_meta("padding"))
if padding_val:
style_box.content_margin_left = padding_val
style_box.content_margin_right = padding_val
style_box.content_margin_top = padding_val
style_box.content_margin_bottom = padding_val
# Individual padding values override general padding
var padding_keys = [["padding-left", "content_margin_left"], ["padding-right", "content_margin_right"], ["padding-top", "content_margin_top"], ["padding-bottom", "content_margin_bottom"]]
for pair in padding_keys:
var key = pair[0]
var property = pair[1]
var val = null
if styles.has(key):
val = StyleManager.parse_size(styles[key])
elif container and container.has_meta(key):
val = StyleManager.parse_size(container.get_meta(key))
if val:
style_box.set(property, val)
return style_box
# for AutoSizingFlexContainer
static func update_background_panel(container: Control) -> void:
var needs_background = container.has_meta("custom_css_background_color") or container.has_meta("custom_css_border_radius")
var needs_padding = container.has_meta("padding") or container.has_meta("padding-top") or container.has_meta("padding-right") or container.has_meta("padding-bottom") or container.has_meta("padding-left")
var background_panel = get_background_panel(container)
if needs_background or needs_padding:
if not background_panel:
background_panel = Panel.new()
background_panel.name = "BackgroundPanel"
background_panel.mouse_filter = Control.MOUSE_FILTER_IGNORE
background_panel.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
container.add_child(background_panel)
container.move_child(background_panel, 0) # first child
var style_box = create_stylebox_from_styles({}, container)
background_panel.add_theme_stylebox_override("panel", style_box)
elif background_panel:
background_panel.queue_free()
# Helper methods for AutoSizingFlexContainer
static func get_background_panel(container: Control) -> Panel:
for child in container.get_children():
if child.name == "BackgroundPanel" and child is Panel:
return child
return null
static func is_background_panel(node: Node) -> bool:
return node.name == "BackgroundPanel" and node is Panel
# for any other tag
static func create_panel_container_with_background(styles: Dictionary) -> PanelContainer:
var panel_container = PanelContainer.new()
panel_container.name = "Div"
var vbox = VBoxContainer.new()
vbox.name = "VBoxContainer"
panel_container.add_child(vbox)
var style_box = create_stylebox_from_styles(styles)
panel_container.add_theme_stylebox_override("panel", style_box)
return panel_container
static func needs_background_wrapper(styles: Dictionary) -> bool:
return styles.has("background-color") or styles.has("border-radius") or styles.has("padding") or styles.has("padding-top") or styles.has("padding-right") or styles.has("padding-bottom") or styles.has("padding-left")

View File

@@ -0,0 +1 @@
uid://c2itd75f1j1n0

View File

@@ -156,8 +156,12 @@ func create_element_node(element: HTMLParser.HTMLElement, parser: HTMLParser) ->
final_node = await create_element_node_internal(element, parser)
if not final_node:
return null # Unsupported tag
# Children will be added to this node.
container_for_children = final_node
# If final_node is a PanelContainer, children should go to the VBoxContainer inside
if final_node is PanelContainer and final_node.get_child_count() > 0:
container_for_children = final_node.get_child(0) # The VBoxContainer inside
else:
container_for_children = final_node
# Applies background, size, etc. to the FlexContainer (top-level node)
final_node = StyleManager.apply_element_styles(final_node, element, parser)
@@ -264,8 +268,13 @@ func create_element_node_internal(element: HTMLParser.HTMLElement, parser: HTMLP
node = TEXTAREA.instantiate()
node.init(element)
"div":
node = DIV.instantiate()
node.init(element)
var styles = parser.get_element_styles_with_inheritance(element, "", [])
if BackgroundUtils.needs_background_wrapper(styles):
node = BackgroundUtils.create_panel_container_with_background(styles)
else:
node = VBoxContainer.new()
node.name = "Div"
_:
return null