From 53267d7d429a4f7351979e07d839d20076b95596 Mon Sep 17 00:00:00 2001
From: Wil Gaboury <wgaboury@gmail.com>
Date: Fri, 18 Oct 2024 06:56:11 -0400
Subject: [PATCH] Fix position glitch when dragging between groups

---
 dev/Grid.tsx     | 16 +++++-----------
 src/Sortable.tsx | 14 +++-----------
 2 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/dev/Grid.tsx b/dev/Grid.tsx
index 0197d40..087ea9a 100644
--- a/dev/Grid.tsx
+++ b/dev/Grid.tsx
@@ -2,11 +2,11 @@ import { Component, createSignal } from "solid-js";
 
 import {
   createSortableGroupContext,
-  easeOutQuad,
   defaultMutationEventListeners,
   Sortable,
   SortableGroupContext,
   sortableHandle,
+  easeOutCirc,
 } from "../src";
 
 sortableHandle;
@@ -81,11 +81,15 @@ export const GridPage: Component = () => {
       <div
         style={{
           display: "flex",
+          "align-items": "start",
           gap: "40px",
         }}
       >
         <SortableGroupContext
           context={ExampleGroupContext}
+          animated={elements().length <= 200}
+          animationDurationMs={250}
+          timingFunction={easeOutCirc}
           render={({ item, isMouseDown }) => {
             const color = randomColor();
             return (
@@ -149,10 +153,6 @@ export const GridPage: Component = () => {
               group={ExampleGroupContext}
               each={elements()}
               {...defaultMutationEventListeners(setElements)}
-              onClick={(idx) => console.log("clicked: ", elements()[idx])}
-              animated={elements2().length <= 200}
-              animationDurationMs={250}
-              timingFunction={easeOutQuad}
             />
           </div>
           <div
@@ -174,9 +174,6 @@ export const GridPage: Component = () => {
               group={ExampleGroupContext}
               each={elements2()}
               {...defaultMutationEventListeners(setElements2)}
-              animated={elements().length <= 200}
-              animationDurationMs={250}
-              timingFunction={easeOutQuad}
             />
           </div>
           <div
@@ -198,9 +195,6 @@ export const GridPage: Component = () => {
               group={ExampleGroupContext}
               each={elements3()}
               {...defaultMutationEventListeners(setElements3)}
-              animated={elements().length <= 200}
-              animationDurationMs={250}
-              timingFunction={easeOutQuad}
             >
               {({ item, isMouseDown }) => {
                 const color = randomColor();
diff --git a/src/Sortable.tsx b/src/Sortable.tsx
index 70a0c96..dc43df9 100644
--- a/src/Sortable.tsx
+++ b/src/Sortable.tsx
@@ -279,6 +279,9 @@ function handleDrag<T>(
             group.itemEntries.delete(item);
           }
         });
+
+        updateMouseRelativePosition(); // this call will cause a large jump in distance travelled, which shouldn't matter at this point in the drag but should get fixed at some point
+        updateTransform();
       }
     }
   };
@@ -433,7 +436,6 @@ function createSortableGroup<T>(
         itemEntries.set(item, createEntry);
         return createEntry;
       } else {
-        entry.state.ref().style.opacity = "0";
         batch(() => {
           entry.setIdx(idx);
           entry.setIsMouseDown(isMouseDown);
@@ -570,11 +572,6 @@ export function Sortable<T, U extends JSX.Element>(
         {(item, idx) => {
           const isMouseDown = createMemo(() => isMouseDownSelector(item));
 
-          // this is janky because it can cause a frame of transparency
-          onMount(() => {
-            setTimeout(() => (state.ref().style.opacity = "1"));
-          });
-
           const state =
             resolvedProps.children != null || group == null
               ? createState(
@@ -596,7 +593,6 @@ export function Sortable<T, U extends JSX.Element>(
               group != null &&
               group.itemEntries.has(item)
             ) {
-              console.log("disposing");
               group.itemEntries.get(item)?.dispose();
               group.itemEntries.delete(item);
             }
@@ -691,10 +687,6 @@ function createState(
     ),
   );
 
-  if (isMouseDown) {
-    ref().style.opacity = "0";
-  }
-
   return {
     ref,
     resolved,