mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-15 01:48:06 +00:00
Compare commits
2 Commits
bl/fix-job
...
docs/weekl
| Author | SHA1 | Date | |
|---|---|---|---|
|
ef87bc12ae | ||
|
|
2f2d4b16ef |
@@ -6,13 +6,13 @@ ComfyUI frontend uses a comprehensive settings system for user preferences with
|
||||
|
||||
### Settings Architecture
|
||||
|
||||
- Settings are defined as `SettingParams` in `src/constants/coreSettings.ts`
|
||||
- Settings are defined as `SettingParams` in `src/platform/settings/constants/coreSettings.ts`
|
||||
- Registered at app startup, loaded/saved via `useSettingStore` (Pinia)
|
||||
- Persisted per user via backend `/settings` endpoint
|
||||
- If a value hasn't been set by the user, the store returns the computed default
|
||||
|
||||
```typescript
|
||||
// From src/stores/settingStore.ts:105-122
|
||||
// From src/platform/settings/settingStore.ts:105-122
|
||||
function getDefaultValue<K extends keyof Settings>(
|
||||
key: K
|
||||
): Settings[K] | undefined {
|
||||
@@ -35,7 +35,7 @@ function getDefaultValue<K extends keyof Settings>(
|
||||
Settings are registered after server values are loaded:
|
||||
|
||||
```typescript
|
||||
// From src/components/graph/GraphCanvas.vue:311-315
|
||||
// From src/components/graph/GraphCanvas.vue (lines ~499)
|
||||
CORE_SETTINGS.forEach((setting) => {
|
||||
settingStore.addSetting(setting)
|
||||
})
|
||||
@@ -50,7 +50,7 @@ await newUserService().initializeIfNewUser(settingStore)
|
||||
You can compute defaults dynamically using function defaults that access runtime context:
|
||||
|
||||
```typescript
|
||||
// From src/constants/coreSettings.ts:94-101
|
||||
// From src/platform/settings/constants/coreSettings.ts
|
||||
{
|
||||
id: 'Comfy.Sidebar.Size',
|
||||
// Default to small if the window is less than 1536px(2xl) wide
|
||||
@@ -59,7 +59,7 @@ You can compute defaults dynamically using function defaults that access runtime
|
||||
```
|
||||
|
||||
```typescript
|
||||
// From src/constants/coreSettings.ts:306
|
||||
// From src/platform/settings/constants/coreSettings.ts
|
||||
{
|
||||
id: 'Comfy.Locale',
|
||||
defaultValue: () => navigator.language.split('-')[0] || 'en'
|
||||
@@ -71,7 +71,7 @@ You can compute defaults dynamically using function defaults that access runtime
|
||||
You can vary defaults by installed frontend version using `defaultsByInstallVersion`:
|
||||
|
||||
```typescript
|
||||
// From src/stores/settingStore.ts:129-150
|
||||
// From src/platform/settings/settingStore.ts:129-150
|
||||
function getVersionedDefaultValue<
|
||||
K extends keyof Settings,
|
||||
TValue = Settings[K]
|
||||
@@ -101,7 +101,7 @@ function getVersionedDefaultValue<
|
||||
Example versioned defaults from codebase:
|
||||
|
||||
```typescript
|
||||
// From src/constants/coreSettings.ts:38-40
|
||||
// From src/platform/settings/constants/coreSettings.ts
|
||||
{
|
||||
id: 'Comfy.Graph.LinkReleaseAction',
|
||||
defaultValue: LinkReleaseTriggerAction.CONTEXT_MENU,
|
||||
@@ -168,7 +168,7 @@ Here are actual settings showing different patterns:
|
||||
The initial installed version is captured for new users to ensure versioned defaults remain stable:
|
||||
|
||||
```typescript
|
||||
// From src/services/newUserService.ts:49-53
|
||||
// From src/services/useNewUserService.ts
|
||||
await settingStore.set('Comfy.InstalledVersion', __COMFYUI_FRONTEND_VERSION__)
|
||||
```
|
||||
|
||||
@@ -220,7 +220,7 @@ await settingStore.set('Comfy.InstalledVersion', __COMFYUI_FRONTEND_VERSION__)
|
||||
Values are stored per user via the backend. The store writes through API and falls back to defaults when not set:
|
||||
|
||||
```typescript
|
||||
// From src/stores/settingStore.ts:73-75
|
||||
// From src/platform/settings/settingStore.ts:73-75
|
||||
onChange(settingsById.value[key], newValue, oldValue)
|
||||
settingValues.value[key] = newValue
|
||||
await api.storeSetting(key, newValue)
|
||||
@@ -245,7 +245,7 @@ await settingStore.set('Comfy.SomeSetting', newValue)
|
||||
Settings support migration from deprecated values:
|
||||
|
||||
```typescript
|
||||
// From src/stores/settingStore.ts:68-69, 172-175
|
||||
// From src/platform/settings/settingStore.ts:68-69, 172-175
|
||||
const newValue = tryMigrateDeprecatedValue(settingsById.value[key], clonedValue)
|
||||
|
||||
// Migration happens during addSetting for existing values:
|
||||
@@ -262,7 +262,7 @@ if (settingValues.value[setting.id] !== undefined) {
|
||||
Settings can define onChange callbacks that receive the setting definition, new value, and old value:
|
||||
|
||||
```typescript
|
||||
// From src/stores/settingStore.ts:73, 177
|
||||
// From src/platform/settings/settingStore.ts:73, 177
|
||||
onChange(settingsById.value[key], newValue, oldValue) // During set()
|
||||
onChange(setting, get(setting.id), undefined) // During addSetting()
|
||||
```
|
||||
|
||||
@@ -11,7 +11,7 @@ An Architecture Decision Record captures an important architectural decision mad
|
||||
| ADR | Title | Status | Date |
|
||||
| --------------------------------------------------- | ---------------------------------------- | -------- | ---------- |
|
||||
| [0001](0001-merge-litegraph-into-frontend.md) | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
|
||||
| [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Accepted | 2025-08-25 |
|
||||
| [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Proposed | 2025-08-25 |
|
||||
| [0003](0003-crdt-based-layout-system.md) | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
|
||||
| [0004](0004-fork-primevue-ui-library.md) | Fork PrimeVue UI Library | Rejected | 2025-08-27 |
|
||||
| [0005](0005-remove-importmap-for-vue-extensions.md) | Remove Import Map for Vue Extensions | Accepted | 2025-12-13 |
|
||||
|
||||
@@ -25,63 +25,74 @@ ComfyUI's extension system follows these key principles:
|
||||
|
||||
## Core Extensions List
|
||||
|
||||
The following table lists ALL core extensions in the system as of 2025-01-30:
|
||||
The following table lists ALL core extensions in the system as of 2026-03-02:
|
||||
|
||||
### 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 |
|
||||
| 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 |
|
||||
| Extension | Description | Category |
|
||||
| ---------------------------- | ------------------------------------------------------------- | --------- |
|
||||
| clipspace.ts | Implements the Clipspace feature for temporary image storage | Image |
|
||||
| cloudBadges.ts | Displays cloud-specific badges and indicators | Cloud |
|
||||
| cloudFeedbackTopbarButton.ts | Provides cloud feedback UI in the topbar | Cloud |
|
||||
| cloudRemoteConfig.ts | Manages cloud remote configuration | Cloud |
|
||||
| cloudSessionCookie.ts | Handles cloud session cookie management | Cloud |
|
||||
| cloudSubscription.ts | Manages cloud subscription features | Cloud |
|
||||
| contextMenuFilter.ts | Provides context menu filtering capabilities | UI |
|
||||
| customWidgets.ts | Implements custom widget types | Widgets |
|
||||
| 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 |
|
||||
| imageCompare.ts | Implements image comparison functionality | Image |
|
||||
| imageCrop.ts | Provides image cropping functionality | Image |
|
||||
| index.ts | Main extension registration and coordination | Core |
|
||||
| load3d.ts | Supports 3D model loading and visualization | 3D |
|
||||
| load3dLazy.ts | Implements lazy loading for 3D models | 3D |
|
||||
| maskeditor.ts | Implements the mask editor for image masking operations | Image |
|
||||
| nightlyBadges.ts | Displays nightly build badges | System |
|
||||
| nodeTemplates.ts | Provides node template functionality | Templates |
|
||||
| noteNode.ts | Adds note nodes for documentation within workflows | Graph |
|
||||
| painter.ts | Implements painting and drawing functionality | Image |
|
||||
| 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 |
|
||||
| selectionBorder.ts | Renders selection borders for selected nodes | UI |
|
||||
| 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 |
|
||||
|
||||
### Conditional Lines Subdirectory
|
||||
### Load3D Subdirectory
|
||||
|
||||
Located in `extensions/core/load3d/conditional-lines/`:
|
||||
Located in `extensions/core/load3d/`:
|
||||
|
||||
| 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 |
|
||||
The load3d extension has been refactored into multiple manager modules:
|
||||
|
||||
### 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 |
|
||||
| File | Description |
|
||||
| ----------------------- | --------------------------------------- |
|
||||
| AnimationManager.ts | Manages 3D animations |
|
||||
| CameraManager.ts | Handles camera controls and positioning |
|
||||
| ControlsManager.ts | Manages user controls for 3D viewing |
|
||||
| EventManager.ts | Handles events for 3D viewer |
|
||||
| LightingManager.ts | Manages lighting in 3D scenes |
|
||||
| Load3d.ts | Main 3D loading logic |
|
||||
| Load3DConfiguration.ts | Configuration for 3D loading |
|
||||
| Load3dUtils.ts | Utility functions for 3D operations |
|
||||
| LoaderManager.ts | Manages different 3D format loaders |
|
||||
| ModelExporter.ts | Handles 3D model export functionality |
|
||||
| RecordingManager.ts | Manages 3D scene recording |
|
||||
| SceneManager.ts | Manages 3D scene setup and rendering |
|
||||
| SceneModelManager.ts | Manages models within scenes |
|
||||
| ViewHelperManager.ts | Provides view helpers for 3D navigation |
|
||||
| constants.ts | Constants for 3D loading |
|
||||
| exportMenuHelper.ts | Helper for export menu functionality |
|
||||
| interfaces.ts | TypeScript interfaces for 3D loading |
|
||||
| loader/FastPLYLoader.ts | Fast PLY format loader implementation |
|
||||
|
||||
## Extension Development
|
||||
|
||||
|
||||
@@ -147,7 +147,7 @@ it('should subscribe to logs API', () => {
|
||||
})
|
||||
```
|
||||
|
||||
## Mocking Lodash Functions
|
||||
## Mocking Utility Functions
|
||||
|
||||
Mocking utility functions like debounce:
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@ The following diagram shows how composables fit into the application architectur
|
||||
|
||||
## Composable Categories
|
||||
|
||||
The following tables list ALL composables in the system as of 2026-01-30:
|
||||
The following tables list core composables in the system as of 2026-03-02. For a complete list, browse the subdirectories in this folder:
|
||||
|
||||
### Auth
|
||||
|
||||
@@ -236,7 +236,6 @@ General-purpose composables:
|
||||
| `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 |
|
||||
@@ -246,10 +245,6 @@ General-purpose composables:
|
||||
| `useTemplateWorkflows` | Manages template workflow loading, selection, and display |
|
||||
| `useTreeExpansion` | Handles tree node expansion state |
|
||||
|
||||
| `useWorkflowAutoSave` | Handles automatic workflow saving |
|
||||
| `useWorkflowPersistence` | Manages workflow persistence |
|
||||
| `useWorkflowValidation` | Validates workflow integrity |
|
||||
|
||||
## Usage Guidelines
|
||||
|
||||
When using composables in components, follow these guidelines:
|
||||
|
||||
Reference in New Issue
Block a user