improve inherited width/height

2025-07-29 13:07:57 +03:00
parent 97a4d22797
commit 179d21f09a
4 changed files with 85 additions and 41 deletions
--- a/Scripts/Constants.gd
+++ b/Scripts/Constants.gd
@@ -234,34 +234,35 @@ So
 var HTML_CONTENT = """<head>
 	<title>Task Manager</title>
 	<icon src="https://cdn-icons-png.flaticon.com/512/126/126472.png">
+
 	<meta name="theme-color" content="#1e1e2f">
 	<meta name="description" content="Manage your tasks easily.">

 	<style>
-		h1 { text-[#4ade80] text-2xl font-bold text-center }
-		p { text-[#94a3b8] text-lg text-center }
-		button { bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e] }
-		input { bg-[#f0f0f0] text-[#111111] w-full }
+		h1 { text-[#4ade80] text-3xl font-bold }
+		p { text-[#94a3b8] text-lg }
+		button { bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e]  }
+		input { border border-[#cbd5e1] px-2 py-1 rounded }
 	</style>

 	<script src="logic.lua" />
 </head>

 <body>
-	<h1>📝 My Task Manager</h1>
-	<p>Keep track of your to-do list</p>
+	<h1 style="text-center">📝 My Task Manager</h1>
+	<p style="text-center mb-4">Keep track of your to-do list</p>

 	<!-- Task List -->
-	<div style="flex flex-col gap-2 w-80 bg-[#f8fafc] items-center justify-center">
-		<span style="flex justify-between items-center bg-[#e2e8f0] w-full h-8">
+	<div style="flex flex-col gap-2 w-80 mx-auto bg-[#f8fafc] p-4 rounded">
+		<span style="flex justify-between items-center bg-[#e2e8f0] px-2 py-1 rounded">
 			<span>✅ Finish homework</span>
 			<button>Delete</button>
 		</span>
-		<span style="flex justify-between items-center bg-[#e2e8f0] w-full h-8">
+		<span style="flex justify-between items-center bg-[#e2e8f0] px-2 py-1 rounded">
 			<span>✍️ Write blog post</span>
 			<button>Delete</button>
 		</span>
-		<span style="flex justify-between items-center bg-[#e2e8f0] w-full h-8">
+		<span style="flex justify-between items-center bg-[#e2e8f0] px-2 py-1 rounded">
 			<span>💪 Gym workout</span>
 			<button>Delete</button>
 		</span>
@@ -269,29 +270,21 @@ var HTML_CONTENT = """<head>

 	<separator direction="horizontal" />

-	<!-- Add Task Form -->
-	<h2 style="text-center">Add a New Task</h2>
-	<form action="/add-task" method="POST" style="flex flex-col gap-2 items-center justify-center w-xl">
-		<input type="text" placeholder="Enter text..." />
-		<input type="password" placeholder="Enter password..." />
+	<!-- Add New Task -->
+	<h2 style="text-center mt-4">Add a New Task</h2>
+	<form action="/add-task" method="POST" style="flex flex-col gap-2 w-80 mx-auto">
+		<input type="text" placeholder="Enter task..." minlength="3" required="true" />
 		<input type="date" />
-		<input type="color" />
-		<input type="number" min="0" max="100" />
-		<input type="range" min="0" max="100" />
-		<input type="checkbox" />
-		<input type="radio" name="test" />
-		<input type="file" />
 		<button type="submit">Add Task</button>
 	</form>

 	<separator direction="horizontal" />

-	<!-- Categories Section -->
 	<h2 style="text-center">Task Categories</h2>
