Improve the VisualShader/VisualScript editor UI

4 files changed, 145 insertions, 35 deletions

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<Font> 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<String> variation_tags = m_variations.split(",");  \
+			for (int i = 0; i < variation_tags.size(); i++) {         \
+				Vector<String> 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<Font> 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<Font> 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<String> variation_tags = m_variations.split(",");  \
+			for (int i = 0; i < variation_tags.size(); i++) {         \
+				Vector<String> 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<Font> m_name;                                                 \
 	m_name.instantiate();                                             \
@@ -189,13 +241,14 @@
 	m_name->set_spacing(TextServer::SPACING_BOTTOM, -EDSCALE);        \
 	MAKE_FALLBACKS(m_name);
 
-Ref<FontData> 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<FontData> 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<FontData> font;
 	font.instantiate();
 
 	Vector<uint8_t> 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<FontData> load_cached_external_font(const String &p_path, TextServer::Hintin
 	return font;
 }
 
-Ref<FontData> 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<FontData> 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<FontData> 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<Theme> p_theme) {
 		EditorSettings::get_singleton()->set_manually("interface/editor/main_font", "");
 	}
 
+	Ref<FontData> 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<FontData> CustomFontSlanted;
 	if (CustomFont.is_valid()) {
 		CustomFontSlanted = CustomFont->duplicate();
@@ -282,6 +343,13 @@ void editor_register_fonts(Ref<Theme> p_theme) {
 		CustomFontBold->set_embolden(embolden_strength);
 	}
 
+	Ref<FontData> 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<Theme> p_theme) {
 	/* Noto Sans */
 
 	Ref<FontData> DefaultFont = load_cached_internal_font(_font_NotoSans_Regular, _font_NotoSans_Regular_size, font_hinting, font_antialiased, true, font_subpixel_positioning);
+	Ref<FontData> DefaultFontMSDF = load_cached_internal_font(_font_NotoSans_Regular, _font_NotoSans_Regular_size, font_hinting, font_antialiased, true, font_subpixel_positioning, true);
 	Ref<FontData> DefaultFontBold = load_cached_internal_font(_font_NotoSans_Bold, _font_NotoSans_Bold_size, font_hinting, font_antialiased, true, font_subpixel_positioning);
+	Ref<FontData> DefaultFontBoldMSDF = load_cached_internal_font(_font_NotoSans_Bold, _font_NotoSans_Bold_size, font_hinting, font_antialiased, true, font_subpixel_positioning, true);
 	Ref<FontData> FontArabic = load_cached_internal_font(_font_NotoNaskhArabicUI_Regular, _font_NotoNaskhArabicUI_Regular_size, font_hinting, font_antialiased, true, font_subpixel_positioning);
 	Ref<FontData> FontArabicBold = load_cached_internal_font(_font_NotoNaskhArabicUI_Bold, _font_NotoNaskhArabicUI_Bold_size, font_hinting, font_antialiased, true, font_subpixel_positioning);
 	Ref<FontData> 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<Theme> 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<ConfigFile> 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<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_stylebox("pressed", "EditorLogFilterButton", editor_log_button_pressed);
 
 	// OptionButton
-	theme->set_stylebox("focus", "OptionButton", style_widget_focus);
-
+	Ref<StyleBoxFlat> style_option_button_focus = style_widget_focus->duplicate();
+	Ref<StyleBoxFlat> style_option_button_normal = style_widget->duplicate();
+	Ref<StyleBoxFlat> style_option_button_hover = style_widget_hover->duplicate();
+	Ref<StyleBoxFlat> style_option_button_pressed = style_widget_pressed->duplicate();
+	Ref<StyleBoxFlat> 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<Theme> create_editor_theme(const Ref<Theme> 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<Theme> create_editor_theme(const Ref<Theme> 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<StyleBoxFlat> 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<StyleBoxFlat> 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<StyleBoxFlat> 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<StyleBoxFlat> 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<StyleBoxFlat> 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<StyleBoxFlat> 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<StyleBoxFlat> 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<StyleBoxFlat> 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<StyleBoxFlat> graphsbbreakpoint = graphsbselected->duplicate();
 	graphsbbreakpoint->set_draw_center(false);
 	graphsbbreakpoint->set_border_color(warning_color);
@@ -1472,10 +1488,11 @@ Ref<Theme> create_editor_theme(const Ref<Theme> 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<StyleBoxFlat> smgraphsb = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.7), gn_margin_side, 24, gn_margin_side, 5, corner_width);
+	Ref<StyleBoxEmpty> graphsbslot = make_empty_stylebox(12, 0, 12, 0);
+	Ref<StyleBoxFlat> 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<StyleBoxFlat> 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<StyleBoxFlat> 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<Theme> create_editor_theme(const Ref<Theme> 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<Theme> create_editor_theme(const Ref<Theme> 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<Theme> vstheme;
+	vstheme.instantiate();
+	Ref<Font> 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<VisualShaderNode> vsnode = visual_shader->get_node(p_type, p_id);
 
 	Ref<VisualShaderNodeResizableBase> resizable_node = Object::cast_to<VisualShaderNodeResizableBase>(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<VisualShader> &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) {