UI: Icon number indicator for data-blocks

Adds the possibility of having a little number on top of icons.

At the moment this is used for:
* Outliner
* Node Editor bread-crumb
* Node Group node header

For the outliner there is almost no functional change. It is mostly a refactor
to handle the indicators as part of the icon shader instead of the outliner
draw code. (note that this was already recently changed in a5d3b648e3e2).

The difference is that now we use rounded border rectangle instead of
circles, and we can go up to 999 elements.

So for the outliner this shows the number of collapsed elements of a
certain type (e.g., mesh objects inside a collapsed collection).

For the node editors is being used to show the use count for the data-block.
This is important for the node editor, so users know whether the node-group
they are editing (or are about to edit) is used elsewhere. This is
particularly important when the Node Options are hidden, which is the
default for node groups appended from the asset libraries.

---

Note: This can be easily enabled for ID templates which can then be part
of T84669. It just need to call UI_but_icon_indicator_number_set in the
function template_add_button_search_menu.

---

Special thanks Clément Foucault for the help figuring out the shader,
Julian Eisel for the help navigating the UI code, and Pablo Vazquez for
the collaboration in this design solution.

For images showing the result check the Differential Revision.
Differential Revision: https://developer.blender.org/D16284

4 files changed, 104 insertions, 0 deletions

diff --git a/source/blender/gpu/shaders/gpu_shader_icon_frag.glsl b/source/blender/gpu/shaders/gpu_shader_icon_frag.glsl
new file mode 100644
index 00000000000..ff56d772317
--- /dev/null
+++ b/source/blender/gpu/shaders/gpu_shader_icon_frag.glsl
@@ -0,0 +1,42 @@
+/**
+ * Draw the icons, leaving a semi-transparent rectangle on top of the icon.
+ *
+ * The top-left corner of the rectangle is rounded and drawned with anti-alias.
+ * The anti-alias is done by transitioning from the outer to the inner radius of
+ * the rounded corner, and the rectangle sides.
+ */
+
+void main()
+{
+  /* Top-left rounded corner parameters. */
+  const float circle_radius_outer = 0.1;
+  const float circle_radius_inner = 0.075;
+
+  /**
+   * Add a bit transparency to see a bit of the icon, without
+   * getting on the way of readability. */
+  const float mask_transparency = 0.25;
+
+  vec2 circle_center = vec2(circle_radius_outer - text_width, 0.5);
+  fragColor = texture(image, texCoord_interp) * color;
+
+  /* radius in icon space (1 is the icon width).  */
+  float radius = length(mask_coord_interp - circle_center);
+  float mask = smoothstep(circle_radius_inner, circle_radius_outer, radius);
+
+  bool lower_half = mask_coord_interp.y < circle_center.y;
+  bool right_half = mask_coord_interp.x > circle_center.x;
+
+  if (right_half && mask_coord_interp.t < circle_center.y + circle_radius_outer) {
+    mask = smoothstep(circle_center.y + circle_radius_inner,
+                      circle_center.y + circle_radius_outer,
+                      mask_coord_interp.t);
+  }
+  if (lower_half && mask_coord_interp.s > circle_center.x - circle_radius_outer) {
+    mask = smoothstep(circle_center.x - circle_radius_inner,
+                      circle_center.x - circle_radius_outer,
+                      mask_coord_interp.s);
+  }
+
+  fragColor = mix(vec4(0.0), fragColor, max(mask_transparency, mask));
+}
diff --git a/source/blender/gpu/shaders/gpu_shader_icon_vert.glsl b/source/blender/gpu/shaders/gpu_shader_icon_vert.glsl
new file mode 100644
index 00000000000..25f64bfe0b6
--- /dev/null
+++ b/source/blender/gpu/shaders/gpu_shader_icon_vert.glsl
@@ -0,0 +1,37 @@
+/**
+ * Simple shader that just draw one icon at the specified location
+ * does not need any vertex input (producing less call to immBegin/End)
+ */
+
+void main()
+{
+  vec2 uv;
+  vec2 co;
+
+  if (gl_VertexID == 0) {
+    co = rect_geom.xw;
+    uv = rect_icon.xw;
+    mask_coord_interp = vec2(0, 1);
+  }
+  else if (gl_VertexID == 1) {
+    co = rect_geom.xy;
+    uv = rect_icon.xy;
+    mask_coord_interp = vec2(0, 0);
+  }
+  else if (gl_VertexID == 2) {
+    co = rect_geom.zw;
+    uv = rect_icon.zw;
+    mask_coord_interp = vec2(1, 1);
+  }
+  else {
+    co = rect_geom.zy;
+    uv = rect_icon.zy;
+    mask_coord_interp = vec2(1, 0);
+  }
+
+  /* Put origin in lower right corner. */
+  mask_coord_interp.x -= 1;
+
+  gl_Position = ModelViewProjectionMatrix * vec4(co, 0.0f, 1.0f);
+  texCoord_interp = uv;
+}
diff --git a/source/blender/gpu/shaders/infos/gpu_interface_info.hh b/source/blender/gpu/shaders/infos/gpu_interface_info.hh
index d77c65e48a7..060def16f81 100644
--- a/source/blender/gpu/shaders/infos/gpu_interface_info.hh
+++ b/source/blender/gpu/shaders/infos/gpu_interface_info.hh
@@ -18,3 +18,6 @@ GPU_SHADER_INTERFACE_INFO(smooth_radii_outline_iface, "").smooth(Type::VEC4, "ra
 GPU_SHADER_INTERFACE_INFO(flat_color_smooth_tex_coord_interp_iface, "")
     .flat(Type::VEC4, "finalColor")
     .smooth(Type::VEC2, "texCoord_interp");
+GPU_SHADER_INTERFACE_INFO(smooth_icon_interp_iface, "")
+    .smooth(Type::VEC2, "texCoord_interp")
+    .smooth(Type::VEC2, "mask_coord_interp");
diff --git a/source/blender/gpu/shaders/infos/gpu_shader_icon_info.hh b/source/blender/gpu/shaders/infos/gpu_shader_icon_info.hh
new file mode 100644
index 00000000000..3d4077bdb09
--- /dev/null
+++ b/source/blender/gpu/shaders/infos/gpu_shader_icon_info.hh
@@ -0,0 +1,22 @@
+/* SPDX-License-Identifier: GPL-2.0-or-later
+ * Copyright 2022 Blender Foundation. All rights reserved. */
+
+/** \file
+ * \ingroup gpu
+ */
+
+#include "gpu_interface_info.hh"
+#include "gpu_shader_create_info.hh"
+
+GPU_SHADER_CREATE_INFO(gpu_shader_icon)
+    .vertex_out(smooth_icon_interp_iface)
+    .fragment_out(0, Type::VEC4, "fragColor")
+    .push_constant(Type::MAT4, "ModelViewProjectionMatrix")
+    .push_constant(Type::VEC4, "color")
+    .push_constant(Type::VEC4, "rect_icon")
+    .push_constant(Type::VEC4, "rect_geom")
+    .push_constant(Type::FLOAT, "text_width")
+    .sampler(0, ImageType::FLOAT_2D, "image")
+    .vertex_source("gpu_shader_icon_vert.glsl")
+    .fragment_source("gpu_shader_icon_frag.glsl")
+    .do_static_compilation(true);