mirror of
https://github.com/comfyanonymous/ComfyUI.git
synced 2025-01-11 10:25:16 +00:00
Add setting to save menu position
Add anchoring to side when resizing Fix losing menu when resizing
This commit is contained in:
pythongosssss
parent
f5365c9c81
commit
20ae48515e
@ -35,21 +35,92 @@ function $el(tag, propsOrChildren, children) {
|
||||
return element;
|
||||
}
|
||||
|
||||
function dragElement(dragEl) {
|
||||
function dragElement(dragEl, settings) {
|
||||
var posDiffX = 0,
|
||||
posDiffY = 0,
|
||||
posStartX = 0,
|
||||
posStartY = 0,
|
||||
newPosX = 0,
|
||||
newPosY = 0;
|
||||
if (dragEl.getElementsByClassName('drag-handle')[0]) {
|
||||
if (dragEl.getElementsByClassName("drag-handle")[0]) {
|
||||
// if present, the handle is where you move the DIV from:
|
||||
dragEl.getElementsByClassName('drag-handle')[0].onmousedown = dragMouseDown;
|
||||
dragEl.getElementsByClassName("drag-handle")[0].onmousedown = dragMouseDown;
|
||||
} else {
|
||||
// otherwise, move the DIV from anywhere inside the DIV:
|
||||
dragEl.onmousedown = dragMouseDown;
|
||||
}
|
||||
|
||||
function ensureInBounds() {
|
||||
newPosX = Math.min(document.body.clientWidth - dragEl.clientWidth, Math.max(0, dragEl.offsetLeft));
|
||||
newPosY = Math.min(document.body.clientHeight - dragEl.clientHeight, Math.max(0, dragEl.offsetTop));
|
||||
|
||||
console.log(newPosX, newPosY)
|
||||
|
||||
positionElement();
|
||||
}
|
||||
|
||||
function positionElement() {
|
||||
const halfWidth = document.body.clientWidth / 2;
|
||||
const halfHeight = document.body.clientHeight / 2;
|
||||
|
||||
const anchorRight = newPosX + dragEl.clientWidth / 2 > halfWidth;
|
||||
const anchorBottom = newPosY + dragEl.clientHeight / 2 > halfHeight;
|
||||
|
||||
// set the element's new position:
|
||||
if (anchorRight) {
|
||||
dragEl.style.left = "unset";
|
||||
dragEl.style.right = document.body.clientWidth - newPosX - dragEl.clientWidth + "px";
|
||||
} else {
|
||||
dragEl.style.left = newPosX + "px";
|
||||
dragEl.style.right = "unset";
|
||||
}
|
||||
if (anchorBottom) {
|
||||
dragEl.style.top = "unset";
|
||||
dragEl.style.bottom = document.body.clientHeight - newPosY - dragEl.clientHeight + "px";
|
||||
} else {
|
||||
dragEl.style.top = newPosY + "px";
|
||||
dragEl.style.bottom = "unset";
|
||||
}
|
||||
|
||||
if (savePos) {
|
||||
localStorage.setItem(
|
||||
"Comfy.MenuPosition",
|
||||
JSON.stringify({
|
||||
left: dragEl.style.left,
|
||||
right: dragEl.style.right,
|
||||
top: dragEl.style.top,
|
||||
bottom: dragEl.style.bottom,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function restorePos() {
|
||||
let pos = localStorage.getItem("Comfy.MenuPosition");
|
||||
if (pos) {
|
||||
pos = JSON.parse(pos);
|
||||
dragEl.style.left = pos.left;
|
||||
dragEl.style.right = pos.right;
|
||||
dragEl.style.top = pos.top;
|
||||
dragEl.style.bottom = pos.bottom;
|
||||
ensureInBounds();
|
||||
}
|
||||
}
|
||||
|
||||
let savePos = undefined;
|
||||
settings.addSetting({
|
||||
id: "Comfy.MenuPosition",
|
||||
name: "Save menu position",
|
||||
type: "boolean",
|
||||
defaultValue: savePos,
|
||||
onChange(value) {
|
||||
if (savePos === undefined && value) {
|
||||
restorePos();
|
||||
}
|
||||
savePos = value;
|
||||
},
|
||||
});
|
||||
|
||||
function dragMouseDown(e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
@ -64,18 +135,27 @@ function dragElement(dragEl) {
|
||||
function elementDrag(e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
|
||||
dragEl.classList.add("comfy-menu-manual-pos");
|
||||
|
||||
// calculate the new cursor position:
|
||||
posDiffX = e.clientX - posStartX;
|
||||
posDiffY = e.clientY - posStartY;
|
||||
posStartX = e.clientX;
|
||||
posStartY = e.clientY;
|
||||
newPosX = Math.min((document.body.clientWidth - dragEl.clientWidth), Math.max(0, (dragEl.offsetLeft + posDiffX)));
|
||||
newPosY = Math.min((document.body.clientHeight - dragEl.clientHeight), Math.max(0, (dragEl.offsetTop + posDiffY)));
|
||||
// set the element's new position:
|
||||
dragEl.style.top = newPosY + "px";
|
||||
dragEl.style.left = newPosX + "px";
|
||||
|
||||
newPosX = Math.min(document.body.clientWidth - dragEl.clientWidth, Math.max(0, dragEl.offsetLeft + posDiffX));
|
||||
newPosY = Math.min(document.body.clientHeight - dragEl.clientHeight, Math.max(0, dragEl.offsetTop + posDiffY));
|
||||
|
||||
positionElement();
|
||||
}
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (dragEl.classList.contains("comfy-menu-manual-pos")) {
|
||||
ensureInBounds();
|
||||
}
|
||||
});
|
||||
|
||||
function closeDragElement() {
|
||||
// stop moving when mouse button is released:
|
||||
document.onmouseup = null;
|
||||
@ -305,34 +385,52 @@ export class ComfyUI {
|
||||
$el("span", { $: (q) => (this.queueSize = q) }),
|
||||
$el("button.comfy-settings-btn", { textContent: "⚙️", onclick: () => this.settings.show() }),
|
||||
]),
|
||||
$el("button.comfy-queue-btn", { textContent: "Queue Prompt", onclick: () => app.queuePrompt(0, this.batchCount) }),
|
||||
$el("button.comfy-queue-btn", {
|
||||
textContent: "Queue Prompt",
|
||||
onclick: () => app.queuePrompt(0, this.batchCount),
|
||||
}),
|
||||
$el("div", {}, [
|
||||
$el("label", { innerHTML: "Extra options"}, [
|
||||
$el("input", { type: "checkbox",
|
||||
onchange: (i) => {
|
||||
document.getElementById('extraOptions').style.display = i.srcElement.checked ? "block" : "none";
|
||||
this.batchCount = i.srcElement.checked ? document.getElementById('batchCountInputRange').value : 1;
|
||||
document.getElementById('autoQueueCheckbox').checked = false;
|
||||
}
|
||||
})
|
||||
])
|
||||
]),
|
||||
$el("div", { id: "extraOptions", style: { width: "100%", display: "none" }}, [
|
||||
$el("label", { innerHTML: "Batch count" }, [
|
||||
$el("input", { id: "batchCountInputNumber", type: "number", value: this.batchCount, min: "1", style: { width: "35%", "margin-left": "0.4em" },
|
||||
oninput: (i) => {
|
||||
this.batchCount = i.target.value;
|
||||
document.getElementById('batchCountInputRange').value = this.batchCount;
|
||||
}
|
||||
$el("label", { innerHTML: "Extra options" }, [
|
||||
$el("input", {
|
||||
type: "checkbox",
|
||||
onchange: (i) => {
|
||||
document.getElementById("extraOptions").style.display = i.srcElement.checked ? "block" : "none";
|
||||
this.batchCount = i.srcElement.checked ? document.getElementById("batchCountInputRange").value : 1;
|
||||
document.getElementById("autoQueueCheckbox").checked = false;
|
||||
},
|
||||
}),
|
||||
$el("input", { id: "batchCountInputRange", type: "range", min: "1", max: "100", value: this.batchCount,
|
||||
]),
|
||||
]),
|
||||
$el("div", { id: "extraOptions", style: { width: "100%", display: "none" } }, [
|
||||
$el("label", { innerHTML: "Batch count" }, [
|
||||
$el("input", {
|
||||
id: "batchCountInputNumber",
|
||||
type: "number",
|
||||
value: this.batchCount,
|
||||
min: "1",
|
||||
style: { width: "35%", "margin-left": "0.4em" },
|
||||
oninput: (i) => {
|
||||
this.batchCount = i.target.value;
|
||||
document.getElementById("batchCountInputRange").value = this.batchCount;
|
||||
},
|
||||
}),
|
||||
$el("input", {
|
||||
id: "batchCountInputRange",
|
||||
type: "range",
|
||||
min: "1",
|
||||
max: "100",
|
||||
value: this.batchCount,
|
||||
oninput: (i) => {
|
||||
this.batchCount = i.srcElement.value;
|
||||
document.getElementById('batchCountInputNumber').value = i.srcElement.value;
|
||||
}
|
||||
document.getElementById("batchCountInputNumber").value = i.srcElement.value;
|
||||
},
|
||||
}),
|
||||
$el("input", {
|
||||
id: "autoQueueCheckbox",
|
||||
type: "checkbox",
|
||||
checked: false,
|
||||
title: "automatically queue prompt when the queue size hits 0",
|
||||
}),
|
||||
$el("input", { id: "autoQueueCheckbox", type: "checkbox", checked: false, title: "automatically queue prompt when the queue size hits 0",
|
||||
})
|
||||
]),
|
||||
]),
|
||||
$el("div.comfy-menu-btns", [
|
||||
@ -380,7 +478,7 @@ export class ComfyUI {
|
||||
$el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }),
|
||||
]);
|
||||
|
||||
dragElement(this.menuContainer);
|
||||
dragElement(this.menuContainer, this.settings);
|
||||
|
||||
this.setStatus({ exec_info: { queue_remaining: "X" } });
|
||||
}
|
||||
@ -388,10 +486,14 @@ export class ComfyUI {
|
||||
setStatus(status) {
|
||||
this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
|
||||
if (status) {
|
||||
if (this.lastQueueSize != 0 && status.exec_info.queue_remaining == 0 && document.getElementById('autoQueueCheckbox').checked) {
|
||||
if (
|
||||
this.lastQueueSize != 0 &&
|
||||
status.exec_info.queue_remaining == 0 &&
|
||||
document.getElementById("autoQueueCheckbox").checked
|
||||
) {
|
||||
app.queuePrompt(0, this.batchCount);
|
||||
}
|
||||
this.lastQueueSize = status.exec_info.queue_remaining
|
||||
this.lastQueueSize = status.exec_info.queue_remaining;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user