Add a focus border on ScrollContainer

Also added new unit tests for `Control`.

Co-authored-by: ator-dev <dominic.codedeveloper@gmail.com>
This commit is contained in:
Pablo Andres Fuente 2024-09-23 14:30:07 -03:00 committed by Pablo Andres Fuente
parent 0c45ace151
commit 86ea0127a3
9 changed files with 127 additions and 2 deletions

View File

@ -28,6 +28,8 @@
</method>
</methods>
<members>
<member name="draw_focus_border" type="bool" setter="set_draw_focus_border" getter="get_draw_focus_border" overrides="ScrollContainer" default="true" />
<member name="focus_mode" type="int" setter="set_focus_mode" getter="get_focus_mode" overrides="Control" enum="Control.FocusMode" default="2" />
<member name="follow_focus" type="bool" setter="set_follow_focus" getter="is_following_focus" overrides="ScrollContainer" default="true" />
<member name="horizontal_scroll_mode" type="int" setter="set_horizontal_scroll_mode" getter="get_horizontal_scroll_mode" overrides="ScrollContainer" enum="ScrollContainer.ScrollMode" default="0" />
</members>

View File

@ -40,6 +40,9 @@
</methods>
<members>
<member name="clip_contents" type="bool" setter="set_clip_contents" getter="is_clipping_contents" overrides="Control" default="true" />
<member name="draw_focus_border" type="bool" setter="set_draw_focus_border" getter="get_draw_focus_border" default="false">
If [code]true[/code], [theme_item focus] is drawn when the ScrollContainer or one of its descendant nodes is focused.
</member>
<member name="follow_focus" type="bool" setter="set_follow_focus" getter="is_following_focus" default="false">
If [code]true[/code], the ScrollContainer will automatically scroll to focused children (including indirect children) to make sure they are fully visible.
</member>
@ -107,6 +110,9 @@
</constant>
</constants>
<theme_items>
<theme_item name="focus" data_type="style" type="StyleBox">
The focus border [StyleBox] of the [ScrollContainer]. Only used if [member draw_focus_border] is [code]true[/code].
</theme_item>
<theme_item name="panel" data_type="style" type="StyleBox">
The background [StyleBox] of the [ScrollContainer].
</theme_item>

View File

