Node Editor: Style update to nodes

This patch changes how nodes look visually, in an attempt to fix a number of issues:
* The header background is currently drawn using a theme color fully opaque, this limits the colors we can use because the node name/label is drawn on top.
* Hard-coded transparency makes nodes hard to read. The node backdrop already has alpha so if the user wants it they can set it. This patch uses alpha from the theme.
* Better muted status indicator, instead of simply making everything transparent and the wires inside red, draw a red outline around the node, darken the header and backdrop.
* On muted nodes, display wires behind the backdrop to not interfere with text/widgets inside the node.

Nodes:

* Darken header to improve readability of node label.
* Draw a line under the header
* Thicker outline.
* Do not hard-code transparency on nodes, use the theme's node backdrop alpha component.
* Use angle icon instead of triangle (to be consistent with the [[ https://developer.blender.org/D12814 | changes ]] to panels)

Style adjustment to sockets drawing:

* Do not hard-code the socket outline color to black, use `TH_WIRE` instead
* Do not use `TH_TEXT_HI` for selected sockets, use `TH_ACTIVE` (active node outline)
* Do not draw sockets background transparent on muted nodes.
* Thicker outline to help contrast and readability

{F11496707, size=full}

Reviewed By: #user_interface, HooglyBoogly

Differential Revision: https://developer.blender.org/D12884

2 files changed, 196 insertions, 136 deletions

diff --git a/source/blender/editors/space_node/node_draw.cc b/source/blender/editors/space_node/node_draw.cc
index b7f1209905e..429c53d6740 100644
--- a/source/blender/editors/space_node/node_draw.cc
+++ b/source/blender/editors/space_node/node_draw.cc
@@ -730,7 +730,7 @@ static void node_draw_mute_line(const View2D *v2d, const SpaceNode *snode, const
   GPU_blend(GPU_BLEND_ALPHA);
 
   LISTBASE_FOREACH (const bNodeLink *, link, &node->internal_links) {
-    node_draw_link_bezier(v2d, snode, link, TH_REDALERT, TH_REDALERT, -1);
+    node_draw_link_bezier(v2d, snode, link, TH_WIRE_INNER, TH_WIRE_INNER, TH_WIRE);
   }
 
   GPU_blend(GPU_BLEND_NONE);
@@ -809,12 +809,10 @@ static void node_socket_outline_color_get(const bool selected,
                                           float r_outline_color[4])
 {
   if (selected) {
-    UI_GetThemeColor4fv(TH_TEXT_HI, r_outline_color);
-    r_outline_color[3] = 0.9f;
+    UI_GetThemeColor4fv(TH_ACTIVE, r_outline_color);
   }
   else {
-    copy_v4_fl(r_outline_color, 0.0f);
-    r_outline_color[3] = 0.6f;
+    UI_GetThemeColor4fv(TH_WIRE, r_outline_color);
   }
 
   /* Until there is a better place for per socket color,
@@ -834,11 +832,6 @@ void node_socket_color_get(
   RNA_pointer_create((ID *)ntree, &RNA_NodeSocket, sock, &ptr);
 
   sock->typeinfo->draw_color(C, &ptr, node_ptr, r_color);
-
-  bNode *node = (bNode *)node_ptr->data;
-  if (node->flag & NODE_MUTED) {
-    r_color[3] *= 0.25f;
-  }
 }
 
 struct SocketTooltipData {
@@ -1174,7 +1167,7 @@ void ED_node_socket_draw(bNodeSocket *sock, const rcti *rect, const float color[
   GPU_program_point_size(true);
 
   immBindBuiltinProgram(GPU_SHADER_KEYFRAME_SHAPE);
-  immUniform1f("outline_scale", 0.7f);
+  immUniform1f("outline_scale", 1.0f);
   immUniform2f("ViewportSize", -1.0f, -1.0f);
 
   /* Single point. */
@@ -1319,7 +1312,7 @@ void node_draw_sockets(const View2D *v2d,
   GPU_blend(GPU_BLEND_ALPHA);
   GPU_program_point_size(true);
   immBindBuiltinProgram(GPU_SHADER_KEYFRAME_SHAPE);
-  immUniform1f("outline_scale", 0.7f);
+  immUniform1f("outline_scale", 1.0f);
   immUniform2f("ViewportSize", -1.0f, -1.0f);
 
   /* Set handle size. */
@@ -1613,24 +1606,13 @@ static void node_draw_basis(const bContext *C,
   /* Shadow. */
   node_draw_shadow(snode, node, BASIS_RAD, 1.0f);
 
+  rctf *rct = &node->totr;
   float color[4];
   int color_id = node_get_colorid(node);
-  if (node->flag & NODE_MUTED) {
-    /* Muted nodes are semi-transparent and colorless. */
-    UI_GetThemeColor3fv(TH_NODE, color);
-    color[3] = 0.25f;
-  }
-  else {
-    /* Opaque headers for regular nodes. */
-    UI_GetThemeColor3fv(color_id, color);
-    color[3] = 1.0f;
-  }
 
   GPU_line_width(1.0f);
 
-  rctf *rct = &node->totr;
-  UI_draw_roundbox_corner_set(UI_CNR_TOP_LEFT | UI_CNR_TOP_RIGHT);
-
+  /* Header. */
   {
     const rctf rect = {
         rct->xmin,
@@ -1638,7 +1620,19 @@ static void node_draw_basis(const bContext *C,
         rct->ymax - NODE_DY,
         rct->ymax,
     };
-    UI_draw_roundbox_aa(&rect, true, BASIS_RAD, color);
+
+    float color_header[4];
+
+    /* Muted nodes get a mix of the background with the node color. */
+    if (node->flag & NODE_MUTED) {
+      UI_GetThemeColorBlendShade4fv(TH_BACK, color_id, 0.1f, 0, color_header);
+    }
+    else {
+      UI_GetThemeColorBlendShade4fv(TH_NODE, color_id, 0.6f, -40, color_header);
+    }
+
+    UI_draw_roundbox_corner_set(UI_CNR_TOP_LEFT | UI_CNR_TOP_RIGHT);
+    UI_draw_roundbox_4fv(&rect, true, BASIS_RAD, color_header);
   }
 
   /* Show/hide icons. */
@@ -1721,31 +1715,28 @@ static void node_draw_basis(const bContext *C,
     UI_GetThemeColorBlendShade4fv(TH_SELECT, color_id, 0.4f, 10, color);
   }
 
-  /* Open/close entirely. */
+  /* Collapse/expand icon. */
   {
-    int but_size = U.widget_unit * 0.8f;
-    /* XXX button uses a custom triangle draw below, so make it invisible without icon. */
+    const int but_size = U.widget_unit * 0.8f;
     UI_block_emboss_set(node->block, UI_EMBOSS_NONE);
-    uiBut *but = uiDefBut(node->block,
-                          UI_BTYPE_BUT_TOGGLE,
-                          0,
-                          "",
-                          rct->xmin + 0.35f * U.widget_unit,
-                          rct->ymax - NODE_DY / 2.2f - but_size / 2,
-                          but_size,
-                          but_size,
-                          nullptr,
-                          0,
-                          0,
-                          0,
-                          0,
-                          "");
+
+    uiBut *but = uiDefIconBut(node->block,
+                              UI_BTYPE_BUT_TOGGLE,
+                              0,
+                              ICON_DOWNARROW_HLT,
+                              rct->xmin + (NODE_MARGIN_X / 3),
+                              rct->ymax - NODE_DY / 2.2f - but_size / 2,
+                              but_size,
+                              but_size,
+                              nullptr,
+                              0.0f,
+                              0.0f,
+                              0.0f,
+                              0.0f,
+                              "");
+
     UI_but_func_set(but, node_toggle_button_cb, node, (void *)"NODE_OT_hide_toggle");
     UI_block_emboss_set(node->block, UI_EMBOSS);
-
-    UI_GetThemeColor4fv(TH_TEXT, color);
-    /* Custom draw function for this button. */
-    UI_draw_icon_tri(rct->xmin + 0.65f * U.widget_unit, rct->ymax - NODE_DY / 2.2f, 'v', color);
   }
 
   char showname[128];
@@ -1755,7 +1746,7 @@ static void node_draw_basis(const bContext *C,
                         UI_BTYPE_LABEL,
                         0,
                         showname,
-                        (int)(rct->xmin + NODE_MARGIN_X),
+                        (int)(rct->xmin + NODE_MARGIN_X + 0.4f),
                         (int)(rct->ymax - NODE_DY),
                         (short)(iconofs - rct->xmin - (18.0f * U.dpi_fac)),
                         (short)NODE_DY,
@@ -1769,49 +1760,97 @@ static void node_draw_basis(const bContext *C,
     UI_but_flag_enable(but, UI_BUT_INACTIVE);
   }
 
+  /* Wire across the node when muted/disabled. */
+  if (node->flag & NODE_MUTED) {
+    node_draw_mute_line(v2d, snode, node);
+  }
+
   /* Body. */
-  if (nodeTypeUndefined(node)) {
+  const float outline_width = 1.0f;
+  {
     /* Use warning color to indicate undefined types. */
-    UI_GetThemeColor4fv(TH_REDALERT, color);
-  }
-  else if (node->flag & NODE_MUTED) {
-    /* Muted nodes are semi-transparent and colorless. */
-    UI_GetThemeColor4fv(TH_NODE, color);
-  }
-  else if (node->flag & NODE_CUSTOM_COLOR) {
-    rgba_float_args_set(color, node->color[0], node->color[1], node->color[2], 1.0f);
-  }
-  else {
-    UI_GetThemeColor4fv(TH_NODE, color);
-  }
+    if (nodeTypeUndefined(node)) {
+      UI_GetThemeColorBlendShade4fv(TH_REDALERT, color_id, 0.05f, -80, color);
+    }
+    /* Muted nodes get a mix of the background with the node color. */
+    else if (node->flag & NODE_MUTED) {
+      UI_GetThemeColorBlendShade4fv(TH_BACK, TH_NODE, 0.33f, 0, color);
+    }
+    else if (node->flag & NODE_CUSTOM_COLOR) {
+      rgba_float_args_set(color, node->color[0], node->color[1], node->color[2], 1.0f);
+    }
+    else {
+      UI_GetThemeColor4fv(TH_NODE, color);
+    }
 
-  if (node->flag & NODE_MUTED) {
-    color[3] = 0.5f;
+    /* Draw selected nodes fully opaque. */
+    if (node->flag & SELECT) {
+      color[3] = 1.0f;
+    }
+
+    /* Draw muted nodes slightly transparent so the wires inside are visible. */
+    if (node->flag & NODE_MUTED) {
+      color[3] -= 0.2f;
+    }
+
+    const rctf rect = {
+        rct->xmin,
+        rct->xmax,
+        rct->ymin,
+        rct->ymax - (NODE_DY + outline_width),
+    };
+
+    UI_draw_roundbox_corner_set(UI_CNR_BOTTOM_LEFT | UI_CNR_BOTTOM_RIGHT);
+    UI_draw_roundbox_4fv(&rect, true, BASIS_RAD, color);
   }
 
+  /* Header underline. */
   {
-    UI_draw_roundbox_corner_set(UI_CNR_BOTTOM_LEFT | UI_CNR_BOTTOM_RIGHT);
+    float color_underline[4];
+
+    if (node->flag & NODE_MUTED) {
+      UI_GetThemeColor4fv(TH_WIRE, color_underline);
+    }
+    else {
+      UI_GetThemeColorBlendShade4fv(TH_BACK, color_id, 0.4f, -30, color_underline);
+      color_underline[3] = 1.0f;
+    }
+
     const rctf rect = {
         rct->xmin,
         rct->xmax,
-        rct->ymin,
+        rct->ymax - (NODE_DY + outline_width),
         rct->ymax - NODE_DY,
     };
-    UI_draw_roundbox_aa(&rect, true, BASIS_RAD, color);
+
+    UI_draw_roundbox_corner_set(UI_CNR_NONE);
+    UI_draw_roundbox_4fv(&rect, true, 0.0f, color_underline);
   }
 
-  /* Outline active and selected emphasis. */
-  if (node->flag & SELECT) {
-    UI_GetThemeColorShadeAlpha4fv(
-        (node->flag & NODE_ACTIVE) ? TH_ACTIVE : TH_SELECT, 0, -40, color);
+  /* Outline. */
+  {
+    const rctf rect = {
+        rct->xmin - outline_width,
+        rct->xmax + outline_width,
+        rct->ymin - outline_width,
+        rct->ymax + outline_width,
+    };
 
-    UI_draw_roundbox_corner_set(UI_CNR_ALL);
-    UI_draw_roundbox_aa(rct, false, BASIS_RAD, color);
-  }
+    /* Color the outline according to active, selected, or undefined status. */
+    float color_outline[4];
 
-  /* Disable lines. */
-  if (node->flag & NODE_MUTED) {
-    node_draw_mute_line(v2d, snode, node);
+    if (node->flag & SELECT) {
+      UI_GetThemeColor4fv((node->flag & NODE_ACTIVE) ? TH_ACTIVE : TH_SELECT, color_outline);
+    }
+    else if (nodeTypeUndefined(node)) {
+      UI_GetThemeColor4fv(TH_REDALERT, color_outline);
+    }
+    else {
+      UI_GetThemeColorBlendShade4fv(TH_BACK, TH_NODE, 0.4f, -20, color_outline);
+    }
+
+    UI_draw_roundbox_corner_set(UI_CNR_ALL);
+    UI_draw_roundbox_4fv(&rect, false, BASIS_RAD, color_outline);
   }
 
   node_draw_sockets(v2d, C, ntree, node, true, false);
@@ -1846,46 +1885,45 @@ static void node_draw_hidden(const bContext *C,
   float scale;
   UI_view2d_scale_get(v2d, &scale, nullptr);
 
+  const int color_id = node_get_colorid(node);
+
   /* Shadow. */
   node_draw_shadow(snode, node, hiddenrad, 1.0f);
 
-  /* Body. */
-  float color[4];
-  int color_id = node_get_colorid(node);
+  /* Wire across the node when muted/disabled. */
   if (node->flag & NODE_MUTED) {
-    /* Muted nodes are semi-transparent and colorless. */
-    UI_GetThemeColor4fv(TH_NODE, color);
-    color[3] = 0.25f;
-  }
-  else {
-    UI_GetThemeColor4fv(color_id, color);
+    node_draw_mute_line(v2d, snode, node);
   }
 
-  UI_draw_roundbox_aa(rct, true, hiddenrad, color);
-
-  /* Outline active and selected emphasis. */
-  if (node->flag & SELECT) {
-    UI_GetThemeColorShadeAlpha4fv(
-        (node->flag & NODE_ACTIVE) ? TH_ACTIVE : TH_SELECT, 0, -40, color);
-
-    UI_draw_roundbox_aa(rct, false, hiddenrad, color);
-  }
+  /* Body. */
+  float color[4];
+  {
+    if (nodeTypeUndefined(node)) {
+      /* Use warning color to indicate undefined types. */
+      UI_GetThemeColorBlendShade4fv(TH_REDALERT, color_id, 0.05f, -80, color);
+    }
+    else if (node->flag & NODE_MUTED) {
+      /* Muted nodes get a mix of the background with the node color. */
+      UI_GetThemeColorBlendShade4fv(TH_BACK, color_id, 0.1f, 0, color);
+    }
+    else if (node->flag & NODE_CUSTOM_COLOR) {
+      rgba_float_args_set(color, node->color[0], node->color[1], node->color[2], 1.0f);
+    }
+    else {
+      UI_GetThemeColorBlendShade4fv(TH_NODE, color_id, 0.6f, -40, color);
+    }
 
-  /* Custom color inline. */
-  if (node->flag & NODE_CUSTOM_COLOR) {
-    GPU_blend(GPU_BLEND_ALPHA);
-    GPU_line_smooth(true);
+    /* Draw selected nodes fully opaque. */
+    if (node->flag & SELECT) {
+      color[3] = 1.0f;
+    }
 
-    const rctf rect = {
-        rct->xmin + 1,
-        rct->xmax - 1,
-        rct->ymin + 1,
-        rct->ymax - 1,
-    };
-    UI_draw_roundbox_3fv_alpha(&rect, false, hiddenrad, node->color, 1.0f);
+    /* Draw muted nodes slightly transparent so the wires inside are visible. */
+    if (node->flag & NODE_MUTED) {
+      color[3] -= 0.2f;
+    }
 
-    GPU_line_smooth(false);
-    GPU_blend(GPU_BLEND_NONE);
+    UI_draw_roundbox_4fv(rct, true, hiddenrad, color);
   }
 
   /* Title. */
@@ -1896,36 +1934,28 @@ static void node_draw_hidden(const bContext *C,
     UI_GetThemeColorBlendShade4fv(TH_SELECT, color_id, 0.4f, 10, color);
   }
 
-  /* Open / collapse icon. */
+  /* Collapse/expand icon. */
   {
-    int but_size = U.widget_unit * 0.8f;
-    /* XXX button uses a custom triangle draw below, so make it invisible without icon */
+    const int but_size = U.widget_unit * 1.0f;
     UI_block_emboss_set(node->block, UI_EMBOSS_NONE);
-    uiBut *but = uiDefBut(node->block,
-                          UI_BTYPE_BUT_TOGGLE,
-                          0,
-                          "",
-                          rct->xmin + 0.35f * U.widget_unit,
-                          centy - but_size / 2,
-                          but_size,
-                          but_size,
-                          nullptr,
-                          0,
-                          0,
-                          0,
-                          0,
-                          "");
-    UI_but_func_set(but, node_toggle_button_cb, node, (void *)"NODE_OT_hide_toggle");
-    UI_block_emboss_set(node->block, UI_EMBOSS);
 
-    UI_GetThemeColor4fv(TH_TEXT, color);
-    /* Custom draw function for this button. */
-    UI_draw_icon_tri(rct->xmin + 0.65f * U.widget_unit, centy, 'h', color);
-  }
+    uiBut *but = uiDefIconBut(node->block,
+                              UI_BTYPE_BUT_TOGGLE,
+                              0,
+                              ICON_RIGHTARROW,
+                              rct->xmin + (NODE_MARGIN_X / 3),
+                              centy - but_size / 2,
+                              but_size,
+                              but_size,
+                              nullptr,
+                              0.0f,
+                              0.0f,
+                              0.0f,
+                              0.0f,
+                              "");
 
-  /* Disable lines. */
-  if (node->flag & NODE_MUTED) {
-    node_draw_mute_line(v2d, snode, node);
+    UI_but_func_set(but, node_toggle_button_cb, node, (void *)"NODE_OT_hide_toggle");
+    UI_block_emboss_set(node->block, UI_EMBOSS);
   }
 
   char showname[128];
@@ -1945,15 +1975,44 @@ static void node_draw_hidden(const bContext *C,
                         0,
                         0,
                         "");
+
+  /* Outline. */
+  {
+    const float outline_width = 1.0f;
+    const rctf rect = {
+        rct->xmin - outline_width,
+        rct->xmax + outline_width,
+        rct->ymin - outline_width,
+        rct->ymax + outline_width,
+    };
+
+    /* Color the outline according to active, selected, or undefined status. */
+    float color_outline[4];
+
+    if (node->flag & SELECT) {
+      UI_GetThemeColor4fv((node->flag & NODE_ACTIVE) ? TH_ACTIVE : TH_SELECT, color_outline);
+    }
+    else if (nodeTypeUndefined(node)) {
+      UI_GetThemeColor4fv(TH_REDALERT, color_outline);
+    }
+    else {
+      UI_GetThemeColorBlendShade4fv(TH_BACK, TH_NODE, 0.4f, -20, color_outline);
+    }
+
+    UI_draw_roundbox_corner_set(UI_CNR_ALL);
+    UI_draw_roundbox_4fv(&rect, false, hiddenrad, color_outline);
+  }
+
   if (node->flag & NODE_MUTED) {
     UI_but_flag_enable(but, UI_BUT_INACTIVE);
   }
 
   /* Scale widget thing. */
   uint pos = GPU_vertformat_attr_add(immVertexFormat(), "pos", GPU_COMP_F32, 2, GPU_FETCH_FLOAT);
+  GPU_blend(GPU_BLEND_ALPHA);
   immBindBuiltinProgram(GPU_SHADER_2D_UNIFORM_COLOR);
 
-  immUniformThemeColorShade(color_id, -10);
+  immUniformThemeColorShadeAlpha(TH_TEXT, -40, -180);
   float dx = 10.0f;
 
   immBegin(GPU_PRIM_LINES, 4);
@@ -1964,7 +2023,7 @@ static void node_draw_hidden(const bContext *C,
   immVertex2f(pos, rct->xmax - dx - 3.0f * snode->runtime->aspect, centy + 4.0f);
   immEnd();
 
-  immUniformThemeColorShade(color_id, 30);
+  immUniformThemeColorShadeAlpha(TH_TEXT, 0, -180);
   dx -= snode->runtime->aspect;
 
   immBegin(GPU_PRIM_LINES, 4);
@@ -1976,6 +2035,7 @@ static void node_draw_hidden(const bContext *C,
   immEnd();
 
   immUnbindProgram();
+  GPU_blend(GPU_BLEND_NONE);
 
   node_draw_sockets(v2d, C, ntree, node, true, false);
 
diff --git a/source/blender/editors/space_node/node_intern.h b/source/blender/editors/space_node/node_intern.h
index e7d9a12a52c..c0d50e753ff 100644
--- a/source/blender/editors/space_node/node_intern.h
+++ b/source/blender/editors/space_node/node_intern.h
@@ -332,7 +332,7 @@ extern const char *node_context_dir[];
 #define NODE_SOCKDY (0.1f * U.widget_unit)
 #define NODE_WIDTH(node) (node->width * UI_DPI_FAC)
 #define NODE_HEIGHT(node) (node->height * UI_DPI_FAC)
-#define NODE_MARGIN_X (1.10f * U.widget_unit)
+#define NODE_MARGIN_X (1.2f * U.widget_unit)
 #define NODE_SOCKSIZE (0.25f * U.widget_unit)
 #define NODE_MULTI_INPUT_LINK_GAP (0.25f * U.widget_unit)
 #define NODE_RESIZE_MARGIN (0.20f * U.widget_unit)