Implement Compass Image Loader node with dynamic directory discovery and autocomplete

2026-04-22 09:18:52 -07:00
parent 56bee4b747
commit 0db6ca8277
3 changed files with 282 additions and 0 deletions
--- a/js/compass_image_loader.js
+++ b/js/compass_image_loader.js
@@ -0,0 +1,116 @@
+import { app } from "../../../scripts/app.js";
+
+app.registerExtension({
+    name: "CompassImageLoader",
+
+    async beforeRegisterNodeDef(nodeType, nodeData) {
+        if (nodeData.name !== "CompassImageLoader") return;
+
+        const origOnNodeCreated = nodeType.prototype.onNodeCreated;
+        nodeType.prototype.onNodeCreated = function () {
+            if (origOnNodeCreated) origOnNodeCreated.apply(this, []);
+
+            const directoryWidget = this.widgets.find(
+                (w) => w.name === "directory"
+            );
+            if (!directoryWidget) return;
+
+            directoryWidget._all_values = [...(directoryWidget.options.values || [])];
+
+            try {
+                if (typeof this.addDOMWidget === "function") {
+                    const inputEl = document.createElement("input");
+                    inputEl.type = "text";
+                    inputEl.value = directoryWidget.value;
+
+                    inputEl.addEventListener("change", () => {
+                        const filter = inputEl.value.toLowerCase();
+                        const filtered = directoryWidget._all_values.filter((v) =>
+                            v.toLowerCase().includes(filter)
+                        );
+                        directoryWidget.options.values = filtered;
+                        directoryWidget.value = filtered[0] || "";
+                        this.onResize?.();
+                    });
+
+                    const dropdownEl = document.createElement("div");
+                    dropdownEl.style.overflowY = "auto";
+                    dropdownEl.style.maxHeight = "200px";
+
+                    const listEl = document.createElement("ul");
+                    listEl.style.padding = "4px";
+                    listEl.style.margin = "0";
+                    listEl.style.background = "#333";
+
+                    inputEl.addEventListener("focus", () => {
+                        listEl.innerHTML = "";
+                        directoryWidget._all_values.forEach((v) => {
+                            const li = document.createElement("li");
+                            li.textContent = v;
+                            li.style.padding = "4px 8px";
+                            li.style.cursor = "pointer";
+                            li.addEventListener("click", () => {
+                                inputEl.value = v;
+                                directoryWidget.value = v;
+                                listEl.innerHTML = "";
+                            });
+                            listEl.appendChild(li);
+                        });
+                    });
+
+                    inputEl.addEventListener("blur", (e) => {
+                        setTimeout(() => {
+                            if (!listEl.contains(e.relatedTarget)) {
+                                listEl.innerHTML = "";
+                            }
+                        }, 0);
+                    });
+
+                    const textWidget = this.addDOMWidget(
+                        "directory_filter",
+                        "Directory Filter",
+                        inputEl,
+                        {},
+                        { widget: directoryWidget }
+                    );
+                    textWidget.computeSize = () => [1, 40];
+                }
+            } catch (e) {
+                console.warn("[CompassImageLoader] Widget setup failed:", e);
+            }
+        };
+    },
+
+    async loadedGraphNode(node) {
+        if (node.type !== "CompassImageLoader") return;
+        
+        const directoryWidget = node.widgets?.find((w) => w.name === "directory");
+        if (!directoryWidget) return;
+
+        setTimeout(() => {
+            try {
+                app.api.addWebSocketMessageEventListener("fresh-node-defs", (event) => {
+                    const defs = event.detail || {};
+                    const compassDef = defs["CompassImageLoader"];
+                    if (!compassDef) return;
+
+                    const dirs = compassDef.input?.required?.directory;
+                    if (!dirs || !Array.isArray(dirs)) return;
+
+                    directoryWidget._all_values = [...dirs];
+                    directoryWidget.options.values = [...dirs];
+
+                    if (!directoryWidget._all_values.includes(directoryWidget.value)) {
+                        directoryWidget.value = directoryWidget._all_values[0] || "";
+                    }
+                });
+            } catch (e) {
+                console.warn("[CompassImageLoader] Refresh listener failed:", e);
+            }
+        }, 100);
+    },
+
+    async getCustomWidgets() {
+        return null;
+    }
+});