Single direction field (combo or optional input); unique list IDs per node instance

This commit is contained in:
2026-04-22 14:36:11 -07:00
parent f3d8c6c0f3
commit e5e19c4dbc
2 changed files with 28 additions and 72 deletions

View File

@@ -84,9 +84,14 @@ app.registerExtension({
const inputEl = filterWidget?.inputEl;
if (!inputEl) return;
const listId = `compass_dir_list_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
const listEl = document.createElement("ul");
listEl.id = listId;
listEl.style.display = "none";
listEl.style.position = "absolute";
listEl.style.zIndex = "9999";
document.body.appendChild(listEl);
inputEl._listId = listId;
inputEl._currentPrefix = directoryWidget.value || "";
@@ -147,8 +152,9 @@ app.registerExtension({
inputEl.addEventListener("blur", () => {
setTimeout(() => {
if (!listEl.contains(document.activeElement)) {
hideDropdown(listEl);
const list = document.getElementById(inputEl._listId);
if (list && !list.contains(document.activeElement)) {
hideDropdown(list);
}
}, 150);
});
@@ -171,7 +177,9 @@ app.registerExtension({
}
});
const origSetValue = directoryWidget.callback ? directoryWidget.callback.bind(directoryWidget) : () => {};
const origSetValue = directoryWidget.callback
? directoryWidget.callback.bind(directoryWidget)
: () => {};
directoryWidget.callback = (value) => {
origSetValue(value);
inputEl._currentPrefix = value || "";
@@ -181,32 +189,9 @@ app.registerExtension({
const origOnRemoved = this.onRemoved ? this.onRemoved.bind(this) : () => {};
this.onRemoved = () => {
origOnRemoved();
listEl.remove();
const list = document.getElementById(listId);
if (list) list.remove();
};
const imageWidget = this.widgets?.find((w) => w.name === "image");
if (imageWidget) {
const origCallback = imageWidget.callback ? imageWidget.callback.bind(imageWidget) : () => {};
imageWidget.callback = (value) => {
origCallback(value);
if (imageWidget.element) {
imageWidget.element.style.opacity = "1";
}
};
}
};
},
async loadedGraphNode(node) {
if (node.type !== "CompassImageLoader") return;
const directoryWidget = node.widgets?.find((w) => w.name === "directory");
const filterWidget = node.widgets?.find((w) => w.name === "directory_filter");
const inputEl = filterWidget?.inputEl;
const listEl = document.getElementById("compass_dir_list");
if (inputEl && listEl) {
inputEl._currentPrefix = directoryWidget?.value || "";
}
},
});