-	<div style="flex flex-row gap-2 justify-center items-center w-64">
-		<span style="bg-[#fef3c7] w-32 h-8 flex items-center justify-center">📚 Study</span>
-		<span style="bg-[#d1fae5] w-32 h-8 flex items-center justify-center">💼 Work</span>
-		<span style="bg-[#e0e7ff] w-32 h-8 flex items-center justify-center">🏋️ Health</span>
+	<div style="flex flex-row gap-2 justify-center items-center w-full">
+		<span style="bg-[#fef3c7] px-4 py-2 rounded">📚 Study</span>
+		<span style="bg-[#d1fae5] px-4 py-2 rounded">💼 Work</span>
+		<span style="bg-[#e0e7ff] px-4 py-2 rounded">🏋️ Health</span>
 	</div>
 </body>
 """.to_utf8_buffer()
--- a/Scripts/StyleManager.gd
+++ b/Scripts/StyleManager.gd
@@ -31,8 +31,10 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement,
 	if styles.has("height"):
 		height = parse_size(styles["height"])

-	# Apply size directly to the node given.
-	if width != null or height != null:
+	# Skip width/height inheritance for buttons when inheriting from auto-sized containers
+	var skip_sizing = should_skip_sizing(node, element, parser)
+	
+	if (width != null or height != null) and not skip_sizing:
 		node.custom_minimum_size = Vector2(
 			width if width != null else node.custom_minimum_size.x,
 			height if height != null else node.custom_minimum_size.y
@@ -120,14 +122,16 @@ static func apply_styles_to_label(label: RichTextLabel, styles: Dictionary, elem
 		]
 		label.text = styled_text

-static func apply_flex_container_properties(node: FlexContainer, styles: Dictionary) -> void:
-	# Flex direction
+static func apply_flex_container_properties(node: FlexContainer, styles: Dictionary, element: HTMLParser.HTMLElement, parser: HTMLParser) -> void:
+	# Flex direction - default to row if not specified
 	if styles.has("flex-direction"):
 		match styles["flex-direction"]:
 			"row": node.flex_direction = FlexContainer.FlexDirection.Row
 			"row-reverse": node.flex_direction = FlexContainer.FlexDirection.RowReverse
 			"column": node.flex_direction = FlexContainer.FlexDirection.Column
 			"column-reverse": node.flex_direction = FlexContainer.FlexDirection.ColumnReverse
+	else:
+		node.flex_direction = FlexContainer.FlexDirection.Row
 	# Flex wrap
 	if styles.has("flex-wrap"):
 		match styles["flex-wrap"]:
@@ -239,4 +243,32 @@ static func parse_flex_value(val):
 		if s_val == "auto":
 			return "auto"

-	return null
+	return null
+
+static func should_skip_sizing(node: Control, element: HTMLParser.HTMLElement, parser: HTMLParser) -> bool:
+	# Cache style lookups to avoid repeated calls
+	var element_styles = parser.get_element_styles_internal(element, "")
+	
+	# 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 button has explicit size, don't skip sizing
+		if element_styles.has("width") or element_styles.has("height"):
+			return false
+		
+		# Check if width is being inherited from parent with explicit size
+		var parent_element = element.parent
+		if parent_element:
+			var parent_styles = parser.get_element_styles_internal(parent_element, "")
+			var parent_has_explicit_width = parent_styles.has("width")
+			# Skip only if parent doesn't have explicit width (auto-inherited)
+			return not parent_has_explicit_width
+		
+		return true
+	
+	# 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"):
+		return true
+	
+	return false
--- a/Scripts/Tags/button.gd
+++ b/Scripts/Tags/button.gd
@@ -10,22 +10,33 @@ func init(element: HTMLParser.HTMLElement, parser: HTMLParser = null) -> void:
 	if button_text.length() > 0:
 		button_node.text = button_text
 	
-	button_node.custom_minimum_size = button_node.get_theme_default_font().get_string_size(
+	var natural_size = button_node.get_theme_default_font().get_string_size(
 		button_node.text, 
 		HORIZONTAL_ALIGNMENT_LEFT, 
 		-1, 
 		button_node.get_theme_default_font_size()
 	) + Vector2(20, 10)  # Add padding
+	
+	# Force our container to use the natural size
+	custom_minimum_size = natural_size
+	size_flags_horizontal = Control.SIZE_SHRINK_BEGIN
+	size_flags_vertical = Control.SIZE_SHRINK_BEGIN
+	
+	# Make button node fill the container
+	button_node.custom_minimum_size = Vector2.ZERO
+	button_node.size_flags_horizontal = Control.SIZE_FILL
+	button_node.size_flags_vertical = Control.SIZE_FILL
+	
+	apply_button_styles(element, parser, natural_size)

-	apply_button_styles(element, parser)
-
-func apply_button_styles(element: HTMLParser.HTMLElement, parser: HTMLParser) -> void:
+func apply_button_styles(element: HTMLParser.HTMLElement, parser: HTMLParser, natural_size: Vector2) -> void:
 	if not element or not parser:
 		return

-	StyleManager.apply_element_styles(self, element, parser)
-
-	var styles = parser.get_element_styles_with_inheritance(element, "", [])
+	var styles = parser.get_element_styles_internal(element, "")
+	
+	if styles.has("background-color"):
+		set_meta("custom_css_background_color", styles["background-color"])

 	var width = null
 	var height = null
@@ -37,8 +48,16 @@ func apply_button_styles(element: HTMLParser.HTMLElement, parser: HTMLParser) ->

 	var button_node = $ButtonNode

-	apply_size_and_flags(self, width, height)
-	apply_size_and_flags(button_node, width, height, false)
+	# Only apply size flags if there's explicit sizing
+	if width != null or height != null:
+		apply_size_and_flags(self, width, height)
+		apply_size_and_flags(button_node, width, height, false)
+	else:
+		# Keep the natural sizing we set earlier
+		custom_minimum_size = natural_size
+		# Also ensure the ButtonNode doesn't override our size
+		button_node.custom_minimum_size = Vector2.ZERO
+		button_node.anchors_preset = Control.PRESET_FULL_RECT

 func apply_size_and_flags(ctrl: Control, width: Variant, height: Variant, reset_layout := false) -> void:
 	if width != null or height != null:
--- a/Scripts/main.gd
+++ b/Scripts/main.gd
@@ -159,7 +159,7 @@ func create_element_node(element: HTMLParser.HTMLElement, parser: HTMLParser) ->

 	# Apply flex CONTAINER properties if it's a flex container
 	if is_flex_container:
-		StyleManager.apply_flex_container_properties(final_node, styles)
+		StyleManager.apply_flex_container_properties(final_node, styles, element, parser)

 	# Apply flex ITEM properties
 	StyleManager.apply_flex_item_properties(final_node, styles)