chore(sort): revert to measureLayout, only sort on children ids

Author: mgcrea

example/src/pages/DraggableStackExample.tsx

@@ -16,6 +16,7 @@ const data = items.map((letter, index) => ({
   value: letter,
   id: `${index}-${letter}`,
 })) satisfies ObjectWithId[];
+let id = items.length;
 
 export const DraggableStackExample: FunctionComponent = () => {
   const [items, setItems] = useState(data);
@@ -62,9 +63,10 @@ export const DraggableStackExample: FunctionComponent = () => {
           onPress={() => {
             setItems(prevItems => {
               const randomIndex = 2; //Math.floor(Math.random() * prevItems.length);
+              id++;
               prevItems.splice(randomIndex, 0, {
                 value: '🤪',
-                id: `${prevItems.length}-🤪`,
+                id: `${id}-🤪`,
               });
               return prevItems.slice();
             });
@@ -109,13 +111,22 @@ export const DraggableStackExample: FunctionComponent = () => {
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    // alignItems: 'stretch',
+    // justifyContent: 'st',
+    flexDirection: 'column',
+  },
+  view: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'flex-end',
+    backgroundColor: 'rgba(255,0,255,0.1)',
+    flexGrow: 1,
   },
   stack: {
     backgroundColor: 'rgba(0,0,0,0.1)',
     alignItems: 'center',
-    justifyContent: 'flex-start',
+    justifyContent: 'center',
+    // flexGrow: 1,
     padding: 32,
     borderRadius: 32,
   },

src/DndContext.ts

@@ -15,9 +15,7 @@ export type DraggableState = "resting" | "pending" | "dragging" | "dropping" | "
 export type DraggableStates = Record<UniqueIdentifier, SharedValue<DraggableState>>;
 
 export type DndContextValue = {
-  containerRef: RefObject<View>;
-  draggableIds: SharedValue<UniqueIdentifier[]>;
-  droppableIds: SharedValue<UniqueIdentifier[]>;
+  containerRef: RefObject<View>; // AnimatedRef<Component>;
   draggableLayouts: SharedValue<Layouts>;
   droppableLayouts: SharedValue<Layouts>;
   draggableOptions: SharedValue<DraggableOptions>;

src/DndProvider.tsx

@@ -94,8 +94,6 @@ export const DndProvider = forwardRef<DndProviderHandle, PropsWithChildren<DndPr
     ref,
   ) {
     const containerRef = useRef<View | null>(null);
-    const draggableIds = useSharedValue<UniqueIdentifier[]>([]);
-    const droppableIds = useSharedValue<UniqueIdentifier[]>([]);
     const draggableLayouts = useSharedValue<Layouts>({});
     const droppableLayouts = useSharedValue<Layouts>({});
     const draggableOptions = useSharedValue<DraggableOptions>({});
@@ -113,8 +111,6 @@ export const DndProvider = forwardRef<DndProviderHandle, PropsWithChildren<DndPr
 
     const contextValue = useRef<DndContextValue>({
       containerRef,
-      draggableIds,
-      droppableIds,
       draggableLayouts,
       droppableLayouts,
       draggableOptions,
@@ -216,7 +212,7 @@ export const DndProvider = forwardRef<DndProviderHandle, PropsWithChildren<DndPr
 
       const panGesture = Gesture.Pan()
         .onBegin((event) => {
-          const { state, absoluteX: x, absoluteY: y } = event;
+          const { state, x, y } = event;
           debug && console.log("begin", { state, x, y });
           // Gesture is globally disabled
           if (disabled) {

src/components/Draggable.tsx

@@ -43,7 +43,7 @@ export const Draggable: FunctionComponent<PropsWithChildren<DraggableProps>> = (
   animatedStyleWorklet,
   ...otherProps
 }) => {
-  const { animatedRef, setNodeLayout, offset, state } = useDraggable({
+  const { props, offset, state } = useDraggable({
     id,
     data,
     disabled,
@@ -83,7 +83,7 @@ export const Draggable: FunctionComponent<PropsWithChildren<DraggableProps>> = (
   }, [id, state, activeOpacity]);
 
   return (
-    <Animated.View ref={animatedRef} onLayout={setNodeLayout} style={[style, animatedStyle]} {...otherProps}>
+    <Animated.View {...props} style={[style, animatedStyle]} {...otherProps}>
       {children}
     </Animated.View>
   );

src/components/Droppable.tsx

@@ -38,7 +38,7 @@ export const Droppable: FunctionComponent<PropsWithChildren<DroppableProps>> = (
   animatedStyleWorklet,
   ...otherProps
 }) => {
-  const { animatedRef, setNodeLayout, activeId } = useDroppable({
+  const { props, activeId } = useDroppable({
     id,
     disabled,
     data,
@@ -56,7 +56,7 @@ export const Droppable: FunctionComponent<PropsWithChildren<DroppableProps>> = (
   }, [id, activeOpacity]);
 
   return (
-    <Animated.View ref={animatedRef} onLayout={setNodeLayout} style={[style, animatedStyle]} {...otherProps}>
+    <Animated.View {...props} style={[style, animatedStyle]} {...otherProps}>
       {children}
     </Animated.View>
   );

src/features/sort/components/DraggableStack.tsx

@@ -32,7 +32,7 @@ export const DraggableStack = forwardRef<DraggableStackHandle, PropsWithChildren
     },
     ref,
   ) {
-    const initialOrder = useChildrenIds(children);
+    const childrenIds = useChildrenIds(children);
 
     const style = useMemo(
       () =>
@@ -51,7 +51,7 @@ export const DraggableStack = forwardRef<DraggableStackHandle, PropsWithChildren
     const { refreshOffsets } = useDraggableStack({
       gap: style.gap,
       horizontal,
-      initialOrder,
+      childrenIds,
       onOrderChange,
       onOrderUpdate,
       shouldSwapWorklet,
@@ -66,7 +66,7 @@ export const DraggableStack = forwardRef<DraggableStackHandle, PropsWithChildren
     useEffect(() => {
       // Refresh offsets when children change
       runOnUI(refreshOffsets)();
-    }, [initialOrder, refreshOffsets]);
+    }, [childrenIds, refreshOffsets]);
 
     return <Animated.View style={style}>{children}</Animated.View>;
   },

src/features/sort/hooks/useDraggableGrid.ts

@@ -6,15 +6,15 @@ import { useDraggableSort, type UseDraggableSortOptions } from "./useDraggableSo
 
 export type UseDraggableGridOptions = Pick<
   UseDraggableSortOptions,
-  "initialOrder" | "onOrderChange" | "onOrderUpdate" | "shouldSwapWorklet"
+  "childrenIds" | "onOrderChange" | "onOrderUpdate" | "shouldSwapWorklet"
 > & {
   gap?: number;
   size: number;
   direction: FlexStyle["flexDirection"];
 };
 
 export const useDraggableGrid = ({
-  initialOrder,
+  childrenIds,
   onOrderChange,
   onOrderUpdate,
   gap = 0,
@@ -27,7 +27,7 @@ export const useDraggableGrid = ({
 
   const { draggablePlaceholderIndex, draggableSortOrder } = useDraggableSort({
     horizontal,
-    initialOrder,
+    childrenIds,
     onOrderChange,
     onOrderUpdate,
     shouldSwapWorklet,

src/features/sort/hooks/useDraggableSort.ts

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { LayoutRectangle } from "react-native";
 import { runOnJS, useAnimatedReaction, useSharedValue } from "react-native-reanimated";
 import { useDndContext } from "../../../DndContext";
@@ -18,7 +19,7 @@ export type ShouldSwapWorklet = (
 ) => boolean;
 
 export type UseDraggableSortOptions = {
-  initialOrder: UniqueIdentifier[];
+  childrenIds: UniqueIdentifier[];
   horizontal?: boolean;
   onOrderChange?: (order: UniqueIdentifier[]) => void;
   onOrderUpdate?: (nextOrder: UniqueIdentifier[], prevOrder: UniqueIdentifier[]) => void;
@@ -27,18 +28,17 @@ export type UseDraggableSortOptions = {
 
 export const useDraggableSort = ({
   horizontal = false,
-  initialOrder,
+  childrenIds,
   onOrderChange,
   onOrderUpdate,
   shouldSwapWorklet = doesOverlapOnAxis,
 }: UseDraggableSortOptions) => {
-  const { draggableIds, draggableActiveId, draggableActiveLayout, draggableOffsets, draggableLayouts } =
-    useDndContext();
+  const { draggableActiveId, draggableActiveLayout, draggableOffsets, draggableLayouts } = useDndContext();
   const direction = horizontal ? "horizontal" : "vertical";
 
   const draggablePlaceholderIndex = useSharedValue(-1);
-  const draggableLastOrder = useSharedValue<UniqueIdentifier[]>(initialOrder);
-  const draggableSortOrder = useSharedValue<UniqueIdentifier[]>(initialOrder);
+  const draggableLastOrder = useSharedValue<UniqueIdentifier[]>(childrenIds);
+  const draggableSortOrder = useSharedValue<UniqueIdentifier[]>(childrenIds);
 
   // Core placeholder index logic
   const findPlaceholderIndex = (activeLayout: LayoutRectangle): number => {
@@ -77,7 +77,7 @@ export const useDraggableSort = ({
 
   // Track added/removed draggable items and update the sort order
   useAnimatedReaction(
-    () => draggableIds.value,
+    () => childrenIds,
     (next, prev) => {
       if (prev === null || prev.length === 0) {
         return;
@@ -131,11 +131,15 @@ export const useDraggableSort = ({
         draggablePlaceholderIndex.value = -1;
         return;
       }
+      // Only track our own children
+      if (!childrenIds.includes(nextActiveId)) {
+        return;
+      }
       // const axis = direction === "row" ? "x" : "y";
       // const delta = prevActiveLayout !== null ? nextActiveLayout[axis] - prevActiveLayout[axis] : 0;
       draggablePlaceholderIndex.value = findPlaceholderIndex(nextActiveLayout);
     },
-    [],
+    [childrenIds],
   );
 
   // Track placeholder index changes and update the sort order

src/features/sort/hooks/useDraggableStack.ts

@@ -7,33 +7,27 @@ import { useDraggableSort, type UseDraggableSortOptions } from "./useDraggableSo
 
 export type UseDraggableStackOptions = Pick<
   UseDraggableSortOptions,
-  "initialOrder" | "onOrderChange" | "onOrderUpdate" | "shouldSwapWorklet"
+  "childrenIds" | "onOrderChange" | "onOrderUpdate" | "shouldSwapWorklet"
 > & {
   gap?: number;
   horizontal?: boolean;
 };
 export const useDraggableStack = ({
-  initialOrder,
+  childrenIds,
   onOrderChange,
   onOrderUpdate,
   gap = 0,
   horizontal = false,
   shouldSwapWorklet = doesOverlapOnAxis,
 }: UseDraggableStackOptions) => {
-  const {
-    draggableIds,
-    draggableStates,
-    draggableActiveId,
-    draggableOffsets,
-    draggableRestingOffsets,
-    draggableLayouts,
-  } = useDndContext();
+  const { draggableStates, draggableActiveId, draggableOffsets, draggableRestingOffsets, draggableLayouts } =
+    useDndContext();
   const axis = horizontal ? "x" : "y";
   const size = horizontal ? "width" : "height";
 
   const { draggablePlaceholderIndex, draggableSortOrder } = useDraggableSort({
     horizontal,
-    initialOrder,
+    childrenIds,
     onOrderChange,
     onOrderUpdate,
     shouldSwapWorklet,
@@ -47,7 +41,7 @@ export const useDraggableStack = ({
       const { value: sortOrder } = draggableSortOrder;
 
       const nextIndex = sortOrder.findIndex((itemId) => itemId === id);
-      const prevIndex = initialOrder.findIndex((itemId) => itemId === id);
+      const prevIndex = childrenIds.findIndex((itemId) => itemId === id);
 
       let offset = 0;
       // Accumulate the directional offset for the current item accross its siblings in the stack
@@ -62,7 +56,7 @@ export const useDraggableStack = ({
           // Can happen if some items are being removed from the stack
           continue;
         }
-        const prevSiblingIndex = initialOrder.findIndex((itemId) => itemId === siblingId);
+        const prevSiblingIndex = childrenIds.findIndex((itemId) => itemId === siblingId);
         // Accummulate the directional offset for the active item
         if (nextSiblingIndex < nextIndex && prevSiblingIndex > prevIndex) {
           // console.log(
@@ -78,7 +72,7 @@ export const useDraggableStack = ({
       }
       return offset;
     },
-    [draggableLayouts, draggableSortOrder, gap, horizontal, initialOrder],
+    [draggableLayouts, draggableSortOrder, gap, horizontal, childrenIds],
   );
 
   const refreshOffsets = useCallback(() => {
@@ -121,7 +115,7 @@ export const useDraggableStack = ({
 
   // Track items being added or removed from the stack
   useAnimatedReaction(
-    () => draggableIds.value,
+    () => childrenIds,
     (next, prev) => {
       // Ignore initial reaction
       if (prev === null) {
@@ -133,7 +127,7 @@ export const useDraggableStack = ({
       // Refresh all offsets
       refreshOffsets();
     },
-    [initialOrder],
+    [childrenIds],
   );
 
   // Track sort order changes and update the offsets