chore(utils): rename collision utils

example/src/pages/DraggableBasicExample.tsx

@@ -7,16 +7,14 @@ import {
   DroppableProps,
   useDraggableStyle,
   useDroppableStyle,
-} from '@mgcrea/react-native-dnd/src';
+} from '@mgcrea/react-native-dnd';
 import React, {useState, type FunctionComponent} from 'react';
-import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {SafeAreaView, StyleSheet, Text} from 'react-native';
 import Animated, {
   runOnJS,
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
-import {MyDraggableBox} from '../components';
 
 export const DraggableBasicExample: FunctionComponent = () => {
   const [count, setCount] = useState(0);
@@ -47,7 +45,7 @@ export const DraggableBasicExample: FunctionComponent = () => {
   };
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <DndProvider
         onBegin={handleBegin}
         onFinalize={handleFinalize}
@@ -60,7 +58,7 @@ export const DraggableBasicExample: FunctionComponent = () => {
         </MyDraggable>
         <Text testID="button">count is {count}</Text>
       </DndProvider>
-    </View>
+    </SafeAreaView>
   );
 };
 

package.json

@@ -23,7 +23,7 @@
     "lint": "eslint src/ test/",
     "spec": "jest",
     "prettycheck": "prettier --check src/ test/",
-    "typecheck": "tsc --noEmit",
+    "check": "tsc --noEmit",
     "test": "npm run typecheck && npm run spec && npm run lint && npm run prettycheck",
     "prepublishOnly": "npm run build"
   },

src/features/sort/hooks/useDraggableGrid.ts

@@ -1,6 +1,6 @@
 import { type FlexStyle } from "react-native";
 import { useAnimatedReaction } from "react-native-reanimated";
-import { swapByItemCenterPoint } from "../../../utils";
+import { doesCenterOverlap } from "../../../utils";
 import { useDndContext } from "./../../../DndContext";
 import { useDraggableSort, type UseDraggableSortOptions } from "./useDraggableSort";
 
