Node Editor: Introduce color overlay and dashed wires theme setting

This patch includes code from D9891 and D12754, so credit goes to Juanfran and Dalai.
I updated the patches to work with `master` and with the new overlay toggle.

The reason to include both changes as part of one patch is that the dimmed dashed lines work much better together with colored wires.

Theme setting for dash opacity:
{F11370574, size=full}

{F11286177, size=full, autoplay, loop}

{F11149912, size=full}

For adding the overlay I used `SpaceImageOverlay` as reference, although I'm not familiar with this code so there might be mistakes.

Reviewed By: #user_interface, HooglyBoogly

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

1 files changed, 32 insertions, 0 deletions

diff --git a/release/scripts/startup/bl_ui/space_node.py b/release/scripts/startup/bl_ui/space_node.py
index 8e2533edac6..da3db48d962 100644
--- a/release/scripts/startup/bl_ui/space_node.py
+++ b/release/scripts/startup/bl_ui/space_node.py
@@ -49,6 +49,7 @@ class NODE_HT_header(Header):
 
         scene = context.scene
         snode = context.space_data
+        overlay = snode.overlay
         snode_id = snode.id
         id_from = snode.id_from
         tool_settings = context.tool_settings
@@ -205,6 +206,13 @@ class NODE_HT_header(Header):
         if tool_settings.snap_node_element != 'GRID':
             row.prop(tool_settings, "snap_target", text="")
 
+        # Overlay toggle & popover
+        row = layout.row(align=True)
+        row.prop(overlay, "show_overlays", icon='OVERLAY', text="")
+        sub = row.row(align=True)
+        sub.active = overlay.show_overlays
+        sub.popover(panel="NODE_PT_overlay", text="")
+
 
 class NODE_MT_editor_menus(Menu):
     bl_idname = "NODE_MT_editor_menus"
@@ -680,6 +688,29 @@ class NODE_PT_quality(bpy.types.Panel):
         col.prop(snode, "use_auto_render")
 
 
+class NODE_PT_overlay(Panel):
+    bl_space_type = 'NODE_EDITOR'
+    bl_region_type = 'HEADER'
+    bl_label = "Overlays"
+    bl_ui_units_x = 7
+
+    def draw(self, context):
+        layout = self.layout
+        layout.label(text="Node Editor Overlays")
+
+        snode = context.space_data
+        overlay = snode.overlay
+
+        layout.active = overlay.show_overlays
+
+        col = layout.column()
+        col.prop(overlay, "show_wire_color", text="Wire Colors")
+
+        col.separator()
+
+        col.prop(snode, "show_annotation", text="Annotations")
+
+
 class NODE_UL_interface_sockets(bpy.types.UIList):
     def draw_item(self, context, layout, _data, item, icon, _active_data, _active_propname, _index):
         socket = item
@@ -848,6 +879,7 @@ classes = (
     NODE_PT_backdrop,
     NODE_PT_quality,
     NODE_PT_annotation,
+    NODE_PT_overlay,
     NODE_UL_interface_sockets,
     NODE_PT_node_tree_interface_inputs,
     NODE_PT_node_tree_interface_outputs,