Some progress

Author: MatiPl01

packages/react-native-sortables/src/providers/grid/layout/GridLayoutProvider.tsx

@@ -9,7 +9,12 @@ import {
   useMutableValue
 } from '../../../integrations/reanimated';
 import type { GridLayoutContextType } from '../../../types';
-import { useCommonValuesContext, useMeasurementsContext } from '../../shared';
+import { calculateSnapOffset } from '../../../utils';
+import {
+  useCommonValuesContext,
+  useCustomHandleContext,
+  useMeasurementsContext
+} from '../../shared';
 import { createProvider } from '../../utils';
 import { calculateActiveItemCrossOffset, calculateLayout } from './utils';
 
@@ -39,15 +44,20 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
   rowHeight
 }) => {
   const {
+    activeItemDimensions,
     activeItemKey,
     containerWidth,
     indexToKey,
     itemHeights,
     itemPositions,
     itemWidths,
     keyToIndex,
-    shouldAnimateLayout
+    shouldAnimateLayout,
+    snapOffsetX,
+    snapOffsetY,
+    touchPosition
   } = useCommonValuesContext();
+  const { activeHandleMeasurements } = useCustomHandleContext() ?? {};
   const { applyControlledContainerDimensions } = useMeasurementsContext();
   const debugContext = useDebugContext();
 
@@ -119,22 +129,39 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
     }),
     (props, previousProps) => {
       const activeKey = activeItemKey.value;
-      if (activeKey !== null) {
-        const calculatedOffset = calculateActiveItemCrossOffset(
+      if (activeKey !== null && activeItemDimensions.value) {
+        let calculatedOffset = calculateActiveItemCrossOffset(
           activeKey,
           keyToIndex.value,
           itemPositions.value,
           props
         );
-
+        if (calculatedOffset !== additionalCrossOffset.value) {
+          const touchY = touchPosition.value?.y ?? 0;
+          const snapY = calculateSnapOffset(
+            snapOffsetY.value,
+            snapOffsetY.value,
+            activeHandleMeasurements?.value ?? activeItemDimensions.value,
+            touchPosition.value
+          ).y;
+          calculatedOffset += snapY - touchY;
+        }
         additionalCrossOffset.value = calculatedOffset;
       } else {
         additionalCrossOffset.value = 0;
       }
 
       const layout = calculateLayout(props, additionalCrossOffset.value);
+      if (!layout) {
+        return;
+      }
+
+      // Update item positions
+      itemPositions.value = layout.itemPositions;
+      // Update controlled container dimensions
+      applyControlledContainerDimensions(layout.controlledContainerDimensions);
 
-      // On web, animate layout only if parent container is not resized
+      // On the web, animate layout only if parent container is not resized
       // (e.g. skip animation when the browser window is resized)
       shouldAnimateLayout.value =
         !IS_WEB ||
@@ -144,15 +171,6 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
           ? props.itemWidths === previousProps?.itemWidths
           : props.itemHeights === previousProps?.itemHeights;
 
-      if (!layout || !itemHeights.value || !itemWidths.value) {
-        return;
-      }
-
-      // Update item positions
-      itemPositions.value = layout.itemPositions;
-      // Update controlled container dimensions
-      applyControlledContainerDimensions(layout.controlledContainerDimensions);
-
       // DEBUG ONLY
       if (debugCrossGapRects) {
         for (let i = 0; i < layout.crossAxisOffsets.length - 1; i++) {

packages/react-native-sortables/src/providers/grid/layout/updates/common.ts

@@ -28,6 +28,7 @@ export const createGridStrategy =
       containerWidth,
       indexToKey,
       itemHeights,
+      itemPositions,
       itemWidths
     } = useCommonValuesContext();
     const { additionalCrossOffset, crossGap, isVertical, mainGap, numGroups } =
@@ -59,27 +60,25 @@ export const createGridStrategy =
     }
 
     useAnimatedReaction(
-      () => additionalCrossOffset.value,
-      additionalOffset => {
+      () => ({
+        additionalOffset: additionalCrossOffset.value,
+        indexToKey: othersIndexToKey.value,
+        itemPositions: itemPositions.value
+      }),
+      props => {
         othersLayout.value = calculateLayout(
           {
             gaps: {
               cross: crossGap.value,
               main: mainGap.value
             },
-            indexToKey: othersIndexToKey.value,
+            indexToKey: props.indexToKey,
             isVertical,
             itemHeights: itemHeights.value,
             itemWidths: itemWidths.value,
             numGroups
           },
-          additionalOffset
-        );
-
-        console.log(
-          'othersLayout',
-          othersLayout.value,
-          additionalCrossOffset.value
+          props.additionalOffset
         );
       }
     );

packages/react-native-sortables/src/providers/grid/layout/utils/helpers.ts

@@ -1,9 +1,9 @@
+'worklet';
+
 export const getMainIndex = (index: number, numGroups: number): number => {
-  'worklet';
   return +index % numGroups;
 };
 
 export const getCrossIndex = (index: number, numGroups: number): number => {
-  'worklet';
   return Math.floor(+index / numGroups);
 };

packages/react-native-sortables/src/providers/grid/layout/utils/layout.ts

@@ -31,8 +31,6 @@ export const calculateLayout = (
   const crossAxisOffsets = [additionalCrossOffset];
   const itemPositions: Record<string, Vector> = {};
 
-  console.log({ additionalCrossOffset, itemHeights });
-
   let mainCoordinate: Coordinate;
   let crossCoordinate: Coordinate;
   let crossItemSizes;

packages/react-native-sortables/src/providers/shared/DragProvider.ts

@@ -28,9 +28,9 @@ import type {
 } from '../../types';
 import { DragActivationState, LayerState } from '../../types';
 import {
+  calculateSnapOffset,
   getItemDimensions,
-  getKeyToIndex,
-  getOffsetDistance
+  getKeyToIndex
 } from '../../utils';
 import { createProvider } from '../utils';
 import { useAutoScrollContext } from './AutoScrollProvider';
@@ -141,9 +141,9 @@ const { DragProvider, useDragContext } = createProvider('Drag')<
       offsetX: snapOffsetX.value,
       offsetY: snapOffsetY.value,
       progress: activeAnimationProgress.value,
-      snapDimensions:
+      snapAreaDimensions:
         activeHandleMeasurements?.value ?? activeItemDimensions.value,
-      snapOffset: activeHandleOffset?.value,
+      snapAreaOffset: activeHandleOffset?.value,
       startTouch: touchStartTouch.value,
       startTouchPosition: dragStartTouchPosition.value,
       touch: currentTouch.value
@@ -159,8 +159,8 @@ const { DragProvider, useDragContext } = createProvider('Drag')<
       offsetX,
       offsetY,
       progress,
-      snapDimensions,
-      snapOffset,
+      snapAreaDimensions,
+      snapAreaOffset,
       startTouch,
       startTouchPosition,
       touch
@@ -170,7 +170,7 @@ const { DragProvider, useDragContext } = createProvider('Drag')<
         containerH === null ||
         containerW === null ||
         !activeDimensions ||
-        !snapDimensions ||
+        !snapAreaDimensions ||
         !itemTouchOffset ||
         !startTouchPosition ||
         !touch ||
@@ -195,12 +195,14 @@ const { DragProvider, useDragContext } = createProvider('Drag')<
       let tY = itemTouchOffset.y;
 
       if (enableSnap) {
-        tX =
-          (snapOffset?.x ?? 0) +
-          getOffsetDistance(offsetX, snapDimensions.width);
-        tY =
-          (snapOffset?.y ?? 0) +
-          getOffsetDistance(offsetY, snapDimensions.height);
+        const offset = calculateSnapOffset(
+          offsetX,
+          offsetY,
+          snapAreaDimensions,
+          snapAreaOffset
+        );
+        tX = offset.x;
+        tY = offset.y;
       }
 
       const translate = (from: number, to: number) =>

packages/react-native-sortables/src/utils/layout.ts

@@ -1,4 +1,5 @@
-import type { Offset, Vector } from '../types';
+import type { Maybe } from '../helperTypes';
+import type { Dimensions, Offset, Vector } from '../types';
 import { gt, lt } from './equality';
 import { error } from './logs';
 
@@ -20,6 +21,23 @@ export const getOffsetDistance = (
   return distance * percentage;
 };
 
+export const calculateSnapOffset = (
+  snapOffsetX: Offset,
+  snapOffsetY: Offset,
+  snapAreaDimensions: Dimensions,
+  snapAreaOffset?: Maybe<Vector>
+) => {
+  'worklet';
+  return {
+    x:
+      (snapAreaOffset?.x ?? 0) +
+      getOffsetDistance(snapOffsetX, snapAreaDimensions.width),
+    y:
+      (snapAreaOffset?.y ?? 0) +
+      getOffsetDistance(snapOffsetY, snapAreaDimensions.height)
+  };
+};
+
 export const reorderInsert = (
   indexToKey: Array<string>,
   fromIndex: number,