Bump to v1.3.1 for registry icon fix

.gitignore

@@ -0,0 +1 @@
+__pycache__/

.tracking

@@ -0,0 +1,9 @@
+.tracking
+LICENSE.txt
+README.md
+__init__.py
+__pycache__/__init__.cpython-313.pyc
+mainuse.gif
+pyproject.toml
+web/css/hud_styles.css
+web/node_hud.js

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) [year] [fullname]
+Copyright (c) [2026] [loficoding]
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

__init__.py

@@ -1,2 +1,7 @@
-WEB_DIRECTORY = "./web" 
-__all__ = ["WEB_DIRECTORY"]
+# Mappings required for ComfyUI to acknowledge the node folder
+NODE_CLASS_MAPPINGS = {}
+NODE_DISPLAY_NAME_MAPPINGS = {}
+
+WEB_DIRECTORY = "./web"
+
+__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]

pyproject.toml

@@ -0,0 +1,37 @@
+[project]
+name = "ComfyUI-Node-HUD"
+description = "Adds a smart I/O status dock to stacked nodes for cleaner layouts."
+version = "1.3.1"
+
+license = {file = "LICENSE"} 
+# classifiers = [
+#     # For OS-independent nodes (works on all operating systems)
+#     "Operating System :: OS Independent",
+#
+#     # OR for OS-specific nodes, specify the supported systems:
+#     "Operating System :: Microsoft :: Windows",  # Windows specific
+#     "Operating System :: POSIX :: Linux",  # Linux specific
+#     "Operating System :: MacOS",  # macOS specific
+#
+#     # GPU Accelerator support. Pick the ones that are supported by your extension.
+#     "Environment :: GPU :: NVIDIA CUDA",    # NVIDIA CUDA support
+#     "Environment :: GPU :: AMD ROCm",       # AMD ROCm support
+#     "Environment :: GPU :: Intel Arc",      # Intel Arc support
+#     "Environment :: NPU :: Huawei Ascend",  # Huawei Ascend support
+#     "Environment :: GPU :: Apple Metal",    # Apple Metal support
+# ]
+
+
+[project.urls]
+Repository = "https://github.com/loficoding/ComfyUI-Node-HUD"
+#  Used by Comfy Registry https://registry.comfy.org
+Documentation = "https://github.com/loficoding/ComfyUI-Node-HUD/wiki"
+"Bug Tracker" = "https://github.com/loficoding/ComfyUI-Node-HUD/issues"
+
+[tool.comfy]
+PublisherId = "loficoding"
+DisplayName = "ComfyUI-Node-HUD"
+Icon = "https://raw.githubusercontent.com/loficoding/ComfyUI-Node-HUD/464b61a512c7e6c409f7252fab84330500fc655c/icon.png"
+includes = [] 
+# "requires-comfyui" = ">=1.0.0"  # ComfyUI version compatibility
+

web/css/hud_styles.css

