From c3efbdf4f5846decaf5060016a34fb972b9bd9f7 Mon Sep 17 00:00:00 2001
From: 0velia <130620218+0velia@users.noreply.github.com>
Date: Sat, 11 Jul 2026 01:55:45 +0700
Subject: [PATCH] Update dynamic_dropdowns_ui.js

---
 js/dynamic_dropdowns_ui.js | 60 +++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 23 deletions(-)

diff --git a/js/dynamic_dropdowns_ui.js b/js/dynamic_dropdowns_ui.js
index 395ac07..13049c9 100644
--- a/js/dynamic_dropdowns_ui.js
+++ b/js/dynamic_dropdowns_ui.js
@@ -5,57 +5,71 @@ app.registerExtension({
     async beforeRegisterNodeDef(nodeType, nodeData, appInstance) {
         if (nodeData.name === "ComfyUI_Dynamic_Dropdowns_Demo") {
             
-            // 1. Core initialization when the node is spawned on the canvas
+            // 1. Intercept the node instantiation routine
             const onNodeCreated = nodeType.prototype.onNodeCreated;
             nodeType.prototype.onNodeCreated = function () {
                 onNodeCreated?.apply(this, arguments);
                 
-                // Set the default size to accommodate the sleek layout
-                this.size = [550, 350];
+                // Initialize premium wide panel sizing
+                this.size = [550, 320];
                 
-                // Add the dynamic interactive buttons directly onto the node layout
+                // Fine-tune the default LiteGraph title location to sit neatly in the header
+                this.title_offset_y = 22;
+
+                // Add flat interactive UI button for adding new selection slots
                 this.addWidget("button", "➕ Add Slot", null, () => {
                     const dropdownCount = this.widgets.filter(w => w.name.startsWith("custom_slot_")).length;
-                    this.addWidget("combo", `custom_slot_${dropdownCount + 1}`, "Select...", () => {}, { values: ["Option A", "Option B"] });
-                    this.setSize([550, Math.max(350, 150 + (this.widgets.length * 40))]);
+                    
+                    // Spawn new dynamic selector widget
+                    this.addWidget("combo", `custom_slot_${dropdownCount + 1}`, "Select...", () => {}, { 
+                        values: ["Select...", "Cinematic", "Close-up Portrait", "Cyberpunk Neon", "Raw Grain"] 
+                    });
+                    
+                    // Dynamically push the node height down so new slots don't bleed over the edge
+                    this.setSize([550, Math.max(320, 160 + (this.widgets.length * 35))]);
                 });
 
+                // Add flat interactive UI button for deleting the last slot
                 this.addWidget("button", "➖ Remove Slot", null, () => {
                     const dropdowns = this.widgets.filter(w => w.name.startsWith("custom_slot_"));
                     if (dropdowns.length > 0) {
                         this.removeWidget(dropdowns[dropdowns.length - 1]);
-                        this.setSize([550, Math.max(350, 150 + (this.widgets.length * 40))]);
+                        // Shrink canvas frame bounding box safely back up
+                        this.setSize([550, Math.max(320, 160 + (this.widgets.length * 35))]);
                     }
                 });
             };
 
-            // 2. Overriding the background draw call to inject custom hardware style
+            // 2. Custom background layout painting loop
             nodeType.prototype.onDrawBackground = function (ctx, canvas) {
-                // If the node is collapsed, let LiteGraph handle the default minimized render
                 if (this.flags.collapsed) return;
 
                 ctx.save();
 
-                // --- 🛡️ CUSTOM CARD BASE & PREMIUM BORDER ---
+                // --- PREMIUM CUSTOM CONTAINER METALLIC SHAPE ---
                 ctx.lineWidth = 1;
+                ctx.strokeStyle = "rgba(0, 195, 255, 0.4)"; // Soft custom neon edge tint
+                ctx.fillStyle = "rgba(20, 24, 30, 0.98)";     // Super deep dark satin premium background
                 
-                // Outer subtle cyan/blue trim glow
-                ctx.strokeStyle = "rgba(0, 206, 209, 0.5)"; 
-                
-                // Premium deep dark metallic gray base color
-                ctx.fillStyle = "rgba(22, 26, 32, 0.98)";   
-                
-                // Rounding the card profile corners
                 ctx.beginPath();
-                ctx.roundRect(0, 0, this.size[0], this.size[1], 15);
+                ctx.roundRect(0, 0, this.size[0], this.size[1], 16);
                 ctx.fill();
                 ctx.stroke();
 
-                // --- 🏷️ PRO LABELS & SLIDER ACCENTS ---
-                ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
-                ctx.font = "bold 16px sans-serif";
-                ctx.textAlign = "left";
-                ctx.fillText("🎭 Dynamic Dropdowns (Pro Mode)", 40, 30);
+                // --- INTEGRATED GRAPHICS SECTION ACCENTS (The Sidebar Panel) ---
+                // Fills out the left side area with a beautiful dark abstract geometry block
+                ctx.fillStyle = "rgba(12, 14, 18, 0.6)";
+                ctx.beginPath();
+                ctx.roundRect(10, 50, 120, this.size[1] - 65, 12);
+                ctx.fill();
+
+                // --- INNER LAYOUT LINE TABS ---
+                ctx.strokeStyle = "rgba(255, 255, 255, 0.05)";
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.moveTo(145, 50);
+                ctx.lineTo(this.size[0] - 15, 50);
+                ctx.stroke();
 
                 ctx.restore();
             };