{
}}
ref={ref}
>
+
equalPath(state.cursor, path))
diff --git a/src/durations.config.ts b/src/durations.config.ts
index 3908e3eb1a..f34d1941e7 100644
--- a/src/durations.config.ts
+++ b/src/durations.config.ts
@@ -10,6 +10,8 @@ const durationsMillis = {
veryFastDuration: 80,
/* PULSE ANIMATIONS */
+ /** A very slow pulse animation. */
+ verySlowPulseDuration: 1000,
/** A slow pulse animation. */
slowPulseDuration: 500,
/** A medium pulse animation. */
diff --git a/src/hooks/useDragAndDropThought.tsx b/src/hooks/useDragAndDropThought.tsx
index 9bd01cc8e1..baaa8231d2 100644
--- a/src/hooks/useDragAndDropThought.tsx
+++ b/src/hooks/useDragAndDropThought.tsx
@@ -207,6 +207,7 @@ const dropCollect = (monitor: DropTargetMonitor) => ({
// is being hovered over current thought irrespective of whether the given item is droppable
isBeingHoveredOver: monitor.isOver({ shallow: true }),
isDeepHovering: monitor.isOver(),
+ canDropThought: monitor.canDrop(),
})
/** A draggable and droppable Thought hook. */
@@ -221,14 +222,23 @@ const useDragAndDropThought = (props: Partial) => {
collect: dragCollect,
})
- const [{ isHovering, isBeingHoveredOver, isDeepHovering }, dropTarget] = useDrop({
+ const [{ isHovering, isBeingHoveredOver, isDeepHovering, canDropThought }, dropTarget] = useDrop({
accept: [DragAndDropType.Thought, NativeTypes.FILE],
canDrop: (item, monitor) => canDrop(propsTypes, monitor),
drop: (item, monitor) => drop(propsTypes, monitor),
collect: dropCollect,
})
- return { isDragging, dragSource, dragPreview, isHovering, isBeingHoveredOver, isDeepHovering, dropTarget }
+ return {
+ isDragging,
+ dragSource,
+ dragPreview,
+ isHovering,
+ isBeingHoveredOver,
+ isDeepHovering,
+ canDropThought,
+ dropTarget,
+ }
}
export default useDragAndDropThought
diff --git a/src/hooks/useDragLeave.ts b/src/hooks/useDragLeave.ts
new file mode 100644
index 0000000000..0a175f7fb8
--- /dev/null
+++ b/src/hooks/useDragLeave.ts
@@ -0,0 +1,71 @@
+import { debounce } from 'lodash'
+import { useEffect, useRef } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { updateHoveringPathActionCreator } from '../actions/updateHoveringPath'
+
+const DEBOUNCE_DELAY = 50
+let hoverCount = 0
+let debouncedSetHoveringPath: ReturnType | null = null
+
+/**
+ * Hook to capture the dragleave event and dispatch the dragInProgress action.
+ */
+const useDragLeave = ({ isDeepHovering, canDropThought }: { isDeepHovering: boolean; canDropThought: boolean }) => {
+ const dispatch = useDispatch()
+ const hoverZone = useSelector(state => state.hoverZone)
+ const prevIsDeepHoveringRef = useRef(isDeepHovering)
+ const prevHoverZone = useRef(hoverZone)
+
+ // Initialize the debounced function if it hasn't been already
+ if (!debouncedSetHoveringPath) {
+ debouncedSetHoveringPath = debounce(() => {
+ // Only set hoveringPath to undefined if hoverCount is still zero
+ dispatch(updateHoveringPathActionCreator({ path: undefined }))
+ }, DEBOUNCE_DELAY)
+ }
+
+ useEffect(() => {
+ if (prevHoverZone.current !== hoverZone) {
+ // Cancel any debounce function if hovering on subthought
+ prevHoverZone.current = hoverZone
+ debouncedSetHoveringPath?.cancel()
+ return
+ }
+
+ // If canDrop is false return
+ if (!canDropThought) {
+ dispatch(updateHoveringPathActionCreator({ path: undefined }))
+ return
+ }
+
+ if (isDeepHovering && !prevIsDeepHoveringRef.current) {
+ // Cursor has entered a drop target, increase hover count
+ hoverCount += 1
+
+ // Cancel any pending debounce since we're over a drop target
+ debouncedSetHoveringPath?.cancel()
+ } else {
+ // Cursor has left a drop target, decrease hover count
+ hoverCount = Math.max(hoverCount - 1, 0)
+ if (hoverCount === 0) {
+ // No drop targets are being hovered over; start debounce
+ debouncedSetHoveringPath?.()
+ }
+ }
+
+ prevIsDeepHoveringRef.current = isDeepHovering
+ prevHoverZone.current = hoverZone
+
+ return () => {
+ // Cleanup on unmount
+ if (isDeepHovering) {
+ if (hoverCount === 0) {
+ // Start debounce when unmounting and no more drop targets are hovered
+ debouncedSetHoveringPath?.()
+ }
+ }
+ }
+ }, [isDeepHovering, dispatch, hoverZone, canDropThought])
+}
+
+export default useDragLeave
diff --git a/src/hooks/useSortedContext.ts b/src/hooks/useSortedContext.ts
new file mode 100644
index 0000000000..2f90f1e1f2
--- /dev/null
+++ b/src/hooks/useSortedContext.ts
@@ -0,0 +1,51 @@
+import { useDragDropManager } from 'react-dnd'
+import { shallowEqual, useSelector } from 'react-redux'
+import DragThoughtItem from '../@types/DragThoughtItem'
+import DropThoughtZone from '../@types/DropThoughtZone'
+import attributeEquals from '../selectors/attributeEquals'
+import getSortedRank from '../selectors/getSortedRank'
+import getThoughtById from '../selectors/getThoughtById'
+import head from '../util/head'
+import parentOf from '../util/parentOf'
+
+/** A hook that checks if a dragging thought is hovering over a sorted context, and returns new rank where that thought will be dropped. */
+const useSortedContext = () => {
+ const dragDropManager = useDragDropManager()
+
+ return useSelector(state => {
+ if (!state.hoveringPath) {
+ return { isSortedContext: false, hoveringOnDropEnd: false, newRank: -1 }
+ }
+
+ const contextParentPath = parentOf(state.hoveringPath)
+
+ // Check if the drop target is on sorted context children or on its parent.
+ const isContextChildren = attributeEquals(state, head(contextParentPath), '=sort', 'Alphabetical')
+ const thoughtDrop = state.hoverZone === DropThoughtZone.ThoughtDrop
+ const isSortedContext = isContextChildren && thoughtDrop
+
+ // check if the hovering path is on a drop end of parent sorted context
+ const dropTargetId = head(state.hoveringPath || [])
+ const isContextParent = attributeEquals(state, dropTargetId, '=sort', 'Alphabetical')
+ const hoveringOnDropEnd = state.hoverZone === 'SubthoughtsDrop' && isContextParent
+
+ const monitor = dragDropManager.getMonitor()
+ const item = monitor.getItem() as DragThoughtItem
+
+ // Check if the dragged item is a thought and the drop zone is not a subthought
+ const isThought = item?.zone === 'Thoughts'
+ const sourceThoughtId = head(item?.path || [])
+
+ // get the source thought and its new rank
+ const sourceThought = isThought ? getThoughtById(state, sourceThoughtId) : null
+ const contextpath = hoveringOnDropEnd ? state.hoveringPath : contextParentPath
+ const newRank = getSortedRank(state, head(contextpath), sourceThought?.value || '')
+
+ return {
+ isHoveringSorted: isSortedContext || hoveringOnDropEnd,
+ newRank,
+ }
+ }, shallowEqual)
+}
+
+export default useSortedContext
diff --git a/src/redux-enhancers/undoRedoEnhancer.ts b/src/redux-enhancers/undoRedoEnhancer.ts
index f9b3a3a4be..944525ac3a 100644
--- a/src/redux-enhancers/undoRedoEnhancer.ts
+++ b/src/redux-enhancers/undoRedoEnhancer.ts
@@ -145,6 +145,7 @@ const UNDOABLE_ACTIONS: ActionFlags = {
unknownAction: false,
updateSplitPosition: false,
updateThoughts: false,
+ updateHoveringPath: false,
}
/** Returns if an action is undoable. */