Skip to content

Commit

Permalink
Merge pull request #82210 from YuriSizov/editor-animation-uiux-cleanup
Browse files Browse the repository at this point in the history 
Fix theme access and improve UX in AnimationTree editor
  • Loading branch information
@akien-mga
akien-mga committed Sep 24, 2023
2 parents 0b4959b + b351cff commit 37d5e1e
Show file tree
Hide file tree
Showing 9 changed files with 292 additions and 195 deletions.
62 changes: 49 additions & 13 deletions editor/editor_themes.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2014,17 +2014,6 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
graphn_sb_titlebar_selected->set_expand_margin(SIDE_TOP, 2 * EDSCALE);
Ref<StyleBoxEmpty> graphn_sb_slot = make_empty_stylebox(12, 0, 12, 0);

// StateMachine.
const int sm_margin_side = 10;
Ref<StyleBoxFlat> smgraphsb = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.7), sm_margin_side, 24, sm_margin_side, gn_margin_bottom, corner_width);
smgraphsb->set_border_width_all(border_width);
smgraphsb->set_border_color(graphnode_bg);
Ref<StyleBoxFlat> smgraphsbselected = make_flat_stylebox(graphnode_bg * Color(1, 1, 1, 0.9), sm_margin_side, 24, sm_margin_side, gn_margin_bottom, corner_width);
smgraphsbselected->set_border_width_all(2 * EDSCALE + border_width);
smgraphsbselected->set_border_color(Color(accent_color.r, accent_color.g, accent_color.b, 0.9));
smgraphsbselected->set_shadow_size(8 * EDSCALE);
smgraphsbselected->set_shadow_color(shadow_color);

theme->set_stylebox("panel", "GraphElement", graphn_sb_panel);
theme->set_stylebox("panel_selected", "GraphElement", graphn_sb_panel_selected);
theme->set_stylebox("titlebar", "GraphElement", graphn_sb_titlebar);
Expand Down Expand Up @@ -2059,8 +2048,55 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
port_icon->set_size_override(Size2(12, 12));
theme->set_icon("port", "GraphNode", port_icon);

theme->set_stylebox("state_machine_frame", "GraphNode", smgraphsb);
theme->set_stylebox("state_machine_selected_frame", "GraphNode", smgraphsbselected);
// StateMachine graph
theme->set_stylebox("panel", "GraphStateMachine", style_tree_bg);
theme->set_stylebox("error_panel", "GraphStateMachine", style_tree_bg);
theme->set_color("error_color", "GraphStateMachine", error_color);

const int sm_margin_side = 10 * EDSCALE;

Ref<StyleBoxFlat> sm_node_style = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.7), sm_margin_side, 24 * EDSCALE, sm_margin_side, gn_margin_bottom, corner_width);
sm_node_style->set_border_width_all(border_width);
sm_node_style->set_border_color(graphnode_bg);

Ref<StyleBoxFlat> sm_node_selected_style = make_flat_stylebox(graphnode_bg * Color(1, 1, 1, 0.9), sm_margin_side, 24 * EDSCALE, sm_margin_side, gn_margin_bottom, corner_width);
sm_node_selected_style->set_border_width_all(2 * EDSCALE + border_width);
sm_node_selected_style->set_border_color(accent_color * Color(1, 1, 1, 0.9));
sm_node_selected_style->set_shadow_size(8 * EDSCALE);
sm_node_selected_style->set_shadow_color(shadow_color);

Ref<StyleBoxFlat> sm_node_playing_style = sm_node_selected_style->duplicate();
sm_node_playing_style->set_border_color(warning_color);
sm_node_playing_style->set_shadow_color(warning_color * Color(1, 1, 1, 0.2));

theme->set_stylebox("node_frame", "GraphStateMachine", sm_node_style);
theme->set_stylebox("node_frame_selected", "GraphStateMachine", sm_node_selected_style);
theme->set_stylebox("node_frame_playing", "GraphStateMachine", sm_node_playing_style);

Ref<StyleBoxFlat> sm_node_start_style = sm_node_style->duplicate();
sm_node_start_style->set_border_width_all(1 * EDSCALE);
sm_node_start_style->set_border_color(success_color.lightened(0.24));
theme->set_stylebox("node_frame_start", "GraphStateMachine", sm_node_start_style);

Ref<StyleBoxFlat> sm_node_end_style = sm_node_style->duplicate();
sm_node_end_style->set_border_width_all(1 * EDSCALE);
sm_node_end_style->set_border_color(error_color);
theme->set_stylebox("node_frame_end", "GraphStateMachine", sm_node_end_style);

theme->set_font("node_title_font", "GraphStateMachine", theme->get_font(SNAME("font"), SNAME("Label")));
theme->set_font_size("node_title_font_size", "GraphStateMachine", theme->get_font_size(SNAME("font_size"), SNAME("Label")));
theme->set_color("node_title_font_color", "GraphStateMachine", font_color);

theme->set_color("transition_color", "GraphStateMachine", font_color);
theme->set_color("transition_disabled_color", "GraphStateMachine", font_color * Color(1, 1, 1, 0.2));
theme->set_color("transition_icon_color", "GraphStateMachine", Color(1, 1, 1));
theme->set_color("transition_icon_disabled_color", "GraphStateMachine", Color(1, 1, 1, 0.2));
theme->set_color("highlight_color", "GraphStateMachine", accent_color);
theme->set_color("highlight_disabled_color", "GraphStateMachine", accent_color * Color(1, 1, 1, 0.6));
theme->set_color("guideline_color", "GraphStateMachine", font_color * Color(1, 1, 1, 0.3));

