react-native-drax 0.10.3 → 0.11.0-alpha.2

package/build/DraxProvider.js

@@ -22,20 +22,252 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DraxProvider = void 0;
+const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_gesture_handler_1 = require("react-native-gesture-handler");
-const hooks_1 = require("./hooks");
+const react_native_reanimated_1 = require("react-native-reanimated");
 const DraxContext_1 = require("./DraxContext");
-const types_1 = require("./types");
+const HoverView_1 = require("./HoverView");
+const hooks_1 = require("./hooks");
 const math_1 = require("./math");
-const DraxProvider = ({ debug = false, style = styles.provider, children, }) => {
-    const { getViewState, getTrackingStatus, dispatch, } = (0, hooks_1.useDraxState)();
-    const { getAbsoluteViewData, getTrackingDragged, getTrackingReceiver, getTrackingMonitorIds, getTrackingMonitors, getDragPositionData, findMonitorsAndReceiver, getHoverItems, registerView, updateViewProtocol, updateViewMeasurements, resetReceiver, resetDrag, startDrag, updateDragPosition, updateReceiver, setMonitorIds, unregisterView, } = (0, hooks_1.useDraxRegistry)(dispatch);
-    const rootNodeHandleRef = (0, react_1.useRef)(null);
-    const handleGestureStateChange = (0, react_1.useCallback)((id, event) => {
+const types_1 = require("./types");
+const startPositionInitialValue = {
+    parent: { x: 0, y: 0 },
+    grab: { x: 0, y: 0 },
+};
+const DraxProvider = ({ debug = false, style = styles.provider, children }) => {
+    const { getViewState, getTrackingStatus, getAllViewIds, dispatch } = (0, hooks_1.useDraxState)();
+    const { getAbsoluteViewData, getTrackingDragged, getTrackingReceiver, getTrackingMonitorIds, getTrackingMonitors, getDragPositionData, findMonitorsAndReceiver, getHoverItems, registerView, updateViewProtocol, updateViewMeasurements, updateHoverViewMeasurements, resetReceiver, resetDrag, startDrag, updateDragPosition, updateReceiver, setMonitorIds, unregisterView, getReleaseViews, } = (0, hooks_1.useDraxRegistry)(dispatch);
+    const rootViewRef = (0, react_1.useRef)(null);
+    const dragPositionDataSV = (0, react_native_reanimated_1.useSharedValue)(undefined);
+    const startPosition = (0, react_native_reanimated_1.useSharedValue)(startPositionInitialValue);
+    const parentPosition = (0, react_native_reanimated_1.useSharedValue)({ x: 0, y: 0 });
+    const checkForReceiver = (0, react_1.useCallback)((dragPositionData) => {
+        // Find which monitors and receiver this drag is over.
+        const dragged = getTrackingDragged();
+        if (dragged && dragPositionData) {
+            const { dragAbsolutePosition, dragTranslationRatio, dragTranslation } = dragPositionData;
+            const { monitors, receiver } = findMonitorsAndReceiver(dragAbsolutePosition, dragged.id);
+            // Get the previous receiver, if any.
+            const oldReceiver = getTrackingReceiver();
+            /*
+             * Consider the following cases for new and old receiver ids:
+             * Case 1: new exists, old exists, new is the same as old
+             * Case 2: new exists, old exists, new is different from old
+             * Case 3: new exists, old does not exist
+             * Case 4: new does not exist, old exists
+             * Case 5: new does not exist, old does not exist
+             */
+            const draggedProtocol = dragged.data.protocol;
+            // Prepare event data for dragged view.
+            const eventDataDragged = {
+                dragTranslationRatio,
+                id: dragged.id,
+                parentId: dragged.data.parentId,
+                payload: dragged.data.protocol.dragPayload,
+                dragOffset: dragged.tracking.dragOffset,
+                grabOffset: dragged.tracking.grabOffset,
+                grabOffsetRatio: dragged.tracking.grabOffsetRatio,
+                hoverPosition: dragged.tracking.hoverPosition.value,
+                data: dragged.data,
+            };
+            // Prepare base drag event data.
+            const dragEventData = {
+                dragAbsolutePosition,
+                dragTranslation,
+                dragged: eventDataDragged,
+            };
+            // Prepare event data stub for monitor updates later so we can optionally add receiver.
+            const monitorEventDataStub = {
+                ...dragEventData,
+            };
+            if (receiver) {
+                // New receiver exists.
+                const receiverProtocol = receiver.data.protocol;
+                // Update the receiver.
+                const trackingReceiver = updateReceiver(receiver, dragged);
+                if (trackingReceiver === undefined) {
+                    // This should never happen, but just in case.
+                    // if (debug) {
+                    // 	console.log('Failed to update tracking receiver');
+                    // }
+                    return;
+                }
+                // Prepare event data for receiver view.
+                const eventDataReceiver = {
+                    id: receiver.id,
+                    parentId: receiver.data.parentId,
+                    payload: receiver.data.protocol.receiverPayload,
+                    receiveOffset: trackingReceiver.receiveOffset,
+                    receiveOffsetRatio: trackingReceiver.receiveOffsetRatio,
+                    data: receiver.data,
+                };
+                // Add receiver data to monitor event stub.
+                monitorEventDataStub.receiver = eventDataReceiver;
+                // Prepare event data for callbacks.
+                const eventData = {
+                    ...dragEventData,
+                    receiver: eventDataReceiver,
+                };
+                if (oldReceiver) {
+                    if (receiver.id === oldReceiver.id) {
+                        // Case 1: new exists, old exists, new is the same as old
+                        // Call the protocol event callbacks for dragging over the receiver.
+                        draggedProtocol.onDragOver?.(eventData);
+                        receiverProtocol.onReceiveDragOver?.(eventData);
+                    }
+                    else {
+                        // Case 2: new exists, old exists, new is different from old
+                        // Prepare event data with old receiver.
+                        const eventDataOldReceiver = {
+                            ...dragEventData,
+                            receiver: {
+                                id: oldReceiver.id,
+                                parentId: oldReceiver.data.parentId,
+                                payload: oldReceiver.data.protocol.receiverPayload,
+                                receiveOffset: oldReceiver.tracking.receiveOffset,
+                                receiveOffsetRatio: oldReceiver.tracking.receiveOffsetRatio,
+                                data: oldReceiver.data,
+                            },
+                        };
+                        // Call the protocol event callbacks for exiting the old receiver...
+                        draggedProtocol.onDragExit?.(eventDataOldReceiver);
+                        const endEventDataOldReceiver = {
+                            ...eventDataOldReceiver,
+                            cancelled: false,
+                        };
+                        oldReceiver.data.protocol.onReceiveDragExit?.(endEventDataOldReceiver);
+                        // ...and entering the new receiver.
+                        draggedProtocol.onDragEnter?.(eventData);
+                        receiverProtocol.onReceiveDragEnter?.(eventData);
+                    }
+                }
+                else {
+                    // Case 3: new exists, old does not exist
+                    // Call the protocol event callbacks for entering the new receiver.
+                    draggedProtocol.onDragEnter?.(eventData);
+                    receiverProtocol.onReceiveDragEnter?.(eventData);
+                }
+            }
+            else if (oldReceiver) {
+                // Case 4: new does not exist, old exists
+                // Reset the old receiver.
+                resetReceiver();
+                // Prepare event data with old receiver.
+                const eventData = {
+                    ...dragEventData,
+                    receiver: {
+                        id: oldReceiver.id,
+                        parentId: oldReceiver.data.parentId,
+                        payload: oldReceiver.data.protocol.receiverPayload,
+                        receiveOffset: oldReceiver.tracking.receiveOffset,
+                        receiveOffsetRatio: oldReceiver.tracking.receiveOffsetRatio,
+                        data: oldReceiver.data,
+                    },
+                };
+                // Call the protocol event callbacks for exiting the old receiver.
+                draggedProtocol.onDragExit?.(eventData);
+                const receiveEventData = {
+                    ...eventData,
+                    cancelled: false,
+                };
+                oldReceiver.data.protocol.onReceiveDragExit?.(receiveEventData);
+            }
+            else {
+                // Case 5: new does not exist, old does not exist
+                // Call the protocol event callback for dragging.
+                draggedProtocol.onDrag?.(dragEventData);
+            }
+            // Notify monitors and update monitor tracking, if necessary.
+            const prevMonitorIds = getTrackingMonitorIds();
+            if (monitors.length > 0 || prevMonitorIds.length > 0) {
+                const newMonitorIds = monitors.map(({ id: monitorId, data: monitorData, relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, }) => {
+                    const monitorEventData = {
+                        ...monitorEventDataStub,
+                        monitorOffset,
+                        monitorOffsetRatio,
+                    };
+                    if (prevMonitorIds.includes(monitorId)) {
+                        // Drag was already over this monitor.
+                        monitorData.protocol.onMonitorDragOver?.(monitorEventData);
+                    }
+                    else {
+                        // Drag is entering monitor.
+                        monitorData.protocol.onMonitorDragEnter?.(monitorEventData);
+                    }
+                    return monitorId;
+                });
+                prevMonitorIds
+                    .filter(monitorId => !newMonitorIds.includes(monitorId))
+                    .forEach(monitorId => {
+                    // Drag has exited monitor.
+                    const monitorData = getAbsoluteViewData(monitorId);
+                    if (monitorData) {
+                        const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio } = (0, math_1.getRelativePosition)(dragAbsolutePosition, monitorData.absoluteMeasurements);
+                        monitorData.protocol.onMonitorDragExit?.({
+                            ...monitorEventDataStub,
+                            monitorOffset,
+                            monitorOffsetRatio,
+                        });
+                    }
+                });
+                setMonitorIds(newMonitorIds);
+            }
+        }
+    }, [
+        findMonitorsAndReceiver,
+        getAbsoluteViewData,
+        getTrackingDragged,
+        getTrackingMonitorIds,
+        getTrackingReceiver,
+        resetReceiver,
+        setMonitorIds,
+        updateReceiver,
+    ]);
+    const updateDragAbsolutePosition = (0, react_1.useCallback)((position) => {
+        const dragged = getTrackingDragged();
+        if (dragged && position) {
+            // Get the absolute position data for the drag touch.
+            const dragPositionData = getDragPositionData({
+                parentPosition: position,
+                draggedMeasurements: dragged.data.absoluteMeasurements,
+                lockXPosition: dragged.data.protocol.lockDragXPosition,
+                lockYPosition: dragged.data.protocol.lockDragYPosition,
+            });
+            if (!dragPositionData) {
+                // Failed to get drag position data. This should never happen.
+                return;
+            }
+            const { dragAbsolutePosition, dragTranslation, dragTranslationRatio } = dragPositionData;
+            dragPositionDataSV.value = {
+                dragAbsolutePosition,
+                dragTranslation,
+                dragTranslationRatio,
+            };
+            // if (debug) {
+            // 	console.log(`Drag at absolute coordinates (${dragAbsolutePosition.x}, ${dragAbsolutePosition.y})\n`);
+            // 	console.log(`Drag translation (${dragTranslation.x}, ${dragTranslation.y})`);
+            // 	console.log(`Drag translation ratio (${dragTranslationRatio.x}, ${dragTranslationRatio.y})`);
+            // }
+            // Always update the drag position.
+            updateDragPosition(dragAbsolutePosition);
+        }
+    }, [dragPositionDataSV, getDragPositionData, getTrackingDragged, updateDragPosition]);
+    // // Create throttled gesture event handler, tied to this id.
+    const throttledHandleGestureEvent = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)((position) => {
+        // Pass the event up to the Drax context.
+        updateDragAbsolutePosition(position);
+    }, 20), [updateDragAbsolutePosition]);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => dragPositionDataSV.value, position => {
+        (0, react_native_reanimated_1.runOnJS)(checkForReceiver)(position);
+    });
+    const handleGestureStateChange = (0, react_1.useCallback)((id) => (event) => {
         if (debug) {
             console.log(`handleGestureStateChange(${id}, ${JSON.stringify(event, null, 2)})`);
         }
@@ -75,7 +307,7 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
         }
         /*
          * Documentation on gesture handler state flow used in switches below:
-         * https://github.com/kmagiera/react-native-gesture-handler/blob/master/docs/state.md
+         * https://docs.swmansion.com/react-native-gesture-handler/docs/under-the-hood/state/
          */
         const { state: gestureState, // Used in switch logic below; see block comment above.
         x: grabX, // x position of touch relative to dragged view
@@ -83,6 +315,10 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
         absoluteX: parentX, // x position of touch relative to parent of dragged view
         absoluteY: parentY, // y position of touch relative to parent of dragged view
          } = event;
+        startPosition.value = {
+            parent: { x: parentX, y: parentY },
+            grab: { x: grabX, y: grabY },
+        };
         /** Position of touch relative to parent of dragged view */
         const dragParentPosition = { x: parentX, y: parentY };
         const { x: absoluteX, // absolute x position of dragged view within DraxProvider
@@ -154,7 +390,12 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
                 // Failed to get absolute position of drag. This should never happen.
                 return;
             }
-            const { dragAbsolutePosition, dragTranslation, dragTranslationRatio, } = dragPositionData;
+            const { dragAbsolutePosition, dragTranslation, dragTranslationRatio } = dragPositionData;
+            dragPositionDataSV.value = {
+                dragAbsolutePosition,
+                dragTranslation,
+                dragTranslationRatio,
+            };
             // Prepare event data for dragged view.
             const eventDataDragged = {
                 id,
@@ -164,7 +405,8 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
                 dragOffset: dragged.tracking.dragOffset,
                 grabOffset: dragged.tracking.grabOffset,
                 grabOffsetRatio: dragged.tracking.grabOffsetRatio,
-                hoverPosition: dragged.tracking.hoverPosition,
+                hoverPosition: dragged.tracking.hoverPosition.value,
+                data: draggedData,
             };
             // Get data for receiver view (if any) before we reset.
             const receiver = getTrackingReceiver();
@@ -180,8 +422,8 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
                     id: receiver.id,
                     parentId: receiver.data.parentId,
                     payload: receiver.data.protocol.receiverPayload,
-                    receiveOffset: receiver.tracking.receiveOffset,
-                    receiveOffsetRatio: receiver.tracking.receiveOffsetRatio,
+                    ...receiver.tracking,
+                    data: receiver.data,
                 };
                 const eventData = {
                     dragAbsolutePosition,
@@ -203,12 +445,13 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
                 if (monitors.length > 0) {
                     monitors.forEach(({ data: monitorData }) => {
                         if (monitorData) {
-                            const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, } = (0, math_1.getRelativePosition)(dragAbsolutePosition, monitorData.absoluteMeasurements);
-                            response = monitorData.protocol.onMonitorDragDrop?.({
+                            const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio } = (0, math_1.getRelativePosition)(dragAbsolutePosition, monitorData.absoluteMeasurements);
+                            const monitorEventData = {
                                 ...eventData,
                                 monitorOffset,
                                 monitorOffsetRatio,
-                            });
+                            };
+                            response = monitorData.protocol.onMonitorDragDrop?.(monitorEventData);
                         }
                         if (!responded && response !== undefined) {
                             snapbackTarget = response;
@@ -240,12 +483,14 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
                     payload: receiver.data.protocol.receiverPayload,
                     receiveOffset: receiver.tracking.receiveOffset,
                     receiveOffsetRatio: receiver.tracking.receiveOffsetRatio,
+                    data: receiver.data,
                 };
-                // If there is a receiver but drag was cancelled, let it know the drag exited it.
-                receiver?.data.protocol.onReceiveDragExit?.({
+                const receivedDragExitEventData = {
                     ...eventData,
                     receiver: eventReceiverData,
-                });
+                };
+                // If there is a receiver but drag was cancelled, let it know the drag exited it.
+                receiver?.data.protocol.onReceiveDragExit?.(receivedDragExitEventData);
                 // And let any active monitors know too.
                 if (monitors.length > 0) {
                     const monitorEventData = {
@@ -253,7 +498,7 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
                         receiver: eventReceiverData,
                     };
                     monitors.forEach(({ data: monitorData }) => {
-                        const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, } = (0, math_1.getRelativePosition)(dragAbsolutePosition, monitorData.absoluteMeasurements);
+                        const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio } = (0, math_1.getRelativePosition)(dragAbsolutePosition, monitorData.absoluteMeasurements);
                         response = monitorData.protocol.onMonitorDragEnd?.({
                             ...monitorEventData,
                             monitorOffset,
@@ -269,6 +514,10 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
             }
             // Reset the drag.
             resetDrag(snapbackTarget);
+            if (startPosition.value) {
+                startPosition.value = startPositionInitialValue;
+                parentPosition.value = { x: 0, y: 0 };
+            }
             return;
         }
         // Case 4: We're not already dragging a view.
@@ -324,13 +573,18 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
                 x: grabX / width,
                 y: grabY / height,
             };
-            const { dragOffset, dragTranslation, dragTranslationRatio, hoverPosition, } = startDrag({
+            const { dragOffset, dragTranslation, dragTranslationRatio, hoverPosition } = startDrag({
                 grabOffset,
                 grabOffsetRatio,
                 dragAbsolutePosition,
                 dragParentPosition,
                 draggedId: id,
             });
+            dragPositionDataSV.value = {
+                dragAbsolutePosition,
+                dragTranslation,
+                dragTranslationRatio,
+            };
             if (debug) {
                 console.log(`Start dragging view id ${id} at absolute position (${dragAbsolutePosition.x}, ${dragAbsolutePosition.y})`);
             }
@@ -342,10 +596,11 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
                     dragOffset,
                     grabOffset,
                     grabOffsetRatio,
-                    hoverPosition,
+                    hoverPosition: hoverPosition.value,
                     dragTranslationRatio,
                     parentId: draggedData.parentId,
                     payload: draggedData.protocol.dragPayload,
+                    data: draggedData,
                 },
             };
             draggedData.protocol.onDragStart?.(eventData);
@@ -366,272 +621,80 @@ const DraxProvider = ({ debug = false, style = styles.provider, children, }) =>
             }
         }
     }, [
+        debug,
+        getTrackingDragged,
         getAbsoluteViewData,
+        startPosition,
         getDragPositionData,
-        getTrackingDragged,
+        dragPositionDataSV,
         getTrackingReceiver,
         getTrackingMonitors,
         resetDrag,
+        parentPosition,
         startDrag,
         findMonitorsAndReceiver,
         setMonitorIds,
-        debug,
     ]);
     const handleGestureEvent = (0, react_1.useCallback)((id, event) => {
-        if (debug) {
-            console.log(`handleGestureEvent(${id}, ${JSON.stringify(event, null, 2)})`);
-        }
-        const dragged = getTrackingDragged();
-        if (dragged === undefined) {
-            // We're not tracking any gesture yet.
-            if (debug) {
-                console.log('Ignoring gesture event because we have not initialized a drag');
-            }
-            return;
-        }
-        if (dragged.id !== id) {
-            // This is not a gesture we're tracking. We don't support multiple simultaneous drags.
-            if (debug) {
-                console.log('Ignoring gesture event because this is not the view being dragged');
-            }
-            return;
-        }
+        'worklet';
+        // if (debug) {
+        // 	console.log(`handleGestureEvent(${id}, ${JSON.stringify(event, null, 2)})`);
+        // }
+        // if (dragged === undefined) {
+        // 	// We're not tracking any gesture yet.
+        // 	if (debug) {
+        // 		console.log('Ignoring gesture event because we have not initialized a drag');
+        // 	}
+        // 	return;
+        // }
+        // if (dragged.id !== id) {
+        // 	// This is not a gesture we're tracking. We don't support multiple simultaneous drags.
+        // 	if (debug) {
+        // 		console.log('Ignoring gesture event because this is not the view being dragged');
+        // 	}
+        // 	return;
+        // }
         const { absoluteX: parentX, // x position of touch relative to parent of dragged view
         absoluteY: parentY, // y position of touch relative to parent of dragged view
          } = event;
-        if (debug) {
-            console.log(`Dragged item absolute coordinates (${dragged.data.absoluteMeasurements.x}, ${dragged.data.absoluteMeasurements.y})`);
-            console.log(`Native event in-view touch coordinates: (${event.x}, ${event.y})`);
-        }
+        // if (debug) {
+        // 	console.log(`Dragged item absolute coordinates (${dragged.data.absoluteMeasurements.x}, ${dragged.data.absoluteMeasurements.y})`);
+        // 	console.log(`Native event in-view touch coordinates: (${event.x}, ${event.y})`);
+        // }
         /** Position of touch relative to parent of dragged view */
-        const parentPosition = { x: parentX, y: parentY };
-        // Get the absolute position data for the drag touch.
-        const dragPositionData = getDragPositionData({
-            parentPosition,
-            draggedMeasurements: dragged.data.absoluteMeasurements,
-            lockXPosition: dragged.data.protocol.lockDragXPosition,
-            lockYPosition: dragged.data.protocol.lockDragYPosition,
-        });
-        if (!dragPositionData) {
-            // Failed to get drag position data. This should never happen.
-            return;
-        }
-        const { dragAbsolutePosition, dragTranslation, dragTranslationRatio, } = dragPositionData;
-        if (debug) {
-            console.log(`Drag at absolute coordinates (${dragAbsolutePosition.x}, ${dragAbsolutePosition.y})\n`);
-            console.log(`Drag translation (${dragTranslation.x}, ${dragTranslation.y})`);
-            console.log(`Drag translation ratio (${dragTranslationRatio.x}, ${dragTranslationRatio.y})`);
-        }
-        // Find which monitors and receiver this drag is over.
-        const { monitors, receiver } = findMonitorsAndReceiver(dragAbsolutePosition, dragged.id);
-        // Get the previous receiver, if any.
-        const oldReceiver = getTrackingReceiver();
-        // Always update the drag position.
-        updateDragPosition(dragAbsolutePosition);
-        const draggedProtocol = dragged.data.protocol;
-        // Prepare event data for dragged view.
-        const eventDataDragged = {
-            dragTranslationRatio,
-            id: dragged.id,
-            parentId: dragged.data.parentId,
-            payload: dragged.data.protocol.dragPayload,
-            dragOffset: dragged.tracking.dragOffset,
-            grabOffset: dragged.tracking.grabOffset,
-            grabOffsetRatio: dragged.tracking.grabOffsetRatio,
-            hoverPosition: dragged.tracking.hoverPosition,
-        };
-        // Prepare base drag event data.
-        const dragEventData = {
-            dragAbsolutePosition,
-            dragTranslation,
-            dragged: eventDataDragged,
-        };
-        // Prepare event data stub for monitor updates later so we can optionally add receiver.
-        const monitorEventDataStub = {
-            ...dragEventData,
-        };
-        /*
-         * Consider the following cases for new and old receiver ids:
-         * Case 1: new exists, old exists, new is the same as old
-         * Case 2: new exists, old exists, new is different from old
-         * Case 3: new exists, old does not exist
-         * Case 4: new does not exist, old exists
-         * Case 5: new does not exist, old does not exist
-         */
-        if (receiver) {
-            // New receiver exists.
-            const receiverProtocol = receiver.data.protocol;
-            // Update the receiver.
-            const trackingReceiver = updateReceiver(receiver, dragged);
-            if (trackingReceiver === undefined) {
-                // This should never happen, but just in case.
-                if (debug) {
-                    console.log('Failed to update tracking receiver');
-                }
-                return;
-            }
-            // Prepare event data for receiver view.
-            const eventDataReceiver = {
-                id: receiver.id,
-                parentId: receiver.data.parentId,
-                payload: receiver.data.protocol.receiverPayload,
-                receiveOffset: trackingReceiver.receiveOffset,
-                receiveOffsetRatio: trackingReceiver.receiveOffsetRatio,
-            };
-            // Add receiver data to monitor event stub.
-            monitorEventDataStub.receiver = eventDataReceiver;
-            // Prepare event data for callbacks.
-            const eventData = {
-                ...dragEventData,
-                receiver: eventDataReceiver,
-            };
-            if (oldReceiver) {
-                if (receiver.id === oldReceiver.id) {
-                    // Case 1: new exists, old exists, new is the same as old
-                    // Call the protocol event callbacks for dragging over the receiver.
-                    draggedProtocol.onDragOver?.(eventData);
-                    receiverProtocol.onReceiveDragOver?.(eventData);
-                }
-                else {
-                    // Case 2: new exists, old exists, new is different from old
-                    // Prepare event data with old receiver.
-                    const eventDataOldReceiver = {
-                        ...dragEventData,
-                        receiver: {
-                            id: oldReceiver.id,
-                            parentId: oldReceiver.data.parentId,
-                            payload: oldReceiver.data.protocol.receiverPayload,
-                            receiveOffset: oldReceiver.tracking.receiveOffset,
-                            receiveOffsetRatio: oldReceiver.tracking.receiveOffsetRatio,
-                        },
-                    };
-                    // Call the protocol event callbacks for exiting the old receiver...
-                    draggedProtocol.onDragExit?.(eventDataOldReceiver);
-                    oldReceiver.data.protocol.onReceiveDragExit?.({
-                        ...eventDataOldReceiver,
-                        cancelled: false,
-                    });
-                    // ...and entering the new receiver.
-                    draggedProtocol.onDragEnter?.(eventData);
-                    receiverProtocol.onReceiveDragEnter?.(eventData);
-                }
-            }
-            else {
-                // Case 3: new exists, old does not exist
-                // Call the protocol event callbacks for entering the new receiver.
-                draggedProtocol.onDragEnter?.(eventData);
-                receiverProtocol.onReceiveDragEnter?.(eventData);
-            }
-        }
-        else if (oldReceiver) {
-            // Case 4: new does not exist, old exists
-            // Reset the old receiver.
-            resetReceiver();
-            // Prepare event data with old receiver.
-            const eventData = {
-                ...dragEventData,
-                receiver: {
-                    id: oldReceiver.id,
-                    parentId: oldReceiver.data.parentId,
-                    payload: oldReceiver.data.protocol.receiverPayload,
-                    receiveOffset: oldReceiver.tracking.receiveOffset,
-                    receiveOffsetRatio: oldReceiver.tracking.receiveOffsetRatio,
-                },
-            };
-            // Call the protocol event callbacks for exiting the old receiver.
-            draggedProtocol.onDragExit?.(eventData);
-            oldReceiver.data.protocol.onReceiveDragExit?.({
-                ...eventData,
-                cancelled: false,
-            });
-        }
-        else {
-            // Case 5: new does not exist, old does not exist
-            // Call the protocol event callback for dragging.
-            draggedProtocol.onDrag?.(dragEventData);
-        }
-        // Notify monitors and update monitor tracking, if necessary.
-        const prevMonitorIds = getTrackingMonitorIds();
-        if (monitors.length > 0 || prevMonitorIds.length > 0) {
-            const newMonitorIds = monitors.map(({ id: monitorId, data: monitorData, relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, }) => {
-                const monitorEventData = {
-                    ...monitorEventDataStub,
-                    monitorOffset,
-                    monitorOffsetRatio,
-                };
-                if (prevMonitorIds.includes(monitorId)) {
-                    // Drag was already over this monitor.
-                    monitorData.protocol.onMonitorDragOver?.(monitorEventData);
-                }
-                else {
-                    // Drag is entering monitor.
-                    monitorData.protocol.onMonitorDragEnter?.(monitorEventData);
-                }
-                return monitorId;
-            });
-            prevMonitorIds.filter((monitorId) => !newMonitorIds.includes(monitorId))
-                .forEach((monitorId) => {
-                // Drag has exited monitor.
-                const monitorData = getAbsoluteViewData(monitorId);
-                if (monitorData) {
-                    const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, } = (0, math_1.getRelativePosition)(dragAbsolutePosition, monitorData.absoluteMeasurements);
-                    monitorData.protocol.onMonitorDragExit?.({
-                        ...monitorEventDataStub,
-                        monitorOffset,
-                        monitorOffsetRatio,
-                    });
-                }
-            });
-            setMonitorIds(newMonitorIds);
-        }
-    }, [
-        getAbsoluteViewData,
-        getDragPositionData,
+        parentPosition.value = { x: parentX, y: parentY };
+        (0, react_native_reanimated_1.runOnJS)(throttledHandleGestureEvent)({ x: parentX, y: parentY });
+    }, [parentPosition, throttledHandleGestureEvent]);
+    const contextValue = {
+        getReleaseViews,
+        dragPositionDataSV,
+        startPosition,
+        parentPosition,
         getTrackingDragged,
         getTrackingReceiver,
-        getTrackingMonitorIds,
-        findMonitorsAndReceiver,
-        resetReceiver,
-        updateDragPosition,
         updateReceiver,
+        resetReceiver,
+        getTrackingMonitorIds,
+        getAbsoluteViewData,
         setMonitorIds,
-        debug,
-    ]);
-    const contextValue = {
+        findMonitorsAndReceiver,
         getViewState,
         getTrackingStatus,
         registerView,
         unregisterView,
         updateViewProtocol,
         updateViewMeasurements,
-        handleGestureStateChange,
+        updateHoverViewMeasurements,
         handleGestureEvent,
-        rootNodeHandleRef,
+        handleGestureStateChange,
+        rootViewRef,
     };
