Repository navigation
feat: maximize and fold tabsets (core, React, Solid) - #83
Merged
Merged
Conversation
- New view-state module: maximize/restore/toggleMaximize and collapse/expand/toggleCollapse, plus normalizeViewState which keeps the state valid after any tree change (a lone tabset cannot stay folded, every row keeps one open child, a maximize whose tabset left the tree is cleared). - Maximize only changes the computed output: the maximized tabset and its tabs get the root dims, everything else is flagged nodHidden. Node dims and parts are untouched, so restore is exact. - Fold: a folded tabset's minimum along its parent row is collapsedSize and it takes no share of extra space; its part is preserved so unfold restores the previous size. Folding the last open child of a row unfolds the most recently folded sibling (LeetCode behaviour). - Bonds next to a folded tabset are locked (nodLocked) and ignored by the slider; nothing moves while maximized. Any updateTree ends maximize; dragged and drop-target tabsets unfold. - nodFold / nodMaxd round-trip through toJSON and the constructor. - Fix: a single-tab layout no longer creates an empty row sibling that took half of the width. Tests: view-state suite (maximize, exact restore, fold in both axes, exact unfold, last-open swap, locked bonds, resize sweep, JSON round trip, drag-and-drop interplay, randomized moves/folds/maximizes) and a single-tab regression.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- DefaultTabsetToolbar (React and Solid): Maximize/Restore and Fold/Unfold buttons at the end of every tab bar, shown on hover (and always on folded strips), with aria labels and shortcut tooltips. Replaceable through the TabsetToolbar prop. - Folded tabsets in side-by-side rows render their tab bar rotated 90deg as a vertical strip (core getTabbarPlacement/placeTabbar); icons are counter-rotated so they read upright. Folded bodies stay mounted but hidden. - Maximized mode hides the other tab bars and bonds via a data-dx-hidden attribute + CSS, so components keep their own display values. - Double-click a tab bar to maximize/restore; Alt/Option + "+" / "-" toggle maximize/fold for the last touched tabset. - Drag start while maximized restores first; locked bonds ignore the pointer; collapsedSize follows tabHeadHeight. - Fix: drop targeting in a tab bar only considers tab labels (the toolbar was treated as the last tab, breaking drops on the right). - New props: enableMaximize, enableCollapse, enableDoubleClickMaximize, keyboardShortcuts, TabsetToolbar (all on by default).
akash-aman
changed the title
… bars - Dragging over a folded (rotated) strip used the rotated tab label boxes for the insertion marker, producing a thin vertical sliver and an unreliable target. Rotated tab bars (data-rotated) now highlight the whole strip and drop into the tabset, which unfolds it. - In narrow tabsets the overflowing tab labels ran under the toolbar. The toolbar now inherits the tab bar background (labels slide under it) and stays pinned to the visible end while the tab bar scrolls.
Merged
This branch was successfully deployed
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.
LeetCode-style maximize and fold for tabsets, end to end: core engine, React and Solid UI. I studied the behaviour on leetcode.com, which uses FlexLayout, and tested it in agent-browser on both examples before raising this PR.
What you get (on by default)
nodFoldon tabsets andnodMaxdon the root inupdateJSON.API
maximize,restore,toggleMaximize,maximizedId,collapse,expand,toggleCollapse, thecollapsedSizeoption,getTabbarPlacement/placeTabbar. Computed options gainnodFold,nodMaxd,nodHidden,nodLocked,nodFoldableandnodMaximizable.enableMaximize,enableCollapse,enableDoubleClickMaximize,keyboardShortcuts,TabsetToolbar.Rules
Fixes included
data-dx-hiddenattribute instead of inlinedisplay, so custom tab bars keep their owndisplayvalue (an earlier draft stretched tab labels in the React demo).Verification
pnpm run build,pnpm run lint(0 warnings) andpnpm run test(3766 tests). There are 17 new core tests, including a randomized 400-step mix of moves, folds and maximizes.Release
Changesets bump all packages a minor version:
@dynamix-layout/core,@dynamix-layout/reactand@dynamix-layout/solid.