@@ -1,17 +1,14 @@
-/* main dock cotainer */
-.hud-dock{
+/* main dock container */
+.hud-dock {
+    /* VISUALS ONLY - NO POSITIONS OR MARGINS */
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 4px;
-    width: 100%;
-    height: auto;
     box-sizing: border-box;
+    pointer-events: none;
 
-    margin-top: 5px;
-    padding: 6px;
-    z-index: 999;
-
+    /* Decoration */
     background-color: rgba(20, 20, 20, 0.85);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 8px;
@@ -19,7 +16,7 @@
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
 
-.hud-dot{
+.hud-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
@@ -28,7 +25,7 @@
     cursor: help;
 }
 
-.hud-dot:hover{
+.hud-dot:hover {
     transform: scale(1.3);
     border-color: white;
 }
@@ -38,12 +35,30 @@
     align-items: center;
     gap: 4px;
     background-color: #222;
-    border: 1px solid #444; /* Default border */
+    border: 1px solid #444;
     border-radius: 8px;
     padding: 2px 6px;
-    height: 20px; /* Equivalent to your chipHeight + padding */
+    height: 20px;
     white-space: nowrap;
     color: #ccc;
     font-family: Arial, sans-serif;
     font-size: 10px;
+    pointer-events: auto;
+}
+
+/* --- New Zoomed Out State --- */
+.hud-dock-zoomed-out {
+    /* When chips are hidden, the container would collapse. 
+       We force it to "1 chip height" (approx 20-24px) 
+       so the user still sees the dock exists.
+    */
+    min-height: 24px;
+    
+    /* Optional: Make it slightly subtler when zoomed out */
+    background-color: rgba(20, 20, 20, 0.6);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.hud-dock-zoomed-out .hud-chip {
+    display: none;
 }

web/node_hud.js

@@ -8,7 +8,7 @@ link.href = "extensions/ComfyUI-Node-HUD/css/hud_styles.css";
 document.head.appendChild(link);
 
 app.registerExtension({
-    name: "Comfy.CleanLayoutDock",
+    name: "Comfy.NodeHUD",
     
     async beforeRegisterNodeDef(nodeType, nodeData, app) {
         
@@ -20,7 +20,16 @@ app.registerExtension({
                 content: "Toggle Stack Info",
                 callback: () => { 
                     this.show_stack_info = !this.show_stack_info; 
-                    // Force a redraw to update visibility immediately
+                    
+                    // Bring node to front of the array so it renders on top of everything
+                    if (this.show_stack_info){
+                        const nodes = app.graph._nodes;
+                        const index = nodes.indexOf(this);
+                        if (index > -1){
+                            nodes.splice(index, 1);
+                            nodes.push(this);
+                        }
+                    }
                     app.graph.setDirtyCanvas(true, true); 
                 }
             });
@@ -32,9 +41,11 @@ app.registerExtension({
         nodeType.prototype.onDrawForeground = function(ctx) {
             if (onDrawForeground) onDrawForeground.apply(this, arguments);
             
-            // 1. Cleanup: If toggled off or empty, remove the dock
+            // 1. Cleanup: If toggled off, empty, OR COLLAPSED, remove the dock
             const stackList = getHiddenNodes(this, app.graph);
-            const shouldShow = this.show_stack_info && stackList.length > 0;
+            
+            // ADDED: Check !this.flags.collapsed so HUD hides when node is collapsed
+            const shouldShow = this.show_stack_info && stackList.length > 0 && !this.flags.collapsed;
 
             if (!shouldShow) {
                 if (this.hudElement) {
@@ -46,6 +57,11 @@ app.registerExtension({
 
             // 2. Update the Dock (Position & Content)
             updateDock(this, stackList, app.graph);
+
+            // If movement is laggy this ensures the HUD follows mouse during drag
+            if(this.is_selected){
+                app.graph.setDirtyCanvas(true, false);
+            }
         };
     }
 });
@@ -54,16 +70,25 @@ app.registerExtension({
 function getHiddenNodes(parent, graph) {
     const stackList = [];
     if (!graph || !graph._nodes) return stackList;
+
+    const parentIndex = graph._nodes.indexOf(parent);
     
     const pLeft = parent.pos[0];
     const pRight = parent.pos[0] + parent.size[0];
     const pTop = parent.pos[1];
     const pBottom = parent.pos[1] + parent.size[1];
 
-    for (const node of graph._nodes) {
+    for (let i = 0; i < graph._nodes.length; i++) {
+        const node = graph._nodes[i];
+
         if (node.id === parent.id) continue;
+        
+        // Only include nodes that are "below" the parent in the stack
+        if (i > parentIndex) continue;
+
         const nx = node.pos[0];
         const ny = node.pos[1];
+
         // Check if center of node is inside parent (simple hit test)
         if (nx >= pLeft && nx < pRight && ny >= pTop && ny < pBottom) {
             stackList.push(node);
@@ -99,33 +124,47 @@ function updateDock(node, stackList, graph) {
     if (!node.hudElement) {
         node.hudElement = document.createElement("div");
         node.hudElement.className = "hud-dock";
+        
+        // Fix Zooming/Scrolling Issue:
+        // Intercept wheel events to prevent browser page zoom, but manually trigger canvas zoom.
+        node.hudElement.addEventListener("wheel", (e) => {
+            // Stop the event from reaching the window (prevents whole page zoom/scroll)
+            e.preventDefault();
+            e.stopPropagation();
+
+            // Manually apply zoom to the canvas so the user can still zoom the graph
+            if (app.canvas && app.canvas.ds) {
+                // Determine zoom direction and factor (standard LiteGraph logic)
+                const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+                app.canvas.ds.changeScale(app.canvas.ds.scale * zoomFactor, [e.clientX, e.clientY]);
+                app.canvas.setDirty(true, true);
+            }
+        }, { passive: false });
+
+        // We append to document.body to ensure getBoundingClientRect + scroll math works reliably
         document.body.appendChild(node.hudElement);
-        node.lastStackSignature = ""; // Init signature
+        
+        node.lastStackSignature = ""; 
     }
     const dock = node.hudElement;
 
-    // 2. Content Update (Optimization: Only if stack changed)
-    // We create a "signature" string of IDs (e.g., "12,15,22")
+    // ... [Content Update Section remains exactly the same] ...
     const currentSignature = stackList.map(n => n.id).join(",");
-
     if (currentSignature !== node.lastStackSignature) {
-        dock.innerHTML = ""; // Clear
-        node.lastStackSignature = currentSignature; // Update signature
+        dock.innerHTML = ""; 
+        node.lastStackSignature = currentSignature; 
 
-        // Build Chips
+        // Build Chips (Keep existing logic)
         for (const item of stackList) {
             const chip = document.createElement("div");
             chip.className = "hud-chip";
 
-            // Determine Border Color based on Mode
-            if (item.mode === 2) chip.style.borderColor = "#888888"; // Muted
-            else if (item.mode === 4) chip.style.borderColor = "#cc66ff"; // Bypassed
+            if (item.mode === 2) chip.style.borderColor = "#888888"; 
+            else if (item.mode === 4) chip.style.borderColor = "#cc66ff"; 
 
-            // --- GATHER DOT COLORS ---
             const leftDots = [];
             const rightDots = [];
 
-            // Inputs
             if (item.inputs) {
                 for (const input of item.inputs) {
                     if (input.link) {
@@ -134,7 +173,6 @@ function updateDock(node, stackList, graph) {
                     }
                 }
             }
-            // Outputs
             if (item.outputs) {
                 for (const output of item.outputs) {
                     if (output.links && output.links.length > 0) {
@@ -149,13 +187,10 @@ function updateDock(node, stackList, graph) {
                     }
                 }
             }
-            // Fallback Red Dot
             if (leftDots.length === 0 && rightDots.length === 0) {
                 leftDots.push("#ff4444");
             }
 
-            // --- BUILD CHIP DOM ---
-            // Left Dots
             leftDots.forEach(c => {
                 const d = document.createElement("div");
                 d.className = "hud-dot";
@@ -163,14 +198,12 @@ function updateDock(node, stackList, graph) {
                 chip.appendChild(d);
             });
 
-            // Text
             const span = document.createElement("span");
             let text = item.title || item.type;
             if (text.length > 20) text = text.substring(0, 18) + "..";
             span.innerText = text;
             chip.appendChild(span);
 
-            // Right Dots
             rightDots.forEach(c => {
                 const d = document.createElement("div");
                 d.className = "hud-dot";
@@ -183,25 +216,55 @@ function updateDock(node, stackList, graph) {
     }
 
     // 3. Position Update (Run every frame)
-    // Map Graph Coordinates -> Screen Coordinates
     const canvas = app.canvas;
     const scale = canvas.ds.scale;
     const offset = canvas.ds.offset;
 
-    // Calculate screen position
-    // (node.pos is [x, y])
-    const screenX = (node.pos[0] + offset[0]) * scale;
-    // Position it at the bottom of the node
-    const screenY = (node.pos[1] + node.size[1] + offset[1]) * scale;
+    // Get the DOM position of the canvas element itself (fixes window offset issues)
+    const canvasRect = canvas.canvas.getBoundingClientRect();
+    const scrollX = window.scrollX || window.pageXOffset;
+    const scrollY = window.scrollY || window.pageYOffset;
 
+    // Graph Coordinates
+    const graphX = node.pos[0];
+    const graphY = node.pos[1] + node.size[1] + 2; 
+
+    // --- CORRECTION: MATCH LITEGRAPH TRANSFORM ---
+    const screenX = (graphX + offset[0]) * scale + canvasRect.left + scrollX;
+    const screenY = (graphY + offset[1]) * scale + canvasRect.top + scrollY;
+
+    // GEOMETRY ONLY
     dock.style.position = "absolute";
     dock.style.left = screenX + "px";
     dock.style.top = screenY + "px";
-    dock.style.width = (node.size[0] * scale) + "px"; 
+    dock.style.width = (node.size[0] * scale) + "px";
+    dock.style.transform = "none"; 
+    dock.style.margin = "0"; 
+
+    // --- UPDATES: Zoom Class & Z-Index ---
     
-    // Scale the UI to match the zoom level 
-    // (Using transform-origin top-left ensures it scales from the corner)
-    dock.style.transform = `scale(${scale})`;
-    dock.style.transformOrigin = "top left";
-    dock.style.zIndex = "1000"; // Ensure it's on top
+    // 1. Zoom Logic (Around 57% zoom, text usually disappears)
+    if (scale < 0.58) {
+        dock.classList.add("hud-dock-zoomed-out");
+    } else {
+        dock.classList.remove("hud-dock-zoomed-out");
+    }
+
+    // 2. Z-Index Logic (Refined)
+    // We base the z-index on the node's position in the graph stack (0, 1, 2...).
+    // Standard UI widgets (like active text boxes) usually have high z-indices (1000+).
+    // By keeping this low, we allow other DOM elements to sit on top if needed.
+    let zIndex = graph._nodes.indexOf(node);
+    
+    // Safety check: Ensure we don't accidentally get -1 or weird values
+    if (zIndex < 0) zIndex = 0;
+    
+    if (node.zIndex !== undefined) {
+        zIndex = node.zIndex;
+    } else if (node.style && node.style.zIndex) {
+        zIndex = node.style.zIndex;
+    }
+    
+    // Important: We assign this dynamically every frame to ensure it updates if node order changes
+    dock.style.zIndex = zIndex;
 }