298977887/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-03-13 14:21:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Draggable menu

Browse Source
This commit is contained in:
Jairo Correa 2023-03-25 20:23:46 -03:00
parent e651be551c
commit a5c78a5796
2 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/scripts/ui.js
View File

@ -35,6 +35,47 @@ function $el(tag, propsOrChildren, children) {
return element;
}
function dragElement(dragEl) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 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;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
dragEl.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
dragEl.style.top = (dragEl.offsetTop - pos2) + "px";
dragEl.style.left = (dragEl.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
class ComfyDialog {
constructor() {
this.element = $el("div.comfy-modal", { parent: document.body }, [
@ -253,6 +294,7 @@ export class ComfyUI {
this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [
$el("div", { style: { overflow: "hidden", position: "relative", width: "100%" } }, [
$el("span.drag-handle"),
$el("span", { $: (q) => (this.queueSize = q) }),
$el("button.comfy-settings-btn", { textContent: "⚙️", onclick: () => this.settings.show() }),
]),
@ -331,6 +373,8 @@ export class ComfyUI {
$el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }),
]);
dragElement(this.menuContainer);
this.setStatus({ exec_info: { queue_remaining: "X" } });
}

25
web/style.css
View File

@ -111,6 +111,31 @@ body {
width: 50%;
}
.comfy-menu span.drag-handle {
width: 10px;
height: 20px;
display: inline-block;
overflow: hidden;
line-height: 5px;
padding: 3px 4px;
cursor: move;
vertical-align: middle;
margin-top: -.4em;
margin-left: -.2em;
font-size: 12px;
font-family: sans-serif;
letter-spacing: 2px;
color: #cccccc;
text-shadow: 1px 0 1px black;
position: absolute;
top: 0;
left: 0;
}
.comfy-menu span.drag-handle::after {
content: '.. .. ..';
}
.comfy-queue-btn {
width: 100%;
}