openpencil/tests/e2e/canvas
Danila Poyarkov 4faccd047d
feat(canvas): select auto layout frames by their gaps and dot their children, as in Figma (#943)
* fix: select top-level auto layout frames by their empty area

Checked against Figma desktop 126 with real pointer input. The gaps and
padding of a top-level frame with auto layout (any direction or grid,
filled or not, on the page or in a section) select, highlight, and drag
the frame, while clicks on its layers still select those layers. A plain
top-level frame's empty area stays background, as #900 recorded; its
oracle scenarios only used frames without auto layout.

Auto layout frames are hit by their bounds even without a fill, and a
press on such a frame's empty area no longer starts a marquee.

* feat(canvas): outline auto layout children with dotted lines, as in Figma

Hovering a horizontal or vertical auto layout frame outlines its visible
direct children, and a single selected layer dots the border of its auto
layout parent, in the container's outline color. Grid and plain frames,
grandchildren, and multi-selections show none. Line weight and dash were
measured from Figma 126 screenshots: 1 px with 1.75 px dashes and 1.25 px
gaps in screen space.

The editor gains a transforming flag that canvas input sets while layers
move, resize, or rotate; the outlines and the padding and gap markers of a
selected auto layout frame hide while it is set, as Figma's do.

The children outline a selected auto layout frame drew under the pointer
now uses the same stroke, and the dash effect is freed after each draw.

* fix(canvas): select unfilled frames by their empty area only on a click

Live Figma 126, with real pointer input on a top-level card holding an
unfilled auto layout row and an unfilled plain frame, with and without
auto layout on the card: a click on either frame's empty area selects
that frame, while a ⌘-click looks through it to the card.

Only top-level auto layout frames now own their empty area in hit
testing, so a deep hit no longer stops at a nested unfilled auto layout
frame. A click that ends on an open container selects the frame child
under the point by its bounds, filled or not, which plain frames did not
get before; boards that open by themselves keep their empty area as
background.

* fix(canvas): select an empty unfilled frame on the page by its bounds

Live Figma 126: a click inside an empty frame without a fill selects it,
on the page and in a section. The section case already did after the
previous commit; on the page the click found nothing, since an unfilled
frame without children is not hit. A click that hits nothing now looks
for a frame under the point among the scope's children, which skips
boards that hold layers, as their empty area stays background.

* refactor(scene-graph): read the containers the selection opens in their own helper

* fix(canvas): open a selected container, so repeated clicks reach deeper layers

In Figma, clicking again at the same point inside a selected frame,
component, or instance selects the layer under the pointer, so repeated
clicks walk down to a text in a nested component such as shadcn's
calendar. The click hit test opened only the ancestors of the selection,
so a selected nested container stopped the walk at itself and only a
double-click went deeper.

A selected container with layers now opens like its ancestors; groups
and booleans stay closed, as in Figma. Pressing inside the selection
still drags it, and its empty area keeps it selected.
2026-10-07 11:29:52 +00:00
..
arrow-caps-visual.spec.ts-snapshots test(canvas): align visual oracles with ruler-free fixtures 2026-09-16 03:45:34 +03:00
boolean-visual.spec.ts-snapshots ci: shard unit tests by owner and cut the quick suite from 100 s to 13 s (#715) 2026-09-17 10:18:16 +03:00
color-space.webkit.spec.ts-snapshots fix: convert document colour profiles, keep text edits live, and fix .fig exports (#716) 2026-09-18 00:43:10 +03:00
corner-smoothing-visual.spec.ts-snapshots fix(editor): commit vector drags on pointer release (#586) 2026-08-24 16:02:27 +03:00
cursor-labels.spec.ts-snapshots fix: zoom in place, shape cursor names, and align context menu items (#818) 2026-10-01 21:34:36 +04:00
demo-workspace.spec.ts-snapshots fix(canvas): show every top-level frame's name and select frames by it (#930) 2026-10-06 11:37:46 +00:00
dense-text-preview.spec.ts-snapshots perf(text): preserve coverage across paragraph eviction 2026-09-15 16:32:07 +03:00
distance-measurement-edge-cases.spec.ts-snapshots fix(text): finalize font readiness and label shaping (#593) 2026-08-30 14:33:32 +03:00
distance-measurement.spec.ts-snapshots fix(text): finalize font readiness and label shaping (#593) 2026-08-30 14:33:32 +03:00
document-loading.spec.ts-snapshots feat: refresh branding with generated platform icons (#707) 2026-09-16 11:54:07 +03:00
drop-files.spec.ts-snapshots fix(editor): commit vector drags on pointer release (#586) 2026-08-24 16:02:27 +03:00
fill-modes-visual.spec.ts-snapshots ci: shard unit tests by owner and cut the quick suite from 100 s to 13 s (#715) 2026-09-17 10:18:16 +03:00
frame-overlays.spec.ts-snapshots fix(canvas): keep labels readable and refine section badges 2026-09-15 19:54:04 +03:00
instance-scale-visual.spec.ts-snapshots feat(fig): occurrence-scoped instance interpretation as the single .fig reader 2026-10-01 11:20:27 +04:00
instance-sizing.spec.ts-snapshots test: replace legacy demo snapshots with current coverage 2026-09-14 01:20:56 +03:00
label-anatomy.spec.ts-snapshots perf(canvas): reuse labels with shared font fallback 2026-09-15 23:08:53 +03:00
labels fix(canvas): show every top-level frame's name and select frames by it (#930) 2026-10-06 11:37:46 +00:00
layout-outlines.spec.ts-snapshots feat(canvas): select auto layout frames by their gaps and dot their children, as in Figma (#943) 2026-10-07 11:29:52 +00:00
live-editing.spec.ts-snapshots feat(editor): checkpoint live interaction improvements 2026-09-15 11:36:17 +03:00
nested-transform-interaction.spec.ts-snapshots fix(canvas): keep labels readable and refine section badges 2026-09-15 19:54:04 +03:00
occurrence-text-visual.spec.ts-snapshots feat(fig): occurrence-scoped instance interpretation as the single .fig reader 2026-10-01 11:20:27 +04:00
pattern-mask-visual.spec.ts-snapshots ci: shard unit tests by owner and cut the quick suite from 100 s to 13 s (#715) 2026-09-17 10:18:16 +03:00
pen-variables.spec.ts-snapshots fix(pen): resolve ordinary variable references (#622) 2026-09-06 23:50:03 +03:00
presence-cursors.spec.ts-snapshots feat: show AI agents on the canvas and to collaborators (#803) 2026-10-03 14:01:36 +04:00
retained-grid.spec.ts-snapshots feat(editor): checkpoint live interaction improvements 2026-09-15 11:36:17 +03:00
saved-glyph-visual.spec.ts-snapshots feat(fig): occurrence-scoped instance interpretation as the single .fig reader 2026-10-01 11:20:27 +04:00
saved-text-visual.spec.ts-snapshots fix(fig): write text glyphs from the layout the renderer draws (#928) 2026-10-06 11:37:02 +00:00
scene-picture-freshness.spec.ts-snapshots fix: share Figma's creation and grouping between editor and plugin API (#919) 2026-10-06 12:28:52 +00:00
slot-overlays.spec.ts-snapshots feat(canvas): select auto layout frames by their gaps and dot their children, as in Figma (#943) 2026-10-07 11:29:52 +00:00
stroke-geometry-visual.spec.ts-snapshots fix(editor): commit vector drags on pointer release (#586) 2026-08-24 16:02:27 +03:00
stroke-paint-visual.spec.ts-snapshots fix(core): draw gradient and image strokes as the paint they are (#868) 2026-10-04 13:25:45 +00:00
text test: typecheck the test suites and fix what that found (#896) 2026-10-05 12:42:38 +00:00
tiled-large-blur-visual.spec.ts-snapshots test(canvas): align visual oracles with ruler-free fixtures 2026-09-16 03:45:34 +03:00
typography-depth-visual.spec.ts-snapshots fix(editor): commit vector drags on pointer release (#586) 2026-08-24 16:02:27 +03:00
vector feat(scene-graph)!: make a stroke a paint (#864) 2026-10-04 13:38:05 +04:00
arrow-caps-visual.spec.ts fix(core): draw gradient and image strokes as the paint they are (#868) 2026-10-04 13:25:45 +00:00
boolean-visual.spec.ts feat(scene-graph)!: make a stroke a paint (#864) 2026-10-04 13:38:05 +04:00
color-space.spec.ts fix(canvas): preserve paint geometry and color fidelity 2026-09-16 02:57:56 +03:00
color-space.webkit.spec.ts feat(updater): show download progress while installing an update 2026-09-25 23:15:14 +04:00
corner-smoothing-visual.spec.ts fix(editor): commit vector drags on pointer release (#586) 2026-08-24 16:02:27 +03:00
cursor-labels.spec.ts feat: show AI agents on the canvas and to collaborators (#803) 2026-10-03 14:01:36 +04:00
demo-workspace.spec.ts test: typecheck the test suites and fix what that found (#896) 2026-10-05 12:42:38 +00:00
dense-text-preview.spec.ts perf(text): preserve coverage across paragraph eviction 2026-09-15 16:32:07 +03:00
distance-measurement-edge-cases.spec.ts feat(scene-graph)!: make a stroke a paint (#864) 2026-10-04 13:38:05 +04:00
distance-measurement.spec.ts feat(canvas): measure distances between layers (#515) 2026-08-14 18:18:55 +03:00
document-loading.spec.ts feat: refresh branding with generated platform icons (#707) 2026-09-16 11:54:07 +03:00
drop-files.spec.ts fix(editor): commit vector drags on pointer release (#586) 2026-08-24 16:02:27 +03:00
fill-modes-visual.spec.ts feat(scene-graph)!: make a stroke a paint (#864) 2026-10-04 13:38:05 +04:00
frame-creation-preview.spec.ts feat(editor): checkpoint live interaction improvements 2026-09-15 11:36:17 +03:00
frame-overlays.spec.ts fix(renderer): rasterize settled scenes at viewport origin 2026-09-15 13:25:43 +03:00
instance-scale-visual.spec.ts test: typecheck the test suites and fix what that found (#896) 2026-10-05 12:42:38 +00:00
instance-sizing.spec.ts fix: preserve authored instance sizing through synchronization 2026-09-14 00:24:52 +03:00
label-anatomy.spec.ts feat(scene-graph)!: make a stroke a paint (#864) 2026-10-04 13:38:05 +04:00
layout-outlines.spec.ts feat(canvas): select auto layout frames by their gaps and dot their children, as in Figma (#943) 2026-10-07 11:29:52 +00:00
live-editing.spec.ts feat(editor): checkpoint live interaction improvements 2026-09-15 11:36:17 +03:00
manipulation.spec.ts feat(editor): add configurable snapping and guides 2026-08-18 19:11:48 +03:00
nested-transform-interaction.spec.ts feat(editor): checkpoint live interaction improvements 2026-09-15 11:36:17 +03:00
occurrence-text-visual.spec.ts test: typecheck the test suites and fix what that found (#896) 2026-10-05 12:42:38 +00:00
painted-text.spec.ts fix(canvas): preserve paint geometry and color fidelity 2026-09-16 02:57:56 +03:00
pattern-mask-visual.spec.ts feat(scene-graph)!: make a stroke a paint (#864) 2026-10-04 13:38:05 +04:00
pen-layout.spec.ts fix(pen): honor layout and sizing defaults (#652) 2026-09-10 17:02:56 +03:00
pen-variables.spec.ts fix(pen): resolve ordinary variable references (#622) 2026-09-06 23:50:03 +03:00
presence-cursors.spec.ts feat: show AI agents on the canvas and to collaborators (#803) 2026-10-03 14:01:36 +04:00
retained-grid.spec.ts feat(editor): checkpoint live interaction improvements 2026-09-15 11:36:17 +03:00
retained-parity.spec.ts fix(renderer): rasterize settled scenes at viewport origin 2026-09-15 13:25:43 +03:00
ruler-visibility.spec.ts fix: honor ruler visibility on the overlay canvas 2026-09-14 01:12:26 +03:00
saved-glyph-visual.spec.ts feat(fig): occurrence-scoped instance interpretation as the single .fig reader 2026-10-01 11:20:27 +04:00
saved-text-visual.spec.ts fix(fig): write text glyphs from the layout the renderer draws (#928) 2026-10-06 11:37:02 +00:00
scene-picture-freshness.spec.ts fix: share Figma's creation and grouping between editor and plugin API (#919) 2026-10-06 12:28:52 +00:00
slot-overlays.spec.ts feat: create, fill, and edit slots (#862) 2026-10-04 17:02:28 +00:00
split-views.spec.ts feat(editor): model split canvas panes (#519) 2026-08-15 10:31:52 +03:00
stroke-geometry-visual.spec.ts feat(scene-graph)!: make a stroke a paint (#864) 2026-10-04 13:38:05 +04:00
stroke-paint-visual.spec.ts test: typecheck the test suites and fix what that found (#896) 2026-10-05 12:42:38 +00:00
tiled-large-blur-visual.spec.ts test: typecheck the test suites and fix what that found (#896) 2026-10-05 12:42:38 +00:00
tiled-property-preview.spec.ts feat(editor): checkpoint live interaction improvements 2026-09-15 11:36:17 +03:00
top-level-frame-click.spec.ts feat(canvas): select auto layout frames by their gaps and dot their children, as in Figma (#943) 2026-10-07 11:29:52 +00:00
typography-depth-visual.spec.ts perf(text): preserve coverage across paragraph eviction 2026-09-15 16:32:07 +03:00