Skip to content

Bring Canvas back as a panel, named for the component it draws on - #28

Merged
einari merged 1 commit into
mainfrom
feature/restore-canvas-panel
Sep 4, 2026
Merged

Bring Canvas back as a panel, named for the component it draws on#28
einari merged 1 commit into
mainfrom
feature/restore-canvas-panel

Conversation

@einari

@einari einari commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

Added

  • Canvas is back as a panel, and carries an Extent — the coordinate space a child's Canvas.Left/Canvas.Top pair is measured against. It was dropped on the argument that FreeformArrangement already covers absolute placement, but the two sit at different levels: a FreeformArrangement arranges a layout slot's content with one variant per size class, while a Canvas places elements inside a single coordinate space in the element tree. Without the panel there was nowhere for a free-placement design surface to land.
  • isCanvas recognizes a canvas by its extent, the same way the other panel guards recognize theirs by the property each one alone declares. The old Canvas declared no properties at all, which is why nothing could tell it from a plain Panel — and why it could be removed without anything noticing.

Changed

  • The React renderer arranges a canvas: it becomes the positioned ancestor its children are placed against, sized to its extent, with a child that names any of Canvas.Left, Canvas.Top, Canvas.Right or Canvas.Bottom placed absolutely. A child that names none stays in flow rather than being pinned to the origin.
  • The name follows @cratis/components' Canvas, which is the surface a Cratis application actually draws one on, rather than introducing a second word for the same thing.

Canvas was removed on the argument that FreeformArrangement already says
what absolute placement is. It does not say the same thing: a
FreeformArrangement arranges a layout *slot's* content with one variant
per size class, while a Canvas places elements inside a single
coordinate space in the element tree. They sit at different levels, and
dropping the panel left the tree with nowhere for a free-placement
design surface to land.

The name is not a choice either - `@cratis/components` ships `Canvas`,
and that is the surface a Cratis application actually draws one on. A
designer placing components on a canvas and the model recording where
they landed should not need two words for the same thing.

The reason it could be dropped without anything noticing was real,
though: the old Canvas declared no properties, so nothing could tell it
from a plain Panel in a model that carries no discriminator. It now
declares its `Extent` - the coordinate space a `Canvas.Left`/`Canvas.Top`
pair is measured against - which is both a genuine canvas property and
what `isCanvas` recognizes it by.

`panelLayout` renders it: the canvas becomes the positioned ancestor its
children are placed against, sized to its extent, and a child naming any
of the four edges is placed absolutely. A child naming none stays in
flow rather than being pinned to the origin.

Verified: 5 .NET projects / 0 warnings / 111 specs, 931 JS specs (up from
923), lint and build clean, five Storybooks build.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EGM8pbSNm2nS8KoKCpKNui
@einari einari added the minor label Sep 4, 2026
@einari
einari merged commit 16f38f6 into main Sep 4, 2026
6 of 7 checks passed
@einari
einari deleted the feature/restore-canvas-panel branch September 4, 2026 06:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant