XFlow Resolution - ComfyUI Custom Node

A production-ready, premium resolution utility node for ComfyUI. The interface is custom-tailored with a futuristic XFlow Green theme, featuring a high-performance 3x3 aspect ratio grid, instant preset selection, dynamic custom ratio generation, full aspect ratio lock, and advanced UX conveniences (favorites, recents, search, clipboard copying, and keyboard navigation).

This node outputs only width and height integers, making it a drop-in replacement for standard resolution/latent sizing inputs.

---

🎨 Theme: XFlow Green

Inspired by the Higgsfield AI design language:

• Primary Accents: #7CFF00, #6AFF00, #00FF99 (Vibrant Neon Greens)
• Deep Backgrounds: #101010 (Background), #161616 (Panel Surface)
• Borders & Dividers: #2B2B2B (Thin clean bounds)
• Soft Glows & Shadows: Integrated neon hover glows and smooth border transitions.

---

✨ Features

• 3x3 Aspect Ratio Grid: Instantly toggle between common aspect ratios: 1:1, 16:9, 9:16, 2:1, 3:2, 2:3, 4:3, 3:4, and 4:5.
• Pre-populated Presets: Click any preset to instantly adjust resolution. Each preset is annotated with its total megapixel count.
• Model Compatibility Badges: Automatically labels recommended configurations for SDXL, FLUX, and WAN models.
• Custom Ratio Generator: Input custom ratio values (e.g., 5:7) and dynamically generate standard-compliant (multiples of 8) resolutions that preserve the ratio.
• Custom Resolution Override: Directly enter any pixel dimensions (Width and Height). Setting custom overrides scales the layout and dims pre-existing presets.
• Aspect Ratio Lock: Constrain dimensions. Modifying width dynamically re-scales height to preserve proportions (and vice versa).
• Favorites & Recents:
  • Click the Star icon to save presets to your favorites list.
  • Frequently used resolutions are automatically tracked in the Recent tab.
  • Data is persisted globally via localStorage.
• Search Filtering: Filter presets by typing (e.g., 1024 or 720).
• Additional Tools:
  • 🎲 Random: Selects a random resolution from the active preset list.
  • 📋 Copy: Copies [width]x[height] to the system clipboard.
  • 🔒 LiteGraph Interception: Stopped click-through bugs (clicking UI elements does not drag the node or canvas).
  • ⌨️ Keyboard Navigation: Use Up/Down/Enter keys to scroll and select presets.

---

📸 Interface Preview

(Screenshots Placeholder - See implementation)

The custom canvas node overlays a sleek HTML DOM container using ComfyUI's native custom widget system:

• High contrast, dark paneling.
• Floating green tooltips on hover.
• Vibrant green neon focus borders.
• Multi-column transitions.

---

🚀 Installation

1. Navigate to your ComfyUI root directory.
2. Go into custom_nodes/.
3. Clone this repo:

   git clone https://github.com/navalyalgam97/comfyui-xflow-resolution.git
   

4. Restart ComfyUI. The node will load automatically.

---

🎯 Usage

1. Double-click on the ComfyUI canvas or right-click to bring up the search.
2. Search for XFlow Resolution.
3. Add the node to your graph.
4. Connect the output width and height ports directly into any node accepting dimensions, such as:
   • Empty Latent Image
   • EmptySDXLImage
   • FluxLatentImage
   • Empty Latent Image (RG3)
   • Upscale Latent

Overrides & Custom Settings

• To select a Preset: Choose a ratio from the grid (e.g., 16:9), then click a resolution (e.g., 1920 × 1080).
• To lock the Aspect Ratio: Click the Padlock icon in the header. Now, any change to width or height will proportionally update the other.
• To use a Custom Ratio: Toggle the Custom Ratio switch and input your ratio width/height. Select from the generated list.
• To use a Custom Resolution: Toggle the Custom Res switch and type in your exact width and height.

---

🛠️ Tech Stack & Requirements

• ComfyUI Latest
• Python: 3.11+
• Compatibility: Windows, Linux, Mac
• Dependencies: No external Python requirements. Front-end is rendered via native HTML5/CSS3/ES6 JavaScript.