feat(DraggableSort): properly track added/removed items (closes #23)

Author: mgcrea

example/src/App.tsx

@@ -9,9 +9,9 @@ export const App: FunctionComponent = () => {
   return (
     <SafeAreaView style={styles.container}>
       <GestureHandlerRootView>
-        <DraggableBasicExample />
+        {/* <DraggableBasicExample /> */}
         {/* <DraggableGridExample /> */}
-        {/* <DraggableStackExample /> */}
+        <DraggableStackExample />
       </GestureHandlerRootView>
     </SafeAreaView>
   );

example/src/pages/DraggableStackExample.tsx

@@ -1,12 +1,12 @@
-import React, {type FunctionComponent} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import React, {useState, type FunctionComponent} from 'react';
+import {Button, StyleSheet, Text, View} from 'react-native';
 import {
   DndProvider,
   type ObjectWithId,
   Draggable,
   DraggableStack,
   type DraggableStackProps,
-} from '@mgcrea/react-native-dnd';
+} from '@mgcrea/react-native-dnd/src';
 
 const items = ['🤓', '🤖🤖', '👻👻👻', '👾👾👾👾'];
 const data = items.map((letter, index) => ({
@@ -22,6 +22,8 @@ export const DraggableStackExample: FunctionComponent = () => {
     console.log('onStackOrderUpdate', value);
   };
 
+  const [items, setItems] = useState(data);
+
   return (
     <View style={styles.container}>
       <Text style={styles.title}>DraggableStack Example</Text>
@@ -32,7 +34,7 @@ export const DraggableStackExample: FunctionComponent = () => {
           style={styles.stack}
           onOrderChange={onStackOrderChange}
           onOrderUpdate={onStackOrderUpdate}>
-          {data.map(letter => (
+          {items.map(letter => (
             <Draggable
               key={letter.id}
               id={letter.id}
@@ -42,6 +44,28 @@ export const DraggableStackExample: FunctionComponent = () => {
           ))}
         </DraggableStack>
       </DndProvider>
+      <Button
+        title="Add"
+        onPress={() => {
+          setItems(prevItems => {
+            const randomIndex = 2; //Math.floor(Math.random() * prevItems.length);
+            prevItems.splice(randomIndex, 0, {
+              value: '🤪',
+              id: `${prevItems.length}-🤪`,
+            });
+            return prevItems.slice();
+          });
+        }}
+      />
+      <Button
+        title="Delete"
+        onPress={() => {
+          setItems(prevItems => {
+            const randomIndex = Math.floor(Math.random() * prevItems.length);
+            return prevItems.filter((_, index) => index !== randomIndex);
+          });
+        }}
+      />
     </View>
   );
 };
@@ -69,6 +93,7 @@ const styles = StyleSheet.create({
   },
   draggable: {
     backgroundColor: 'seagreen',
+    opacity: 0.5,
     height: 100,
     borderColor: 'rgba(0,0,0,0.2)',
     borderWidth: 1,

src/DndContext.ts

@@ -16,6 +16,8 @@ export type DraggableStates = Record<UniqueIdentifier, SharedValue<DraggableStat
 
 export type DndContextValue = {
   containerRef: RefObject<View>;
+  draggableIds: SharedValue<UniqueIdentifier[]>;
+  droppableIds: SharedValue<UniqueIdentifier[]>;
   draggableLayouts: SharedValue<Layouts>;
   droppableLayouts: SharedValue<Layouts>;
   draggableOptions: SharedValue<DraggableOptions>;

src/DndProvider.tsx

@@ -90,6 +90,8 @@ 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>({});
@@ -105,20 +107,10 @@ export const DndProvider = forwardRef<DndProviderHandle, PropsWithChildren<DndPr
     const draggableContentOffset = useSharedPoint(0, 0);
     const panGestureState = useSharedValue<GestureEventPayload["state"]>(0);
 
-    useAnimatedReaction(
-      () => draggableActiveId.value,
-      (next, prev) => {
-        if (next !== null) {
-          if (onActivation) {
-            runOnJS(onActivation)(next, prev);
-          }
-        }
-      },
-      [],
-    );
-
     const contextValue = useRef<DndContextValue>({
       containerRef,
+      draggableIds,
+      droppableIds,
       draggableLayouts,
       droppableLayouts,
       draggableOptions,
@@ -149,6 +141,19 @@ export const DndProvider = forwardRef<DndProviderHandle, PropsWithChildren<DndPr
       [],
     );
 
+    // Handle activation changes
+    useAnimatedReaction(
+      () => draggableActiveId.value,
+      (next, prev) => {
+        if (next !== null) {
+          if (onActivation) {
+            runOnJS(onActivation)(next, prev);
+          }
+        }
+      },
+      [],
+    );
+
     const panGesture = useMemo(() => {
       const findActiveLayoutId = (point: Point): UniqueIdentifier | null => {
         "worklet";

src/features/sort/hooks/useDraggableSort.ts

@@ -5,10 +5,9 @@ import type { UniqueIdentifier } from "../../../types";
 import {
   applyOffset,
   arraysEqual,
-  centerAxis,
   type Direction,
+  doesOverlapOnAxis,
   moveArrayIndex,
-  overlapsAxis,
   type Rectangle,
 } from "../../../utils";
 
@@ -31,9 +30,10 @@ export const useDraggableSort = ({
   initialOrder = [],
   onOrderChange,
   onOrderUpdate,
-  shouldSwapWorklet,
+  shouldSwapWorklet = doesOverlapOnAxis,
 }: UseDraggableSortOptions) => {
-  const { draggableActiveId, draggableActiveLayout, draggableOffsets, draggableLayouts } = useDndContext();
+  const { draggableIds, draggableActiveId, draggableActiveLayout, draggableOffsets, draggableLayouts } =
+    useDndContext();
   const direction = horizontal ? "horizontal" : "vertical";
 
   const draggablePlaceholderIndex = useSharedValue(-1);
@@ -65,25 +65,46 @@ export const useDraggableSort = ({
         y: offsets[itemId].y.value,
       });
 
-      if (shouldSwapWorklet) {
-        if (shouldSwapWorklet(activeLayout, itemLayout, direction)) {
-          // console.log(`Found placeholder index ${itemIndex} using custom shouldSwapWorklet!`);
-          return itemIndex;
-        }
-        continue;
-      }
-
-      // Default to center axis
-      const itemCenterAxis = centerAxis(itemLayout, direction);
-      if (overlapsAxis(activeLayout, itemCenterAxis, direction)) {
+      if (shouldSwapWorklet(activeLayout, itemLayout, direction)) {
+        // console.log(`Found placeholder index ${itemIndex} using custom shouldSwapWorklet!`);
         return itemIndex;
       }
+      continue;
     }
     // Fallback to current index
-    // console.log(`Fallback to current index ${activeIndex}`);
     return activeIndex;
   };
 
+  // Track added/removed draggable items and update the sort order
+  useAnimatedReaction(
+    () => draggableIds.value,
+    (next, prev) => {
+      if (prev === null || prev.length === 0) {
+        return;
+      }
+
+      // Handle removed draggable items
+      const removedIds = prev.filter((id) => !next.includes(id));
+      if (removedIds.length > 0) {
+        draggableSortOrder.value = draggableSortOrder.get().filter((itemId) => !removedIds.includes(itemId));
+      }
+
+      // Handle added draggable items by inserting them at the correct index
+      const layouts = draggableLayouts.get();
+      const addedIds = next.filter((id) => !prev.includes(id));
+      addedIds.forEach((id) => {
+        const index = Object.entries(layouts)
+          .sort(([, a], [, b]) => a.get()[horizontal ? "x" : "y"] - b.get()[horizontal ? "x" : "y"])
+          .findIndex(([key]) => key === id);
+        const nextOrder = draggableSortOrder.value.slice();
+        nextOrder.splice(index, 0, id);
+        // draggableLastOrder.value = draggableSortOrder.value.slice();
+        draggableSortOrder.value = nextOrder;
+      });
+    },
+    [],
+  );
+
   // Track active layout changes and update the placeholder index
   useAnimatedReaction(
     () => [draggableActiveId.value, draggableActiveLayout.value] as const,

src/features/sort/hooks/useDraggableStack.ts

@@ -35,6 +35,25 @@ export const useDraggableStack = ({
     shouldSwapWorklet: worklet,
   });
 
+  // Track items being added or removed from the stack
+  useAnimatedReaction(
+    () => draggableSortOrder.value,
+    (nextOrder, prevOrder) => {
+      // Ignore initial reaction
+      if (prevOrder === null) {
+        return;
+      }
+      // Ignore same size stacks
+      if (nextOrder.length === prevOrder.length) {
+        return;
+      }
+
+      const { value: layouts } = draggableLayouts;
+      const { value: offsets } = draggableOffsets;
+    },
+    [],
+  );
+
   // Track sort order changes and update the offsets
   useAnimatedReaction(
     () => draggableSortOrder.value,

src/hooks/useDraggable.ts

@@ -2,7 +2,7 @@
 
 import { useLayoutEffect } from "react";
 import { LayoutRectangle, ViewProps } from "react-native";
-import { runOnUI, useSharedValue } from "react-native-reanimated";
+import { measure, runOnUI, useSharedValue } from "react-native-reanimated";
 import { DraggableState, useDndContext } from "../DndContext";
 import { useLatestSharedValue, useNodeRef } from "../hooks";
 import { Data, NativeElement, UniqueIdentifier } from "../types";
@@ -50,6 +50,7 @@ export const useDraggable = ({
   activationTolerance = Infinity,
 }: UseDraggableOptions) => {
   const {
+    draggableIds,
     draggableLayouts,
     draggableOffsets,
     draggableRestingOffsets,
@@ -81,6 +82,10 @@ export const useDraggable = ({
   useLayoutEffect(() => {
     const runLayoutEffect = () => {
       "worklet";
+      if (draggableIds.value.includes(id)) {
+        throw new Error(`Duplicate draggable id found: ${id}`);
+      }
+      // draggableIds.value = [...draggableIds.value, id]; // We have to wait for layout
       draggableLayouts.value[id] = layout;
       draggableOffsets.value[id] = offset;
       draggableRestingOffsets.value[id] = restingOffset;
@@ -96,6 +101,7 @@ export const useDraggable = ({
         delete draggableRestingOffsets.value[id];
         delete draggableOptions.value[id];
         delete draggableStates.value[id];
+        draggableIds.value = draggableIds.value.filter((draggableId) => draggableId !== id);
       };
       // if(node && node.key === key)
       runOnUI(cleanupLayoutEffect)();
@@ -106,7 +112,13 @@ export const useDraggable = ({
   const onLayout: ViewProps["onLayout"] = () => {
     assert(containerRef.current);
     node.current?.measureLayout(containerRef.current, (x, y, width, height) => {
-      layout.value = { x, y, width, height };
+      runOnUI(() => {
+        layout.value = { x, y, width, height };
+        // Only add the draggable once the layout is available
+        if (!draggableIds.value.includes(id)) {
+          draggableIds.value = [...draggableIds.get(), id];
+        }
+      })();
     });
   };