Fixed incorrect starting keyframe for sortable animation

clauderic · Sep 19, 2024 · 41ee331 · 41ee331
1 parent 3942270
commit 41ee331
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 25 deletions.
diff --git a/packages/dom/src/sortable/sortable.ts b/packages/dom/src/sortable/sortable.ts
@@ -20,8 +20,8 @@ import type {
 } from '@dnd-kit/dom';
 import {
   animateTransform,
+  getComputedStyles,
   computeTranslate,
-  scheduler,
   ProxiedElements,
 } from '@dnd-kit/dom/utilities';
 
@@ -191,7 +191,7 @@ export class Sortable<T extends Data = Data> {
         return;
       }
 
-      scheduler.schedule(() => {
+      manager.renderer.rendering.then(() => {
         const {element} = this;
 
         if (!element) {
@@ -209,15 +209,17 @@ export class Sortable<T extends Data = Data> {
           y: shape.boundingRectangle.top - updatedShape.boundingRectangle.top,
         };
 
-        const {x, y, z} = computeTranslate(element);
+        const {translate} = getComputedStyles(element);
+        const currentTranslate = computeTranslate(element, translate, false);
+        const finalTranslate = computeTranslate(element, translate);
 
         if (delta.x || delta.y) {
           animateTransform({
             element,
             keyframes: {
               translate: [
-                `${x + delta.x}px ${y + delta.y}px ${z}`,
-                `${x}px ${y}px ${z}`,
+                `${currentTranslate.x + delta.x}px ${currentTranslate.y + delta.y}px ${currentTranslate.z}`,
+                `${finalTranslate.x}px ${finalTranslate.y}px ${finalTranslate.z}`,
               ],
             },
             options: transition,

diff --git a/packages/dom/src/utilities/index.ts b/packages/dom/src/utilities/index.ts
@@ -42,6 +42,5 @@ export {
   inverseTransform,
   parseTransform,
   parseTranslate,
-  stringifyTransform,
 } from './transform/index.ts';
 export type {Transform} from './transform/index.ts';
diff --git a/packages/dom/src/utilities/transform/computeTranslate.ts b/packages/dom/src/utilities/transform/computeTranslate.ts
@@ -23,30 +23,34 @@ function getFinalKeyframe(
   return null;
 }
 
-export function computeTranslate(element: Element): {
+export function computeTranslate(
+  element: Element,
+  translate = getComputedStyles(element).translate,
+  projected = true
+): {
   x: number;
   y: number;
   z: number;
 } {
-  const keyframe = getFinalKeyframe(
-    element,
-    (keyframe) => 'translate' in keyframe
-  );
+  if (projected) {
+    const keyframe = getFinalKeyframe(
+      element,
+      (keyframe) => 'translate' in keyframe
+    );
 
-  if (keyframe) {
-    const {translate = ''} = keyframe;
+    if (keyframe) {
+      const {translate = ''} = keyframe;
 
-    if (typeof translate === 'string') {
-      const finalTranslate = parseTranslate(translate);
+      if (typeof translate === 'string') {
+        const finalTranslate = parseTranslate(translate);
 
-      if (finalTranslate) {
-        return finalTranslate;
+        if (finalTranslate) {
+          return finalTranslate;
+        }
       }
     }
   }
 
-  const {translate} = getComputedStyles(element);
-
   if (translate) {
     const finalTranslate = parseTranslate(translate);
 

diff --git a/packages/dom/src/utilities/transform/index.ts b/packages/dom/src/utilities/transform/index.ts
@@ -4,4 +4,3 @@ export {inverseTransform} from './inverseTransform.ts';
 export {parseTransform} from './parseTransform.ts';
 export {parseTranslate} from './parseTranslate.ts';
 export type {Transform} from './parseTransform.ts';
-export {stringifyTransform} from './stringifyTransform.ts';
diff --git a/packages/dom/src/utilities/transform/stringifyTransform.ts b/packages/dom/src/utilities/transform/stringifyTransform.ts