Repository navigation
feat: add responsive Flex and Grid placement with intrinsic sizing - #48
Merged
Merged
Conversation
Add FlexLayout and extend GridLayout with spans, automatic columns and content measurement, shared by native backends and the custom renderer, in the V API and runtime VML. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Each Flex level measured its subtree twice (before and after assigning widths), and nested levels repeated that, so intrinsic measurement grew exponentially with nesting depth. A per-build VLayoutMeasureCache now memoizes Flex/Grid preferred sizes by structural content and probe size, plus leaf sizes measured inside another container's measurement. Keys intern tag, id, resolved props and children rather than node paths, so Repeater items and scope-dependent expressions stay distinct. The model path keeps the cache in VmlEvaluation; static documents use one per FlexLayout. Nothing persists between builds. The flex/grid solver is unchanged. Verified identical element trees (frames, text, hidden) against the previous code for the responsive example, nested Flex and a Repeater/Grid document at four window sizes, native and custom. Benchmark (-prod, AppKit text): nested 10 levels 83 ms -> 1.6-2.5 ms, responsive example 6.2 -> 3.0 ms, flat 200-label wrap unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
tomaszbk
changed the title
# Conflicts: # examples/grid_layout/main.v # ui/box_layout_test.v # ui/grid_layout_test.v # ui/ui_custom_test.v
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A toolbar can wrap when the window becomes narrower, and a project grid can switch from three columns to one while keeping its featured card within the available width. This adds responsive
FlexandGridplacement and intrinsic measurement to the V API, with fractional dimensions retained through measurement and placement.FlexConfigandFlexChildprovide direction, wrapping, gaps, justification, alignment, basis, grow/shrink weights and size bounds.GridConfigadds automatic column counts, a column cap and row/column spans. Orientation, alignment and padding use the sharedLayoutOrientation,LayoutAlignmentandLayoutPaddingtypes. Existing Grid callers, fixtures and public guides use theGridname.LayoutConstraintsandmeasure_layout_elementseparate measurement from placement. Callers can measure a width-dependent child again at its assigned width before constructing the finalflexorgrid. Native macOS text measurement uses AppKit; custom rendering uses its drawing measurer, with CPU measurement available before a window exists. Custom text areas account for wrapped rows, blank lines, long words, padding and the scrollbar gutter.The responsive and Grid examples construct layouts in V. The public guide describes the measurement and placement steps; the benchmark exercises text measurement, wrapping, nested Flex containers and responsive Grid geometry. The branch includes current upstream ui2
15709bb.Verification
On macOS arm64 with rebuilt V source including upstream
f2b0baa611, the C backend, default program GC andV_MACOS_V3_NO_FALLBACK=1:make check-macos,check-linux,check-windowsandcheck-custompassed. Cross-target checks are typechecks.git diff --checkpassed for the full diff against upstream master. Public Grid documentation uses the current V/VML names.