@@ -20,7 +20,7 @@ export const useDraggableGrid = ({
   gap = 0,
   size,
   direction = "row",
-  shouldSwapWorklet = swapByItemCenterPoint,
+  shouldSwapWorklet = doesCenterOverlap,
 }: UseDraggableGridOptions) => {
   const { draggableActiveId, draggableOffsets, draggableRestingOffsets, draggableLayouts } = useDndContext();
   const horizontal = ["row", "row-reverse"].includes(direction);

src/features/sort/hooks/useDraggableSort.ts

@@ -6,12 +6,17 @@ import {
   applyOffset,
   arraysEqual,
   centerAxis,
+  type Direction,
   moveArrayIndex,
   overlapsAxis,
   type Rectangle,
 } from "../../../utils";
 
-export type ShouldSwapWorklet = (activeLayout: Rectangle, itemLayout: Rectangle) => boolean;
+export type ShouldSwapWorklet = (
+  activeLayout: Rectangle,
+  itemLayout: Rectangle,
+  direction: Direction,
+) => boolean;
 
 export type UseDraggableSortOptions = {
   initialOrder?: UniqueIdentifier[];
@@ -29,6 +34,7 @@ export const useDraggableSort = ({
   shouldSwapWorklet,
 }: UseDraggableSortOptions) => {
   const { draggableActiveId, draggableActiveLayout, draggableOffsets, draggableLayouts } = useDndContext();
+  const direction = horizontal ? "horizontal" : "vertical";
 
   const draggablePlaceholderIndex = useSharedValue(-1);
   const draggableLastOrder = useSharedValue<UniqueIdentifier[]>(initialOrder);
@@ -59,16 +65,16 @@ export const useDraggableSort = ({
       });
 
       if (shouldSwapWorklet) {
-        if (shouldSwapWorklet(activeLayout, itemLayout)) {
+        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, horizontal);
-      if (overlapsAxis(activeLayout, itemCenterAxis, horizontal)) {
+      const itemCenterAxis = centerAxis(itemLayout, direction);
+      if (overlapsAxis(activeLayout, itemCenterAxis, direction)) {
         return itemIndex;
       }
     }

src/features/sort/hooks/useDraggableStack.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useAnimatedReaction } from "react-native-reanimated";
 import { useDndContext } from "../../../DndContext";
-import { swapByItemHorizontalAxis, swapByItemVerticalAxis } from "../../../utils";
+import { doesOverlapOnAxis } from "../../../utils";
 import { useDraggableSort, type UseDraggableSortOptions } from "./useDraggableSort";
 
 export type UseDraggableStackOptions = Pick<
@@ -23,9 +23,8 @@ export const useDraggableStack = ({
   const axis = horizontal ? "x" : "y";
   const size = horizontal ? "width" : "height";
   const worklet = useMemo(
-    () =>
-      shouldSwapWorklet ? shouldSwapWorklet : horizontal ? swapByItemHorizontalAxis : swapByItemVerticalAxis,
-    [horizontal, shouldSwapWorklet],
+    () => (shouldSwapWorklet ? shouldSwapWorklet : doesOverlapOnAxis),
+    [shouldSwapWorklet],
   );
 
   const { draggablePlaceholderIndex, draggableSortOrder } = useDraggableSort({

src/utils/collision.ts

@@ -0,0 +1,23 @@
+import { centerAxis, centerPoint, Direction, includesPoint, overlapsAxis, type Rectangle } from "./geometry";
+
+export const doesCenterOverlap = (activeLayout: Rectangle, itemLayout: Rectangle) => {
+  "worklet";
+  const itemCenterPoint = centerPoint(itemLayout);
+  return includesPoint(activeLayout, itemCenterPoint);
+};
+
+export const doesOverlapOnAxis = (activeLayout: Rectangle, itemLayout: Rectangle, direction: Direction) => {
+  "worklet";
+  const itemCenterAxis = centerAxis(itemLayout, direction);
+  return overlapsAxis(activeLayout, itemCenterAxis, direction);
+};
+
+export const doesOverlapHorizontally = (activeLayout: Rectangle, itemLayout: Rectangle) => {
+  "worklet";
+  return doesOverlapOnAxis(activeLayout, itemLayout, "horizontal");
+};
+
+export const doesOverlapVertically = (activeLayout: Rectangle, itemLayout: Rectangle) => {
+  "worklet";
+  return doesOverlapOnAxis(activeLayout, itemLayout, "vertical");
+};

src/utils/geometry.ts

@@ -15,6 +15,8 @@ export type Rectangle = {
   height: number;
 };
 
+export type Direction = "horizontal" | "vertical";
+
 /**
  * @summary Split a `Rectangle` in two
  * @worklet
@@ -104,18 +106,18 @@ export const centerPoint = (layout: Rectangle): Point => {
  * @summary Compute a center axis
  * @worklet
  */
-export const centerAxis = (layout: Rectangle, horizontal: boolean): number => {
+export const centerAxis = (layout: Rectangle, direction: Direction): number => {
   "worklet";
-  return horizontal ? layout.x + layout.width / 2 : layout.y + layout.height / 2;
+  return direction === "horizontal" ? layout.x + layout.width / 2 : layout.y + layout.height / 2;
 };
 
 /**
  * @summary Checks if a `Rectangle` overlaps with an axis
  * @worklet
  */
-export const overlapsAxis = (layout: Rectangle, axis: number, horizontal: boolean) => {
+export const overlapsAxis = (layout: Rectangle, axis: number, direction: Direction) => {
   "worklet";
-  return horizontal
+  return direction === "horizontal"
     ? layout.x < axis && layout.x + layout.width > axis
     : layout.y < axis && layout.y + layout.height > axis;
 };

src/utils/index.ts

@@ -1,6 +1,6 @@
 export * from "./array";
 export * from "./assert";
+export * from "./collision";
 export * from "./geometry";
 export * from "./random";
 export * from "./reanimated";
-export * from "./swap";