From eb8b67dd9d2450b2f2acdd1d71098724209180ad Mon Sep 17 00:00:00 2001 From: Christian Byrne Date: Sun, 29 Jun 2025 19:55:21 -0700 Subject: [PATCH] [docs] Update nested README files with comprehensive component listings (#4303) --- src/composables/README.md | 152 ++++++++++++++++++++++++++++------ src/extensions/core/README.md | 91 +++++++++++++++++--- src/services/README.md | 46 +++++++--- src/stores/README.md | 69 ++++++++++----- 4 files changed, 284 insertions(+), 74 deletions(-) diff --git a/src/composables/README.md b/src/composables/README.md index 58d88390a4..34fb011f0f 100644 --- a/src/composables/README.md +++ b/src/composables/README.md @@ -66,50 +66,150 @@ The following diagram shows how composables fit into the application architectur ## Composable Categories -ComfyUI's composables are organized into several categories: +The following tables list ALL composables in the system as of 2025-01-30: ### Auth - Composables for authentication and user management: -- `useCurrentUser` - Provides access to the current user information -- `useFirebaseAuthActions` - Handles Firebase authentication operations + +| Composable | Description | +|------------|-------------| +| `useCurrentUser` | Provides access to the current user information | +| `useFirebaseAuthActions` | Handles Firebase authentication operations | + +### Bottom Panel Tabs +Composables for terminal and bottom panel functionality: + +| Composable | Description | +|------------|-------------| +| `useTerminal` | Core terminal functionality | +| `useTerminalBuffer` | Manages terminal output buffer | +| `useTerminalTabs` | Handles multiple terminal tab management | ### Element - Composables for DOM and element interactions: -- `useAbsolutePosition` - Handles element positioning -- `useDomClipping` - Manages clipping of DOM elements -- `useResponsiveCollapse` - Manages responsive collapsing of elements + +| Composable | Description | +|------------|-------------| +| `useAbsolutePosition` | Handles element positioning | +| `useCanvasPositionConversion` | Converts between canvas and DOM coordinates | +| `useDomClipping` | Manages clipping of DOM elements | +| `useResponsiveCollapse` | Manages responsive collapsing of elements | + +### Functional +Utility composables for common patterns: + +| Composable | Description | +|------------|-------------| +| `useChainCallback` | Chains multiple callbacks together | + +### Manager +Composables for ComfyUI Manager integration: + +| Composable | Description | +|------------|-------------| +| `useManagerStatePersistence` | Persists manager UI state | + +### Node Pack +Composables for node package management: + +| Composable | Description | +|------------|-------------| +| `useInstalledPacks` | Manages installed node packages | +| `useMissingNodes` | Detects and handles missing nodes | +| `useNodePacks` | Core node package functionality | +| `usePackUpdateStatus` | Tracks package update availability | +| `useWorkflowPacks` | Manages packages used in workflows | ### Node - Composables for node-specific functionality: -- `useNodeBadge` - Handles node badge display and interaction -- `useNodeImage` - Manages node image preview -- `useNodeDragAndDrop` - Handles drag and drop for nodes -- `useNodeChatHistory` - Manages chat history for nodes + +| Composable | Description | +|------------|-------------| +| `useNodeAnimatedImage` | Handles animated images in nodes | +| `useNodeBadge` | Handles node badge display and interaction | +| `useNodeCanvasImagePreview` | Canvas-based image preview for nodes | +| `useNodeChatHistory` | Manages chat history for nodes | +| `useNodeDragAndDrop` | Handles drag and drop for nodes | +| `useNodeFileInput` | Manages file input widgets in nodes | +| `useNodeImage` | Manages node image preview | +| `useNodeImageUpload` | Handles image upload for nodes | +| `useNodePaste` | Manages paste operations for nodes | +| `useNodePricing` | Handles pricing display for nodes | +| `useNodeProgressText` | Displays progress text in nodes | +| `useWatchWidget` | Watches widget value changes | ### Settings - Composables for settings management: -- `useSettingSearch` - Provides search functionality for settings -- `useSettingUI` - Manages settings UI interactions -### Sidebar +| Composable | Description | +|------------|-------------| +| `useSettingSearch` | Provides search functionality for settings | +| `useSettingUI` | Manages settings UI interactions | +### Sidebar Tabs Composables for sidebar functionality: -- `useNodeLibrarySidebarTab` - Manages the node library sidebar tab -- `useQueueSidebarTab` - Manages the queue sidebar tab -- `useWorkflowsSidebarTab` - Manages the workflows sidebar tab -- `useTemplateWorkflows` - Manages template workflow loading, selection, and display + +| Composable | Description | +|------------|-------------| +| `useModelLibrarySidebarTab` | Manages the model library sidebar tab | +| `useNodeLibrarySidebarTab` | Manages the node library sidebar tab | +| `useQueueSidebarTab` | Manages the queue sidebar tab | +| `useWorkflowsSidebarTab` | Manages the workflows sidebar tab | + +### Tree +Composables for tree structure operations: + +| Composable | Description | +|------------|-------------| +| `useTreeFolderOperations` | Handles folder operations in tree views | ### Widgets - Composables for widget functionality: -- `useBooleanWidget` - Manages boolean widget interactions -- `useComboWidget` - Manages combo box widget interactions -- `useFloatWidget` - Manages float input widget interactions -- `useImagePreviewWidget` - Manages image preview widget + +| Composable | Description | +|------------|-------------| +| `useBooleanWidget` | Manages boolean widget interactions | +| `useChatHistoryWidget` | Handles chat history widget | +| `useComboWidget` | Manages combo box widget interactions | +| `useFloatWidget` | Manages float input widget interactions | +| `useImagePreviewWidget` | Manages image preview widget | +| `useImageUploadWidget` | Handles image upload widget | +| `useIntWidget` | Manages integer input widget | +| `useMarkdownWidget` | Handles markdown display widget | +| `useProgressTextWidget` | Manages progress text widget | +| `useRemoteWidget` | Handles remote widget connections | +| `useStringWidget` | Manages string input widget | + +### Root-level Composables +General-purpose composables: + +| Composable | Description | +|------------|-------------| +| `useBrowserTabTitle` | Manages browser tab title updates | +| `useCachedRequest` | Provides request caching functionality | +| `useCanvasDrop` | Handles drop operations on canvas | +| `useCivitaiModel` | Integrates with Civitai model API | +| `useContextMenuTranslation` | Handles context menu translations | +| `useCopy` | Provides copy functionality | +| `useCopyToClipboard` | Manages clipboard operations | +| `useCoreCommands` | Provides core command functionality | +| `useDownload` | Handles file download operations | +| `useErrorHandling` | Centralized error handling | +| `useGlobalLitegraph` | Access to global LiteGraph instance | +| `useLitegraphSettings` | Manages LiteGraph configuration | +| `useManagerQueue` | Handles manager queue operations | +| `usePaste` | Provides paste functionality | +| `usePragmaticDragAndDrop` | Integrates Atlassian's drag-and-drop library | +| `useProgressFavicon` | Updates favicon with progress indicator | +| `useRefreshableSelection` | Manages refreshable selections | +| `useRegistrySearch` | Searches the ComfyUI registry | +| `useServerLogs` | Manages server log display | +| `useTemplateWorkflows` | Manages template workflow loading, selection, and display | +| `useTreeExpansion` | Handles tree node expansion state | +| `useValueTransform` | Transforms values between formats | +| `useWorkflowAutoSave` | Handles automatic workflow saving | +| `useWorkflowPersistence` | Manages workflow persistence | +| `useWorkflowValidation` | Validates workflow integrity | ## Usage Guidelines diff --git a/src/extensions/core/README.md b/src/extensions/core/README.md index b0184fc1c2..21dc79976d 100644 --- a/src/extensions/core/README.md +++ b/src/extensions/core/README.md @@ -25,20 +25,85 @@ ComfyUI's extension system follows these key principles: ## Core Extensions List -The core extensions include: +The following table lists ALL core extensions in the system as of 2025-01-30: -| Extension | Description | -|-----------|-------------| -| clipspace.ts | Implements the Clipspace feature for temporary image storage | -| dynamicPrompts.ts | Provides dynamic prompt generation capabilities | -| groupNode.ts | Implements the group node functionality to organize workflows | -| load3d.ts | Supports 3D model loading and visualization | -| maskeditor.ts | Implements the mask editor for image masking operations | -| noteNode.ts | Adds note nodes for documentation within workflows | -| rerouteNode.ts | Implements reroute nodes for cleaner workflow connections | -| uploadImage.ts | Handles image upload functionality | -| webcamCapture.ts | Provides webcam capture capabilities | -| widgetInputs.ts | Implements various widget input types | +### Main Extensions + +| Extension | Description | Category | +|-----------|-------------|----------| +| clipspace.ts | Implements the Clipspace feature for temporary image storage | Image | +| contextMenuFilter.ts | Provides context menu filtering capabilities | UI | +| dynamicPrompts.ts | Provides dynamic prompt generation capabilities | Prompts | +| editAttention.ts | Implements attention editing functionality | Text | +| electronAdapter.ts | Adapts functionality for Electron environment | Platform | +| groupNode.ts | Implements the group node functionality to organize workflows | Graph | +| groupNodeManage.ts | Provides group node management operations | Graph | +| groupOptions.ts | Handles group node configuration options | Graph | +| index.ts | Main extension registration and coordination | Core | +| load3d.ts | Supports 3D model loading and visualization | 3D | +| maskEditorOld.ts | Legacy mask editor implementation | Image | +| maskeditor.ts | Implements the mask editor for image masking operations | Image | +| nodeTemplates.ts | Provides node template functionality | Templates | +| noteNode.ts | Adds note nodes for documentation within workflows | Graph | +| previewAny.ts | Universal preview functionality for various data types | Preview | +| rerouteNode.ts | Implements reroute nodes for cleaner workflow connections | Graph | +| saveImageExtraOutput.ts | Handles additional image output saving | Image | +| saveMesh.ts | Implements 3D mesh saving functionality | 3D | +| simpleTouchSupport.ts | Provides basic touch interaction support | Input | +| slotDefaults.ts | Manages default values for node slots | Nodes | +| uploadAudio.ts | Handles audio file upload functionality | Audio | +| uploadImage.ts | Handles image upload functionality | Image | +| webcamCapture.ts | Provides webcam capture capabilities | Media | +| widgetInputs.ts | Implements various widget input types | Widgets | + +### load3d Subdirectory +Located in `extensions/core/load3d/`: + +| File | Description | Type | +|------|-------------|------| +| AnimationManager.ts | Manages 3D animations | Manager | +| CameraManager.ts | Handles camera controls and positioning | Manager | +| ControlsManager.ts | Manages 3D scene controls | Manager | +| EventManager.ts | Handles 3D scene events | Manager | +| interfaces.ts | TypeScript interfaces for 3D functionality | Types | +| LightingManager.ts | Manages scene lighting | Manager | +| Load3DConfiguration.ts | Configuration for 3D loading | Config | +| Load3d.ts | Core 3D loading functionality | Core | +| Load3dAnimation.ts | Animation-specific 3D operations | Animation | +| Load3dUtils.ts | Utility functions for 3D operations | Utils | +| LoaderManager.ts | Manages various 3D file loaders | Manager | +| ModelExporter.ts | Exports 3D models to different formats | Export | +| ModelManager.ts | Manages 3D model lifecycle | Manager | +| NodeStorage.ts | Handles storage for 3D nodes | Storage | +| PreviewManager.ts | Manages 3D model previews | Manager | +| RecordingManager.ts | Handles 3D scene recording | Manager | +| SceneManager.ts | Core 3D scene management | Manager | +| ViewHelperManager.ts | Manages 3D view helpers and gizmos | Manager | + +### Conditional Lines Subdirectory +Located in `extensions/core/load3d/conditional-lines/`: + +| File | Description | +|------|-------------| +| ColoredShadowMaterial.js | Material for colored shadow rendering | +| ConditionalEdgesGeometry.js | Geometry for conditional edge rendering | +| ConditionalEdgesShader.js | Shader for conditional edges | +| OutsideEdgesGeometry.js | Geometry for outside edge detection | + +### Lines2 Subdirectory +Located in `extensions/core/load3d/conditional-lines/Lines2/`: + +| File | Description | +|------|-------------| +| ConditionalLineMaterial.js | Material for conditional line rendering | +| ConditionalLineSegmentsGeometry.js | Geometry for conditional line segments | + +### ThreeJS Override Subdirectory +Located in `extensions/core/load3d/threejsOverride/`: + +| File | Description | +|------|-------------| +| OverrideMTLLoader.js | Custom MTL loader with enhanced functionality | ## Extension Development diff --git a/src/services/README.md b/src/services/README.md index 221cd0e591..afefba70df 100644 --- a/src/services/README.md +++ b/src/services/README.md @@ -57,22 +57,42 @@ While services can interact with both UI components and stores (centralized stat ## Core Services -The core services include: +The following table lists ALL services in the system as of 2025-01-30: + +### Main Services + +| Service | Description | Category | +|---------|-------------|----------| +| autoQueueService.ts | Manages automatic queue execution | Execution | +| colorPaletteService.ts | Handles color palette management and customization | UI | +| comfyManagerService.ts | Manages ComfyUI application packages and updates | Manager | +| comfyRegistryService.ts | Handles registration and discovery of ComfyUI extensions | Registry | +| dialogService.ts | Provides dialog and modal management | UI | +| extensionService.ts | Manages extension registration and lifecycle | Extensions | +| keybindingService.ts | Handles keyboard shortcuts and keybindings | Input | +| litegraphService.ts | Provides utilities for working with the LiteGraph library | Graph | +| load3dService.ts | Manages 3D model loading and visualization | 3D | +| nodeHelpService.ts | Provides node documentation and help | Nodes | +| nodeOrganizationService.ts | Handles node organization and categorization | Nodes | +| nodeSearchService.ts | Implements node search functionality | Search | +| releaseService.ts | Manages application release information and updates | System | +| subgraphService.ts | Handles subgraph operations and navigation | Graph | +| workflowService.ts | Handles workflow operations (save, load, execute) | Workflows | + +### Gateway Services +Located in `services/gateway/`: | Service | Description | |---------|-------------| -| algoliaSearchService.ts | Implements search functionality using Algolia | -| autoQueueService.ts | Manages automatic queue execution | -| colorPaletteService.ts | Handles color palette management and customization | -| comfyManagerService.ts | Manages ComfyUI application packages and updates | -| comfyRegistryService.ts | Handles registration and discovery of ComfyUI extensions | -| dialogService.ts | Provides dialog and modal management | -| extensionService.ts | Manages extension registration and lifecycle | -| keybindingService.ts | Handles keyboard shortcuts and keybindings | -| litegraphService.ts | Provides utilities for working with the LiteGraph library | -| load3dService.ts | Manages 3D model loading and visualization | -| nodeSearchService.ts | Implements node search functionality | -| workflowService.ts | Handles workflow operations (save, load, execute) | +| registrySearchGateway.ts | Gateway for registry search operations | + +### Provider Services +Located in `services/providers/`: + +| Service | Description | +|---------|-------------| +| algoliaSearchProvider.ts | Implements search functionality using Algolia | +| registrySearchProvider.ts | Provides registry search capabilities | ## Service Development Guidelines diff --git a/src/stores/README.md b/src/stores/README.md index 3bf200aa60..3a61d7ae65 100644 --- a/src/stores/README.md +++ b/src/stores/README.md @@ -100,31 +100,56 @@ The following diagram illustrates the store architecture and data flow: ## Core Stores -The core stores include: +The following table lists ALL stores in the system as of 2025-01-30: + +### Main Stores + +| Store | Description | Category | +|-------|-------------|----------| +| aboutPanelStore.ts | Manages the About panel state and badges | UI | +| apiKeyAuthStore.ts | Handles API key authentication | Auth | +| comfyManagerStore.ts | Manages ComfyUI application state | Core | +| comfyRegistryStore.ts | Handles extensions registry | Registry | +| commandStore.ts | Manages commands and command execution | Core | +| dialogStore.ts | Controls dialog/modal display and state | UI | +| domWidgetStore.ts | Manages DOM widget state | Widgets | +| electronDownloadStore.ts | Handles Electron-specific download operations | Platform | +| executionStore.ts | Tracks workflow execution state | Execution | +| extensionStore.ts | Manages extension registration and state | Extensions | +| firebaseAuthStore.ts | Handles Firebase authentication | Auth | +| graphStore.ts | Manages the graph canvas state | Core | +| imagePreviewStore.ts | Controls image preview functionality | Media | +| keybindingStore.ts | Manages keyboard shortcuts | Input | +| maintenanceTaskStore.ts | Handles system maintenance tasks | System | +| menuItemStore.ts | Handles menu items and their state | UI | +| modelStore.ts | Manages AI models information | Models | +| modelToNodeStore.ts | Maps models to compatible nodes | Models | +| nodeBookmarkStore.ts | Manages node bookmarks and favorites | Nodes | +| nodeDefStore.ts | Manages node definitions | Nodes | +| queueStore.ts | Handles the execution queue | Execution | +| releaseStore.ts | Manages application release information | System | +| serverConfigStore.ts | Handles server configuration | Config | +| settingStore.ts | Manages application settings | Config | +| subgraphNavigationStore.ts | Handles subgraph navigation state | Navigation | +| systemStatsStore.ts | Tracks system performance statistics | System | +| toastStore.ts | Manages toast notifications | UI | +| userFileStore.ts | Manages user file operations | Files | +| userStore.ts | Manages user data and preferences | User | +| widgetStore.ts | Manages widget configurations | Widgets | +| workflowStore.ts | Handles workflow data and operations | Workflows | +| workflowTemplatesStore.ts | Manages workflow templates | Workflows | +| workspaceStore.ts | Manages overall workspace state | Workspace | + +### Workspace Stores +Located in `stores/workspace/`: | Store | Description | |-------|-------------| -| aboutPanelStore.ts | Manages the About panel state and badges | -| apiKeyAuthStore.ts | Handles API key authentication | -| comfyManagerStore.ts | Manages ComfyUI application state | -| comfyRegistryStore.ts | Handles extensions registry | -| commandStore.ts | Manages commands and command execution | -| dialogStore.ts | Controls dialog/modal display and state | -| domWidgetStore.ts | Manages DOM widget state | -| executionStore.ts | Tracks workflow execution state | -| extensionStore.ts | Manages extension registration and state | -| firebaseAuthStore.ts | Handles Firebase authentication | -| graphStore.ts | Manages the graph canvas state | -| imagePreviewStore.ts | Controls image preview functionality | -| keybindingStore.ts | Manages keyboard shortcuts | -| menuItemStore.ts | Handles menu items and their state | -| modelStore.ts | Manages AI models information | -| nodeDefStore.ts | Manages node definitions | -| queueStore.ts | Handles the execution queue | -| settingStore.ts | Manages application settings | -| userStore.ts | Manages user data and preferences | -| workflowStore.ts | Handles workflow data and operations | -| workspace/* | Stores related to the workspace UI | +| bottomPanelStore.ts | Controls bottom panel visibility and state | +| colorPaletteStore.ts | Manages color palette configurations | +| nodeHelpStore.ts | Handles node help and documentation display | +| searchBoxStore.ts | Manages search box functionality | +| sidebarTabStore.ts | Controls sidebar tab states and navigation | ## Store Development Guidelines