From 20ae48515e423c102a8845079cf05d530ffdb84d Mon Sep 17 00:00:00 2001 From: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Date: Sun, 26 Mar 2023 15:01:34 +0100 Subject: [PATCH 1/6] Add setting to save menu position Add anchoring to side when resizing Fix losing menu when resizing --- web/scripts/ui.js | 164 +++++++++++++++++++++++++++++++++++++--------- 1 file changed, 133 insertions(+), 31 deletions(-) diff --git a/web/scripts/ui.js b/web/scripts/ui.js index 94f3c528..d92e2cfa 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -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("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("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) => { + $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; - } + 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) => { 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; } } } From 716d8e746af6f7ce24f18f7641f055713fb32a42 Mon Sep 17 00:00:00 2001 From: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Date: Sun, 26 Mar 2023 15:03:57 +0100 Subject: [PATCH 2/6] Remove log --- web/scripts/ui.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/web/scripts/ui.js b/web/scripts/ui.js index d92e2cfa..117f4369 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -54,8 +54,6 @@ function dragElement(dragEl, settings) { 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(); } From 0b1e85fbea14b3a9ed6269b53ec921dc4eb02668 Mon Sep 17 00:00:00 2001 From: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Date: Sun, 26 Mar 2023 15:10:38 +0100 Subject: [PATCH 3/6] Add manual flag when restoring pos --- web/scripts/ui.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/scripts/ui.js b/web/scripts/ui.js index 117f4369..404aae26 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -101,6 +101,7 @@ function dragElement(dragEl, settings) { dragEl.style.right = pos.right; dragEl.style.top = pos.top; dragEl.style.bottom = pos.bottom; + dragEl.classList.add("comfy-menu-manual-pos"); ensureInBounds(); } } From c93dc2fb89d83ef04837d6a4a712870a2a13eac7 Mon Sep 17 00:00:00 2001 From: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Date: Thu, 30 Mar 2023 20:14:01 +0100 Subject: [PATCH 4/6] Remove bottom anchor --- web/scripts/ui.js | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/web/scripts/ui.js b/web/scripts/ui.js index fc37fd3d..8c7f096d 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -50,19 +50,24 @@ function dragElement(dragEl, settings) { dragEl.onmousedown = dragMouseDown; } + // When the element resizes (e.g. view queue) ensure it is still in the windows bounds + const resizeObserver = new ResizeObserver(() => { + ensureInBounds(); + }).observe(dragEl); + function ensureInBounds() { + if (dragEl.classList.contains("comfy-menu-manual-pos")) { 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)); 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) { @@ -72,22 +77,15 @@ function dragElement(dragEl, settings) { 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, + x: dragEl.offsetLeft, + y: dragEl.offsetTop, }) ); } @@ -97,11 +95,9 @@ function dragElement(dragEl, settings) { 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; - dragEl.classList.add("comfy-menu-manual-pos"); + newPosX = pos.x; + newPosY = pos.y; + positionElement(); ensureInBounds(); } } @@ -150,9 +146,7 @@ function dragElement(dragEl, settings) { } window.addEventListener("resize", () => { - if (dragEl.classList.contains("comfy-menu-manual-pos")) { ensureInBounds(); - } }); function closeDragElement() { From 3a5bcdf8b9a141f7e629ac3a7174f20af3aac5a1 Mon Sep 17 00:00:00 2001 From: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Date: Thu, 30 Mar 2023 20:15:12 +0100 Subject: [PATCH 5/6] Formatting --- web/scripts/ui.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/scripts/ui.js b/web/scripts/ui.js index 8c7f096d..194d8e2d 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -57,11 +57,11 @@ function dragElement(dragEl, settings) { function ensureInBounds() { if (dragEl.classList.contains("comfy-menu-manual-pos")) { - 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)); + 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)); - positionElement(); - } + positionElement(); + } } function positionElement() { From 722801ed2da85478863a1fb9950450897eb7b0b6 Mon Sep 17 00:00:00 2001 From: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Date: Thu, 30 Mar 2023 20:15:48 +0100 Subject: [PATCH 6/6] Formatting --- web/scripts/ui.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/scripts/ui.js b/web/scripts/ui.js index 194d8e2d..587f4e52 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -66,7 +66,6 @@ function dragElement(dragEl, settings) { function positionElement() { const halfWidth = document.body.clientWidth / 2; - const anchorRight = newPosX + dragEl.clientWidth / 2 > halfWidth; // set the element's new position: @@ -77,8 +76,9 @@ function dragElement(dragEl, settings) { dragEl.style.left = newPosX + "px"; dragEl.style.right = "unset"; } - dragEl.style.top = newPosY + "px"; - dragEl.style.bottom = "unset"; + + dragEl.style.top = newPosY + "px"; + dragEl.style.bottom = "unset"; if (savePos) { localStorage.setItem(