Resize drag drop adjustments#213
Draft
Sobyt483 wants to merge 8 commits into
Draft
Conversation
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThe dashboard adds Z-flow ordering and projection for drag and resize operations, drag-origin placeholder rendering, shared card surface markers, and responsive card sizing changes at the XL breakpoint. ChangesDashboard layout behavior
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant GridStack
participant Dashboard
participant SteppedResizeGridStackEngine
participant CardSurface
participant DragOriginPlaceholder
GridStack->>Dashboard: onDragStart(event)
Dashboard->>CardSurface: locate drag-origin surface
Dashboard->>DragOriginPlaceholder: set origin geometry
GridStack->>SteppedResizeGridStackEngine: moveNodeCheck(node, opts)
SteppedResizeGridStackEngine->>Dashboard: update projected card geometry
GridStack->>Dashboard: onDragStop()
Dashboard->>SteppedResizeGridStackEngine: commitZFlowLayout()
Dashboard->>DragOriginPlaceholder: clear origin style
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This was
linked to
issues
Jul 23, 2026
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts (1)
497-536: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winNo visible test coverage for the XL breakpoint w/maxW remap.
changeCardSettingsForXlPage/updateCardsForBreakpointtoggle each card'sw/maxWbetween 3 and 4 whenever the XL threshold is crossed, gated byisXLPage. This bidirectional remap (and theisXLPagestate machine) doesn't appear to be exercised by any test in the diff. Given it mutates persisted card geometry, a couple of unit tests (crossing the threshold each direction, and no-op when already in that state) would guard against regressions.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts` around lines 497 - 536, Add unit tests for changeCardSettingsForXlPage covering transitions into and out of the XL threshold, asserting the expected w/maxW remapping and isXLPage state; also verify repeated calls while already in the target state are no-ops. Mock or accommodate updateCardsForBreakpoint and afterNextRender as needed without changing production behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@projects/ngx/declarative-ui/dashboard/constants/_breakpoints.scss`:
- Around line 27-29: Synchronize the $dashboard-breakpoints table with the
updated four-column values used by $dashboard-cols-md, $dashboard-cols-lg, and
$dashboard-cols-xl, including its XL comment. If the table is no longer used,
remove it instead while preserving the file’s shared breakpoint contract.
In `@projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss`:
- Around line 197-199: Update the Stylelint configuration’s
selector-type-no-unknown rule to ignore the custom element types gridstack and
gridstack-item, preserving the existing gridstack selector while allowing it to
pass lint.
In `@projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.spec.ts`:
- Line 5: Update the dashboard component spec’s gridstack mocking so the
GridStackEngine import consumed by SteppedResizeGridStackEngine resolves to a
mock before the module is imported. Extend the existing gridstack mock to
include gridstack/dist/gridstack-engine, or add an equivalent module mock for
that path, while preserving the current drag test behavior.
In `@projects/ngx/declarative-ui/dashboard/dashboard/resize.helpers.ts`:
- Around line 7-27: Update resolveResizeWidthStep to explicitly handle an empty
result from getAllowedResizeWidths when minWidth exceeds effectiveMax, returning
a valid fallback width rather than undefined. Preserve the existing
nearest-candidate selection for non-empty allowed sets and ensure callers such
as moveNodeCheckWithSteppedResize receive a usable width.
---
Nitpick comments:
In `@projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts`:
- Around line 497-536: Add unit tests for changeCardSettingsForXlPage covering
transitions into and out of the XL threshold, asserting the expected w/maxW
remapping and isXLPage state; also verify repeated calls while already in the
target state are no-ops. Mock or accommodate updateCardsForBreakpoint and
afterNextRender as needed without changing production behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 70325535-e66d-43dd-bb98-a1409c05136a
📒 Files selected for processing (15)
projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.htmlprojects/ngx/declarative-ui/dashboard/card/dashboard-card.component.spec.tsprojects/ngx/declarative-ui/dashboard/card/dashboard-card.component.tsprojects/ngx/declarative-ui/dashboard/constants/_breakpoints.scssprojects/ngx/declarative-ui/dashboard/constants/breakpoints.tsprojects/ngx/declarative-ui/dashboard/constants/constants.tsprojects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.htmlprojects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scssprojects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.spec.tsprojects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.tsprojects/ngx/declarative-ui/dashboard/dashboard/resize.helpers.tsprojects/ngx/declarative-ui/dashboard/dashboard/stepped-resize-engine.spec.tsprojects/ngx/declarative-ui/dashboard/dashboard/stepped-resize-engine.tsprojects/ngx/declarative-ui/dashboard/dashboard/z-flow.helpers.spec.tsprojects/ngx/declarative-ui/dashboard/dashboard/z-flow.helpers.ts
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
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.
Z-flow engine is implemented as well as resize snap behavior.
But we need to decide do we want to enable it for all users without other options. Or it should be configured. Because to achieve snap behavir I've changed columns from 12 to 4 + for z-flow it's crucial that all cards have same height otherwise it wouldn't work.
@gkrajniak Would be good to have a call to discuss all possible options.