From b59a98ed3ae76244359593e224742398f06f2cd3 Mon Sep 17 00:00:00 2001 From: Face <69168154+face-hh@users.noreply.github.com> Date: Thu, 31 Jul 2025 16:13:21 +0300 Subject: [PATCH] non-flex div background (padding, corner radius) --- Scenes/Styles/TabDefault.tres | 2 + Scenes/Styles/TabHover.tres | 2 + Scenes/Styles/TabHoverDefault.tres | 2 + Scenes/Styles/TabNormal.tres | 2 + Scenes/Tags/div.tscn | 6 +- Scenes/Tags/input.tscn | 2 +- Scenes/Tags/li.tscn | 17 +--- Scenes/Tags/ol.tscn | 2 +- Scenes/Tags/option.tscn | 2 +- Scenes/Tags/p.tscn | 2 +- Scenes/Tags/select.tscn | 2 +- Scenes/Tags/textarea.tscn | 2 +- Scripts/AutoSizingFlexContainer.gd | 42 +--------- Scripts/Tags/div.gd | 5 +- Scripts/Utils/BackgroundUtils.gd | 117 +++++++++++++++++++++++++++ Scripts/Utils/BackgroundUtils.gd.uid | 1 + Scripts/main.gd | 17 +++- 17 files changed, 153 insertions(+), 72 deletions(-) create mode 100644 Scripts/Utils/BackgroundUtils.gd create mode 100644 Scripts/Utils/BackgroundUtils.gd.uid diff --git a/Scenes/Styles/TabDefault.tres b/Scenes/Styles/TabDefault.tres index a441e53..32107a6 100644 --- a/Scenes/Styles/TabDefault.tres +++ b/Scenes/Styles/TabDefault.tres @@ -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 diff --git a/Scenes/Styles/TabHover.tres b/Scenes/Styles/TabHover.tres index 9c1d1b7..4afe54d 100644 --- a/Scenes/Styles/TabHover.tres +++ b/Scenes/Styles/TabHover.tres @@ -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 diff --git a/Scenes/Styles/TabHoverDefault.tres b/Scenes/Styles/TabHoverDefault.tres index 424159d..f97aac2 100644 --- a/Scenes/Styles/TabHoverDefault.tres +++ b/Scenes/Styles/TabHoverDefault.tres @@ -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 diff --git a/Scenes/Styles/TabNormal.tres b/Scenes/Styles/TabNormal.tres index 1b1ef61..3ec4586 100644 --- a/Scenes/Styles/TabNormal.tres +++ b/Scenes/Styles/TabNormal.tres @@ -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 diff --git a/Scenes/Tags/div.tscn b/Scenes/Tags/div.tscn index 0d63e3b..c764bb2 100644 --- a/Scenes/Tags/div.tscn +++ b/Scenes/Tags/div.tscn @@ -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") diff --git a/Scenes/Tags/input.tscn b/Scenes/Tags/input.tscn index e9ad66f..223b4f7 100644 --- a/Scenes/Tags/input.tscn +++ b/Scenes/Tags/input.tscn @@ -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 diff --git a/Scenes/Tags/li.tscn b/Scenes/Tags/li.tscn index 4602565..5929bb0 100644 --- a/Scenes/Tags/li.tscn +++ b/Scenes/Tags/li.tscn @@ -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 diff --git a/Scenes/Tags/ol.tscn b/Scenes/Tags/ol.tscn index f5269f6..2ea2de9 100644 --- a/Scenes/Tags/ol.tscn +++ b/Scenes/Tags/ol.tscn @@ -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 diff --git a/Scenes/Tags/option.tscn b/Scenes/Tags/option.tscn index 6ee40b1..767c64a 100644 --- a/Scenes/Tags/option.tscn +++ b/Scenes/Tags/option.tscn @@ -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 diff --git a/Scenes/Tags/p.tscn b/Scenes/Tags/p.tscn index 71482e2..cbece4c 100644 --- a/Scenes/Tags/p.tscn +++ b/Scenes/Tags/p.tscn @@ -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 diff --git a/Scenes/Tags/select.tscn b/Scenes/Tags/select.tscn index 7203742..a32bb89 100644 --- a/Scenes/Tags/select.tscn +++ b/Scenes/Tags/select.tscn @@ -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 diff --git a/Scenes/Tags/textarea.tscn b/Scenes/Tags/textarea.tscn index fb25c55..d4d5be0 100644 --- a/Scenes/Tags/textarea.tscn +++ b/Scenes/Tags/textarea.tscn @@ -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 diff --git a/Scripts/AutoSizingFlexContainer.gd b/Scripts/AutoSizingFlexContainer.gd index b576edb..f7799bd 100644 --- a/Scripts/AutoSizingFlexContainer.gd +++ b/Scripts/AutoSizingFlexContainer.gd @@ -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") diff --git a/Scripts/Tags/div.gd b/Scripts/Tags/div.gd index 70f4f5e..bd8a823 100644 --- a/Scripts/Tags/div.gd +++ b/Scripts/Tags/div.gd @@ -1,6 +1,5 @@ -# NOTE: some weird warning, wcyd -@tool -extends FlexContainer +class_name HTMLDiv +extends VBoxContainer func init(_element: HTMLParser.HTMLElement): pass diff --git a/Scripts/Utils/BackgroundUtils.gd b/Scripts/Utils/BackgroundUtils.gd new file mode 100644 index 0000000..e37f556 --- /dev/null +++ b/Scripts/Utils/BackgroundUtils.gd @@ -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") \ No newline at end of file diff --git a/Scripts/Utils/BackgroundUtils.gd.uid b/Scripts/Utils/BackgroundUtils.gd.uid new file mode 100644 index 0000000..03f08d0 --- /dev/null +++ b/Scripts/Utils/BackgroundUtils.gd.uid @@ -0,0 +1 @@ +uid://c2itd75f1j1n0 diff --git a/Scripts/main.gd b/Scripts/main.gd index 5595e69..7cb5023 100644 --- a/Scripts/main.gd +++ b/Scripts/main.gd @@ -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