Initial commit

INSTRUCTIONS.md

@@ -0,0 +1,93 @@
+# IAMCCS Annotate — User Guide
+
+Version: 1.0.0
+
+Coming soon: 2.0.0
+
+A fast, reliable annotation layer for ComfyUI. Draw, erase, organize in layers, and save notes inside your workflow.
+
+## What’s included
+
+- Zero-offset drawing/erasing that sticks to the graph while you pan/zoom
+- Floating button with context menu and a draggable dock panel when sidebar is missing
+- Layers with visibility/lock/rename/delete
+- Per-mode brush sizes (draw vs eraser), opacity, dashed lines, constant width
+ - HiDPI ×2 toggle for higher-quality rendering
+- Hide/show all annotations quickly
+- Export/import your entire workflow + annotations
+- Undo/redo and copy/paste for layers
+- Draw above or below nodes (foreground/background)
+- Automatic save to workflow.extra
+
+## Quick start
+
+1. Launch ComfyUI and load/open a workflow.
+2. Click the floating button “Annotate: OFF” to turn ON (turns green).
+3. Draw with left mouse. Middle button still pans the canvas.
+4. Right-click the floating button to open the context menu.
+
+## Shortcuts
+
+- Alt+A — Toggle annotation mode
+- Alt+D — Toggle eraser/draw
+- Alt+S — Hide/show all annotations
+- Alt+F — Export workflow + notes (JSON)
+- Ctrl+I — Import workflow + notes (JSON)
+
+Note: On macOS, Alt refers to Option.
+
+## Drawing options
+
+- Color: color picker
+- Brush size: 1–48 px
+- Opacity: 10–100%
+- Dashed: enable dashed strokes
+- Constant width: keeps the stroke width consistent on-screen regardless of zoom
+ - HiDPI ×2: supersamples annotation rendering for crisper lines (uses more memory)
+- Draw above nodes: when enabled, notes appear in the foreground; disable to push them behind nodes
+
+## Layers
+
+- + Layer: adds a new layer and selects it
+- Click name: selects the layer
+- Double-click name: rename; Enter to save, Esc to cancel
+- Eye icon: toggle visibility
+- Lock icon: prevent edits on the layer
+- X: delete layer (at least one layer is always kept)
+
+## Saving and persistence
+
+- Saves to workflow.extra.iamccs_annotations
+- Automatically saves when you:
+  - complete a stroke
+  - paste
+  - clear
+  - import
+  - change key settings
+- When you load a workflow, its annotations load automatically
+- Each workflow keeps its own annotations
+
+## Export / Import
+
+- Export (Alt+F): downloads a JSON of the full workflow with annotations embedded in `extra.iamccs_annotations`
+- Import (ctrl+I): loads the full workflow if present; otherwise imports annotations only
+- Import JSON (menu): imports annotations into the current layer
+
+## Troubleshooting
+
+- Floating button doesn’t show
+  - Wait a moment; it appears on first canvas draw
+  - Restart ComfyUI if needed
+- Eraser draws black instead of erasing
+  - Make sure you’re using the included extension version; erasing works against an off-screen layer
+- Notes shift when zooming/panning
+  - Fixed: the plugin draws in graph-space and composes in screen-space with devicePixelRatio awareness
+- Notes don’t load
+  - Verify the workflow JSON has `extra.iamccs_annotations`
+  - Ensure the menu toggle “Save into WF” is enabled if you want automatic saving
+
+## Author and License
+
+- Author: Carmine Cristallo Scalzi (IAMCCS)
+- License: Creative Commons Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0)
+- License URL: https://creativecommons.org/licenses/by-nd/4.0/

LICENSE

@@ -0,0 +1,16 @@
+Creative Commons Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0)
+
+You are free to:
+- Share — copy and redistribute the material in any medium or format
+- Use — for personal or commercial purposes
+
+Under the following terms:
+- Attribution — You must give appropriate credit, provide a link to the license, 
+  and indicate if changes were made. You may do so in any reasonable manner, 
+  but not in any way that suggests the licensor endorses you or your use.
+- No Derivatives — If you remix, transform, or build upon the material, 
+  you may not distribute the modified material without explicit permission 
+  from the author.
+
+Author: Carmine Cristallo Scalzi (IAMCCS)
+License URL: https://creativecommons.org/licenses/by-nd/4.0/

README.md