-    const hoverViews = [];
-    const trackingStatus = getTrackingStatus();
-    getHoverItems().forEach(({ id, key, internalRenderHoverView, hoverPosition, dimensions, }) => {
-        const viewState = getViewState(id);
-        if (viewState) {
-            const hoverView = internalRenderHoverView({
-                key,
-                hoverPosition,
-                viewState,
-                trackingStatus,
-                dimensions,
-            });
-            if (hoverView) {
-                hoverViews.push(hoverView);
-            }
-        }
-    });
-    const setRootNodeHandleRef = (0, react_1.useCallback)((ref) => {
-        rootNodeHandleRef.current = ref && (0, react_native_1.findNodeHandle)(ref);
-    }, []);
+    const allViewStates = (0, react_1.useMemo)(() => getAllViewIds(), [getAllViewIds]);
+    const hoverViews = (0, react_1.useMemo)(() => getHoverItems(allViewStates).map((viewData, index) => viewData && (react_1.default.createElement(HoverView_1.HoverView, { key: viewData.id || index, ...(viewData?.protocol || {}), id: viewData.id, scrollPosition: viewData?.scrollPosition, scrollPositionOffset: viewData?.scrollPositionOffset }))), [allViewStates, getHoverItems]);
     return (react_1.default.createElement(DraxContext_1.DraxContext.Provider, { value: contextValue },
-        react_1.default.createElement(react_native_1.View, { style: style, ref: setRootNodeHandleRef },
+        react_1.default.createElement(react_native_1.View, { style: style, ref: rootViewRef },
             children,
-            react_1.default.createElement(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, pointerEvents: "none" }, hoverViews))));
+            hoverViews)));
 };
 exports.DraxProvider = DraxProvider;
 const styles = react_native_1.StyleSheet.create({