Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keep grid rearrange shadow inside container #6273

Merged
merged 3 commits into from
Sep 2, 2024

Conversation

ruggi
Copy link
Contributor

@ruggi ruggi commented Aug 29, 2024

Problem:

When rearranging grid elements, the shadow can go anywhere the mouse goes, making it seem like an absolute move.

Fix:

Wrap the shadow coords so they are restricted to the grid container bounds.

Before After
Kapture 2024-08-29 at 13 11 21 Kapture 2024-08-29 at 13 10 43

Fixes #6272

Copy link
Contributor

github-actions bot commented Aug 29, 2024

Try me

Copy link

relativeci bot commented Aug 29, 2024

#14017 Bundle Size — 62.54MiB (~+0.01%).

47c5652(current) vs 916e8b9 master#13980(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics  Change 2 changes Regression 1 regression
                 Current
#14017
     Baseline
#13980
Regression  Initial JS 45.67MiB(~+0.01%) 45.67MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 21.63% 21.56%
No change  Chunks 30 30
No change  Assets 33 33
No change  Modules 4377 4377
No change  Duplicate Modules 519 519
No change  Duplicate Code 31.63% 31.63%
No change  Packages 472 472
No change  Duplicate Packages 70 70
Bundle size by type  Change 2 changes Regression 1 regression Improvement 1 improvement
                 Current
#14017
     Baseline
#13980
Regression  JS 62.53MiB (~+0.01%) 62.52MiB
Improvement  HTML 11.05KiB (-0.33%) 11.09KiB

Bundle analysis reportBranch feat/grid-shadow-inside-containe...Project dashboard


Generated by RelativeCIDocumentationReport issue

}, [features, initialShadowFrame, interactionData, shadow, hoveringStart, mouseCanvasPosition])
// make sure the shadow is displayed only inside the grid container bounds
function wrapCoord(c: number, min: number, max: number, shadowSize: number) {
return Math.min(Math.max(c, min), max - shadowSize)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

@@ -618,6 +620,20 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar

const gridPath = optionalMap(EP.parentPath, shadow?.elementPath)

const gridFrame = React.useMemo(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can maybe take padding here into consideration (so that the shadow won't get over the paddings)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

true, I tried it when writing the code and it makes sense too – I just did not know which was best tbh, so I just went with the minimum option, but I guess it's easy to change if we find that it would feel better being "stuck to the inner grid" 🤔

@ruggi ruggi merged commit 460ed2b into master Sep 2, 2024
20 checks passed
@ruggi ruggi deleted the feat/grid-shadow-inside-container branch September 2, 2024 08:35
liady pushed a commit that referenced this pull request Dec 13, 2024
**Problem:**

When rearranging grid elements, the shadow can go anywhere the mouse
goes, making it seem like an absolute move.

**Fix:**

Wrap the shadow coords so they are restricted to the grid container
bounds.

| Before | After |
|----------|--------------|
| ![Kapture 2024-08-29 at 13 11
21](https://github.com/user-attachments/assets/cf92cae2-014b-4b58-87d6-fd3833ffe741)
| ![Kapture 2024-08-29 at 13 10
43](https://github.com/user-attachments/assets/06f38111-e38b-4d8d-834d-9e59d7e71cf2)
|

Fixes #6272
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

keep grid rearrange shadow inside container
3 participants