@@ -0,0 +1,188 @@
+# IAMCCS Annotate - ComfyUI Drawing Extension
+
+<img src="icon.png" width="150" height="150">
+
+Version: 1.0.0 — Coming soon: 2.0.0 (many new features!)
+
+A powerful drawing and annotation tool for ComfyUI that lets you add notes, sketches, and annotations directly on your workflow canvas with full layer support.
+
+![Title](assets/annotate_1.png)
+
+## Features
+
+✨ **Drawing Tools**
+- Free-hand drawing with customizable brush size (1-48px)
+- Eraser mode to remove strokes
+- Color picker for custom drawing colors
+- Opacity control (10-100%)
+- Dashed line option for different line styles
+- Constant width option (maintains width at any zoom level)
+ - HiDPI ×2 rendering toggle for crisper strokes
+
+🎨 **Layer System**
+- Create unlimited layers for organized annotations
+- Toggle layer visibility (eye icon)
+- Lock/unlock layers to prevent accidental editing
+- Rename layers inline (double-click the name)
+- Delete layers (minimum 1 layer always kept)
+- Auto-selects new layer as active
+
+📌 **State Management**
+- Save annotations with workflow (automatic)
+- Load annotations when reopening workflows
+- Quick toggle to hide/show all annotations
+- Persistent layer structure across sessions
+
+🖱️ **User Interface**
+- Floating button with context menu (right-click)
+
+![Title](assets/annotat_3.png)
+
+- Draggable button (click to toggle, drag to move)
+- Compact control panel in context menu
+- Inline layer naming (no popups)
+- Real-time visual feedback
+
+![Title](assets/annotate_2.png)
+
+🎯 **Keyboard Shortcuts**
+| Shortcut | Action |
+|----------|--------|
+| **Alt+A** | Toggle annotation mode ON/OFF |
+| **Alt+D** | Toggle eraser / draw mode |
+| **Alt+S** | Toggle hide/show annotations |
+| **Esc** | Cancel current stroke |
+
+## Installation
+
+1. Download or clone this extension into your ComfyUI custom_nodes folder:
+```bash
+cd ComfyUI/custom_nodes
+git clone https://github.com/IAMCCS/IAMCCS_annotate.git
+```
+
+2. Restart ComfyUI
+
+3. Look for the **"Annotate: OFF"** button in the bottom-left corner
+
+### If my work helped you, and you’d like to say thanks — grab me a coffee ☕
+
+<a href="https://www.buymeacoffee.com/iamccs" target="_blank">
+  <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="200" />
+</a>
+
+## Usage
+
+### Basic Drawing
+1. Click the floating button to enable annotation mode (turns green)
+2. Click and drag on the canvas to draw
+3. Adjust brush size and color from the context menu (right-click button)
+4. Click the button again to disable (turns red)
+
+### Using the Eraser
+1. Press **Alt+D** or click the eraser button in the menu (🩹 Eraser)
+2. Draw on the canvas to erase strokes
+3. Press **Alt+D** again to return to draw mode (✏️ Draw)
+
+### Managing Layers
+1. Click **"+ Layer"** button to create a new layer
+2. **Click** on layer name to select it
+3. **Double-click** layer name to rename it (press Enter to confirm, Esc to cancel)
+4. Use **eye icon** to hide/show layer
+5. Use **lock icon** to prevent editing
+6. Use **X button** to delete layer
+
+### Hiding Annotations
+- Press **Alt+S** to quickly toggle visibility of all annotations
+- Useful for viewing your workflow without the annotations
+
+### Workflow Integration
+- Annotations are **automatically saved** when you save your workflow
+- When you open a workflow that has annotations, they load automatically
+- Each workflow has its own separate annotations
+
+## Context Menu Options
+
+Right-click the floating button to access:
+- **Enable/Disable** - Quick toggle (also left-click button)
+- **Color Picker** - Choose drawing color
+- **Brush Size** - Adjust pen width (1-48px)
+- **Opacity** - Control transparency (10-100%)
+- **Drawing Modes**:
+  - ✏️ Draw / 🩹 Eraser toggle
+  - Constant width option
+  - Dashed lines option
+  - Hide notes option
+- **Layer Management** - Create, rename, manage layers
+- **Export/Import** - Save/load annotations separately
+- **Save into Workflow** - Toggle auto-save feature
+
+## Tips & Tricks
+
+💡 **Pro Tips**
+- Use **Alt+S** while working to hide annotations and see clean canvas
+- Layer-based organization helps keep complex annotations organized
+- Constant width mode is great for diagrams and technical annotations
+- Export annotations as JSON for backup or sharing
+
+🎨 **Drawing Best Practices**
+- Use different layers for different annotations (ideas, notes, corrections)
+- Keep brush size reasonable for readability at normal zoom
+- Lock completed layers to avoid accidental edits
+- Use dashed lines to distinguish annotations from actual drawing
+
+🔄 **Workflow Tips**
+- Annotations persist across ComfyUI sessions
+- Copy workflow JSON to backup annotations
+- Use hide toggle (Alt+S) for presentations
+- Export layers separately for different annotations
+
+
+## Troubleshooting
+
+**Button doesn't appear?**
+- Restart ComfyUI
+- Check browser console for errors (F12)
+- Verify extension is in `custom_nodes/IAMCCS_annotate`
+
+**Annotations not saving?**
+- Check "Save into workflow" toggle in menu
+- Ensure workflow is saved to disk
+- Check browser console for errors
+
+**Eraser not working?**
+- Make sure you're in eraser mode (button shows 🩹)
+- Try pressing Alt+D to toggle mode
+- Check that layer is not locked
+
+**Layer issues?**
+- At least one layer is always required
+- Can't delete if it's the only layer
+- Locked layers prevent drawing but still show
+
+**Keyboard Shortcuts Quick Reference:**
+- 🖱️ **Left-click button** = Toggle ON/OFF
+- 🖱️ **Right-click button** = Open menu
+- 🖱️ **Drag button** = Move it around
+- ⌨️ **Alt+A** = Toggle annotation
+- ⌨️ **Alt+D** = Toggle eraser
+- ⌨️ **Alt+S** = Toggle hide
+- ⌨️ **Esc** = Cancel stroke
+
+## Credits
+
+**IAMCCS_annotate** - Drawing & annotation tool for ComfyUI
+Minimal, compact, and powerful annotation system
+
+
+ ## License
+
+- License: Creative Commons Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0)
+- License URL: https://creativecommons.org/licenses/by-nd/4.0/
+
+Found a bug or have a feature request?
+- Check the GitHub issues
+- Report problems with detailed description
+- Include ComfyUI version and browser info
+
+---

