@exegia/corpora-ui 0.20.0 → 0.21.0

package/src/components/composed/tree/use-tree-dnd.ts

@@ -1,39 +1,62 @@
 "use client"
 
 import * as React from "react"
+import { useAtomValue, useSetAtom, useStore } from "jotai"
 
+import {
+  endTreeDragAtom,
+  moveTreeNodeAtom,
+  treeCanMoveAtom,
+  treeDraggedIdAtom,
+  treeDropTargetAtom,
+  treeItemsAtom,
+} from "./tree-atom"
 import type {
   TreeDndContextValue,
+  TreeDndHandlers,
   TreeDropPosition,
+  TreeInstanceId,
   TreeNode,
-  UseTreeOptions,
 } from "./type"
 import { containsNode, findNode, locateNode } from "./utils"
 
-/** How far into a folder row the pointer must sit (from either edge) to
- * read as "inside" rather than "before"/"after". */
+/** How far into a folder row the pointer must sit (from either edge) to read
+ * as "inside" rather than "before"/"after". */
 const EDGE_RATIO = 0.25
 
-/** Owns drag state for the `files` variant: which row is in flight, which
- * row the pointer rests on and where the drop would land. Everything is
- * component state — `dataTransfer` is set for interop but never read, so
- * the flow also works where the store is unavailable (tests, some
- * webviews). Without `onMove` every handler is inert. */
-export function useTreeDnd(
-  items: readonly TreeNode[],
-  onMove: UseTreeOptions["onMove"]
-): TreeDndContextValue {
-  const enabled = onMove !== undefined
-  const [draggedId, setDraggedId] = React.useState<string | null>(null)
-  const [dropTarget, setDropTarget] = React.useState<{
-    id: string
-    position: TreeDropPosition
-  } | null>(null)
+/**
+ * The drag handlers for the `files` variant, stable for the life of the tree.
+ *
+ * Nothing here subscribes to drag state: items, the dragged id and the drop
+ * target are read out of the store when a handler runs. That is what lets
+ * every row share one handler object without re-rendering when a drag moves —
+ * and it keeps `useTree` from subscribing to data it also projects from
+ * props, which would loop on an inline `items` array.
+ *
+ * Inert unless the tree `canMove`. `dataTransfer` is set for interop but
+ * never read, so the flow also works where the store is unavailable (tests,
+ * some webviews).
+ */
+export function useTreeDndHandlers(treeId: TreeInstanceId): TreeDndHandlers {
+  const store = useStore()
+  const enabled = useAtomValue(treeCanMoveAtom(treeId))
+  const setDraggedId = useSetAtom(treeDraggedIdAtom(treeId))
+  const setDropTarget = useSetAtom(treeDropTargetAtom(treeId))
+  const move = useSetAtom(moveTreeNodeAtom(treeId))
+  const reset = useSetAtom(endTreeDragAtom(treeId))
 
-  const reset = React.useCallback(() => {
-    setDraggedId(null)
-    setDropTarget(null)
-  }, [])
+  const readItems = React.useCallback(
+    () => store.get(treeItemsAtom(treeId)),
+    [store, treeId]
+  )
+  const readDraggedId = React.useCallback(
+    () => store.get(treeDraggedIdAtom(treeId)),
+    [store, treeId]
+  )
+  const readDropTarget = React.useCallback(
+    () => store.get(treeDropTargetAtom(treeId)),
+    [store, treeId]
+  )
 
   const onRowDragStart = React.useCallback(
     (event: React.DragEvent, id: string) => {
@@ -45,14 +68,15 @@ export function useTreeDnd(
         event.dataTransfer.setData("text/plain", id)
       }
     },
-    [enabled]
+    [enabled, setDraggedId]
   )
 
   const onRowDragOver = React.useCallback(
     (event: React.DragEvent, node: TreeNode) => {
+      const draggedId = readDraggedId()
       if (!enabled || draggedId === null) return
       // A node never drops onto itself or into its own subtree.
-      if (containsNode(items, draggedId, node.id)) return
+      if (containsNode(readItems(), draggedId, node.id)) return
       event.preventDefault()
       event.stopPropagation()
       if (event.dataTransfer) event.dataTransfer.dropEffect = "move"
@@ -60,8 +84,8 @@ export function useTreeDnd(
       const rect = event.currentTarget.getBoundingClientRect()
       const ratio =
         rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0.5
-      // Any node carrying a children array is a folder — an empty one
-      // still accepts drops "inside".
+      // Any node carrying a children array is a folder — an empty one still
+      // accepts drops "inside".
       const folder = node.children !== undefined
       const position: TreeDropPosition = folder
         ? ratio < EDGE_RATIO
@@ -78,33 +102,38 @@ export function useTreeDnd(
           : { id: node.id, position }
       )
     },
-    [enabled, draggedId, items]
+    [enabled, readDraggedId, readItems, setDropTarget]
   )
 
-  const onRowDragLeave = React.useCallback((event: React.DragEvent) => {
-    // Leaving for a child of the same row still counts as hovering it.
-    const next = event.relatedTarget as Node | null
-    if (next && event.currentTarget.contains(next)) return
-    setDropTarget(null)
-  }, [])
+  const onRowDragLeave = React.useCallback(
+    (event: React.DragEvent) => {
+      // Leaving for a child of the same row still counts as hovering it.
+      const next = event.relatedTarget as Node | null
+      if (next && event.currentTarget.contains(next)) return
+      setDropTarget(null)
+    },
+    [setDropTarget]
+  )
 
   const onRowDrop = React.useCallback(
     (event: React.DragEvent, node: TreeNode) => {
       if (!enabled) return
       event.preventDefault()
       event.stopPropagation()
-      const target = dropTarget
+      const draggedId = readDraggedId()
+      const target = readDropTarget()
       if (draggedId === null || target === null || target.id !== node.id) {
         reset()
         return
       }
+      const items = readItems()
 
       if (target.position === "inside") {
-        // Append at the end of the folder, sized without the dragged node
-        // (it may already live there).
+        // Append at the end of the folder, sized without the dragged node (it
+        // may already live there).
         const children = node.children ?? []
         const index = children.filter((child) => child.id !== draggedId).length
-        onMove?.(draggedId, node.id, index)
+        move(draggedId, node.id, index)
       } else {
         const location = locateNode(items, node.id)
         if (location) {
@@ -115,34 +144,36 @@ export function useTreeDnd(
           ).filter((sibling) => sibling.id !== draggedId)
           const at = siblings.findIndex((sibling) => sibling.id === node.id)
           const index = target.position === "after" ? at + 1 : at
-          onMove?.(draggedId, location.parentId, index)
+          move(draggedId, location.parentId, index)
         }
       }
       reset()
     },
-    [enabled, draggedId, dropTarget, items, onMove, reset]
+    [enabled, move, readDraggedId, readDropTarget, readItems, reset]
   )
 
   return React.useMemo(
     () => ({
       enabled,
-      draggedId,
-      dropTarget,
       onRowDragStart,
       onRowDragOver,
       onRowDragLeave,
       onRowDrop,
       onRowDragEnd: reset,
     }),
-    [
-      enabled,
-      draggedId,
-      dropTarget,
-      onRowDragStart,
-      onRowDragOver,
-      onRowDragLeave,
-      onRowDrop,
-      reset,
-    ]
+    [enabled, onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, reset]
+  )
+}
+
+/** The handlers plus live drag state, for `TreeController.dnd`. Rows take the
+ * handlers alone and read the state per node instead. */
+export function useTreeDnd(treeId: TreeInstanceId): TreeDndContextValue {
+  const handlers = useTreeDndHandlers(treeId)
+  const draggedId = useAtomValue(treeDraggedIdAtom(treeId))
+  const dropTarget = useAtomValue(treeDropTargetAtom(treeId))
+
+  return React.useMemo(
+    () => ({ ...handlers, draggedId, dropTarget }),
+    [handlers, draggedId, dropTarget]
   )
 }

package/src/components/composed/tree/use-tree-state.ts

@@ -0,0 +1,105 @@
+"use client"
+
+import * as React from "react"
+import { useAtomValue, useSetAtom } from "jotai"
+
+import {
+  cancelTreeRenameAtom,
+  collapseAllTreeNodesAtom,
+  collapseTreeNodeAtom,
+  expandAllTreeNodesAtom,
+  expandTreeNodeAtom,
+  moveTreeNodeAtom,
+  renameTreeNodeAtom,
+  resetTreeAtom,
+  revealTreeNodeAtom,
+  selectTreeNodeAtom,
+  setTreeCollapsedAtom,
+  setTreeItemsAtom,
+  startTreeRenameAtom,
+  toggleTreeCollapsedAtom,
+  toggleTreeNodeAtom,
+  treeStateAtom,
+} from "./tree-atom"
+import type { TreeActions, TreeInstanceId, TreeState } from "./type"
+
+/**
+ * Read the tree registered under `treeId` from anywhere below
+ * `ExegiaProvider` — no controller, no props, no provider of its own.
+ *
+ * ```tsx
+ * const { collapsed, activeId } = useTreeState("app-nav")
+ * ```
+ *
+ * This returns the whole state object, so the caller re-renders on any
+ * change. A component that reads one field should subscribe to that field's
+ * atom instead: `useAtomValue(treeCollapsedAtom("app-nav"))`.
+ */
+export function useTreeState(treeId: TreeInstanceId): TreeState {
+  return useAtomValue(treeStateAtom(treeId))
+}
+
+/**
+ * Drive the tree registered under `treeId` from anywhere. Writes only — the
+ * caller never re-renders when the tree changes, so this is what a command
+ * palette, a keyboard shortcut or a route guard should reach for.
+ *
+ * ```tsx
+ * const nav = useTreeActions("app-nav")
+ * <Button onClick={nav.collapseAll}>Collapse all</Button>
+ * ```
+ */
+export function useTreeActions(treeId: TreeInstanceId): TreeActions {
+  const expand = useSetAtom(expandTreeNodeAtom(treeId))
+  const collapse = useSetAtom(collapseTreeNodeAtom(treeId))
+  const toggleExpanded = useSetAtom(toggleTreeNodeAtom(treeId))
+  const expandAll = useSetAtom(expandAllTreeNodesAtom(treeId))
+  const collapseAll = useSetAtom(collapseAllTreeNodesAtom(treeId))
+  const reveal = useSetAtom(revealTreeNodeAtom(treeId))
+  const setCollapsed = useSetAtom(setTreeCollapsedAtom(treeId))
+  const toggleCollapsed = useSetAtom(toggleTreeCollapsedAtom(treeId))
+  const select = useSetAtom(selectTreeNodeAtom(treeId))
+  const startRename = useSetAtom(startTreeRenameAtom(treeId))
+  const cancelRename = useSetAtom(cancelTreeRenameAtom(treeId))
+  const rename = useSetAtom(renameTreeNodeAtom(treeId))
+  const move = useSetAtom(moveTreeNodeAtom(treeId))
+  const setItems = useSetAtom(setTreeItemsAtom(treeId))
+  const reset = useSetAtom(resetTreeAtom(treeId))
+
+  return React.useMemo(
+    () => ({
+      expand,
+      collapse,
+      toggleExpanded,
+      expandAll,
+      collapseAll,
+      reveal,
+      setCollapsed,
+      toggleCollapsed,
+      select,
+      startRename,
+      cancelRename,
+      rename,
+      move,
+      setItems,
+      reset,
+    }),
+    [
+      expand,
+      collapse,
+      toggleExpanded,
+      expandAll,
+      collapseAll,
+      reveal,
+      setCollapsed,
+      toggleCollapsed,
+      select,
+      startRename,
+      cancelRename,
+      rename,
+      move,
+      setItems,
+      reset,
+    ]
+  )
+}