mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-07-11 09:42:22 +00:00
be9de941c9
## Summary Brand link, reroute, and slot identifiers through LiteGraph, subgraph, and layout flows so raw numeric workflow data is converted at boundaries while runtime APIs keep branded IDs. ## Changes - **What**: Add canonical `LinkId`, `RerouteId`, and `SlotId` types plus minting helpers, then re-export litegraph/layout ID types from those modules. - **What**: Keep `LinkId`, `RerouteId`, and `SlotId` references branded across graph links, reroutes, node slots, subgraph slots, link deduplication, link drop handling, layout storage, and tests. - **What**: Convert raw numeric IDs only at periphery points: serialized workflow DTOs, legacy graph link proxy access, copied/pasted graph data, Yjs/string layout keys, and test fixtures. - **What**: Move slot layout identity onto branded `SlotId` values using stable `node:direction:index` ordering, while keeping DOM dataset values stringified at the boundary. - **What**: Avoid slot-key scans during link drops by carrying the link segment identity directly through the drop path. ## Review Focus - Branded IDs should not be widened back to `LinkId | number` / `RerouteId | number` in runtime APIs. - Serialized workflow shapes intentionally remain numeric for compatibility. - `_subgraphSlot.linkIds` remains `LinkId[]`; call sites should not treat it as raw `number[]`. - `MapProxyHandler` is the compatibility boundary for deprecated indexed `graph.links[id]` access. ## Validation - `pnpm typecheck` - `pnpm test:unit src/lib/litegraph/src/LLink.test.ts src/lib/litegraph/src/LGraph.test.ts src/lib/litegraph/src/LGraphNode.test.ts src/lib/litegraph/src/canvas/LinkConnector.core.test.ts src/lib/litegraph/src/canvas/LinkConnector.integration.test.ts src/lib/litegraph/src/canvas/LinkConnectorSubgraphInputValidation.test.ts src/lib/litegraph/src/LGraphCanvas.drawConnections.test.ts src/lib/litegraph/src/node/slotUtils.test.ts src/lib/litegraph/src/subgraph/ExecutableNodeDTO.test.ts src/core/graph/subgraph/promotionUtils.test.ts src/core/graph/subgraph/migration/proxyWidgetMigration.test.ts src/renderer/core/layout/store/layoutStore.test.ts src/renderer/core/layout/utils/layoutUtils.test.ts src/renderer/extensions/minimap/minimapCanvasRenderer.test.ts src/scripts/promotedWidgetControl.test.ts` - Commit hook: `oxfmt`, `oxlint`, `eslint`, `pnpm typecheck` - Push hook: `knip --cache` --------- Co-authored-by: AustinMroz <austin@comfy.org>
Scripts Directory Documentation
This directory contains TypeScript code inherited from the legacy ComfyUI JavaScript frontend project. The code has been migrated from JavaScript to TypeScript while maintaining compatibility with the original functionality.
When implementing new features, prefer using the new Vue3 system over the legacy scripts.
Key Components
ComfyApi (api.ts)
Main API client class that handles communication with the ComfyUI backend. Provides methods for:
- Queue management
- Model operations
- Extension handling
- WebSocket communication
- User data management
ComfyApp (app.ts)
Core application class that manages:
- Graph manipulation
- Node management
- Canvas interactions
- Extension system
- Workflow state
UI Components (ui/)
Collection of reusable UI components including:
- Buttons and button groups
- Popups and dialogs
- Draggable lists
- Image previews
- Menu system
- Settings dialog
Integration with Vite
All TypeScript exports are shimmed through Vite configuration to maintain compatibility with the legacy JavaScript codebase. The shimming logic can be found in vite.config.mts.
Legacy Compatibility
This codebase maintains compatibility with the original ComfyUI Legacy Frontend while providing TypeScript type safety and modern development features.
For users wanting to fall back to the legacy frontend, use the command line argument:
--front-end-version Comfy-Org/ComfyUI_legacy_frontend@latest