Fix: Dragging photos is slow on Android (#584)

components/images/images.tsx

@@ -33,6 +33,7 @@ import
     Easing,
     SharedValue,
     runOnJS,
+    runOnUI,
     useAnimatedStyle,
     useSharedValue,
     withTiming,
@@ -150,17 +151,25 @@ const getOccupancyMap = (images: Images): { [k: number]: boolean } => {
 };
 
 const getNearestSlot = (slots: Slots, p: Point2D): number => {
+  'worklet';
+
   let nearestSlot = -1;
   let nearestDistance = -1;
 
-  Object.entries(slots).map(([fileNumber, slot]) => {
-    const distance = euclideanDistance(slot.center, p);
+  for (const [fileNumber, slot] of Object.entries(slots)) {
+    const p1 = p;
+    const p2 = slot.center;
+
+    const distance = (
+      (p1.x - p2.x) ** 2.0 +
+      (p1.y - p2.y) ** 2.0
+    ) ** 0.5;
 
     if (nearestDistance === -1 || distance < nearestDistance) {
       nearestSlot = Number(fileNumber);
       nearestDistance = distance;
     }
-  });
+  }
 
   return nearestSlot;
 };
@@ -306,10 +315,6 @@ const useIsVerified = (fileNumber: SharedValue<number>) => {
   return isVerified;
 };
 
-const euclideanDistance = (p1: Point2D, p2: Point2D) => {
-  return ((p1.x - p2.x) ** 2.0 + (p1.y - p2.y) ** 2.0) ** 0.5;
-};
-
 const isSquareish = (width: number, height: number) => {
   if (width === 0) return true;
   if (height === 0) return true;
@@ -591,6 +596,8 @@ const MoveableImage = ({
   const isVerified = useIsVerified(fileNumber);
 
   const getBorderRadius = useCallback((fileNumber: number) => {
+    'worklet';
+
     const {
       height = 0,
       width = 0,
@@ -609,7 +616,16 @@ const MoveableImage = ({
   const scale = useSharedValue<number>(1);
   const borderRadius = useSharedValue<number>(initialBorderRadius);
 
+  const debouncedSlotRequest =
+    _.debounce(
+      (data: SlotRequest) => notify<SlotRequest>(EV_SLOT_REQUEST, data),
+      500,
+      { maxWait: 500 },
+    );
+
   const requestNearestSlot = (pressed: number | null) => {
+    'worklet';
+
     const p: Point2D = {
       x:
         _slots.value[fileNumber.value].center.x -
@@ -626,19 +642,9 @@ const MoveableImage = ({
     const from = fileNumber.value;
     const to = nearestSlot;
 
-    notify<SlotRequest>(EV_SLOT_REQUEST, { from, to, pressed });
+    runOnJS(debouncedSlotRequest)({ from, to, pressed });
   };
 
-  const requestNearestSlotOnChange =
-    _.debounce(
-      () => requestNearestSlot(fileNumber.value),
-      500,
-      { maxWait: 500 },
-    );
-
-  const requestNearestSlotOnFinalize =
-    () => requestNearestSlot(null);
-
   const addImageOnStart =
     () => addImage(fileNumber, showProtip);
 
@@ -658,10 +664,10 @@ const MoveableImage = ({
       translateX.value += event.changeX;
       translateY.value += event.changeY;
 
-      runOnJS(requestNearestSlotOnChange)();
+      requestNearestSlot(fileNumber.value)
     })
     .onFinalize(() => {
-      runOnJS(requestNearestSlotOnFinalize)();
+      requestNearestSlot(null);
     })
 
   const tap =
@@ -686,7 +692,9 @@ const MoveableImage = ({
     });
 
   const onSlotAssignmentStart = useCallback(
-    (data: SlotAssignmentStart | undefined) => {
+    runOnUI((data: SlotAssignmentStart | undefined) => {
+      'worklet';
+
       if (!data) {
         return;
       }
@@ -712,7 +720,7 @@ const MoveableImage = ({
         isSlotAssignmentUnfinished.value = true;
         fileNumber.value = data.to;
       }
-    },
+    }),
     [getBorderRadius]
   );