mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-24 14:45:36 +00:00
a7a60c919c
Two independent resize paths existed: resizeCanvas() in app.ts (DPR-aware) and LGraphCanvas.resize() (DPR-unaware). Neither documented its dependency on the other, creating implicit temporal coupling. The bg/fg canvas size mismatch occurred because drawFrontCanvas() composites the bg canvas by dividing its dimensions by DPR — assuming both canvases were DPR-scaled — but LGraphCanvas.resize() set them to CSS pixels. Introduce CanvasViewport: a plain frozen data object (ECS component style) that serves as single source of truth for canvas sizing. measureViewport() is a pure function producing viewport state from DOM measurements. applyViewport() atomically sizes both fg and bg canvases and scales their contexts, eliminating the possibility of a partial resize. - Add devAssert() utility: throws in DEV, console.errors in prod - Add fg/bg size invariant assertion in LGraphCanvas.draw() - Make LGraphCanvas.resize() DPR-aware (scales both canvases + contexts) - Replace resizeCanvas() internals with viewport system - Wire viewport resize into canvasScheduler for app-mode transitions - 13 new unit tests for viewport and assert modules
Architecture Decision Records
This directory contains Architecture Decision Records (ADRs) for the ComfyUI Frontend project.
What is an ADR?
An Architecture Decision Record captures an important architectural decision made along with its context and consequences. ADRs help future developers understand why certain decisions were made and provide a historical record of the project's evolution.
ADR Index
| ADR | Title | Status | Date |
|---|---|---|---|
| 0001 | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
| 0002 | Restructure as a Monorepo | Accepted | 2025-08-25 |
| 0003 | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
| 0004 | Fork PrimeVue UI Library | Rejected | 2025-08-27 |
| 0005 | Remove Import Map for Vue Extensions | Accepted | 2025-12-13 |
| 0006 | PrimitiveNode Copy/Paste Lifecycle | Proposed | 2026-02-22 |
| 0007 | NodeExecutionOutput Passthrough Schema | Accepted | 2026-03-11 |
| 0008 | Entity Component System | Proposed | 2026-03-23 |
| 0009 | Canvas Viewport System | Accepted | 2026-04-20 |
Creating a New ADR
- Copy the template below
- Name it with the next number in sequence:
NNNN-descriptive-title.md - Fill in all sections
- Update this index
- Submit as part of your PR
ADR Template
# N. Title
Date: YYYY-MM-DD
## Status
[Proposed | Accepted | Rejected | Deprecated | Superseded by [ADR-NNNN](NNNN-title.md)]
## Context
Describe the issue that motivated this decision and any context that influences or constrains the decision.
- What is the problem?
- Why does it need to be solved?
- What forces are at play (technical, business, team)?
## Decision
Describe the decision that was made and the key points that led to it.
- What are we going to do?
- How will we do it?
- What alternatives were considered?
## Consequences
### Positive
- What becomes easier or better?
- What opportunities does this create?
### Negative
- What becomes harder or worse?
- What risks are we accepting?
- What technical debt might we incur?
## Notes
Optional section for additional information, references, or clarifications.
ADR Status Values
- Proposed: The decision is being discussed
- Accepted: The decision has been agreed upon
- Rejected: The decision was not accepted
- Deprecated: The decision is no longer relevant
- Superseded: The decision has been replaced by another ADR
Further Reading
- Documenting Architecture Decisions by Michael Nygard
- Architecture Decision Records - Collection of ADR resources