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

Items slow to reposition on resize #125

Open
ksallee opened this issue Jun 10, 2022 · 2 comments
Open

Items slow to reposition on resize #125

ksallee opened this issue Jun 10, 2022 · 2 comments

Comments

@ksallee
Copy link

ksallee commented Jun 10, 2022

When I resize the grid, the containers inside tend to overlap or stretch while resizing, and even with throttleUpdate and throttleResize set to a minimum, it doesn't seem to have any effect.
Is there a way to fix this?
Here's an example:

Screen.Recording.2022-06-10.at.16.26.59.mov
@WbaN314
Copy link

WbaN314 commented Jul 25, 2022

So i took a look at it and this behavior happens because the 0.2s transform in src/MoveResize/index.svelte triggers when resizing the grid.

{active ? transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px; : trans ? transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s; : transition: transform 0.2s, opacity 0.2s; transform: translate(${left}px, ${top}px); } ">`

I dont think there is a way to fix this by using the API.
`

@WbaN314
Copy link

WbaN314 commented Jul 25, 2022

Created pull request #133.

In the meantime there is some kind of spaghetti fix that can be applied with the existing API. When resize is detected it overwrites all transitions on the elements for a short amount of time.

style:
.horribleSpaghettiFix :global(.svlt-grid-container) > :global(.svlt-grid-item) { transition: none !important; }

html:

<div class:horribleSpaghettiFix={cover}>
  <Grid on:resize={resizeMoveHandler}>
   ...
  <Grid/>
<div/>

javascript:

let timer
const resizeMoveHandler = () => {
  stopItemMove=true
  clearTimeout(timer)
  timer = setTimeout(() => stopItemMove=false, 500)
}

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

No branches or pull requests

2 participants