From a5c78a5796b8b66740ed338d697289f49cd4d141 Mon Sep 17 00:00:00 2001
From: Jairo Correa <jn.j41r0@gmail.com>
Date: Sat, 25 Mar 2023 20:23:46 -0300
Subject: [PATCH] Draggable menu

---
 web/scripts/ui.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 web/style.css     | 25 +++++++++++++++++++++++++
 2 files changed, 69 insertions(+)

diff --git a/web/scripts/ui.js b/web/scripts/ui.js
index 58012fe6..a66f0eb3 100644
--- a/web/scripts/ui.js
+++ b/web/scripts/ui.js
@@ -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" } });
 	}
 
diff --git a/web/style.css b/web/style.css
index 52a8a9c6..d3168044 100644
--- a/web/style.css
+++ b/web/style.css
@@ -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%;
 }