From 2ffddf904151b74f977d132ecbb535968437a78a Mon Sep 17 00:00:00 2001
From: Danteday <36643531+Danteday@users.noreply.github.com>
Date: Wed, 16 Apr 2025 02:39:38 -0800
Subject: [PATCH] Add files via upload
---
README.md | 93 ++
__init__.py | 5 +
js/node_notes.js | 2368 ++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 2466 insertions(+)
create mode 100644 README.md
create mode 100644 __init__.py
create mode 100644 js/node_notes.js
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..ac9510f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,93 @@
+# ComfyUI Note Manager
+A powerful extension for ComfyUI that enables adding notes to many node in your workflow. Keep track of important settings, reminders, and workflow documentation directly within your ComfyUI canvas.
+
+## Features
+- 📝 **Add/Edit/View Notes:** Easily add, modify, and view multiple timestamped notes for many node.
+- 🔢 **Note Count Indicator:** Shows a clear icon with the note count on nodes that contain notes (when not collapsed).
+- 💾 **Auto-Saves with Workflow:** Notes are saved directly within your workflow JSON file.
+- 🎨 **Modern UI:** Clean modal windows for managing notes per node.
+- 📤 **Node-Specific Import/Export:** Share or back up notes for individual nodes using JSON format.
+- 🔍 **Selective Export:** Choose specific notes to include when exporting from a node.
+- 📋 **Global Notes Panel:** View, search, and manage notes from *all* nodes in a dedicated, toggleable side panel.
+- 🖱️ **Draggable Panel Toggle:** A floating `📋` icon lets you toggle the Global Notes Panel and can be dragged anywhere on the screen.
+- ✈️ **Jump to Node:** Quickly navigate to a node in your workflow by clicking its title in the Global Notes Panel.
+- 🌍 **Global Import/Export:** Manage notes for the *entire* workflow, including an intelligent import mapping feature.
+- 🧩 **Broad Compatibility:** Designed to work with many types of ComfyUI nodes.
+## Installation
+
+Manually:
+
+Clone this repo to ComfyUI/custom_nodes
+
+## Usage
+
+### Basic Note Management
+
+1. **Add a note to a node**:
+ * Right-click on any node and select "📝 Add Note" from the context menu.
+ * Enter your note in the modal window and click "Save".
+2. **View notes on a node**:
+ * Right-click on a node with notes and select "📑 View Notes (`N`)" from the context menu (where `N` is the note count).
+3. **Edit or delete notes**:
+ * In the notes modal, use the ✏️ button to edit a note.
+ * Use the 🗑️ button to delete a note.
+4. **Identify nodes with notes**:
+ * Nodes with notes display an orange circle with the number of notes above the title (when not collapsed).
+
+### Global Notes Panel
+
+1. **Access the global notes panel**:
+ * Click the draggable `📋` icon on the screen to toggle the panel.
+ * All notes from your workflow are displayed, organized by node.
+2. **Quick navigation**:
+ * Click on a node name in the global panel to center the canvas on that node.
+3. **Manage & Search**:
+ * Use the search bar to filter notes across the entire workflow.
+ * Edit/Delete notes directly from the panel list.
+ * Use the global Import/Export buttons for workflow-wide note management.
+
+### Import and Export
+
+1. **Export notes**:
+ * **Node Specific:** Open the notes modal for a node, click "Import/Export", choose "Export Node Notes", select notes via checkboxes, and click "Export Selected".
+ * **Global:** Open the Global Notes Panel and click the "Export" button
+2. **Import notes**:
+ * **Node Specific:** Open the notes modal for the target node, click "Import/Export", choose "Import Node Notes", and select the JSON file.
+ * **Global:** Open the Global Notes Panel, click the "Import" button, select the JSON file, and use the mapping dialog to assign notes to the correct nodes before confirming.
+
+## Tips and Tricks
+- **Updating notes**: When adding or editing notes, or when you open a new workflow tab, you need to refresh the manager using the 🔄 button next to the note search field; otherwise, you may experience a synchronization issue.
+- **Workflow Documentation**: Use notes on key nodes (like Loaders, Checkpoints, Samplers) to explain their role or settings.
+- **Parameter Tracking**: Note down specific seeds, CFG scales, or prompt keywords that produced interesting results.
+- **Troubleshooting**: Document errors encountered or specific settings needed to make a custom node work correctly.
+- **Idea Repository**: Jot down ideas for workflow improvements or variations directly on the relevant nodes.
+- **Global Overview**: Use the global panel to quickly review all annotations in a complex workflow.
+
+## Screenshots
+
+
+### Context menu
+
+
+### Note Modal Window
+
+
+### Global Import Mapping Dialog
+
+Here are the 5 options:
+- 🔴 Node selection required – You must manually select the node to which the note should be added.
+- 🟡 Title match – Matches the node's name, but not its ID.
+- 🟡 ID match – Use this if you renamed the node to which you want to attach the note and are absolutely sure of your actions.
+- 🟢 Full match (ID and title) – The best option for loading; it ensures a 100% match.
+- ⚪ Selected manually – The node is selected manually.
+
+### Export Selection
+
+
+
+
+
+
+
+
+
diff --git a/__init__.py b/__init__.py
new file mode 100644
index 0000000..f36bb63
--- /dev/null
+++ b/__init__.py
@@ -0,0 +1,5 @@
+WEB_DIRECTORY = "js"
+NODE_CLASS_MAPPINGS = {}
+__all__ = ["NODE_CLASS_MAPPINGS"]
+
+print("ComfyUI Node Notes extension loaded.")
\ No newline at end of file
diff --git a/js/node_notes.js b/js/node_notes.js
new file mode 100644
index 0000000..692360c
--- /dev/null
+++ b/js/node_notes.js
@@ -0,0 +1,2368 @@
+import { app } from "/scripts/app.js";
+
+// Store notes data for each node
+// Format: nodeNotes[nodeId] = [ { text: "note text", date: "2023-04-15 10:30" }, ... ]
+const nodeNotes = {};
+
+// Flag to control notes visibility
+let notesVisible = true;
+
+// Create UI for notes modal
+function createNotesUI() {
+ // Create modal container if it doesn't exist
+ if (!document.getElementById('notes-modal-container')) {
+ const modalContainer = document.createElement('div');
+ modalContainer.id = 'notes-modal-container';
+ modalContainer.className = 'notes-modal-container';
+ modalContainer.style.display = 'none';
+
+ // Modal content
+ modalContainer.innerHTML = `
+