[Bf-blender-cvs] [4db4a973556] master: Node Editor: Style update to nodes
Pablo Vazquez
noreply at git.blender.org
Tue Oct 26 20:19:26 CEST 2021
Commit: 4db4a97355672ee27542e45ac9959523567e0053
Author: Pablo Vazquez
Date: Tue Oct 26 20:07:26 2021 +0200
Branches: master
https://developer.blender.org/rB4db4a97355672ee27542e45ac9959523567e0053
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
===================================================================
M release/datafiles/userdef/userdef_default_theme.c
M source/blender/editors/space_node/node_draw.cc
M source/blender/editors/space_node/node_intern.h
===================================================================
diff --git a/release/datafiles/userdef/userdef_default_theme.c b/release/datafiles/userdef/userdef_default_theme.c
index 867a4c8f56b..d0171867e50 100644
--- a/release/datafiles/userdef/userdef_default_theme.c
+++ b/release/datafiles/userdef/userdef_default_theme.c
@@ -792,7 +792,7 @@ const bTheme U_theme_default = {
.row_alternate = RGBA(0xffffff07),
},
.space_node = {
- .back = RGBA(0x23232300),
+ .back = RGBA(0x1a1a1a00),
.title = RGBA(0xeeeeeeff),
.text = RGBA(0xe6e6e6ff),
.text_hi = RGBA(0xffffffff),
@@ -829,7 +829,7 @@ const bTheme U_theme_default = {
.noodle_curving = 4,
.grid_levels = 7,
.dash_alpha = 0.5f,
- .syntaxl = RGBA(0x565656ff),
+ .syntaxl = RGBA(0x3e3e3eff),
.syntaxs = RGBA(0x975b5bff),
.syntaxb = RGBA(0xccb83dff),
.syntaxn = RGBA(0xe64555ff),
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
@@ Diff output truncated at 10240 characters. @@
More information about the Bf-blender-cvs
mailing list