nodes/0velia-ComfyUI-Dynamic-Dropdowns
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update dynamic_dropdowns_ui.js

Browse Source
This commit is contained in:
0velia
2026-07-11 01:55:45 +07:00
committed by GitHub
parent 0b81c96aac
commit c3efbdf4f5
1 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/dynamic_dropdowns_ui.js
+37 -23
View File
@@ -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();
};