non-flex div background (padding, corner radius)
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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")
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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")
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
# NOTE: some weird warning, wcyd
|
||||
@tool
|
||||
extends FlexContainer
|
||||
class_name HTMLDiv
|
||||
extends VBoxContainer
|
||||
|
||||
func init(_element: HTMLParser.HTMLElement):
|
||||
pass
|
||||
|
||||
117
Scripts/Utils/BackgroundUtils.gd
Normal file
117
Scripts/Utils/BackgroundUtils.gd
Normal 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")
|
||||
1
Scripts/Utils/BackgroundUtils.gd.uid
Normal file
1
Scripts/Utils/BackgroundUtils.gd.uid
Normal file
@@ -0,0 +1 @@
|
||||
uid://c2itd75f1j1n0
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user