Skip to content

added server-side canvas support & Created Masonry Demo#32

Open
Unmesh100 wants to merge 3 commits intochenglou:mainfrom
Unmesh100:main
Open

added server-side canvas support & Created Masonry Demo#32
Unmesh100 wants to merge 3 commits intochenglou:mainfrom
Unmesh100:main

Conversation

@Unmesh100
Copy link
Copy Markdown

@Unmesh100 Unmesh100 commented Mar 30, 2026

Masonry Demo :

  • pages/demos/masonry.ts — Logic that computes card heights with Pretext.layout() without any DOM reads, then routes cards to the shortest column
  • pages/demos/masonry.html — Dark-themed aesthetic with image-color cards, fixed bottom controls for column adjustment
  • Updated pages/demos/index.html — Enabled the previously-linked but missing demo
    Why this matters:
  • Masonry layouts typically require expensive DOM measurement (getBoundingClientRect) to know heights before placement
  • This demo routes cards to the shortest column using heights computed purely from canvas measurement — zero DOM reads in the hot path
  • The column slider demonstrates dynamic reflow without any reflow penalty
    Tech highlights:
  • Uses layout(prepared, maxWidth, lineHeight) for height prediction
  • Cards have variable heights based on their text content
  • Column assignment via greedy shortest-column algorithm
  • Responsive column count auto-adjusts to viewport

@Unmesh100 Unmesh100 changed the title added server-side canvas support added server-side canvas support & Created Masonry Demo Mar 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant