refactor(core): centralize dock layout tunables into constants#401
Merged
Conversation
Extract the floating dock bar's spatial magic numbers (bar height, item capacity, viewport margin, glow, drag snapping, edge detection) into a single documented DockLayout module, and derive the bar dimensions from CSS custom properties. Reuse the shared anchor-position helper across Dock and DockPanel, and expose every tunable as a live Storybook control.
commit: |
Add a `panelOverlapFactor` layout constant (default 0.5, matching the previous behaviour) controlling how much of the dock bar's thickness overlaps the panel. Lowering it slides the panel clear of the bar so the iframe underneath stays readable. Threaded through DockEmbedded → Dock → DockPanel, with Storybook coverage.
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.
What
Makes the floating dock bar's (
Dock.vue) padding, margin, sizing, positioning, snapping and its overlap with the panel/iframe all driven by a single, documented list of constants instead of magic numbers scattered across the template, script and stylesheet.New module —
components/dock/dock-layout.tsA
DockLayoutinterface +DEFAULT_DOCK_LAYOUTcollects every spatial tunable:barHeight,barMinWidth,minimizedSize— bar dimensionsglowSize,glowBlur— ambient glowmaxVisibleItems— inline item capacity before overflowviewportMargin— gap between the bar/panel and the viewport edgepanelOverlapFactor— how much of the dock bar's thickness overlaps the panel/iframe (0.5= the previous "half" behaviour; lower slides the panel clear of the bar so the content underneath stays readable)edgeSnapPercent,centerSnapPercent,edgeZoneHeight— drag snapping / edge detectionAlongside pure helpers extracted from the previously-inline logic:
resolveDockLayout,dockLayoutCssVars,resolveViewportMargins,snapDockPercent,resolveDockEdge, andresolveDockAnchor.Component changes
Dock.vue— consumes the constants/helpers; gains an optionallayout?: Partial<DockLayout>prop; bar dimensions flow out as CSS custom properties. The drag/anchor logic collapses from ~60 lines of inline trig + switch statements into helper calls.DockPanel.vue— sharesresolveDockAnchor(previously duplicated verbatim), and appliespanelOverlapFactor: the panel's docked edge, previously pinned to the dock's center (a fixed 50% overlap via/2), is now offset bydockThickness * (0.5 - factor), with the size cap adjusted so the far edge stays put.DockEmbedded.vue— optionallayoutprop forwarded to the float-mode bar + panel.style.css— dimension utilities swapped forvar(--vite-devtools-dock-*, fallback)so they track the constants..generated/css.tsis the regenerated bundle.Storybook
Dock.stories.tsstory args now are theDockLayout— every tunable is a live range control. Added cases:TallBar,CompactBar,RoomyViewportMargin,LowerCapacity,HigherCapacity,LargeGlow.DockEmbedded.stories.tsaddsFloatReducedOverlap(panelOverlapFactor: 0.2) to show the reduced dock↔iframe overlap next to the defaultFloatOpen.Verification
pnpm build,pnpm typecheck,pnpm test(200 passing),pnpm lint, andstorybook buildall pass. Defaults match the previous hardcoded values, so there is no behaviour change out of the box; the overlap reduction was also verified visually in Storybook.This PR was created with the help of an agent.