ui: add typed editor field foundations
This commit is contained in:
218
tests/UI/Editor/integration/shared/src/EditorValidationTheme.h
Normal file
218
tests/UI/Editor/integration/shared/src/EditorValidationTheme.h
Normal file
@@ -0,0 +1,218 @@
|
||||
#pragma once
|
||||
|
||||
#include <XCEngine/Core/Containers/String.h>
|
||||
#include <XCEngine/Core/Math/Color.h>
|
||||
#include <XCEngine/Resources/UI/UIDocumentCompiler.h>
|
||||
#include <XCEngine/UI/DrawData.h>
|
||||
#include <XCEngine/UI/Style/DocumentStyleCompiler.h>
|
||||
#include <XCEngine/UI/Style/Theme.h>
|
||||
|
||||
#include <filesystem>
|
||||
#include <initializer_list>
|
||||
#include <string>
|
||||
#include <string_view>
|
||||
|
||||
namespace XCEngine::Tests::EditorUI {
|
||||
|
||||
struct EditorValidationThemeLoadResult {
|
||||
::XCEngine::UI::Style::UITheme theme = {};
|
||||
std::string error = {};
|
||||
bool succeeded = false;
|
||||
};
|
||||
|
||||
struct EditorValidationShellPalette {
|
||||
::XCEngine::UI::UIColor windowBackground = ::XCEngine::UI::UIColor(0.13f, 0.13f, 0.13f, 1.0f);
|
||||
::XCEngine::UI::UIColor cardBackground = ::XCEngine::UI::UIColor(0.18f, 0.18f, 0.18f, 1.0f);
|
||||
::XCEngine::UI::UIColor cardBorder = ::XCEngine::UI::UIColor(0.29f, 0.29f, 0.29f, 1.0f);
|
||||
::XCEngine::UI::UIColor textPrimary = ::XCEngine::UI::UIColor(0.94f, 0.94f, 0.94f, 1.0f);
|
||||
::XCEngine::UI::UIColor textMuted = ::XCEngine::UI::UIColor(0.72f, 0.72f, 0.72f, 1.0f);
|
||||
::XCEngine::UI::UIColor textWeak = ::XCEngine::UI::UIColor(0.56f, 0.56f, 0.56f, 1.0f);
|
||||
::XCEngine::UI::UIColor textSuccess = ::XCEngine::UI::UIColor(0.63f, 0.76f, 0.63f, 1.0f);
|
||||
::XCEngine::UI::UIColor buttonBackground = ::XCEngine::UI::UIColor(0.25f, 0.25f, 0.25f, 1.0f);
|
||||
::XCEngine::UI::UIColor buttonHoverBackground = ::XCEngine::UI::UIColor(0.32f, 0.32f, 0.32f, 1.0f);
|
||||
};
|
||||
|
||||
struct EditorValidationShellMetrics {
|
||||
float margin = 20.0f;
|
||||
float gap = 16.0f;
|
||||
float cardRadius = 10.0f;
|
||||
float buttonRadius = 8.0f;
|
||||
float titleFontSize = 17.0f;
|
||||
float bodyFontSize = 12.0f;
|
||||
};
|
||||
|
||||
inline ::XCEngine::UI::UIColor ToUIColor(const ::XCEngine::Math::Color& color) {
|
||||
return ::XCEngine::UI::UIColor(color.r, color.g, color.b, color.a);
|
||||
}
|
||||
|
||||
inline bool TryResolveThemeFloat(
|
||||
const ::XCEngine::UI::Style::UITheme& theme,
|
||||
std::string_view tokenName,
|
||||
float& outValue) {
|
||||
const auto resolution =
|
||||
theme.ResolveToken(std::string(tokenName), ::XCEngine::UI::Style::UIStyleValueType::Float);
|
||||
if (resolution.status != ::XCEngine::UI::Style::UITokenResolveStatus::Resolved) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const float* value = resolution.value.TryGetFloat();
|
||||
if (value == nullptr) {
|
||||
return false;
|
||||
}
|
||||
|
||||
outValue = *value;
|
||||
return true;
|
||||
}
|
||||
|
||||
inline bool TryResolveThemeColor(
|
||||
const ::XCEngine::UI::Style::UITheme& theme,
|
||||
std::string_view tokenName,
|
||||
::XCEngine::UI::UIColor& outColor) {
|
||||
const auto resolution =
|
||||
theme.ResolveToken(std::string(tokenName), ::XCEngine::UI::Style::UIStyleValueType::Color);
|
||||
if (resolution.status != ::XCEngine::UI::Style::UITokenResolveStatus::Resolved) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const ::XCEngine::Math::Color* value = resolution.value.TryGetColor();
|
||||
if (value == nullptr) {
|
||||
return false;
|
||||
}
|
||||
|
||||
outColor = ToUIColor(*value);
|
||||
return true;
|
||||
}
|
||||
|
||||
inline float ResolveThemeFloatAliases(
|
||||
const ::XCEngine::UI::Style::UITheme& theme,
|
||||
std::initializer_list<std::string_view> tokenNames,
|
||||
float fallbackValue) {
|
||||
float resolvedValue = fallbackValue;
|
||||
for (std::string_view tokenName : tokenNames) {
|
||||
if (TryResolveThemeFloat(theme, tokenName, resolvedValue)) {
|
||||
return resolvedValue;
|
||||
}
|
||||
}
|
||||
|
||||
return fallbackValue;
|
||||
}
|
||||
|
||||
inline ::XCEngine::UI::UIColor ResolveThemeColorAliases(
|
||||
const ::XCEngine::UI::Style::UITheme& theme,
|
||||
std::initializer_list<std::string_view> tokenNames,
|
||||
const ::XCEngine::UI::UIColor& fallbackValue) {
|
||||
::XCEngine::UI::UIColor resolvedValue = fallbackValue;
|
||||
for (std::string_view tokenName : tokenNames) {
|
||||
if (TryResolveThemeColor(theme, tokenName, resolvedValue)) {
|
||||
return resolvedValue;
|
||||
}
|
||||
}
|
||||
|
||||
return fallbackValue;
|
||||
}
|
||||
|
||||
inline EditorValidationThemeLoadResult LoadEditorValidationTheme(
|
||||
const std::filesystem::path& themePath) {
|
||||
EditorValidationThemeLoadResult result = {};
|
||||
|
||||
::XCEngine::Resources::UIDocumentCompileResult compileResult = {};
|
||||
const ::XCEngine::Containers::String pathString(themePath.generic_string().c_str());
|
||||
if (!::XCEngine::Resources::CompileUIDocument(
|
||||
::XCEngine::Resources::UIDocumentCompileRequest {
|
||||
::XCEngine::Resources::UIDocumentKind::Theme,
|
||||
pathString,
|
||||
::XCEngine::Resources::GetUIDocumentDefaultRootTag(
|
||||
::XCEngine::Resources::UIDocumentKind::Theme)
|
||||
},
|
||||
compileResult)) {
|
||||
result.error = compileResult.errorMessage.Empty()
|
||||
? std::string("Failed to compile editor validation theme document.")
|
||||
: std::string(compileResult.errorMessage.CStr());
|
||||
return result;
|
||||
}
|
||||
|
||||
const auto styleCompileResult =
|
||||
::XCEngine::UI::Style::CompileDocumentStyle(compileResult.document);
|
||||
if (!styleCompileResult.succeeded) {
|
||||
result.error = styleCompileResult.errorMessage;
|
||||
return result;
|
||||
}
|
||||
|
||||
result.theme = styleCompileResult.theme;
|
||||
result.succeeded = true;
|
||||
return result;
|
||||
}
|
||||
|
||||
inline EditorValidationShellPalette ResolveEditorValidationShellPalette(
|
||||
const ::XCEngine::UI::Style::UITheme& theme) {
|
||||
EditorValidationShellPalette palette = {};
|
||||
palette.windowBackground = ResolveThemeColorAliases(
|
||||
theme,
|
||||
{ "editor.color.validation.window", "color.bg.workspace" },
|
||||
palette.windowBackground);
|
||||
palette.cardBackground = ResolveThemeColorAliases(
|
||||
theme,
|
||||
{ "editor.color.validation.card", "color.bg.panel" },
|
||||
palette.cardBackground);
|
||||
palette.cardBorder = ResolveThemeColorAliases(
|
||||
theme,
|
||||
{ "editor.color.validation.card_border", "editor.color.menu_popup.border" },
|
||||
palette.cardBorder);
|
||||
palette.textPrimary = ResolveThemeColorAliases(
|
||||
theme,
|
||||
{ "editor.color.validation.text_primary", "color.text.primary" },
|
||||
palette.textPrimary);
|
||||
palette.textMuted = ResolveThemeColorAliases(
|
||||
theme,
|
||||
{ "editor.color.validation.text_muted", "color.text.muted" },
|
||||
palette.textMuted);
|
||||
palette.textWeak = ResolveThemeColorAliases(
|
||||
theme,
|
||||
{ "editor.color.validation.text_weak", "color.text.muted" },
|
||||
palette.textWeak);
|
||||
palette.textSuccess = ResolveThemeColorAliases(
|
||||
theme,
|
||||
{ "editor.color.validation.text_success" },
|
||||
palette.textSuccess);
|
||||
palette.buttonBackground = ResolveThemeColorAliases(
|
||||
theme,
|
||||
{ "editor.color.validation.button", "color.bg.selection" },
|
||||
palette.buttonBackground);
|
||||
palette.buttonHoverBackground = ResolveThemeColorAliases(
|
||||
theme,
|
||||
{ "editor.color.validation.button_hover", "editor.color.validation.button", "color.bg.selection" },
|
||||
palette.buttonHoverBackground);
|
||||
return palette;
|
||||
}
|
||||
|
||||
inline EditorValidationShellMetrics ResolveEditorValidationShellMetrics(
|
||||
const ::XCEngine::UI::Style::UITheme& theme) {
|
||||
EditorValidationShellMetrics metrics = {};
|
||||
metrics.margin = ResolveThemeFloatAliases(
|
||||
theme,
|
||||
{ "editor.space.validation.margin", "space.shell" },
|
||||
metrics.margin);
|
||||
metrics.gap = ResolveThemeFloatAliases(
|
||||
theme,
|
||||
{ "editor.space.validation.gap" },
|
||||
metrics.gap);
|
||||
metrics.cardRadius = ResolveThemeFloatAliases(
|
||||
theme,
|
||||
{ "editor.radius.validation.card", "radius.panel" },
|
||||
metrics.cardRadius);
|
||||
metrics.buttonRadius = ResolveThemeFloatAliases(
|
||||
theme,
|
||||
{ "editor.radius.validation.button", "radius.control" },
|
||||
metrics.buttonRadius);
|
||||
metrics.titleFontSize = ResolveThemeFloatAliases(
|
||||
theme,
|
||||
{ "editor.font.validation.title" },
|
||||
metrics.titleFontSize);
|
||||
metrics.bodyFontSize = ResolveThemeFloatAliases(
|
||||
theme,
|
||||
{ "editor.font.validation.body", "editor.font.field.value" },
|
||||
metrics.bodyFontSize);
|
||||
return metrics;
|
||||
}
|
||||
|
||||
} // namespace XCEngine::Tests::EditorUI
|
||||
@@ -5,10 +5,156 @@
|
||||
<Color name="color.bg.selection" value="#3A3A3A" />
|
||||
<Color name="color.text.primary" value="#F2F2F2" />
|
||||
<Color name="color.text.muted" value="#B4B4B4" />
|
||||
<Color name="color.text.weak" value="#8F8F8F" />
|
||||
<Color name="color.text.success" value="#A6C3A6" />
|
||||
<Color name="color.border.panel" value="#4A4A4A" />
|
||||
<Color name="color.button.default" value="#343434" />
|
||||
<Color name="color.button.hover" value="#404040" />
|
||||
<Spacing name="space.shell" value="18" />
|
||||
<Spacing name="space.panel" value="12" />
|
||||
<Radius name="radius.panel" value="10" />
|
||||
<Radius name="radius.control" value="8" />
|
||||
<Spacing name="editor.space.validation.margin" value="20" />
|
||||
<Spacing name="editor.space.validation.gap" value="16" />
|
||||
<Radius name="editor.radius.validation.card" value="radius.panel" />
|
||||
<Radius name="editor.radius.validation.button" value="radius.control" />
|
||||
<Number name="editor.font.validation.title" value="17" />
|
||||
<Number name="editor.font.validation.body" value="12" />
|
||||
<Color name="editor.color.validation.window" value="color.bg.workspace" />
|
||||
<Color name="editor.color.validation.card" value="color.bg.panel" />
|
||||
<Color name="editor.color.validation.card_border" value="color.border.panel" />
|
||||
<Color name="editor.color.validation.text_primary" value="color.text.primary" />
|
||||
<Color name="editor.color.validation.text_muted" value="color.text.muted" />
|
||||
<Color name="editor.color.validation.text_weak" value="color.text.weak" />
|
||||
<Color name="editor.color.validation.text_success" value="color.text.success" />
|
||||
<Color name="editor.color.validation.button" value="color.button.default" />
|
||||
<Color name="editor.color.validation.button_hover" value="color.button.hover" />
|
||||
|
||||
<Number name="editor.size.field.row" value="22" />
|
||||
<Number name="editor.space.field.padding_x" value="12" />
|
||||
<Number name="editor.space.field.label_gap" value="20" />
|
||||
<Number name="editor.layout.field.control_column" value="236" />
|
||||
<Number name="editor.space.field.control_trailing_inset" value="8" />
|
||||
<Number name="editor.size.field.checkbox" value="14" />
|
||||
<Number name="editor.size.field.control_min_width" value="96" />
|
||||
<Number name="editor.space.field.vector_component_gap" value="6" />
|
||||
<Number name="editor.size.field.vector_component_min_width" value="72" />
|
||||
<Number name="editor.size.field.vector_prefix_width" value="9" />
|
||||
<Number name="editor.space.field.vector_prefix_gap" value="4" />
|
||||
<Number name="editor.space.field.vector_prefix_inset_x" value="0" />
|
||||
<Number name="editor.space.field.vector_prefix_inset_y" value="-1" />
|
||||
<Number name="editor.space.field.control_inset_y" value="1" />
|
||||
<Number name="editor.space.field.label_inset_y" value="0" />
|
||||
<Number name="editor.space.field.value_inset_x" value="5" />
|
||||
<Number name="editor.space.field.value_inset_y" value="0" />
|
||||
<Number name="editor.space.field.checkbox_glyph_inset_x" value="1" />
|
||||
<Number name="editor.space.field.checkbox_glyph_inset_y" value="-2" />
|
||||
<Number name="editor.size.field.dropdown_arrow_width" value="16" />
|
||||
<Number name="editor.space.field.dropdown_arrow_inset_x" value="4" />
|
||||
<Number name="editor.space.field.dropdown_arrow_inset_y" value="3" />
|
||||
<Number name="editor.radius.field.row" value="0" />
|
||||
<Number name="editor.radius.field.control" value="2" />
|
||||
<Number name="editor.border.field" value="1" />
|
||||
<Number name="editor.border.field.focus" value="1" />
|
||||
<Number name="editor.font.field.label" value="11" />
|
||||
<Number name="editor.font.field.value" value="12" />
|
||||
<Number name="editor.font.field.glyph" value="10" />
|
||||
<Color name="editor.color.field.row" value="#00000000" />
|
||||
<Color name="editor.color.field.row_hover" value="#2A2A2AFF" />
|
||||
<Color name="editor.color.field.row_active" value="#313131FF" />
|
||||
<Color name="editor.color.field.border" value="#00000000" />
|
||||
<Color name="editor.color.field.border_focus" value="#00000000" />
|
||||
<Color name="editor.color.field.label" value="#C9C9C9FF" />
|
||||
<Color name="editor.color.field.value" value="#EEEEEEFF" />
|
||||
<Color name="editor.color.field.value_readonly" value="#8E8E8EFF" />
|
||||
<Color name="editor.color.field.control" value="#2E2E2EFF" />
|
||||
<Color name="editor.color.field.control_hover" value="#353535FF" />
|
||||
<Color name="editor.color.field.control_editing" value="#3A3A3AFF" />
|
||||
<Color name="editor.color.field.control_readonly" value="#252525FF" />
|
||||
<Color name="editor.color.field.control_border" value="#242424FF" />
|
||||
<Color name="editor.color.field.control_border_focus" value="#2A2A2AFF" />
|
||||
<Color name="editor.color.field.vector_prefix" value="#222222FF" />
|
||||
<Color name="editor.color.field.vector_prefix_border" value="#343434FF" />
|
||||
<Color name="editor.color.field.vector_axis_x" value="#A8A8A8FF" />
|
||||
<Color name="editor.color.field.vector_axis_y" value="#A8A8A8FF" />
|
||||
<Color name="editor.color.field.vector_axis_z" value="#A8A8A8FF" />
|
||||
<Color name="editor.color.field.checkbox" value="#1C1C1CFF" />
|
||||
<Color name="editor.color.field.checkbox_hover" value="#202020FF" />
|
||||
<Color name="editor.color.field.checkbox_border" value="#343434FF" />
|
||||
<Color name="editor.color.field.checkbox_mark" value="#D8D8D8FF" />
|
||||
<Color name="editor.color.field.dropdown_arrow" value="#D0D0D0FF" />
|
||||
|
||||
<Number name="editor.space.property.content_inset" value="6" />
|
||||
<Number name="editor.space.property.section_gap" value="4" />
|
||||
<Number name="editor.size.property.section_header" value="24" />
|
||||
<Number name="editor.size.property.field_row" value="24" />
|
||||
<Number name="editor.space.property.row_gap" value="1" />
|
||||
<Number name="editor.size.property.disclosure" value="10" />
|
||||
<Number name="editor.space.property.disclosure_label_gap" value="6" />
|
||||
<Number name="editor.space.property.section_inset_y" value="5" />
|
||||
<Number name="editor.space.property.disclosure_glyph_inset_x" value="1" />
|
||||
<Number name="editor.space.property.disclosure_glyph_inset_y" value="-1" />
|
||||
<Number name="editor.space.property.label_inset_y" value="5" />
|
||||
<Number name="editor.space.property.value_inset_y" value="4" />
|
||||
<Number name="editor.space.property.value_box_inset_y" value="2" />
|
||||
<Number name="editor.space.property.value_box_inset_x" value="6" />
|
||||
<Number name="editor.radius.property.panel" value="0" />
|
||||
<Number name="editor.radius.property.value" value="2" />
|
||||
<Number name="editor.border.property" value="1" />
|
||||
<Number name="editor.border.property.focus" value="1" />
|
||||
<Number name="editor.border.property.edit" value="1" />
|
||||
<Number name="editor.font.property.section" value="11" />
|
||||
<Number name="editor.font.property.disclosure" value="10" />
|
||||
<Number name="editor.font.property.label" value="11" />
|
||||
<Number name="editor.font.property.value" value="12" />
|
||||
<Number name="editor.font.property.tag" value="10" />
|
||||
<Color name="editor.color.property.surface" value="#232323FF" />
|
||||
<Color name="editor.color.property.border" value="#171717FF" />
|
||||
<Color name="editor.color.property.border_focus" value="#717171FF" />
|
||||
<Color name="editor.color.property.section" value="#2B2B2BFF" />
|
||||
<Color name="editor.color.property.section_hover" value="#313131FF" />
|
||||
<Color name="editor.color.property.field_hover" value="#262626FF" />
|
||||
<Color name="editor.color.property.field_selected" value="#303030FF" />
|
||||
<Color name="editor.color.property.field_selected_focused" value="#393939FF" />
|
||||
<Color name="editor.color.property.value" value="#1C1C1CFF" />
|
||||
<Color name="editor.color.property.value_hover" value="#222222FF" />
|
||||
<Color name="editor.color.property.value_editing" value="#292929FF" />
|
||||
<Color name="editor.color.property.value_readonly" value="#171717FF" />
|
||||
<Color name="editor.color.property.value_border" value="#343434FF" />
|
||||
<Color name="editor.color.property.value_border_editing" value="#767676FF" />
|
||||
<Color name="editor.color.property.disclosure" value="#C9C9C9FF" />
|
||||
<Color name="editor.color.property.section_text" value="#E2E2E2FF" />
|
||||
<Color name="editor.color.property.label" value="#CDCDCDFF" />
|
||||
<Color name="editor.color.property.value_text" value="#EFEFEFFF" />
|
||||
<Color name="editor.color.property.value_text_readonly" value="#8E8E8EFF" />
|
||||
<Color name="editor.color.property.edit_tag" value="#82A7DAFF" />
|
||||
|
||||
<Number name="editor.space.menu_popup.padding_x" value="6" />
|
||||
<Number name="editor.space.menu_popup.padding_y" value="5" />
|
||||
<Number name="editor.size.menu_popup.item" value="24" />
|
||||
<Number name="editor.size.menu_popup.separator" value="8" />
|
||||
<Number name="editor.size.menu_popup.check_column" value="16" />
|
||||
<Number name="editor.space.menu_popup.shortcut_gap" value="18" />
|
||||
<Number name="editor.size.menu_popup.submenu_indicator" value="12" />
|
||||
<Number name="editor.radius.menu_popup.row" value="3" />
|
||||
<Number name="editor.radius.menu_popup.surface" value="4" />
|
||||
<Number name="editor.space.menu_popup.label_inset_x" value="10" />
|
||||
<Number name="editor.space.menu_popup.label_inset_y" value="-1" />
|
||||
<Number name="editor.font.menu_popup.label" value="11" />
|
||||
<Number name="editor.space.menu_popup.shortcut_inset_right" value="18" />
|
||||
<Number name="editor.size.menu_popup.estimated_glyph_width" value="6" />
|
||||
<Number name="editor.font.menu_popup.glyph" value="10" />
|
||||
<Number name="editor.border.menu_popup.separator" value="1" />
|
||||
<Number name="editor.border.menu_popup.surface" value="1" />
|
||||
<Color name="editor.color.menu_popup.surface" value="#242424FF" />
|
||||
<Color name="editor.color.menu_popup.border" value="#343434FF" />
|
||||
<Color name="editor.color.menu_popup.item_hover" value="#2C2C2CFF" />
|
||||
<Color name="editor.color.menu_popup.item_open" value="#313131FF" />
|
||||
<Color name="editor.color.menu_popup.separator" value="#3A3A3AFF" />
|
||||
<Color name="editor.color.menu_popup.label" value="#E8E8E8FF" />
|
||||
<Color name="editor.color.menu_popup.text_muted" value="#B9B9B9FF" />
|
||||
<Color name="editor.color.menu_popup.text_disabled" value="#757575FF" />
|
||||
<Color name="editor.color.menu_popup.glyph" value="#D0D0D0FF" />
|
||||
</Tokens>
|
||||
|
||||
<Widgets>
|
||||
|
||||
Reference in New Issue
Block a user