From 41ee331adb5959993c0d2d6d26101010826691a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= <clauderic.demers@shopify.com>
Date: Thu, 19 Sep 2024 16:33:54 -0400
Subject: [PATCH] Fixed incorrect starting keyframe for sortable animation

---
 packages/dom/src/sortable/sortable.ts         | 12 ++++----
 packages/dom/src/utilities/index.ts           |  1 -
 .../utilities/transform/computeTranslate.ts   | 30 +++++++++++--------
 packages/dom/src/utilities/transform/index.ts |  1 -
 .../utilities/transform/stringifyTransform.ts |  5 ----
 5 files changed, 24 insertions(+), 25 deletions(-)
 delete mode 100644 packages/dom/src/utilities/transform/stringifyTransform.ts

diff --git a/packages/dom/src/sortable/sortable.ts b/packages/dom/src/sortable/sortable.ts
index 0c8d9214..536d89b0 100644
--- 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
index cb0f69fc..01e39872 100644
--- 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
index 7cba2656..4bd32301 100644
--- 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
index 6f39c619..49e9acb9 100644
--- 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
deleted file mode 100644
index c3821959..00000000
--- a/packages/dom/src/utilities/transform/stringifyTransform.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type {Transform} from './parseTransform.ts';
-
-export function stringifyTransform({x, y, z, scaleX, scaleY}: Transform) {
-  return `translate3d(${x}px, ${y}px, ${z ?? 0}) scale(${scaleX}, ${scaleY})`;
-}