From 6d876baf60d624d65737583c4d88d5c86c6e12cc Mon Sep 17 00:00:00 2001 From: Hendrik Brucker Date: Sat, 30 Apr 2022 03:56:57 +0200 Subject: Improve the VisualShader/VisualScript editor UI --- editor/editor_fonts.cpp | 80 +++++++++++++++++++++++++- editor/editor_settings.cpp | 1 + editor/editor_themes.cpp | 76 +++++++++++++++--------- editor/plugins/visual_shader_editor_plugin.cpp | 23 ++++++-- 4 files changed, 145 insertions(+), 35 deletions(-) (limited to 'editor') diff --git a/editor/editor_fonts.cpp b/editor/editor_fonts.cpp index 3e18499b97..51d4d474c5 100644 --- a/editor/editor_fonts.cpp +++ b/editor/editor_fonts.cpp @@ -110,6 +110,32 @@ m_name->set_spacing(TextServer::SPACING_BOTTOM, -EDSCALE); \ MAKE_FALLBACKS(m_name); +#define MAKE_DEFAULT_FONT_MSDF(m_name, m_variations) \ + Ref m_name; \ + m_name.instantiate(); \ + if (CustomFont.is_valid()) { \ + m_name->add_data(CustomFontMSDF); \ + m_name->add_data(DefaultFontMSDF); \ + } else { \ + m_name->add_data(DefaultFontMSDF); \ + } \ + { \ + Dictionary variations; \ + if (!m_variations.is_empty()) { \ + Vector variation_tags = m_variations.split(","); \ + for (int i = 0; i < variation_tags.size(); i++) { \ + Vector tokens = variation_tags[i].split("="); \ + if (tokens.size() == 2) { \ + variations[tokens[0]] = tokens[1].to_float(); \ + } \ + } \ + } \ + m_name->set_variation_coordinates(variations); \ + } \ + m_name->set_spacing(TextServer::SPACING_TOP, -EDSCALE); \ + m_name->set_spacing(TextServer::SPACING_BOTTOM, -EDSCALE); \ + MAKE_FALLBACKS(m_name); + #define MAKE_SLANTED_FONT(m_name, m_variations) \ Ref m_name; \ m_name.instantiate(); \ @@ -163,6 +189,32 @@ m_name->set_spacing(TextServer::SPACING_BOTTOM, -EDSCALE); \ MAKE_FALLBACKS_BOLD(m_name); +#define MAKE_BOLD_FONT_MSDF(m_name, m_variations) \ + Ref m_name; \ + m_name.instantiate(); \ + if (CustomFontBold.is_valid()) { \ + m_name->add_data(CustomFontBoldMSDF); \ + m_name->add_data(DefaultFontBoldMSDF); \ + } else { \ + m_name->add_data(DefaultFontBoldMSDF); \ + } \ + { \ + Dictionary variations; \ + if (!m_variations.is_empty()) { \ + Vector variation_tags = m_variations.split(","); \ + for (int i = 0; i < variation_tags.size(); i++) { \ + Vector tokens = variation_tags[i].split("="); \ + if (tokens.size() == 2) { \ + variations[tokens[0]] = tokens[1].to_float(); \ + } \ + } \ + } \ + m_name->set_variation_coordinates(variations); \ + } \ + m_name->set_spacing(TextServer::SPACING_TOP, -EDSCALE); \ + m_name->set_spacing(TextServer::SPACING_BOTTOM, -EDSCALE); \ + MAKE_FALLBACKS_BOLD(m_name); + #define MAKE_SOURCE_FONT(m_name, m_variations) \ Ref m_name; \ m_name.instantiate(); \ @@ -189,13 +241,14 @@ m_name->set_spacing(TextServer::SPACING_BOTTOM, -EDSCALE); \ MAKE_FALLBACKS(m_name); -Ref load_cached_external_font(const String &p_path, TextServer::Hinting p_hinting, bool p_aa, bool p_autohint, TextServer::SubpixelPositioning p_font_subpixel_positioning) { +Ref load_cached_external_font(const String &p_path, TextServer::Hinting p_hinting, bool p_aa, bool p_autohint, TextServer::SubpixelPositioning p_font_subpixel_positioning, bool p_msdf = false) { Ref font; font.instantiate(); Vector data = FileAccess::get_file_as_array(p_path); font->set_data(data); + font->set_multichannel_signed_distance_field(p_msdf); font->set_antialiased(p_aa); font->set_hinting(p_hinting); font->set_force_autohinter(p_autohint); @@ -204,11 +257,12 @@ Ref load_cached_external_font(const String &p_path, TextServer::Hintin return font; } -Ref load_cached_internal_font(const uint8_t *p_data, size_t p_size, TextServer::Hinting p_hinting, bool p_aa, bool p_autohint, TextServer::SubpixelPositioning p_font_subpixel_positioning) { +Ref load_cached_internal_font(const uint8_t *p_data, size_t p_size, TextServer::Hinting p_hinting, bool p_aa, bool p_autohint, TextServer::SubpixelPositioning p_font_subpixel_positioning, bool p_msdf = false) { Ref font; font.instantiate(); font->set_data_ptr(p_data, p_size); + font->set_multichannel_signed_distance_field(p_msdf); font->set_antialiased(p_aa); font->set_hinting(p_hinting); font->set_force_autohinter(p_autohint); @@ -261,6 +315,13 @@ void editor_register_fonts(Ref p_theme) { EditorSettings::get_singleton()->set_manually("interface/editor/main_font", ""); } + Ref CustomFontMSDF; + if (custom_font_path.length() > 0 && dir->file_exists(custom_font_path)) { + CustomFontMSDF = load_cached_external_font(custom_font_path, font_hinting, font_antialiased, true, font_subpixel_positioning, true); + } else { + EditorSettings::get_singleton()->set_manually("interface/editor/main_font", ""); + } + Ref CustomFontSlanted; if (CustomFont.is_valid()) { CustomFontSlanted = CustomFont->duplicate(); @@ -282,6 +343,13 @@ void editor_register_fonts(Ref p_theme) { CustomFontBold->set_embolden(embolden_strength); } + Ref CustomFontBoldMSDF; + if (custom_font_path.length() > 0 && dir->file_exists(custom_font_path)) { + CustomFontBoldMSDF = load_cached_external_font(custom_font_path, font_hinting, font_antialiased, true, font_subpixel_positioning, true); + } else { + EditorSettings::get_singleton()->set_manually("interface/editor/main_font_bold", ""); + } + /* Custom source code font */ String custom_font_path_source = EditorSettings::get_singleton()->get("interface/editor/code_font"); @@ -295,7 +363,9 @@ void editor_register_fonts(Ref p_theme) { /* Noto Sans */ Ref DefaultFont = load_cached_internal_font(_font_NotoSans_Regular, _font_NotoSans_Regular_size, font_hinting, font_antialiased, true, font_subpixel_positioning); + Ref DefaultFontMSDF = load_cached_internal_font(_font_NotoSans_Regular, _font_NotoSans_Regular_size, font_hinting, font_antialiased, true, font_subpixel_positioning, true); Ref DefaultFontBold = load_cached_internal_font(_font_NotoSans_Bold, _font_NotoSans_Bold_size, font_hinting, font_antialiased, true, font_subpixel_positioning); + Ref DefaultFontBoldMSDF = load_cached_internal_font(_font_NotoSans_Bold, _font_NotoSans_Bold_size, font_hinting, font_antialiased, true, font_subpixel_positioning, true); Ref FontArabic = load_cached_internal_font(_font_NotoNaskhArabicUI_Regular, _font_NotoNaskhArabicUI_Regular_size, font_hinting, font_antialiased, true, font_subpixel_positioning); Ref FontArabicBold = load_cached_internal_font(_font_NotoNaskhArabicUI_Bold, _font_NotoNaskhArabicUI_Bold_size, font_hinting, font_antialiased, true, font_subpixel_positioning); Ref FontBengali = load_cached_internal_font(_font_NotoSansBengaliUI_Regular, _font_NotoSansBengaliUI_Regular_size, font_hinting, font_antialiased, true, font_subpixel_positioning); @@ -347,12 +417,18 @@ void editor_register_fonts(Ref p_theme) { p_theme->set_font_size("main_size", "EditorFonts", default_font_size); p_theme->set_font("main", "EditorFonts", df); + MAKE_DEFAULT_FONT_MSDF(df_msdf, String()); + p_theme->set_font("main_msdf", "EditorFonts", df_msdf); + // Bold font MAKE_BOLD_FONT(df_bold, String()); MAKE_SLANTED_FONT(df_italic, String()); p_theme->set_font_size("bold_size", "EditorFonts", default_font_size); p_theme->set_font("bold", "EditorFonts", df_bold); + MAKE_BOLD_FONT_MSDF(df_bold_msdf, String()); + p_theme->set_font("main_bold_msdf", "EditorFonts", df_bold_msdf); + // Title font p_theme->set_font_size("title_size", "EditorFonts", default_font_size + 1 * EDSCALE); p_theme->set_font("title", "EditorFonts", df_bold); diff --git a/editor/editor_settings.cpp b/editor/editor_settings.cpp index bdabff20f9..7b2f703113 100644 --- a/editor/editor_settings.cpp +++ b/editor/editor_settings.cpp @@ -682,6 +682,7 @@ void EditorSettings::_load_defaults(Ref p_extra_config) { // Visual editors EDITOR_SETTING(Variant::FLOAT, PROPERTY_HINT_RANGE, "editors/visual_editors/minimap_opacity", 0.85, "0.0,1.0,0.01") + EDITOR_SETTING(Variant::INT, PROPERTY_HINT_RANGE, "editors/visual_editors/visualshader/port_preview_size", 160, "100,400,0.01") /* Run */ diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp index 0400aa74b5..92db4fce15 100644 --- a/editor/editor_themes.cpp +++ b/editor/editor_themes.cpp @@ -741,17 +741,28 @@ Ref create_editor_theme(const Ref p_theme) { theme->set_stylebox("pressed", "EditorLogFilterButton", editor_log_button_pressed); // OptionButton - theme->set_stylebox("focus", "OptionButton", style_widget_focus); - + Ref style_option_button_focus = style_widget_focus->duplicate(); + Ref style_option_button_normal = style_widget->duplicate(); + Ref style_option_button_hover = style_widget_hover->duplicate(); + Ref style_option_button_pressed = style_widget_pressed->duplicate(); + Ref style_option_button_disabled = style_widget_disabled->duplicate(); + + style_option_button_focus->set_default_margin(SIDE_RIGHT, 4 * EDSCALE); + style_option_button_normal->set_default_margin(SIDE_RIGHT, 4 * EDSCALE); + style_option_button_hover->set_default_margin(SIDE_RIGHT, 4 * EDSCALE); + style_option_button_pressed->set_default_margin(SIDE_RIGHT, 4 * EDSCALE); + style_option_button_disabled->set_default_margin(SIDE_RIGHT, 4 * EDSCALE); + + theme->set_stylebox("focus", "OptionButton", style_option_button_focus); theme->set_stylebox("normal", "OptionButton", style_widget); theme->set_stylebox("hover", "OptionButton", style_widget_hover); theme->set_stylebox("pressed", "OptionButton", style_widget_pressed); theme->set_stylebox("disabled", "OptionButton", style_widget_disabled); - theme->set_stylebox("normal_mirrored", "OptionButton", style_widget); - theme->set_stylebox("hover_mirrored", "OptionButton", style_widget_hover); - theme->set_stylebox("pressed_mirrored", "OptionButton", style_widget_pressed); - theme->set_stylebox("disabled_mirrored", "OptionButton", style_widget_disabled); + theme->set_stylebox("normal_mirrored", "OptionButton", style_option_button_normal); + theme->set_stylebox("hover_mirrored", "OptionButton", style_option_button_hover); + theme->set_stylebox("pressed_mirrored", "OptionButton", style_option_button_pressed); + theme->set_stylebox("disabled_mirrored", "OptionButton", style_option_button_disabled); theme->set_color("font_color", "OptionButton", font_color); theme->set_color("font_hover_color", "OptionButton", font_hover_color); @@ -1435,7 +1446,6 @@ Ref create_editor_theme(const Ref p_theme) { style_minimap_node = make_flat_stylebox(Color(0, 0, 0), 0, 0, 0, 0); } style_minimap_camera->set_border_width_all(1); - style_minimap_node->set_corner_radius_all(1); theme->set_stylebox("camera", "GraphEditMinimap", style_minimap_camera); theme->set_stylebox("node", "GraphEditMinimap", style_minimap_node); @@ -1450,20 +1460,26 @@ Ref create_editor_theme(const Ref p_theme) { theme->set_color("resizer_color", "GraphEditMinimap", minimap_resizer_color); // GraphNode - const int gn_margin_side = 28; + const int gn_margin_side = 2; + const int gn_margin_bottom = 2; - Ref graphsb = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.7), gn_margin_side, 24, gn_margin_side, 5, corner_width); + Color graphnode_bg = dark_color_3; + if (!dark_theme) { + graphnode_bg = prop_section_color; + } + + Ref graphsb = make_flat_stylebox(graphnode_bg.lerp(style_tree_bg->get_bg_color(), 0.3), gn_margin_side, 24, gn_margin_side, gn_margin_bottom, corner_width); graphsb->set_border_width_all(border_width); - graphsb->set_border_color(dark_color_3); - Ref graphsbselected = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.9), gn_margin_side, 24, gn_margin_side, 5, corner_width); + graphsb->set_border_color(graphnode_bg); + Ref graphsbselected = make_flat_stylebox(graphnode_bg * Color(1, 1, 1, 1), gn_margin_side, 24, gn_margin_side, gn_margin_bottom, corner_width); graphsbselected->set_border_width_all(2 * EDSCALE + border_width); - graphsbselected->set_border_color(Color(accent_color.r, accent_color.g, accent_color.b, 0.9)); - Ref graphsbcomment = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.3), gn_margin_side, 24, gn_margin_side, 5, corner_width); + graphsbselected->set_border_color(Color(accent_color.r, accent_color.g, accent_color.b, 0.6)); + Ref graphsbcomment = make_flat_stylebox(graphnode_bg * Color(1, 1, 1, 0.3), gn_margin_side, 24, gn_margin_side, gn_margin_bottom, corner_width); graphsbcomment->set_border_width_all(border_width); - graphsbcomment->set_border_color(dark_color_3); - Ref graphsbcommentselected = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.4), gn_margin_side, 24, gn_margin_side, 5, corner_width); + graphsbcomment->set_border_color(graphnode_bg); + Ref graphsbcommentselected = make_flat_stylebox(graphnode_bg * Color(1, 1, 1, 0.4), gn_margin_side, 24, gn_margin_side, gn_margin_bottom, corner_width); graphsbcommentselected->set_border_width_all(border_width); - graphsbcommentselected->set_border_color(dark_color_3); + graphsbcommentselected->set_border_color(graphnode_bg); Ref graphsbbreakpoint = graphsbselected->duplicate(); graphsbbreakpoint->set_draw_center(false); graphsbbreakpoint->set_border_color(warning_color); @@ -1472,10 +1488,11 @@ Ref create_editor_theme(const Ref p_theme) { graphsbposition->set_draw_center(false); graphsbposition->set_border_color(error_color); graphsbposition->set_shadow_color(error_color * Color(1.0, 1.0, 1.0, 0.2)); - Ref smgraphsb = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.7), gn_margin_side, 24, gn_margin_side, 5, corner_width); + Ref graphsbslot = make_empty_stylebox(12, 0, 12, 0); + Ref smgraphsb = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.7), gn_margin_side, 24, gn_margin_side, gn_margin_bottom, corner_width); smgraphsb->set_border_width_all(border_width); - smgraphsb->set_border_color(dark_color_3); - Ref smgraphsbselected = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.9), gn_margin_side, 24, gn_margin_side, 5, corner_width); + smgraphsb->set_border_color(graphnode_bg); + Ref smgraphsbselected = make_flat_stylebox(graphnode_bg * Color(1, 1, 1, 0.9), gn_margin_side, 24, gn_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); @@ -1492,19 +1509,20 @@ Ref create_editor_theme(const Ref p_theme) { theme->set_stylebox("comment_focus", "GraphNode", graphsbcommentselected); theme->set_stylebox("breakpoint", "GraphNode", graphsbbreakpoint); theme->set_stylebox("position", "GraphNode", graphsbposition); + theme->set_stylebox("slot", "GraphNode", graphsbslot); theme->set_stylebox("state_machine_frame", "GraphNode", smgraphsb); theme->set_stylebox("state_machine_selected_frame", "GraphNode", smgraphsbselected); - Color default_node_color = dark_color_1.inverted(); - theme->set_color("title_color", "GraphNode", default_node_color); - default_node_color.a = 0.7; - theme->set_color("close_color", "GraphNode", default_node_color); - theme->set_color("resizer_color", "GraphNode", default_node_color); + Color node_decoration_color = dark_color_1.inverted(); + theme->set_color("title_color", "GraphNode", node_decoration_color); + node_decoration_color.a = 0.7; + theme->set_color("close_color", "GraphNode", node_decoration_color); + theme->set_color("resizer_color", "GraphNode", node_decoration_color); - theme->set_constant("port_offset", "GraphNode", 14 * EDSCALE); - theme->set_constant("title_h_offset", "GraphNode", -16 * EDSCALE); - theme->set_constant("title_offset", "GraphNode", 20 * EDSCALE); - theme->set_constant("close_h_offset", "GraphNode", 20 * EDSCALE); + theme->set_constant("port_offset", "GraphNode", 0); + theme->set_constant("title_h_offset", "GraphNode", 12 * EDSCALE); + theme->set_constant("title_offset", "GraphNode", 21 * EDSCALE); + theme->set_constant("close_h_offset", "GraphNode", -2 * EDSCALE); theme->set_constant("close_offset", "GraphNode", 20 * EDSCALE); theme->set_constant("separation", "GraphNode", 1 * EDSCALE); @@ -1512,6 +1530,8 @@ Ref create_editor_theme(const Ref p_theme) { theme->set_icon("resizer", "GraphNode", theme->get_icon(SNAME("GuiResizer"), SNAME("EditorIcons"))); theme->set_icon("port", "GraphNode", theme->get_icon(SNAME("GuiGraphNodePort"), SNAME("EditorIcons"))); + theme->set_font("title_font", "GraphNode", theme->get_font(SNAME("main_bold_msdf"), SNAME("EditorFonts"))); + // GridContainer theme->set_constant("v_separation", "GridContainer", Math::round(widget_default_margin.y - 2 * EDSCALE)); diff --git a/editor/plugins/visual_shader_editor_plugin.cpp b/editor/plugins/visual_shader_editor_plugin.cpp index dc07ac7c39..641989bb63 100644 --- a/editor/plugins/visual_shader_editor_plugin.cpp +++ b/editor/plugins/visual_shader_editor_plugin.cpp @@ -148,6 +148,7 @@ void VisualShaderGraphPlugin::show_port_preview(VisualShader::Type p_type, int p if (links[p_node_id].preview_pos != -1) { links[p_node_id].graph_node->move_child(vbox, links[p_node_id].preview_pos); } + links[p_node_id].graph_node->set_slot_draw_stylebox(vbox->get_index(), false); Control *offset = memnew(Control); offset->set_custom_minimum_size(Size2(0, 5 * EDSCALE)); @@ -386,6 +387,14 @@ void VisualShaderGraphPlugin::add_node(VisualShader::Type p_type, int p_id) { "alpha" }; + // Visual shader specific theme for MSDF font. + Ref vstheme; + vstheme.instantiate(); + Ref label_font = EditorNode::get_singleton()->get_editor_theme()->get_font("main_msdf", "EditorFonts"); + vstheme->set_font("font", "Label", label_font); + vstheme->set_font("font", "LineEdit", label_font); + vstheme->set_font("font", "Button", label_font); + Ref vsnode = visual_shader->get_node(p_type, p_id); Ref resizable_node = Object::cast_to(vsnode.ptr()); @@ -406,8 +415,10 @@ void VisualShaderGraphPlugin::add_node(VisualShader::Type p_type, int p_id) { custom_node->_set_initialized(true); } + // Create graph node. GraphNode *node = memnew(GraphNode); graph->add_child(node); + node->set_theme(vstheme); editor->_update_created_node(node); register_link(p_type, p_id, vsnode.ptr(), node); @@ -942,12 +953,12 @@ void VisualShaderGraphPlugin::add_node(VisualShader::Type p_type, int p_id) { if (vsnode->get_output_port_for_preview() >= 0) { show_port_preview(p_type, p_id, vsnode->get_output_port_for_preview()); + } else { + offset = memnew(Control); + offset->set_custom_minimum_size(Size2(0, 4 * EDSCALE)); + node->add_child(offset); } - offset = memnew(Control); - offset->set_custom_minimum_size(Size2(0, 4 * EDSCALE)); - node->add_child(offset); - String error = vsnode->get_warning(mode, p_type); if (!error.is_empty()) { Label *error_label = memnew(Label); @@ -4652,6 +4663,7 @@ VisualShaderEditor::VisualShaderEditor() { graph->get_zoom_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_show_zoom_label(true); add_child(graph); graph->set_drag_forwarding(this); float graph_minimap_opacity = EditorSettings::get_singleton()->get("editors/visual_editors/minimap_opacity"); @@ -6252,7 +6264,8 @@ void VisualShaderNodePortPreview::setup(const Ref &p_shader, Visua } Size2 VisualShaderNodePortPreview::get_minimum_size() const { - return Size2(100, 100) * EDSCALE; + int port_preview_size = EditorSettings::get_singleton()->get("editors/visual_editors/visualshader/port_preview_size"); + return Size2(port_preview_size, port_preview_size) * EDSCALE; } void VisualShaderNodePortPreview::_notification(int p_what) { -- cgit v1.2.3