Image Feed: UX Overhauling

README.md

@@ -64,9 +64,19 @@ Adds a custom color picker to nodes & groups
 Adds a favicon and title to the window, favicon changes color while generating and the window title includes the number of prompts in the queue
 
 ## Image Feed
-![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/caea0d48-85b9-4ca9-9771-5c795db35fbc)
-Adds a panel showing images that have been generated in the current session, you can control the direction that images are added and the position of the panel via the ComfyUI settings screen and the size of the panel and the images via the sliders at the top of the panel.  
-![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/ca093d38-41a3-4647-9223-5bd0b9ee4f1e)
+![image](https://github.com/birdddev/ComfyUI-Custom-Scripts/assets/47731506/b9f96e8b-c891-459d-b5c4-b43432caf880)
+Adds a panel showing images that have been generated in the current session, you can sort the images that are added by newest or oldest and change the position of the panel via the panel's settings.
+
+
+![image](https://github.com/birdddev/ComfyUI-Custom-Scripts/assets/47731506/1e4dbc2b-7484-43ee-9778-f4dcaddee913)
+
+
+Holding Shift while adjusting the panel size also adjusts the size of the images.
+While holding Ctrl, the panel will snap to the closest amount of "columns" the image size allows.
+
+
+https://github.com/birdddev/ComfyUI-Custom-Scripts/assets/47731506/78707e01-2053-438c-905d-ce6a1578b53b
+
 
 ## KSampler (Advanced) denoise helper
 Provides a simple method to set custom denoise on the advanced sampler  

web/js/common/popup.css

@@ -0,0 +1,38 @@
+.pysssss-popup {
+    /* Could be globals somewhere else? */
+    --popup-radius: 5px;
+
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    font-family: sans-serif;
+    font-size: 12px;
+    z-index: 199;
+    border-radius: var(--popup-radius);
+    padding: 5px;
+
+    width: 100%;
+    height: 100%;
+
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.pysssss-popup-header {
+    border-bottom: 1px solid var(--border-color);
+    text-align: right;
+    padding: 4px;
+}
+
+.pysssss-popup-container {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    clear: both;
+    background: #191919fa;
+    border-radius: var(--popup-radius);
+    width: auto;
+    height: auto;
+    padding: 4px;
+}

web/js/common/popup.js

@@ -0,0 +1,142 @@
+import { $el, ComfyDialog } from "../../../../scripts/ui.js";
+import { api } from "../../../../scripts/api.js";
+import { addStylesheet } from "./utils.js";
+
+addStylesheet(import.meta.url);
+
+export class PopUp {
+    constructor(element, options) {
+        let name = options.name;
+        this.activeOnHover = options.activeOnHover;
+        this.maxMouseDistance = options.maxMouseDistance ? options.maxMouseDistance : 50;
+
+        this.root = $el(`div.pysssss-popup`, {
+            parent: document.body,
+        });
+        this.container = $el("div.pysssss-popup-container");
+
+        if (name) {
+            const header = $el("div.pysssss-popup-header");
+            const headerLabel = $el("div.pysssss-popup-label")
+            header.append(headerLabel);
+            headerLabel.innerHTML = name;
+
+            this.container.append(header);
+        }
+
+        this.content = $el("div.pysssss-popup-content");
+
+        this.root.append(this.container);
+        this.container.append(this.content);
+
+
+        this.onRootMouseMoveBind = this.onRootMouseMove.bind(this);
+        this.onRootClickBind = this.onRootClick.bind(this);
+        this.onShowBind = this.show.bind(this);
+
+        this.attach(element);
+        this.hide();
+    }
+
+    /* (content) => {} */
+    setContent(contentCallback) {
+        contentCallback(this.content);
+    }
+
+    hide() {
+        this.root.style.display = "none";
+
+        this.root.removeEventListener('mousemove', this.onRootMouseMoveBind);
+        this.root.removeEventListener('mousedown', this.onRootClickBind);
+    }
+
+    show() {
+        this.root.style.display = "flex";
+
+        this.validatePosition();
+
+        this.root.addEventListener('mousemove', this.onRootMouseMoveBind);
+        this.root.addEventListener('mousedown', this.onRootClickBind);
+    }
+
+    attach(element) {
+        this.attachedElement = element;
+        if (this.activeOnHover) {
+            element.addEventListener('mouseenter', this.onShowBind);
+        } else {
+            element.addEventListener('mousedown', this.onShowBind);
+        }
+    }
+
+    detach() {
+        let element = this.attachedElement;
+        if (this.activeOnHover) {
+            element.removeEventListener('mouseenter', this.onShowBind);
+        } else {
+            element.removeEventListener('mousedown', this.onShowBind);
+        }
+
+        this.attachedElement = null;
+    }
+
+    inAttachedElement(event, x, y) {
+        let rect = this.attachedElement.getBoundingClientRect();
+        return rect.left <= x && x <= rect.right &&
+               rect.top <= y && y <= rect.bottom;
+    }   
+
+    onRootMouseMove(event) {
+        let mouseX = event.x;
+        let mouseY = event.y;
+
+        if (this.inAttachedElement(event, mouseX, mouseY)) {
+            return;
+        }
+
+        let rect = this.container.getBoundingClientRect();
+
+        /* If certain distance away from popup */
+        const maxDistance = 50;
+        if (rect.top - mouseY > this.maxMouseDistance || mouseY - rect.bottom > this.maxMouseDistance ||
+            rect.left - mouseX > this.maxMouseDistance || mouseX - rect.right > this.maxMouseDistance
+        ) {
+            this.hide();
+        }
+    }
+
+    onRootClick(event) {
+        if (this.container.matches(":hover")) {
+            return;
+        }
+
+        this.hide();
+    }
+
+    validatePosition() {
+        /* Set to position of attached element*/
+        let rect = this.attachedElement.getBoundingClientRect();
+        let computedStyle = getComputedStyle(this.container);
+
+        let buttonWidth = rect.right - rect.left;
+        let buttonHeight = rect.top - rect.bottom;
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+        let containerWidth = parseFloat(computedStyle.width); 
+        let containerHeight = parseFloat(computedStyle.height);
+
+        let x = rect.left;
+        let y = rect.top;
+
+        this.container.style.left = `${x}px`;
+        this.container.style.top = `${y - buttonHeight + 2}px`;
+
+        /* Make sure popup is fully inside window */
+        if (x + containerWidth > windowWidth) {
+            this.container.style.left = `${rect.right - containerWidth - 10.0}px`;
+        }
+
+        if (y + containerHeight * 2.0 + (buttonHeight) > windowHeight) {
+            this.container.style.top = `${rect.top - containerHeight - 10.0}px`;
+        }
+    }
+}