Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
kof
force-pushed
the
grid
branch
3 times, most recently
from
5ca02fd to
b174dc2
Compare
…mprove alignment icons
…mprove alignment icons
- Add GridAxisMode type and getGridAxisMode() to analyze grid values - Add isImplicitGridMode() to detect modes needing DOM probing - Add isEditableGridMode() to detect modes editable in visual UI - Add getGridAxisLabel() for consistent label generation - Refactor grid-generator.tsx to use new pure functions - Refactor grid-settings.tsx to use new pure functions - Fix grid-areas.tsx to use parseGridTemplateTrackList - Update tests to match correct parser behavior
Show '?' for unknown track counts instead of blocking the UI. Users can still override with explicit grid values.
- Add hover highlighting for column/row tracks and grid areas in canvas - Move $gridEditingTrack and $gridEditingArea to builder nano-states - Add TrackHighlight and AreaHighlight components to GridOutlines - Highlight tracks/areas on hover in addition to when editing - Add maxHeight constraint to FloatingPanel for bottom-within placement - Remove auto-open of edit popover when adding new tracks/areas
…functions and tests
- Inflate grid containers proportionally to track count (INFLATE_PADDING per cell) using --ws-inflate-w/h custom properties with CSS fallback for non-grids - Detect all-zero tracks in grids with gaps to ensure inflation triggers - Rewrite grid outline probing: probe per-axis edges, compute line positions as midpoints between adjacent track boundaries (centre of gaps) - On inflated axes always use even-distribution fallback since probed positions sit in a tiny content area - Remove debounceEffect dependency from grid overlay subscriptions; use self-contained rAF→rAF scheduling for reliable updates - Re-evaluate findGridContainer on every style change so display:block→grid shows outlines immediately without re-selection - Apply default 2×2 grid with 16px gap when first switching to grid display - Extract DEFAULT_GRID_TRACK_COUNT and DEFAULT_GRID_GAP constants - Prevent removing last grid track in settings (canRemove guard)
…cale\n\n- Replace DOM probe approach with getComputedStyle resolved CSS strings\n- GridCellData now carries resolved template/gap/padding/border/direction strings\n- Builder overlay mirrors grid with CSS transform: scale() instead of manual per-value scaling\n- Grid inflation uses track-level minmax(75px, 1fr) instead of padding\n- CSS rules skip padding for grid containers with inline grid-template overrides\n- Remove ~300 lines of probe/clamp/line calculation code from grid-outlines.tsx
…rchitecture - Split overlay into positioning parent + canvas mirror child - Sync user transforms (transform, transformOrigin, scale) to mirror div - Recover untransformed rect via DOMMatrix inversion of getBoundingClientRect - Sync display, width, height, boxSizing, borderStyle from canvas - Add gridTemplateAreas and justifyItems support - Move contain: strict to outermost container (avoids transform clipping) - Only remove grid-template overrides from actually-inflated elements
…\nReplace manual matrix math on canvas with a hidden probe element on\nthe builder side. The probe applies the same resolvedCssText at\nposition fixed (0,0) and reads its BCR — the browser handles all\nCSS parsing (variables, units, 3D axes) with zero manual parsing.\n\n- Remove getUntransformedRect (~80 lines) from canvas\n- Canvas now sends raw BCR + offsetWidth/offsetHeight\n- Builder computes transform offset via getTransformOffset probe\n- Works with individual translate/scale/rotate CSS properties\n- GridCellData type: rect → bcr + untransformedWidth/Height
…or of SelectedInstanceOutline: return null when\n$ephemeralStyles is non-empty so grid outlines don't show stale\npositions while the style panel is previewing changes.\n\nAlso fix skewX value not showing in transform editor (\"skewx\" typo\nreplaced with shared extractSkewPropertiesFromTransform extractor).
- Move parseGridAreas to @webstudio-is/css-data with css-tree parser - Area name conversion: spaces→dashes via toAreaName helper - Enter key commits value in position inputs (onKeyDown prop) - Inclusive end mode for area position inputs (display 1,1 not 1,2) - Fix span=1 producing auto: always emit span N tuple - Auto mode sets span 1 on all axes instead of auto keyword - Merged area outlines: single solid border per area, not per cell - Area labels with textVariants.regular typography - Highlight uses oklch color with alpha instead of opacity property
Previously grid containers were only inflated when they had zero children. Adding a single child caused all other empty tracks to collapse because the grid was no longer a "leaf" element. Now every grid container on the canvas gets per-track minmax wrapping: each resolved track value is wrapped with minmax(75px, <resolved>), guaranteeing every cell at least 75px. This is a builder-only affordance — preview and published sites use authored values. - Collect grid containers during element scan regardless of childCount - New step 5: per-track minmax(75px, <resolved>) wrapping for all grids - Separate gridInflatedAttribute marker for cleanup - Simplified clearInflation to handle both marker attributes
…s, merge area cells in grid preview
…s, gap simulates borders, blue hover on free cells
…\n\nAdd grid-template-rows/columns: 1fr to the html preset so the root\nelement always has defined templates. Move grid default application\nfrom LayoutSectionGrid mount to a display-transition effect that only\nfires when display changes from non-grid to grid on the same instance.\n\nAlso fix grid outlines not restoring after scrubbing position/span\ninputs by calling resetEphemeralStyles() in the appropriate handlers.
Grid inflation sets inline grid-template-* on the parent element, which triggers the MutationObserver watching for style changes. The observer calls update() → updateInflation() → style change → loop. Skip mutation batches where every record is a style attribute change on an element with data-ws-grid-inflated, as these are caused by the inflator, not by user or React changes.
…ltering Simpler and agnostic approach — no dependency on inflator internals.
…date normalize.css rows to auto
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
1 participant
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.
Description
Steps for reproduction
Code Review
Before requesting a review
Before merging
.envfile