fix centering - add mx, my, m (auto)

This commit is contained in:
Face
2025-07-31 22:21:23 +03:00
parent e0f0a545e4
commit 49b0e357c9
5 changed files with 30 additions and 8 deletions

View File

@@ -12,13 +12,15 @@ func _resort() -> void:
if has_meta("should_fill_horizontal"):
size_flags_horizontal = Control.SIZE_FILL
else:
size_flags_horizontal = Control.SIZE_SHRINK_CENTER
if not has_meta("size_flags_set_by_style_manager"):
size_flags_horizontal = Control.SIZE_SHRINK_CENTER
# Check if we should fill vertically (for h-full)
if has_meta("should_fill_vertical"):
size_flags_vertical = Control.SIZE_FILL
else:
size_flags_vertical = Control.SIZE_SHRINK_CENTER
if not has_meta("size_flags_set_by_style_manager"):
size_flags_vertical = Control.SIZE_SHRINK_CENTER
if debug_draw:
_draw_rects.clear()

View File

@@ -496,6 +496,18 @@ static func parse_utility_class_internal(rule: CSSRule, utility_name: String) ->
rule.properties["border-radius"] = str(int(val)) + "px"
return
# Handle margin auto classes for centering
if utility_name == "mx-auto":
rule.properties["mx-auto"] = true
return
if utility_name == "my-auto":
rule.properties["my-auto"] = true
return
if utility_name == "m-auto":
rule.properties["mx-auto"] = true
rule.properties["my-auto"] = true
return
# Handle more utility classes as needed
# Add more cases here for other utilities

View File

@@ -24,7 +24,7 @@ pre { text-xl font-mono }
button { bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] }
"""
var HTML_CONTENT2 = """<head>
var HTML_CONTENT = """<head>
<title>My Custom Dashboard</title>
<icon src="https://cdn-icons-png.flaticon.com/512/1828/1828774.png">
<meta name="theme-color" content="#1a202c">
@@ -41,9 +41,8 @@ var HTML_CONTENT2 = """<head>
</style>
</head>
<body style="bg-[#0f172a] p-8 text-white">
<h1 style="text-center mb-4 font-roboto">📊 My Dashboard</h1>
<body style="bg-[#0f172a] p-8 text-white font-roboto">
<h1 style="text-center mb-4">📊 My Dashboard</h1>
<!-- Top Summary Cards -->
<div style="flex flex-row gap-4 justify-center flex-wrap">
@@ -100,7 +99,7 @@ var HTML_CONTENT2 = """<head>
</body>
""".to_utf8_buffer()
var HTML_CONTENT = """<head>
var HTML_CONTENT2 = """<head>
<title>My cool web</title>
<icon src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png\">
@@ -204,7 +203,7 @@ So
<h2>File Upload</h2>
<input type=\"file\" accept=\".txt,.pdf,image/*\" />
</form>
<separator direction=\"horizontal\" />
# Ordered list
<ol>

View File

@@ -45,8 +45,16 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement,
if node is FlexContainer:
if width != null and typeof(width) != TYPE_STRING:
node.custom_minimum_size.x = width
var should_center_h = styles.has("mx-auto") or styles.has("justify-self-center") or (styles.has("text-align") and styles["text-align"] == "center")
node.size_flags_horizontal = Control.SIZE_SHRINK_CENTER if should_center_h else Control.SIZE_SHRINK_BEGIN
node.set_meta("size_flags_set_by_style_manager", true)
if height != null and typeof(height) != TYPE_STRING:
node.custom_minimum_size.y = height
var should_center_v = styles.has("my-auto") or styles.has("align-self-center")
node.size_flags_vertical = Control.SIZE_SHRINK_CENTER if should_center_v else Control.SIZE_SHRINK_BEGIN
if not node.has_meta("size_flags_set_by_style_manager"):
node.set_meta("size_flags_set_by_style_manager", true)
elif node is VBoxContainer or node is HBoxContainer or node is Container:
# Hcontainer nodes (like ul, ol)
SizingUtils.apply_container_dimension_sizing(node, width, height)

View File

@@ -27,6 +27,7 @@ static func init_patterns():
"^(p|px|py|pt|pr|pb|pl)-", # padding
"^rounded", # border radius
"^basis-", # flex basis
"^(mx|my|m)-auto$", # margin auto for centering
"^(hover|active):", # pseudo classes
]
for pattern in utility_patterns: