mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-21 07:14:11 +00:00
[docs] Update nested README files with comprehensive component listings (#4303)
This commit is contained in:
Christian Byrne
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user