Improved VisualScriptEditor

editor/editor_settings.cpp

@@ -581,6 +581,7 @@ void EditorSettings::_load_defaults(Ref<ConfigFile> p_extra_config) {
 	hints["interface/theme/contrast"] = PropertyInfo(Variant::REAL, "interface/theme/contrast", PROPERTY_HINT_RANGE, "0.01, 1, 0.01");
 	set("interface/theme/highlight_tabs", false);
 	set("interface/theme/border_size", 1);
+	set("interface/theme/use_graph_node_headers", false);
 	hints["interface/theme/border_size"] = PropertyInfo(Variant::INT, "interface/theme/border_size", PROPERTY_HINT_RANGE, "0,2,1", PROPERTY_USAGE_DEFAULT | PROPERTY_USAGE_RESTART_IF_CHANGED);
 	set("interface/theme/custom_theme", "");
 	hints["interface/theme/custom_theme"] = PropertyInfo(Variant::STRING, "interface/theme/custom_theme", PROPERTY_HINT_GLOBAL_FILE, "*.res,*.tres,*.theme", PROPERTY_USAGE_DEFAULT | PROPERTY_USAGE_RESTART_IF_CHANGED);

editor/editor_themes.cpp

@@ -165,6 +165,9 @@ void editor_register_and_generate_icons(Ref<Theme> p_theme, bool dark_theme = tr
 	exceptions.push_back("ProceduralSky");
 	exceptions.push_back("EditorControlAnchor");
 	exceptions.push_back("DefaultProjectIcon");
+	exceptions.push_back("GuiCloseCustomizable");
+	exceptions.push_back("GuiGraphNodePort");
+	exceptions.push_back("GuiResizer");
 
 	clock_t begin_time = clock();
 
@@ -228,6 +231,8 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	bool highlight_tabs = EDITOR_DEF("interface/theme/highlight_tabs", false);
 	int border_size = EDITOR_DEF("interface/theme/border_size", 1);
 
+	bool use_gn_headers = EDITOR_DEF("interface/theme/use_graph_node_headers", false);
+
 	Color script_bg_color = EDITOR_DEF("text_editor/highlighting/background_color", Color(0, 0, 0, 0));
 
 	switch (preset) {
@@ -764,28 +769,40 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 
 	// GraphNode
 
-	Ref<StyleBoxFlat> graphsb = make_flat_stylebox(Color(0, 0, 0, 0.3), 16, 24, 16, 5);
+	const int gn_margin_side = 28;
+	Ref<StyleBoxFlat> graphsb = make_flat_stylebox(Color(0, 0, 0, 0.3), gn_margin_side, 24, gn_margin_side, 5);
 	graphsb->set_border_width_all(border_width);
-	graphsb->set_border_color_all(Color(1, 1, 1, 0.6));
-	graphsb->set_border_width(MARGIN_TOP, 22 * EDSCALE + border_width);
-	Ref<StyleBoxFlat> graphsbselected = make_flat_stylebox(Color(0, 0, 0, 0.4), 16, 24, 16, 5);
+	graphsb->set_border_color_all(Color(1, 1, 1, 0.9));
+	Ref<StyleBoxFlat> graphsbselected = make_flat_stylebox(Color(0, 0, 0, 0.4), gn_margin_side, 24, gn_margin_side, 5);
 	graphsbselected->set_border_width_all(border_width);
 	graphsbselected->set_border_color_all(Color(accent_color.r, accent_color.g, accent_color.b, 0.9));
 	graphsbselected->set_shadow_size(8 * EDSCALE);
 	graphsbselected->set_shadow_color(shadow_color);
-	graphsbselected->set_border_width(MARGIN_TOP, 22 * EDSCALE + border_width);
-	Ref<StyleBoxFlat> graphsbcomment = make_flat_stylebox(Color(0, 0, 0, 0.3), 16, 24, 16, 5);
+	Ref<StyleBoxFlat> graphsbcomment = make_flat_stylebox(Color(0, 0, 0, 0.3), gn_margin_side, 24, gn_margin_side, 5);
 	graphsbcomment->set_border_width_all(border_width);
-	graphsbcomment->set_border_color_all(Color(1, 1, 1, 0.6));
-	graphsbcomment->set_border_width(MARGIN_TOP, 22 * EDSCALE + border_width);
-	Ref<StyleBoxFlat> graphsbcommentselected = make_flat_stylebox(Color(0, 0, 0, 0.4), 16, 24, 16, 5);
+	graphsbcomment->set_border_color_all(Color(1, 1, 1, 0.9));
+	Ref<StyleBoxFlat> graphsbcommentselected = make_flat_stylebox(Color(0, 0, 0, 0.4), gn_margin_side, 24, gn_margin_side, 5);
 	graphsbcommentselected->set_border_width_all(border_width);
 	graphsbcommentselected->set_border_color_all(Color(1, 1, 1, 0.9));
-	graphsbcommentselected->set_border_width(MARGIN_TOP, 22 * EDSCALE + border_width);
+
+	if (use_gn_headers) {
+		graphsb->set_border_width(MARGIN_TOP, 24 * EDSCALE);
+		graphsbselected->set_border_width(MARGIN_TOP, 24 * EDSCALE);
+		graphsbcomment->set_border_width(MARGIN_TOP, 24 * EDSCALE);
+		graphsbcommentselected->set_border_width(MARGIN_TOP, 24 * EDSCALE);
+	}
+
 	theme->set_stylebox("frame", "GraphNode", graphsb);
 	theme->set_stylebox("selectedframe", "GraphNode", graphsbselected);
 	theme->set_stylebox("comment", "GraphNode", graphsbcomment);
 	theme->set_stylebox("commentfocus", "GraphNode", graphsbcommentselected);
+	theme->set_constant("port_offset", "GraphNode", 14 * EDSCALE);
+	theme->set_constant("title_h_offset", "GraphNode", -16 * EDSCALE);
+	theme->set_constant("close_h_offset", "GraphNode", 20 * EDSCALE);
+	theme->set_constant("close_offset", "GraphNode", 20 * EDSCALE);
+	theme->set_icon("close", "GraphNode", theme->get_icon("GuiCloseCustomizable", "EditorIcons"));
+	theme->set_icon("resizer", "GraphNode", theme->get_icon("GuiResizer", "EditorIcons"));
+	theme->set_icon("port", "GraphNode", theme->get_icon("GuiGraphNodePort", "EditorIcons"));
 
 	// FileDialog
 	theme->set_color("files_disabled", "FileDialog", font_color_disabled);

editor/icons/icon_gui_close_customizable.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<g transform="translate(0 -1036.4)">
+<path transform="translate(0 1036.4)" d="m3.7578 2.3438l-1.4141 1.4141 4.2422 4.2422-4.2422 4.2422 1.4141 1.4141 4.2422-4.2422 4.2422 4.2422 1.4141-1.4141-4.2422-4.2422 4.2422-4.2422-1.4141-1.4141-4.2422 4.2422-4.2422-4.2422z" fill="#fff" fill-opacity=".89804"/>
+</g>
+</svg>

editor/icons/icon_gui_graph_node_port.svg

@@ -0,0 +1,5 @@
+<svg width="10" height="10" version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+<g transform="translate(0 -1042.4)">
+<circle cx="5" cy="1047.4" r="5" fill="#fff" fill-rule="evenodd"/>
+</g>
+</svg>

editor/icons/icon_gui_resizer.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="m11 3c-0.55228 0-1 0.44772-1 1v6h-6c-0.55228 0-1 0.44772-1 1s0.44772 1 1 1h7c0.55226-5.5e-5 0.99994-0.44774 1-1v-7c0-0.55228-0.44772-1-1-1z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#fff" fill-opacity=".58824" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+</svg>

modules/visual_script/visual_script_editor.cpp

@@ -491,10 +491,6 @@ void VisualScriptEditor::_update_graph(int p_only_id) {
 			gnode->set_overlay(GraphNode::OVERLAY_BREAKPOINT);
 		}
 
-		if (node_styles.has(node->get_category())) {
-			gnode->add_style_override("frame", node_styles[node->get_category()]);
-		}
-
 		gnode->set_meta("__vnode", node);
 		gnode->set_name(itos(E->get()));
 		gnode->connect("dragged", this, "_node_moved", varray(E->get()));
@@ -527,6 +523,25 @@ void VisualScriptEditor::_update_graph(int p_only_id) {
 			gnode->connect("resize_request", this, "_comment_node_resized", varray(E->get()));
 		}
 
+		if (node_styles.has(node->get_category())) {
+			Ref<StyleBoxFlat> sbf = node_styles[node->get_category()];
+			if (gnode->is_comment())
+				sbf = EditorNode::get_singleton()->get_theme_base()->get_theme()->get_stylebox("comment", "GraphNode");
+
+			Color c = sbf->get_border_color(MARGIN_TOP);
+			c.a = 1;
+			if (EditorSettings::get_singleton()->get("interface/theme/use_graph_node_headers")) {
+				Color mono_color = ((c.r + c.g + c.b) / 3) < 0.5 ? Color(1.0, 1.0, 1.0) : Color(0, 0, 0);
+				mono_color.a = 0.85;
+				c = mono_color;
+			}
+
+			gnode->add_color_override("title_color", c);
+			c.a = 0.7;
+			gnode->add_color_override("close_color", c);
+			gnode->add_style_override("frame", sbf);
+		}
+
 		int slot_idx = 0;
 
 		bool single_seq_output = node->get_output_sequence_port_count() == 1 && node->get_output_sequence_port_text(0) == String();
@@ -2753,12 +2768,12 @@ void VisualScriptEditor::_notification(int p_what) {
 		signal_editor->connect("changed", this, "_update_members");
 
 		List<Pair<String, Color> > colors;
-		colors.push_back(Pair<String, Color>("functions", Color(1, 0.9, 0.9)));
-		colors.push_back(Pair<String, Color>("data", Color(0.9, 1.0, 0.9)));
-		colors.push_back(Pair<String, Color>("operators", Color(0.9, 0.9, 1.0)));
-		colors.push_back(Pair<String, Color>("flow_control", Color(1.0, 1.0, 1.0)));
-		colors.push_back(Pair<String, Color>("custom", Color(0.8, 1.0, 1.0)));
-		colors.push_back(Pair<String, Color>("constants", Color(1.0, 0.8, 1.0)));
+		colors.push_back(Pair<String, Color>("flow_control", Color::html("#f4f4f4")));
+		colors.push_back(Pair<String, Color>("functions", Color::html("#f58581")));
+		colors.push_back(Pair<String, Color>("data", Color::html("#80f6cf")));
+		colors.push_back(Pair<String, Color>("operators", Color::html("#ab97df")));
+		colors.push_back(Pair<String, Color>("custom", Color::html("#80bbf6")));
+		colors.push_back(Pair<String, Color>("constants", Color::html("#f680b0")));
 
 		for (List<Pair<String, Color> >::Element *E = colors.front(); E; E = E->next()) {
 			print_line(E->get().first);

scene/gui/graph_node.cpp

@@ -208,8 +208,11 @@ void GraphNode::_notification(int p_what) {
 		Ref<Texture> close = get_icon("close");
 		Ref<Texture> resizer = get_icon("resizer");
 		int close_offset = get_constant("close_offset");
+		int close_h_offset = get_constant("close_h_offset");
+		Color close_color = get_color("close_color");
 		Ref<Font> title_font = get_font("title_font");
 		int title_offset = get_constant("title_offset");
+		int title_h_offset = get_constant("title_h_offset");
 		Color title_color = get_color("title_color");
 		Point2i icofs = -port->get_size() * 0.5;
 		int edgeofs = get_constant("port_offset");
@@ -236,10 +239,10 @@ void GraphNode::_notification(int p_what) {
 		if (show_close)
 			w -= close->get_width();
 
-		draw_string(title_font, Point2(sb->get_margin(MARGIN_LEFT), -title_font->get_height() + title_font->get_ascent() + title_offset), title, title_color, w);
+		draw_string(title_font, Point2(sb->get_margin(MARGIN_LEFT) + title_h_offset, -title_font->get_height() + title_font->get_ascent() + title_offset), title, title_color, w);
 		if (show_close) {
-			Vector2 cpos = Point2(w + sb->get_margin(MARGIN_LEFT), -close->get_height() + close_offset);
-			draw_texture(close, cpos);
+			Vector2 cpos = Point2(w + sb->get_margin(MARGIN_LEFT) + close_h_offset, -close->get_height() + close_offset);
+			draw_texture(close, cpos, close_color);
 			close_rect.position = cpos;
 			close_rect.size = close->get_size();
 		} else {