"...composable_kernel_onnx.git" did not exist on "c366de553ede7ccb931ad32b03db5dd1b8655201"
Commit 20ae4851 authored by pythongosssss's avatar pythongosssss
Browse files

Add setting to save menu position

Add anchoring to side when resizing
Fix losing menu when resizing
parent f5365c9c
...@@ -35,21 +35,92 @@ function $el(tag, propsOrChildren, children) { ...@@ -35,21 +35,92 @@ function $el(tag, propsOrChildren, children) {
return element; return element;
} }
function dragElement(dragEl) { function dragElement(dragEl, settings) {
var posDiffX = 0, var posDiffX = 0,
posDiffY = 0, posDiffY = 0,
posStartX = 0, posStartX = 0,
posStartY = 0, posStartY = 0,
newPosX = 0, newPosX = 0,
newPosY = 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: // 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 { } else {
// otherwise, move the DIV from anywhere inside the DIV: // otherwise, move the DIV from anywhere inside the DIV:
dragEl.onmousedown = dragMouseDown; 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) { function dragMouseDown(e) {
e = e || window.event; e = e || window.event;
e.preventDefault(); e.preventDefault();
...@@ -64,18 +135,27 @@ function dragElement(dragEl) { ...@@ -64,18 +135,27 @@ function dragElement(dragEl) {
function elementDrag(e) { function elementDrag(e) {
e = e || window.event; e = e || window.event;
e.preventDefault(); e.preventDefault();
dragEl.classList.add("comfy-menu-manual-pos");
// calculate the new cursor position: // calculate the new cursor position:
posDiffX = e.clientX - posStartX; posDiffX = e.clientX - posStartX;
posDiffY = e.clientY - posStartY; posDiffY = e.clientY - posStartY;
posStartX = e.clientX; posStartX = e.clientX;
posStartY = e.clientY; 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))); newPosX = Math.min(document.body.clientWidth - dragEl.clientWidth, Math.max(0, dragEl.offsetLeft + posDiffX));
// set the element's new position: newPosY = Math.min(document.body.clientHeight - dragEl.clientHeight, Math.max(0, dragEl.offsetTop + posDiffY));
dragEl.style.top = newPosY + "px";
dragEl.style.left = newPosX + "px"; positionElement();
} }
window.addEventListener("resize", () => {
if (dragEl.classList.contains("comfy-menu-manual-pos")) {
ensureInBounds();
}
});
function closeDragElement() { function closeDragElement() {
// stop moving when mouse button is released: // stop moving when mouse button is released:
document.onmouseup = null; document.onmouseup = null;
...@@ -305,34 +385,52 @@ export class ComfyUI { ...@@ -305,34 +385,52 @@ export class ComfyUI {
$el("span", { $: (q) => (this.queueSize = q) }), $el("span", { $: (q) => (this.queueSize = q) }),
$el("button.comfy-settings-btn", { textContent: "⚙️", onclick: () => this.settings.show() }), $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("div", {}, [
$el("label", { innerHTML: "Extra options"}, [ $el("label", { innerHTML: "Extra options" }, [
$el("input", { type: "checkbox", $el("input", {
onchange: (i) => { type: "checkbox",
document.getElementById('extraOptions').style.display = i.srcElement.checked ? "block" : "none"; onchange: (i) => {
this.batchCount = i.srcElement.checked ? document.getElementById('batchCountInputRange').value : 1; document.getElementById("extraOptions").style.display = i.srcElement.checked ? "block" : "none";
document.getElementById('autoQueueCheckbox').checked = false; 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("div", { id: "extraOptions", style: { width: "100%", display: "none" } }, [
$el("label", { innerHTML: "Batch count" }, [ $el("label", { innerHTML: "Batch count" }, [
$el("input", { id: "batchCountInputNumber", type: "number", value: this.batchCount, min: "1", style: { width: "35%", "margin-left": "0.4em" }, $el("input", {
oninput: (i) => { id: "batchCountInputNumber",
type: "number",
value: this.batchCount,
min: "1",
style: { width: "35%", "margin-left": "0.4em" },
oninput: (i) => {
this.batchCount = i.target.value; this.batchCount = i.target.value;
document.getElementById('batchCountInputRange').value = this.batchCount; document.getElementById("batchCountInputRange").value = this.batchCount;
} },
}), }),
$el("input", { id: "batchCountInputRange", type: "range", min: "1", max: "100", value: this.batchCount, $el("input", {
id: "batchCountInputRange",
type: "range",
min: "1",
max: "100",
value: this.batchCount,
oninput: (i) => { oninput: (i) => {
this.batchCount = i.srcElement.value; 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", [ $el("div.comfy-menu-btns", [
...@@ -380,7 +478,7 @@ export class ComfyUI { ...@@ -380,7 +478,7 @@ export class ComfyUI {
$el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }), $el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }),
]); ]);
dragElement(this.menuContainer); dragElement(this.menuContainer, this.settings);
this.setStatus({ exec_info: { queue_remaining: "X" } }); this.setStatus({ exec_info: { queue_remaining: "X" } });
} }
...@@ -388,10 +486,14 @@ export class ComfyUI { ...@@ -388,10 +486,14 @@ export class ComfyUI {
setStatus(status) { setStatus(status) {
this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR"); this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
if (status) { 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); app.queuePrompt(0, this.batchCount);
} }
this.lastQueueSize = status.exec_info.queue_remaining this.lastQueueSize = status.exec_info.queue_remaining;
} }
} }
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment