Fix position glitch when dragging between groups

wilgaboury · Oct 18, 2024 · 53267d7 · 53267d7
1 parent d90df45
commit 53267d7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 22 deletions.
diff --git 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
@@ -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,