Files

T

MilesandClaude Opus 4.6 fff96df2ca Initial commit: Node Colorizer extension

Floating RGBA color picker panel for coloring selected ComfyUI nodes.
Integrates with the MCE bottom bar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-04 09:45:20 -08:00

1.5 KiB

Raw Permalink Blame History

CLAUDE.md — ComfyUI-NodeColorizer

Overview

Pure frontend ComfyUI extension. No backend nodes — NODE_CLASS_MAPPINGS is empty. Adds a floating RGBA color picker panel accessible via the MCE bottom bar.

File Structure

__init__.py              # Extension entry point (WEB_DIRECTORY = "web", no nodes)
web/
  node_colorizer.js      # Main logic: panel creation, color math, MCE pill registration
  node_colorizer.css     # Dark-themed panel styles

Key Architecture

MCE Integration: imports registerMcePill from /extensions/ComfyUI-MCE/mce_bottom_bar.js
ComfyUI Extension: registers via app.registerExtension() with name ComfyUI-NodeColorizer.Panel
LiteGraph Nodes: reads app.canvas.selected_nodes, sets node.color and node.bgcolor
Persistence: stores color in node.properties.mce_node_color
CSS Loading: loadCssOnce() injects stylesheet link once, avoids duplicates

Color Model

RGB channels: 0–255 (clamped via clamp255)
Alpha: 0–1 (clamped via clamp01)
Output format: rgba(r, g, b, a) CSS string
Hex picker syncs with RGB only (HTML5 color input doesn't support alpha)

Panel Behavior

Lazy-created on first open via makePanel()
Fixed position, z-index 10050
Draggable by header; constrains to viewport bounds
Show/hide toggled by MCE pill button

Dependencies

ComfyUI core (/scripts/app.js)
ComfyUI-MCE (/extensions/ComfyUI-MCE/mce_bottom_bar.js)
No Python packages

1.5 KiB Raw Permalink Blame History Unescape Escape

CLAUDE.md — ComfyUI-NodeColorizer

Overview

File Structure

Key Architecture

Color Model

Panel Behavior

Dependencies

1.5 KiB

Raw Permalink Blame History