__init__.py

@@ -0,0 +1,13 @@
+"""
+IAMCCS Annotate - ComfyUI Extension
+A drawing annotation tool with floating button and context menu
+"""
+
+# No node classes - this is purely a UI extension
+NODE_CLASS_MAPPINGS = {}
+NODE_DISPLAY_NAME_MAPPINGS = {}
+
+# Tell ComfyUI where to find the web extension files
+WEB_DIRECTORY = "js"
+
+__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS"]

pyproject.toml

@@ -0,0 +1,41 @@
+[build-system]
+requires = ["setuptools", "wheel"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "IAMCCS-Annotate"
+version = "1.0.0"
+description = "Drawing and annotation tool for ComfyUI with layer support"
+readme = "README.md"
+license = {text = "MIT"}
+authors = [
+    {name = "IAMCCS", email = "info@carminecristalloscalzi.com"}
+]
+keywords = ["comfyui", "drawing", "annotation", "extension", "web-ui"]
+classifiers = [
+    "Programming Language :: Python :: 3",
+    "Programming Language :: Python :: 3.8",
+    "Programming Language :: Python :: 3.9",
+    "Programming Language :: Python :: 3.10",
+    "Programming Language :: Python :: 3.11",
+    "License :: OSI Approved :: MIT License",
+    "Topic :: Artistic Software",
+    "Topic :: Multimedia :: Graphics",
+]
+requires-python = ">=3.8"
+dependencies = []
+
+[project.urls]
+Homepage = "https://github.com/IAMCCS"
+Repository = "https://github.com/IAMCCS/IAMCCS_annotate"
+Issues = "https://github.com/IAMCCS/IAMCCS_annotate/issues"
+
+[project.optional-dependencies]
+dev = ["pytest", "black", "flake8"]
+
+[tool.setuptools]
+packages = ["IAMCCS_annotate"]
+include-package-data = true
+
+[tool.setuptools.package-data]
+IAMCCS_annotate = ["js/*.js", "*.md", "*.py"]

version.json

@@ -0,0 +1,6 @@
+{
+  "name": "iamccs-annotate",
+  "version": "1.0.0",
+  "author": "Carmine Cristallo Scalzi (IAMCCS)",
+  "description": "drawing and annotation tool for ComfyUI."
+}