LeonMMcoset/leonwww
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve inherited width/height

Browse Source
This commit is contained in:
Face
2025-07-29 13:07:57 +03:00
parent 97a4d22797
commit 179d21f09a
4 changed files with 85 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
Scripts/Constants.gd
View File

@@ -234,34 +234,35 @@ So
var HTML_CONTENT = """<head> var HTML_CONTENT = """<head>
<title>Task Manager</title> <title>Task Manager</title>
<icon src="https://cdn-icons-png.flaticon.com/512/126/126472.png"> <icon src="https://cdn-icons-png.flaticon.com/512/126/126472.png">
<meta name="theme-color" content="#1e1e2f"> <meta name="theme-color" content="#1e1e2f">
<meta name="description" content="Manage your tasks easily."> <meta name="description" content="Manage your tasks easily.">
<style> <style>
h1 { text-[#4ade80] text-2xl font-bold text-center } h1 { text-[#4ade80] text-3xl font-bold }
p { text-[#94a3b8] text-lg text-center } p { text-[#94a3b8] text-lg }
button { bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e] } button { bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e] }
input { bg-[#f0f0f0] text-[#111111] w-full } input { border border-[#cbd5e1] px-2 py-1 rounded }
</style> </style>
<script src="logic.lua" /> <script src="logic.lua" />
</head> </head>
<body> <body>
<h1>📝 My Task Manager</h1> <h1 style="text-center">📝 My Task Manager</h1>
<p>Keep track of your to-do list</p> <p style="text-center mb-4">Keep track of your to-do list</p>
<!-- Task List --> <!-- Task List -->
<div style="flex flex-col gap-2 w-80 bg-[#f8fafc] items-center justify-center"> <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] w-full h-8"> <span style="flex justify-between items-center bg-[#e2e8f0] px-2 py-1 rounded">
<span>✅ Finish homework</span> <span>✅ Finish homework</span>
<button>Delete</button> <button>Delete</button>
</span> </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> <span>✍️ Write blog post</span>
<button>Delete</button> <button>Delete</button>
</span> </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> <span>💪 Gym workout</span>
<button>Delete</button> <button>Delete</button>
</span> </span>
@@ -269,29 +270,21 @@ var HTML_CONTENT = """<head>
<separator direction="horizontal" /> <separator direction="horizontal" />
<!-- Add Task Form --> <!-- Add New Task -->
<h2 style="text-center">Add a New Task</h2> <h2 style="text-center mt-4">Add a New Task</h2>
<form action="/add-task" method="POST" style="flex flex-col gap-2 items-center justify-center w-xl"> <form action="/add-task" method="POST" style="flex flex-col gap-2 w-80 mx-auto">
<input type="text" placeholder="Enter text..." /> <input type="text" placeholder="Enter task..." minlength="3" required="true" />
<input type="password" placeholder="Enter password..." />
<input type="date" /> <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> <button type="submit">Add Task</button>
</form> </form>
<separator direction="horizontal" /> <separator direction="horizontal" />
<!-- Categories Section -->
<h2 style="text-center">Task Categories</h2> <h2 style="text-center">Task Categories</h2>
<div style="flex flex-row gap-2 justify-center items-center w-64"> <div style="flex flex-row gap-2 justify-center items-center w-full">
<span style="bg-[#fef3c7] w-32 h-8 flex items-center justify-center">📚 Study</span> <span style="bg-[#fef3c7] px-4 py-2 rounded">📚 Study</span>
<span style="bg-[#d1fae5] w-32 h-8 flex items-center justify-center">💼 Work</span> <span style="bg-[#d1fae5] px-4 py-2 rounded">💼 Work</span>
<span style="bg-[#e0e7ff] w-32 h-8 flex items-center justify-center">🏋️ Health</span> <span style="bg-[#e0e7ff] px-4 py-2 rounded">🏋️ Health</span>
</div> </div>
</body> </body>
""".to_utf8_buffer() """.to_utf8_buffer()

40
Scripts/StyleManager.gd
View File

@@ -31,8 +31,10 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement,
if styles.has("height"): if styles.has("height"):
height = parse_size(styles["height"]) height = parse_size(styles["height"])
# Apply size directly to the node given. # Skip width/height inheritance for buttons when inheriting from auto-sized containers
if width != null or height != null: var skip_sizing = should_skip_sizing(node, element, parser)
if (width != null or height != null) and not skip_sizing:
node.custom_minimum_size = Vector2( node.custom_minimum_size = Vector2(
width if width != null else node.custom_minimum_size.x, width if width != null else node.custom_minimum_size.x,
height if height != null else node.custom_minimum_size.y 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 label.text = styled_text
static func apply_flex_container_properties(node: FlexContainer, styles: Dictionary) -> void: static func apply_flex_container_properties(node: FlexContainer, styles: Dictionary, element: HTMLParser.HTMLElement, parser: HTMLParser) -> void:
# Flex direction # Flex direction - default to row if not specified
if styles.has("flex-direction"): if styles.has("flex-direction"):
match styles["flex-direction"]: match styles["flex-direction"]:
"row": node.flex_direction = FlexContainer.FlexDirection.Row "row": node.flex_direction = FlexContainer.FlexDirection.Row
"row-reverse": node.flex_direction = FlexContainer.FlexDirection.RowReverse "row-reverse": node.flex_direction = FlexContainer.FlexDirection.RowReverse
"column": node.flex_direction = FlexContainer.FlexDirection.Column "column": node.flex_direction = FlexContainer.FlexDirection.Column
"column-reverse": node.flex_direction = FlexContainer.FlexDirection.ColumnReverse "column-reverse": node.flex_direction = FlexContainer.FlexDirection.ColumnReverse
else:
node.flex_direction = FlexContainer.FlexDirection.Row
# Flex wrap # Flex wrap
if styles.has("flex-wrap"): if styles.has("flex-wrap"):
match styles["flex-wrap"]: match styles["flex-wrap"]:
@@ -240,3 +244,31 @@ static func parse_flex_value(val):
return "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

33
Scripts/Tags/button.gd
View File

@@ -10,22 +10,33 @@ func init(element: HTMLParser.HTMLElement, parser: HTMLParser = null) -> void:
if button_text.length() > 0: if button_text.length() > 0:
button_node.text = button_text 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, button_node.text,
HORIZONTAL_ALIGNMENT_LEFT, HORIZONTAL_ALIGNMENT_LEFT,
-1, -1,
button_node.get_theme_default_font_size() button_node.get_theme_default_font_size()
) + Vector2(20, 10) # Add padding ) + Vector2(20, 10) # Add padding
apply_button_styles(element, parser) # 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
func apply_button_styles(element: HTMLParser.HTMLElement, parser: HTMLParser) -> void: # 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)
func apply_button_styles(element: HTMLParser.HTMLElement, parser: HTMLParser, natural_size: Vector2) -> void:
if not element or not parser: if not element or not parser:
return return
StyleManager.apply_element_styles(self, element, parser) var styles = parser.get_element_styles_internal(element, "")
var styles = parser.get_element_styles_with_inheritance(element, "", []) if styles.has("background-color"):
set_meta("custom_css_background_color", styles["background-color"])
var width = null var width = null
var height = null var height = null
@@ -37,8 +48,16 @@ func apply_button_styles(element: HTMLParser.HTMLElement, parser: HTMLParser) ->
var button_node = $ButtonNode var button_node = $ButtonNode
apply_size_and_flags(self, width, height) # Only apply size flags if there's explicit sizing
apply_size_and_flags(button_node, width, height, false) 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: func apply_size_and_flags(ctrl: Control, width: Variant, height: Variant, reset_layout := false) -> void:
if width != null or height != null: if width != null or height != null:

2
Scripts/main.gd
View File

@@ -159,7 +159,7 @@ func create_element_node(element: HTMLParser.HTMLElement, parser: HTMLParser) ->
# Apply flex CONTAINER properties if it's a flex container # Apply flex CONTAINER properties if it's a flex container
if is_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 # Apply flex ITEM properties
StyleManager.apply_flex_item_properties(final_node, styles) StyleManager.apply_flex_item_properties(final_node, styles)