Blueprint Coding
84612badfb
Added in Multi Float Node. Added in ability to add group labels between nodes New UI settings like hide # labels, row gap sizes, improved settings layout
99 lines
3.5 KiB
JavaScript
99 lines
3.5 KiB
JavaScript
// AIDocSharedClasses.js
|
|
// Shared class for a styled popup with header + content container.
|
|
|
|
export class SettingsPopup {
|
|
constructor(node) {
|
|
// Node reference if needed
|
|
this.node = node;
|
|
|
|
// Root popup
|
|
this.popupElement = document.createElement("div");
|
|
this.popupElement.style.position = "fixed";
|
|
this.popupElement.style.width = "350px";
|
|
this.popupElement.style.background = "#181818";
|
|
this.popupElement.style.border = "2px solid #4b3e72";
|
|
this.popupElement.style.borderRadius = "6px";
|
|
this.popupElement.style.zIndex = "11000";
|
|
this.popupElement.style.display = "flex";
|
|
this.popupElement.style.flexDirection = "column";
|
|
this.popupElement.style.alignItems = "center";
|
|
this.popupElement.style.gap = "0px"; // We'll add content padding
|
|
|
|
// Header
|
|
this.headerElement = document.createElement("div");
|
|
this.headerElement.textContent = "Multi Node Settings";
|
|
this.headerElement.style.width = "100%";
|
|
this.headerElement.style.color = "#fff";
|
|
this.headerElement.style.fontSize = "14px";
|
|
this.headerElement.style.padding = "6px 0";
|
|
this.headerElement.style.textAlign = "center";
|
|
this.headerElement.style.background = "#131313"; // darker background
|
|
this.headerElement.style.borderBottom = "2px solid #4b3e72";
|
|
this.headerElement.style.borderRadius = "4px 4px 0 0";
|
|
this.popupElement.appendChild(this.headerElement);
|
|
|
|
// Content container
|
|
this.contentContainer = document.createElement("div");
|
|
this.contentContainer.style.width = "100%";
|
|
this.contentContainer.style.padding = "8px";
|
|
this.contentContainer.style.display = "flex";
|
|
this.contentContainer.style.flexDirection = "column";
|
|
this.contentContainer.style.alignItems = "center";
|
|
this.contentContainer.style.gap = "8px";
|
|
this.popupElement.appendChild(this.contentContainer);
|
|
}
|
|
|
|
|
|
open() {
|
|
// Center the popup in the viewport
|
|
const windowWidth = window.innerWidth;
|
|
const windowHeight = window.innerHeight;
|
|
const popupWidth = this.popupElement.offsetWidth;
|
|
const popupHeight = this.popupElement.offsetHeight;
|
|
|
|
const left = (windowWidth - popupWidth) / 2;
|
|
const top = (windowHeight - popupHeight) / 2 - 100;
|
|
|
|
this.popupElement.style.left = `${left}px`;
|
|
this.popupElement.style.top = `${top}px`;
|
|
|
|
document.body.appendChild(this.popupElement);
|
|
|
|
// Outside click to close
|
|
const closePopup = (evt) => {
|
|
if (!this.popupElement.contains(evt.target)) {
|
|
this.close();
|
|
document.removeEventListener("click", closePopup, true);
|
|
}
|
|
};
|
|
setTimeout(() => {
|
|
document.addEventListener("click", closePopup, true);
|
|
}, 100);
|
|
}
|
|
|
|
close() {
|
|
if (this.popupElement.parentNode) {
|
|
this.popupElement.parentNode.removeChild(this.popupElement);
|
|
}
|
|
}
|
|
|
|
setHeader(text) {
|
|
this.headerElement.textContent = text;
|
|
}
|
|
|
|
getContentContainer() {
|
|
return this.contentContainer;
|
|
}
|
|
|
|
clearContent() {
|
|
this.contentContainer.innerHTML = "";
|
|
}
|
|
|
|
reposition(relativeElem, offsetX = 10, offsetY = 10) {
|
|
if (!relativeElem) return;
|
|
const rect = relativeElem.getBoundingClientRect();
|
|
this.popupElement.style.left = (rect.left + offsetX) + "px";
|
|
this.popupElement.style.top = (rect.top + offsetY) + "px";
|
|
}
|
|
}
|