117 lines
4.5 KiB
JavaScript
117 lines
4.5 KiB
JavaScript
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;
|
|
}
|
|
});
|