Add dynamic inputs to node

visual_area_prompt.py

@@ -55,13 +55,13 @@ class VisualAreaPrompt:
         return {
             "required": {
                 "global_conditioning": ("CONDITIONING", { "tooltip": "Base conditioning. Will be applied to the whole image." }),
-                "conditioning0": ("CONDITIONING", { "tooltip": "Input conditioning. (Connecting a conditioning will create a new input.)" }),
-                "id": ("INT", { "default": 0, "min": 0, "max": 10, "step": 1, "tooltip": "The id of the conditioning settings to change." }),
-                "x": ("FLOAT", { "default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01, "tooltip": "The x position of the conditioning (of id)." }),
-                "y": ("FLOAT", { "default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01, "tooltip": "The y position of the conditioning (of id)." }),
-                "width": ("FLOAT", { "default": 1.0, "min": 0.0, "max": 1.0, "step": 0.01, "tooltip": "The width of the conditioning (of id)." }),
-                "height": ("FLOAT", { "default": 1.0, "min": 0.0, "max": 1.0, "step": 0.01, "tooltip": "The height of the conditioning (of id)." }),
-                "weight": ("FLOAT", { "default": 1.0, "min": 0.0, "max": 10.0, "step": 0.01, "tooltip": "The weight applied to the conditioning (of id)." }),
+                # "conditioning0": ("CONDITIONING", { "tooltip": "Input conditioning. (Connecting a conditioning will create a new input.)" }),
+                # "id": ("INT", { "default": 0, "min": 0, "max": 10, "step": 1, "tooltip": "The id of the conditioning settings to change." }),
+                # "x": ("FLOAT", { "default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01, "tooltip": "The x position of the conditioning (of id)." }),
+                # "y": ("FLOAT", { "default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01, "tooltip": "The y position of the conditioning (of id)." }),
+                # "width": ("FLOAT", { "default": 1.0, "min": 0.0, "max": 1.0, "step": 0.01, "tooltip": "The width of the conditioning (of id)." }),
+                # "height": ("FLOAT", { "default": 1.0, "min": 0.0, "max": 1.0, "step": 0.01, "tooltip": "The height of the conditioning (of id)." }),
+                # "weight": ("FLOAT", { "default": 1.0, "min": 0.0, "max": 10.0, "step": 0.01, "tooltip": "The weight applied to the conditioning (of id)." }),
             },
         }
     

web/visual_area_prompt.js

@@ -1,12 +1,98 @@
 import { app } from "../../scripts/app.js";
 
+const TypeSlot = {
+   Input: 1,
+   Output: 2,
+};
+
+const TypeSlotEvent = {
+   Connect: true,
+   Disconnect: false,
+};
+
+// List of static input indices;
+const indexesToSkip = [0];
+
+// Id of the node
 const _ID = "VisualAreaPrompt";
+// Prefix of the input to add
+const _PREFIX = "conditioning";
+// Type of the input to add
+const _TYPE = "CONDITIONING";
 
 app.registerExtension({
    name: 'fuwuffy.' + _ID,
-   async beforeRegisterNodeDef(nodeType, nodeData, app) {
+   async beforeRegisterNodeDef(nodeType, nodeData, _app) {
+      // Discard other nodes
       if (nodeData.name !== _ID) {
-         return
+         return;
+      }
+      // On creation
+      const onNodeCreated = nodeType.prototype.onNodeCreated;
+      nodeType.prototype.onNodeCreated = async function() {
+         // Create node
+         const me = onNodeCreated?.apply(this);
+         // Add new input (name, type)
+         this.addInput(_PREFIX, _TYPE);
+         // Return node
+         return me;
+      }
+      // When connections change
+      const onConnectionsChange = nodeType.prototype.onConnectionsChange
+      nodeType.prototype.onConnectionsChange = function(slotType, slot_idx, event, link_info, node_slot) {
+         // Change the connections like normal
+         const me = onConnectionsChange?.apply(this, arguments);
+         // Only for inputs
+         if (slotType === TypeSlot.Input) {
+            // Skip static inputs
+            if (indexesToSkip.includes(slot_idx)) {
+               return me;
+               // If connects
+            } else if (link_info && event === TypeSlotEvent.Connect) {
+               // Get the parent (left side node) from the link
+               const fromNode = this.graph._nodes.find(
+                  (otherNode) => otherNode.id == link_info.origin_id
+               )
+               if (fromNode) {
+                  // Make sure there is a parent for the link
+                  const parent_link = fromNode.outputs[link_info.origin_slot];
+                  if (parent_link) {
+                     node_slot.type = parent_link.type;
+                     node_slot.name = `${_PREFIX}_`;
+                  }
+               }
+               // If disconnects
+            } else if (event === TypeSlotEvent.Disconnect) {
+               // Remove the input
+               this.removeInput(slot_idx);
+            }
+            console.log(slot_idx, link_info, node_slot);
+            // Track each slot name so we can index the uniques
+            let idx = indexesToSkip.length == 0 ? 0 : Math.max(...indexesToSkip) + 1; // Skip the static ones
+            let slot_tracker = {};
+            const actualInputs = this.inputs.slice(idx);
+            for (const slot of actualInputs) {
+               if (slot.link === null) {
+                  this.removeInput(idx);
+                  continue;
+               }
+               idx += 1;
+               const name = slot.name.split('_')[0];
+               // Correctly increment the count in slot_tracker
+               const count = (slot_tracker[name] || 0) + 1;
+               slot_tracker[name] = count;
+               // Update the slot name with the count if greater than 1
+               slot.name = `${name}_${count}`;
+            }
+            // Add last input to fix the removed ones
+            const last = this.inputs[this.inputs.length - 1];
+            if (last === undefined || (last.name != _PREFIX || last.type != _TYPE)) {
+               this.addInput(_PREFIX, _TYPE);
+            }
+            // Return node
+            this?.graph?.setDirtyCanvas(true);
+            return me;
+         }
       }
       return nodeType;
    }