mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-24 14:45:36 +00:00

Files

bymyself a7a60c919c fix: unify canvas resize paths with CanvasViewport system (ADR 0009)

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

2026-04-20 19:14:09 -07:00

3.3 KiB

Raw Blame History

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

3.3 KiB Raw Blame History