Skip to content

Commit

Permalink
Redesign the graph editor for visual shaders
Browse files Browse the repository at this point in the history
  • Loading branch information
@Geometror
Geometror committed Feb 22, 2024
1 parent 16d6142 commit 02a33b6
Show file tree
Hide file tree
Showing 13 changed files with 440 additions and 65 deletions.
60 changes: 60 additions & 0 deletions doc/classes/EditorSettings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,66 @@
The color to use for the TileMap editor's grid.
[b]Note:[/b] Only effective if [member editors/tiles_editor/display_grid] is [code]true[/code].
</member>
<member name="editors/visual_editors/category_colors/color_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Color" category.
</member>
<member name="editors/visual_editors/category_colors/conditional_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Conditional" category.
</member>
<member name="editors/visual_editors/category_colors/input_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Input" category.
</member>
<member name="editors/visual_editors/category_colors/output_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Output" category.
</member>
<member name="editors/visual_editors/category_colors/particle_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Particle" category.
</member>
<member name="editors/visual_editors/category_colors/scalar_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Scalar" category.
</member>
<member name="editors/visual_editors/category_colors/special_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Special" category.
</member>
<member name="editors/visual_editors/category_colors/textures_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Textures" category.
</member>
<member name="editors/visual_editors/category_colors/transform_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Transform" category.
</member>
<member name="editors/visual_editors/category_colors/utility_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Utility" category.
</member>
<member name="editors/visual_editors/category_colors/vector_color" type="Color" setter="" getter="">
The color of a graph node's header when it belongs to the "Vector" category.
</member>
<member name="editors/visual_editors/color_theme" type="String" setter="" getter="">
The color theme to use in the visual shader editor.
</member>
<member name="editors/visual_editors/connection_colors/boolean_color" type="Color" setter="" getter="">
The color of a port/connection of boolean type.
</member>
<member name="editors/visual_editors/connection_colors/sampler_color" type="Color" setter="" getter="">
The color of a port/connection of sampler type.
</member>
<member name="editors/visual_editors/connection_colors/scalar_color" type="Color" setter="" getter="">
The color of a port/connection of scalar type (float, int, unsigned int).
</member>
<member name="editors/visual_editors/connection_colors/transform_color" type="Color" setter="" getter="">
The color of a port/connection of transform type.
</member>
<member name="editors/visual_editors/connection_colors/vector2_color" type="Color" setter="" getter="">
The color of a port/connection of Vector2 type.
</member>
<member name="editors/visual_editors/connection_colors/vector3_color" type="Color" setter="" getter="">
The color of a port/connection of Vector3 type.
</member>
<member name="editors/visual_editors/connection_colors/vector4_color" type="Color" setter="" getter="">
The color of a port/connection of Vector4 type.
</member>
<member name="editors/visual_editors/grid_pattern" type="int" setter="" getter="">
The pattern used for the background grid.
</member>
<member name="editors/visual_editors/lines_curvature" type="float" setter="" getter="">
The curvature to use for connection lines in the visual shader editor. Higher values will make connection lines appear more curved, with values above [code]0.5[/code] resulting in more "angular" turns in the middle of connection lines.
</member>
Expand Down
29 changes: 29 additions & 0 deletions editor/editor_settings.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -766,8 +766,13 @@ void EditorSettings::_load_defaults(Ref<ConfigFile> p_extra_config) {
_initial_set("editors/shader_editor/behavior/files/restore_shaders_on_load", true);

// Visual editors
EDITOR_SETTING(Variant::STRING, PROPERTY_HINT_ENUM, "editors/visual_editors/color_theme", "Default", "Default,Legacy,Custom")

_load_default_visual_shader_editor_theme();

EDITOR_SETTING(Variant::FLOAT, PROPERTY_HINT_RANGE, "editors/visual_editors/minimap_opacity", 0.85, "0.0,1.0,0.01")
EDITOR_SETTING(Variant::FLOAT, PROPERTY_HINT_RANGE, "editors/visual_editors/lines_curvature", 0.5, "0.0,1.0,0.01")
EDITOR_SETTING(Variant::INT, PROPERTY_HINT_ENUM, "editors/visual_editors/grid_pattern", 1, "Lines,Dots")
EDITOR_SETTING(Variant::INT, PROPERTY_HINT_RANGE, "editors/visual_editors/visual_shader/port_preview_size", 160, "100,400,0.01")

/* Run */
Expand Down Expand Up @@ -903,6 +908,30 @@ void EditorSettings::_load_godot2_text_editor_theme() {
_initial_set("text_editor/theme/highlighting/search_result_border_color", Color(0.41, 0.61, 0.91, 0.38));
}

void EditorSettings::_load_default_visual_shader_editor_theme() {
// Connection type colors
_initial_set("editors/visual_editors/connection_colors/scalar_color", Color(0.55, 0.55, 0.55));
_initial_set("editors/visual_editors/connection_colors/vector2_color", Color(0.44, 0.43, 0.64));
_initial_set("editors/visual_editors/connection_colors/vector3_color", Color(0.337, 0.314, 0.71));
_initial_set("editors/visual_editors/connection_colors/vector4_color", Color(0.7, 0.65, 0.147));
_initial_set("editors/visual_editors/connection_colors/boolean_color", Color(0.243, 0.612, 0.349));
_initial_set("editors/visual_editors/connection_colors/transform_color", Color(0.71, 0.357, 0.64));
_initial_set("editors/visual_editors/connection_colors/sampler_color", Color(0.659, 0.4, 0.137));

// Node category colors (used for the node headers)
_initial_set("editors/visual_editors/category_colors/output_color", Color(0.26, 0.10, 0.15));
_initial_set("editors/visual_editors/category_colors/color_color", Color(0.5, 0.5, 0.1));
_initial_set("editors/visual_editors/category_colors/conditional_color", Color(0.208, 0.522, 0.298));
_initial_set("editors/visual_editors/category_colors/input_color", Color(0.502, 0.2, 0.204));
_initial_set("editors/visual_editors/category_colors/scalar_color", Color(0.1, 0.5, 0.6));
_initial_set("editors/visual_editors/category_colors/textures_color", Color(0.5, 0.3, 0.1));
_initial_set("editors/visual_editors/category_colors/transform_color", Color(0.5, 0.3, 0.5));
_initial_set("editors/visual_editors/category_colors/utility_color", Color(0.2, 0.2, 0.2));
_initial_set("editors/visual_editors/category_colors/vector_color", Color(0.2, 0.2, 0.5));
_initial_set("editors/visual_editors/category_colors/special_color", Color(0.098, 0.361, 0.294));
_initial_set("editors/visual_editors/category_colors/particle_color", Color(0.12, 0.358, 0.8));
}

bool EditorSettings::_save_text_editor_theme(String p_file) {
String theme_section = "color_theme";
Ref<ConfigFile> cf = memnew(ConfigFile); // hex is better?
Expand Down
1 change: 1 addition & 0 deletions editor/editor_settings.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ class EditorSettings : public Resource {

void _load_defaults(Ref<ConfigFile> p_extra_config = Ref<ConfigFile>());
void _load_godot2_text_editor_theme();
void _load_default_visual_shader_editor_theme();
bool _save_text_editor_theme(String p_file);
bool _is_default_text_editor_theme(String p_theme_name);
const String _get_project_metadata_path() const;
Expand Down
2 changes: 2 additions & 0 deletions editor/editor_settings_dialog.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ void EditorSettingsDialog::_settings_property_edited(const String &p_name) {
EditorSettings::get_singleton()->set_manually("interface/theme/spacing_preset", "Custom");
} else if (full_name.begins_with("text_editor/theme/highlighting")) {
EditorSettings::get_singleton()->set_manually("text_editor/theme/color_theme", "Custom");
} else if (full_name.begins_with("editors/visual_editors/connection_colors") || full_name.begins_with("editors/visual_editors/category_colors")) {
EditorSettings::get_singleton()->set_manually("editors/visual_editors/color_theme", "Custom");
}
}

Expand Down
80 changes: 55 additions & 25 deletions editor/plugins/visual_shader_editor_plugin.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ void VisualShaderNodePlugin::_bind_methods() {
///////////////////

VisualShaderGraphPlugin::VisualShaderGraphPlugin() {
vs_msdf_fonts_theme.instantiate();
}

void VisualShaderGraphPlugin::_bind_methods() {
Expand Down Expand Up @@ -358,6 +359,13 @@ void VisualShaderGraphPlugin::update_theme() {
vector_expanded_color[1] = editor->get_theme_color(SNAME("axis_y_color"), EditorStringName(Editor)); // green
vector_expanded_color[2] = editor->get_theme_color(SNAME("axis_z_color"), EditorStringName(Editor)); // blue
vector_expanded_color[3] = editor->get_theme_color(SNAME("axis_w_color"), EditorStringName(Editor)); // alpha

Ref<Font> label_font = EditorNode::get_singleton()->get_editor_theme()->get_font("main_msdf", EditorStringName(EditorFonts));
Ref<Font> label_bold_font = EditorNode::get_singleton()->get_editor_theme()->get_font("main_bold_msdf", EditorStringName(EditorFonts));
vs_msdf_fonts_theme->set_font("font", "Label", label_font);
vs_msdf_fonts_theme->set_font("font", "GraphNodeTitleLabel", label_bold_font);
vs_msdf_fonts_theme->set_font("font", "LineEdit", label_font);
vs_msdf_fonts_theme->set_font("font", "Button", label_font);
}

bool VisualShaderGraphPlugin::is_node_has_parameter_instances_relatively(VisualShader::Type p_type, int p_node) const {
Expand Down Expand Up @@ -398,34 +406,35 @@ void VisualShaderGraphPlugin::add_node(VisualShader::Type p_type, int p_id, bool

Control *offset;

static const Color type_color[] = {
Color(0.38, 0.85, 0.96), // scalar (float)
Color(0.49, 0.78, 0.94), // scalar (int)
Color(0.20, 0.88, 0.67), // scalar (uint)
Color(0.74, 0.57, 0.95), // vector2
Color(0.84, 0.49, 0.93), // vector3
Color(1.0, 0.125, 0.95), // vector4
Color(0.55, 0.65, 0.94), // boolean
Color(0.96, 0.66, 0.43), // transform
Color(1.0, 1.0, 0.0), // sampler
const Color type_color[] = {
EDITOR_GET("editors/visual_editors/connection_colors/scalar_color"),
EDITOR_GET("editors/visual_editors/connection_colors/scalar_color"),
EDITOR_GET("editors/visual_editors/connection_colors/scalar_color"),
EDITOR_GET("editors/visual_editors/connection_colors/vector2_color"),
EDITOR_GET("editors/visual_editors/connection_colors/vector3_color"),
EDITOR_GET("editors/visual_editors/connection_colors/vector4_color"),
EDITOR_GET("editors/visual_editors/connection_colors/boolean_color"),
EDITOR_GET("editors/visual_editors/connection_colors/transform_color"),
EDITOR_GET("editors/visual_editors/connection_colors/sampler_color"),
};

static const String vector_expanded_name[4] = {
"red",
"green",
"blue",
"alpha"
// Keep in sync with VisualShaderNode::Category.
const Color category_color[VisualShaderNode::Category::CATEGORY_MAX] = {
Color(0.0, 0.0, 0.0), // None (default, not used)
EDITOR_GET("editors/visual_editors/category_colors/output_color"),
EDITOR_GET("editors/visual_editors/category_colors/color_color"),
EDITOR_GET("editors/visual_editors/category_colors/conditional_color"),
EDITOR_GET("editors/visual_editors/category_colors/input_color"),
EDITOR_GET("editors/visual_editors/category_colors/scalar_color"),
EDITOR_GET("editors/visual_editors/category_colors/textures_color"),
EDITOR_GET("editors/visual_editors/category_colors/transform_color"),
EDITOR_GET("editors/visual_editors/category_colors/utility_color"),
EDITOR_GET("editors/visual_editors/category_colors/vector_color"),
EDITOR_GET("editors/visual_editors/category_colors/special_color"),
EDITOR_GET("editors/visual_editors/category_colors/particle_color"),
};

// Visual shader specific theme for MSDF font.
Ref<Theme> vstheme;
vstheme.instantiate();
Ref<Font> label_font = EditorNode::get_singleton()->get_editor_theme()->get_font("main_msdf", EditorStringName(EditorFonts));
Ref<Font> label_bold_font = EditorNode::get_singleton()->get_editor_theme()->get_font("main_bold_msdf", EditorStringName(EditorFonts));
vstheme->set_font("font", "Label", label_font);
vstheme->set_font("font", "GraphNodeTitleLabel", label_bold_font);
vstheme->set_font("font", "LineEdit", label_font);
vstheme->set_font("font", "Button", label_font);
static const String vector_expanded_name[4] = { "red", "green", "blue", "alpha" };

Ref<VisualShaderNode> vsnode = visual_shader->get_node(p_type, p_id);

Expand Down Expand Up @@ -457,7 +466,18 @@ void VisualShaderGraphPlugin::add_node(VisualShader::Type p_type, int p_id, bool
node->connect("delete_request", callable_mp(editor, &VisualShaderEditor::_delete_node_request).bind(p_type, p_id), CONNECT_DEFERRED);
}
graph->add_child(node);
node->set_theme(vstheme);
node->set_theme(vs_msdf_fonts_theme);

// Set the node's titlebar color based on its category.
if (vsnode->get_category() != VisualShaderNode::CATEGORY_NONE) {
Ref<StyleBoxFlat> sb_colored = editor->get_theme_stylebox("titlebar", "GraphNode")->duplicate();
sb_colored->set_bg_color(category_color[vsnode->get_category()]);
node->add_theme_style_override("titlebar", sb_colored);

Ref<StyleBoxFlat> sb_colored_selected = editor->get_theme_stylebox("titlebar_selected", "GraphNode")->duplicate();
sb_colored_selected->set_bg_color(category_color[vsnode->get_category()].lightened(0.2));
node->add_theme_style_override("titlebar_selected", sb_colored_selected);
}

if (p_just_update) {
Link &link = links[p_id];
Expand Down Expand Up @@ -506,6 +526,11 @@ void VisualShaderGraphPlugin::add_node(VisualShader::Type p_type, int p_id, bool
port_offset += 1;
}

// Set the minimum width of a node based on the preview size to avoid a resize when toggling the preview.
Ref<StyleBoxFlat> graph_node_stylebox = graph->get_theme_stylebox("panel", "GraphNode");
int port_preview_size = EDITOR_GET("editors/visual_editors/visual_shader/port_preview_size");
node->set_custom_minimum_size(Size2((Math::ceil(graph_node_stylebox->get_minimum_size().width) + port_preview_size) * EDSCALE, 0));

Ref<VisualShaderNodeParticleEmit> emit = vsnode;
if (emit.is_valid()) {
node->set_custom_minimum_size(Size2(200 * EDSCALE, 0));
Expand Down Expand Up @@ -4313,7 +4338,9 @@ void VisualShaderEditor::_notification(int p_what) {
}
if (EditorSettings::get_singleton()->check_changed_settings_in_group("editors/visual_editors")) {
graph->set_minimap_opacity(EDITOR_GET("editors/visual_editors/minimap_opacity"));
graph->set_grid_pattern((GraphEdit::GridPattern) int(EDITOR_GET("editors/visual_editors/grid_pattern")));
graph->set_connection_lines_curvature(EDITOR_GET("editors/visual_editors/lines_curvature"));

_update_graph();
}
} break;
Expand Down Expand Up @@ -5424,6 +5451,9 @@ VisualShaderEditor::VisualShaderEditor() {
graph->get_menu_hbox()->set_h_size_flags(SIZE_EXPAND_FILL);
graph->set_v_size_flags(SIZE_EXPAND_FILL);
graph->set_h_size_flags(SIZE_EXPAND_FILL);
graph->set_grid_pattern(GraphEdit::GridPattern::GRID_PATTERN_DOTS);
int grid_pattern = EDITOR_GET("editors/visual_editors/grid_pattern");
graph->set_grid_pattern((GraphEdit::GridPattern)grid_pattern);
graph->set_show_zoom_label(true);
add_child(graph);
SET_DRAG_FORWARDING_GCD(graph, VisualShaderEditor);
Expand Down
3 changes: 3 additions & 0 deletions editor/plugins/visual_shader_editor_plugin.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,9 @@ class VisualShaderGraphPlugin : public RefCounted {

Color vector_expanded_color[4];

// Visual shader specific theme for using MSDF fonts (on GraphNodes) which reduce aliasing at higher zoom levels.
Ref<Theme> vs_msdf_fonts_theme;

protected:
static void _bind_methods();

Expand Down
Loading

0 comments on commit 02a33b6

Please sign in to comment.