Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix theme access and improve UX in AnimationTree editor #82210

Merged
merged 1 commit into from
Sep 24, 2023
Merged

Fix theme access and improve UX in AnimationTree editor #82210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 49 additions & 13 deletions editor/editor_themes.cpp
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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