From 4a223253e8141e0779a7293e0c4d3dd607a5daf6 Mon Sep 17 00:00:00 2001
From: Sascha Stoll <sascha.stoll@sap.com>
Date: Fri, 5 Aug 2022 13:27:56 +0200
Subject: [PATCH] Fixed jumping items on component resize.

Itmes that are not leftmost in grid "jumped" when resizing the grid component.
This was due to the 0.2s transition animation playing whenever the grid component is resized.
Leftmost items transition in place thats why they appear to not jump.

The fix temporarily adds a CSS class called stopMove to the item in MoveResize whenever the grid component resizes.
This class overwrites the transition attribute such that no transition is played.
It is added via the flag moveAnimation.
MoveAnimation is set in the onResize handler for throttleUpdate + 100ms duration.
+100ms is required as exact matching of the throttleUpdate duration leads to stuttering.
---
 src/MoveResize/index.svelte | 10 +++++++++-
 src/index.svelte            |  8 ++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/MoveResize/index.svelte b/src/MoveResize/index.svelte
index 68539d4..0343843 100644
--- a/src/MoveResize/index.svelte
+++ b/src/MoveResize/index.svelte
@@ -55,6 +55,10 @@
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
   }
+
+  .stopMove {
+    transition: none !important;
+  }
 </style>
 
 <div
@@ -63,7 +67,10 @@
   class="svlt-grid-item"
   class:svlt-grid-active={active || (trans && rect)}
   style="width: {active ? newSize.width : width}px; height:{active ? newSize.height : height}px; 
-  {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); `} ">
+  {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);`} "
+  class:stopMove={!moveAnimation}>
   <slot movePointerDown={pointerdown} {resizePointerDown} />
   {#if resizable && !item.customResizer}
     <div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
@@ -87,6 +94,7 @@
 
   export let resizable;
   export let draggable;
+  export let moveAnimation;
 
   export let id;
   export let container;
diff --git a/src/index.svelte b/src/index.svelte
index 401a890..37059f3 100644
--- a/src/index.svelte
+++ b/src/index.svelte
@@ -16,6 +16,7 @@
         draggable={item[getComputedCols] && item[getComputedCols].draggable}
         {xPerPx}
         {yPerPx}
+        {moveAnimation}
         width={Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx - gapX * 2}
         height={(item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
         top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
@@ -57,10 +58,11 @@
   export let fastStart = false;
   export let throttleUpdate = 100;
   export let throttleResize = 100;
-
+  
   export let scroller = undefined;
   export let sensor = 20;
-
+  
+  let moveAnimation = true;
   let getComputedCols;
 
   let container;
@@ -91,6 +93,8 @@
       yPerPx,
       width: containerWidth,
     });
+    moveAnimation = false
+    setTimeout(() => moveAnimation = true, throttleUpdate + 100)
   }, throttleUpdate);
 
   onMount(() => {