@ -4662,6 +4662,7 @@ EditorInspector::EditorInspector() {
search_box = nullptr;
_prop_edited = "property_edited";
set_process(false);
set_focus_mode(FocusMode::FOCUS_ALL);
property_focusable = -1;
property_clipboard = Variant();
@ -4680,4 +4681,6 @@ EditorInspector::EditorInspector() {
// `use_settings_name_style` is true by default, set the name style accordingly.
set_property_name_style(EditorPropertyNameProcessor::get_singleton()->get_settings_style());
set_draw_focus_border(true);
}

View File

@ -3281,6 +3281,8 @@ void EditorPropertyResource::update_property() {
sub_inspector->set_read_only(is_read_only());
sub_inspector->set_use_folding(is_using_folding());
sub_inspector->set_draw_focus_border(false);
sub_inspector->set_mouse_filter(MOUSE_FILTER_STOP);
add_child(sub_inspector);
set_bottom_editor(sub_inspector);

View File

@ -1822,11 +1822,19 @@ void EditorThemeManager::_populate_editor_styles(const Ref<EditorTheme> &p_theme
// Editor focus.
p_theme->set_stylebox("Focus", EditorStringName(EditorStyles), p_config.button_style_focus);
// Use a less opaque color to be less distracting for the 2D and 3D editor viewports.
Ref<StyleBoxFlat> style_widget_focus_viewport = p_config.button_style_focus->duplicate();
// Make the focus outline appear to be flush with the buttons it's focusing, so not draw on top of the content.
style_widget_focus_viewport->set_expand_margin_all(2);
// Use a less opaque color to be less distracting for the 2D and 3D editor viewports.
style_widget_focus_viewport->set_border_color(p_config.accent_color * Color(1, 1, 1, 0.5));
p_theme->set_stylebox("FocusViewport", EditorStringName(EditorStyles), style_widget_focus_viewport);
Ref<StyleBoxFlat> style_widget_scroll_container = p_config.button_style_focus->duplicate();
// Make the focus outline appear to be flush with the buttons it's focusing, so not draw on top of the content.
style_widget_scroll_container->set_expand_margin_all(4);
p_theme->set_stylebox("focus", "ScrollContainer", style_widget_scroll_container);
// This stylebox is used in 3d and 2d viewports (no borders).
Ref<StyleBoxFlat> style_content_panel_vp = p_config.content_panel_style->duplicate();
style_content_panel_vp->set_content_margin_individual(p_config.border_width * 2, p_config.base_margin * EDSCALE, p_config.border_width * 2, p_config.border_width * 2);

View File

@ -281,6 +281,12 @@ void ScrollContainer::_gui_focus_changed(Control *p_control) {
if (follow_focus && is_ancestor_of(p_control)) {
ensure_control_visible(p_control);
}
if (draw_focus_border) {
const bool _should_draw_focus_border = has_focus() || child_has_focus();
if (focus_border_is_drawn != _should_draw_focus_border) {
queue_redraw();
}
}
}
void ScrollContainer::ensure_control_visible(Control *p_control) {
@ -366,6 +372,15 @@ void ScrollContainer::_notification(int p_what) {
case NOTIFICATION_DRAW: {
draw_style_box(theme_cache.panel_style, Rect2(Vector2(), get_size()));
if (draw_focus_border && (has_focus() || child_has_focus())) {
RID ci = get_canvas_item();
RenderingServer::get_singleton()->canvas_item_add_clip_ignore(ci, true);
draw_style_box(theme_cache.focus_style, Rect2(Point2(), get_size()));
RenderingServer::get_singleton()->canvas_item_add_clip_ignore(ci, false);
focus_border_is_drawn = true;
} else {
focus_border_is_drawn = false;
}
} break;
case NOTIFICATION_INTERNAL_PHYSICS_PROCESS: {
@ -602,10 +617,14 @@ void ScrollContainer::_bind_methods() {
ClassDB::bind_method(D_METHOD("get_v_scroll_bar"), &ScrollContainer::get_v_scroll_bar);
ClassDB::bind_method(D_METHOD("ensure_control_visible", "control"), &ScrollContainer::ensure_control_visible);
ClassDB::bind_method(D_METHOD("set_draw_focus_border", "draw"), &ScrollContainer::set_draw_focus_border);
ClassDB::bind_method(D_METHOD("get_draw_focus_border"), &ScrollContainer::get_draw_focus_border);
ADD_SIGNAL(MethodInfo("scroll_started"));
ADD_SIGNAL(MethodInfo("scroll_ended"));
ADD_PROPERTY(PropertyInfo(Variant::BOOL, "follow_focus"), "set_follow_focus", "is_following_focus");
ADD_PROPERTY(PropertyInfo(Variant::BOOL, "draw_focus_border"), "set_draw_focus_border", "get_draw_focus_border");
ADD_GROUP("Scroll", "scroll_");
ADD_PROPERTY(PropertyInfo(Variant::INT, "scroll_horizontal", PROPERTY_HINT_NONE, "suffix:px"), "set_h_scroll", "get_h_scroll");
@ -623,10 +642,28 @@ void ScrollContainer::_bind_methods() {
BIND_ENUM_CONSTANT(SCROLL_MODE_RESERVE);
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_STYLEBOX, ScrollContainer, panel_style, "panel");
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_STYLEBOX, ScrollContainer, focus_style, "focus");
GLOBAL_DEF("gui/common/default_scroll_deadzone", 0);
}
void ScrollContainer::set_draw_focus_border(bool p_draw) {
if (draw_focus_border == p_draw) {
return;
}
draw_focus_border = p_draw;
queue_redraw();
}
bool ScrollContainer::get_draw_focus_border() {
return draw_focus_border;
}
bool ScrollContainer::child_has_focus() {
const Control *focus_owner = get_viewport() ? get_viewport()->gui_get_focus_owner() : nullptr;
return focus_owner && is_ancestor_of(focus_owner);
}
ScrollContainer::ScrollContainer() {
h_scroll = memnew(HScrollBar);
h_scroll->set_name("_h_scroll");

View File

@ -72,6 +72,7 @@ private:
struct ThemeCache {
Ref<StyleBox> panel_style;
Ref<StyleBox> focus_style;
} theme_cache;
void _cancel_drag();
@ -79,6 +80,10 @@ private:
bool _is_h_scroll_visible() const;
bool _is_v_scroll_visible() const;
bool draw_focus_border = false;
bool focus_border_is_drawn = false;
bool child_has_focus();
protected:
Size2 get_minimum_size() const override;
@ -125,6 +130,9 @@ public:
PackedStringArray get_configuration_warnings() const override;
void set_draw_focus_border(bool p_draw);
bool get_draw_focus_border();
ScrollContainer();
};

View File

@ -157,7 +157,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
const Ref<StyleBoxFlat> button_pressed = make_flat_stylebox(style_pressed_color);
const Ref<StyleBoxFlat> button_disabled = make_flat_stylebox(style_disabled_color);
Ref<StyleBoxFlat> focus = make_flat_stylebox(style_focus_color, default_margin, default_margin, default_margin, default_margin, default_corner_radius, false, 2);
// Make the focus outline appear to be flush with the buttons it's focusing.
// Make the focus outline appear to be flush with the buttons it's focusing, so not draw on top of the content.
focus->set_expand_margin_all(Math::round(2 * scale));
theme->set_stylebox(CoreStringName(normal), "Button", button_normal);
@ -659,6 +659,14 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
empty.instantiate();
theme->set_stylebox(SceneStringName(panel), "ScrollContainer", empty);
const Ref<StyleBoxFlat> focus_style = make_flat_stylebox(style_focus_color);
// Make the focus outline appear to be flush with the buttons it's focusing, so not draw on top of the content.
sb_expand(focus_style, 4, 4, 4, 4);
focus_style->set_border_width_all(Math::round(2 * scale));
focus_style->set_draw_center(false);
focus_style->set_border_color(style_focus_color);
theme->set_stylebox("focus", "ScrollContainer", focus_style);
// Window
theme->set_stylebox("embedded_border", "Window", sb_expand(make_flat_stylebox(style_popup_color, 10, 28, 10, 8), 8, 32, 8, 6));

View File

@ -61,6 +61,57 @@ TEST_CASE("[SceneTree][Control]") {
}
}
TEST_CASE("[SceneTree][Control] Focus") {
Control *ctrl = memnew(Control);
SceneTree::get_singleton()->get_root()->add_child(ctrl);
SUBCASE("[SceneTree][Control] Default focus") {
CHECK_FALSE(ctrl->has_focus());
}
SUBCASE("[SceneTree][Control] Can't grab focus with default focus mode") {
ERR_PRINT_OFF
ctrl->grab_focus();
ERR_PRINT_ON
CHECK_FALSE(ctrl->has_focus());
}
SUBCASE("[SceneTree][Control] Can grab focus") {
ctrl->set_focus_mode(Control::FocusMode::FOCUS_ALL);
ctrl->grab_focus();
CHECK(ctrl->has_focus());
}
SUBCASE("[SceneTree][Control] Can release focus") {
ctrl->set_focus_mode(Control::FocusMode::FOCUS_ALL);
ctrl->grab_focus();
CHECK(ctrl->has_focus());
ctrl->release_focus();
CHECK_FALSE(ctrl->has_focus());
}
SUBCASE("[SceneTree][Control] Only one can grab focus at the same time") {
ctrl->set_focus_mode(Control::FocusMode::FOCUS_ALL);
ctrl->grab_focus();
CHECK(ctrl->has_focus());
Control *other_ctrl = memnew(Control);
SceneTree::get_singleton()->get_root()->add_child(other_ctrl);
other_ctrl->set_focus_mode(Control::FocusMode::FOCUS_ALL);
other_ctrl->grab_focus();
CHECK(other_ctrl->has_focus());
CHECK_FALSE(ctrl->has_focus());
memdelete(other_ctrl);
}
memdelete(ctrl);
}
} // namespace TestControl
#endif // TEST_CONTROL_H