theme->set_color("playback_color", "GraphStateMachine", font_color);
theme->set_color("playback_background_color", "GraphStateMachine", font_color * Color(1, 1, 1, 0.3));

// GridContainer
theme->set_constant("v_separation", "GridContainer", Math::round(widget_default_margin.y - 2 * EDSCALE));
Expand Down
15 changes: 5 additions & 10 deletions editor/gui/scene_tree_editor.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1564,14 +1564,6 @@ void SceneTreeDialog::set_valid_types(const Vector<StringName> &p_valid) {
show_all_nodes->show();
}

void SceneTreeDialog::_update_theme() {
filter->set_right_icon(tree->get_editor_theme_icon(SNAME("Search")));
for (TextureRect *trect : valid_type_icons) {
trect->set_custom_minimum_size(Vector2(get_theme_constant(SNAME("class_icon_size"), EditorStringName(Editor)), 0));
trect->set_texture(EditorNode::get_singleton()->get_class_icon(trect->get_meta("type")));
}
}

void SceneTreeDialog::_notification(int p_what) {
switch (p_what) {
case NOTIFICATION_VISIBILITY_CHANGED: {
Expand All @@ -1585,11 +1577,14 @@ void SceneTreeDialog::_notification(int p_what) {

case NOTIFICATION_ENTER_TREE: {
connect("confirmed", callable_mp(this, &SceneTreeDialog::_select));
_update_theme();
} break;

case NOTIFICATION_THEME_CHANGED: {
_update_theme();
filter->set_right_icon(get_editor_theme_icon(SNAME("Search")));
for (TextureRect *trect : valid_type_icons) {
trect->set_custom_minimum_size(Vector2(get_theme_constant(SNAME("class_icon_size"), EditorStringName(Editor)), 0));
trect->set_texture(EditorNode::get_singleton()->get_class_icon(trect->get_meta("type")));
}
} break;

case NOTIFICATION_EXIT_TREE: {
Expand Down
1 change: 0 additions & 1 deletion editor/gui/scene_tree_editor.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,6 @@ class SceneTreeDialog : public ConfirmationDialog {
void _selected_changed();
void _filter_changed(const String &p_filter);
void _show_all_nodes_changed(bool p_button_pressed);
void _update_theme();

protected:
void _notification(int p_what);
Expand Down
12 changes: 4 additions & 8 deletions editor/plugins/animation_blend_tree_editor_plugin.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,8 @@ void AnimationNodeBlendTreeEditor::update_graph() {
mb->get_popup()->connect("index_pressed", callable_mp(this, &AnimationNodeBlendTreeEditor::_anim_selected).bind(options, E), CONNECT_DEFERRED);
}

Ref<StyleBoxFlat> sb = node->get_theme_stylebox(SNAME("panel"), SNAME("GraphNode"));
// TODO: Avoid using strings, expose a method on GraphNode instead.
Ref<StyleBoxFlat> sb = node->get_theme_stylebox(SNAME("panel"));
Color c = sb->get_border_color();
Color mono_color = ((c.r + c.g + c.b) / 3) < 0.7 ? Color(1.0, 1.0, 1.0) : Color(0.0, 0.0, 0.0);
mono_color.a = 0.85;
Expand Down Expand Up @@ -831,24 +832,19 @@ void AnimationNodeBlendTreeEditor::_update_editor_settings() {
graph->set_warped_panning(bool(EDITOR_GET("editors/panning/warped_mouse_panning")));
}

void AnimationNodeBlendTreeEditor::_update_theme() {
error_panel->add_theme_style_override("panel", get_theme_stylebox(SNAME("panel"), SNAME("Tree")));
error_label->add_theme_color_override("font_color", get_theme_color(SNAME("error_color"), EditorStringName(Editor)));
}

void AnimationNodeBlendTreeEditor::_notification(int p_what) {
switch (p_what) {
case NOTIFICATION_ENTER_TREE: {
_update_editor_settings();
_update_theme();
} break;

case EditorSettings::NOTIFICATION_EDITOR_SETTINGS_CHANGED: {
_update_editor_settings();
} break;

case NOTIFICATION_THEME_CHANGED: {
_update_theme();
error_panel->add_theme_style_override("panel", get_theme_stylebox(SNAME("panel"), SNAME("Tree")));
error_label->add_theme_color_override("font_color", get_theme_color(SNAME("error_color"), EditorStringName(Editor)));

if (is_visible_in_tree()) {
update_graph();
Expand Down
1 change: 0 additions & 1 deletion editor/plugins/animation_blend_tree_editor_plugin.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,6 @@ class AnimationNodeBlendTreeEditor : public AnimationTreeNodeEditorPlugin {
void _property_changed(const StringName &p_property, const Variant &p_value, const String &p_field, bool p_changing);

void _update_editor_settings();
void _update_theme();

EditorFileDialog *open_file = nullptr;
Ref<AnimationNode> file_loaded;
Expand Down
Loading

0 comments on commit 37d5e1e

Please sign in to comment.