@onehat/ui 0.4.65 → 0.4.67

package/src/Components/Tree/Tree.js

@@ -21,12 +21,18 @@ import {
 	EXPANDED,
 	LEAF,
 } from '../../Constants/Tree.js';
+import {
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+	CURRENT_MODE,
+} from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import withContextMenu from '../Hoc/withContextMenu.js';
 import withAlert from '../Hoc/withAlert.js';
 import withComponent from '../Hoc/withComponent.js';
 import withData from '../Hoc/withData.js';
+import { withDropTarget } from '../Hoc/withDnd.js';
 import withEvents from '../Hoc/withEvents.js';
 import withSideEditor from '../Hoc/withSideEditor.js';
 import withFilters from '../Hoc/withFilters.js';
@@ -41,19 +47,15 @@ import inArray from '../../Functions/inArray.js';
 import testProps from '../../Functions/testProps.js';
 import CenterBox from '../Layout/CenterBox.js';
 import ReloadButton from '../Buttons/ReloadButton.js';
-import TreeNode, { DraggableTreeNode } from './TreeNode.js';
+import TreeNode, { DragSourceDropTargetTreeNode, DragSourceTreeNode, DropTargetTreeNode } from './TreeNode.js';
 import FormPanel from '../Panel/FormPanel.js';
 import Input from '../Form/Field/Input.js';
 import Xmark from '../Icons/Xmark.js';
 import Dot from '../Icons/Dot.js';
 import Collapse from '../Icons/Collapse.js';
 import Expand from '../Icons/Expand.js';
-import FolderClosed from '../Icons/FolderClosed.js';
-import FolderOpen from '../Icons/FolderOpen.js';
 import Gear from '../Icons/Gear.js';
 import MagnifyingGlass from '../Icons/MagnifyingGlass.js';
-import NoReorderRows from '../Icons/NoReorderRows.js';
-import ReorderRows from '../Icons/ReorderRows.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
 import NoRecordsFound from '../Grid/NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
@@ -68,6 +70,8 @@ const
 	DOUBLE_CLICK = 2,
 	TRIPLE_CLICK = 3;
 
+// NOTE: If using TreeComponent with getCustomDragProxy, ensure that <GlobalDragProxy /> exists in App.js
+
 function TreeComponent(props) {
 	const {
 			areRootsVisible = true,
@@ -87,21 +91,9 @@ function TreeComponent(props) {
 			getDisplayTextFromSearchResults = (item) => {
 				return item.id
 			},
-			getNodeIcon = (which, item) => { // decides what icon to show for this node
+			getNodeIcon = (item) => {
 				// TODO: Allow for dynamic props on the icon (e.g. special color for some icons)
-				let icon;
-				switch(which) {
-					case COLLAPSED:
-						icon = FolderClosed;
-						break;
-					case EXPANDED:
-						icon = FolderOpen;
-						break;
-					case LEAF:
-						icon = Dot;
-						break;
-				}
-				return icon;
+				return Dot;
 			},
 			getNodeProps = (item) => {
 				return {};
@@ -110,7 +102,9 @@ function TreeComponent(props) {
 			disableLoadingIndicator = false,
 			disableSelectorSelected = false,
 			showHovers = true,
-			canNodesReorder = false,
+			showSelectHandle = true,
+			isNodeSelectable = true,
+			isNodeHoverable = true,
 			allowToggleSelection = true, // i.e. single click with no shift key toggles the selection of the node clicked on
 			disableBottomToolbar = false,
 			bottomToolbar = null,
@@ -122,11 +116,24 @@ function TreeComponent(props) {
 			canRecordBeEdited,
 			onTreeLoad,
 			onLayout,
-			
 			selectorId,
 			selectorSelected,
 			selectorSelectedField = 'id',
 
+			// DND
+			canNodesMoveInternally = false,
+			canNodeMoveInternally, // optional fn to customize whether each node can be dragged INternally
+			canNodeMoveExternally, // optional fn to customize whether each node can be dragged EXternally
+			canNodeAcceptDrop, // optional fn to customize whether each node can accept a dropped item: (targetItem, draggedItem) => boolean
+			getCustomDragProxy, // optional fn to render custom drag preview: (item, selection) => ReactElement
+			dragPreviewOptions, // optional object for drag preview positioning options
+			areNodesDragSource = false,
+			nodeDragSourceType,
+			getNodeDragSourceItem,
+			areNodesDropTarget = false,
+			dropTargetAccept,
+			onNodeDrop,
+
 			// withComponent
 			self,
 
@@ -161,6 +168,12 @@ function TreeComponent(props) {
 			// withPermissions
 			canUser,
 
+			// withDnd
+			isDropTarget,
+			canDrop,
+			isOver,
+			dropTargetRef,
+
 			// withSelection
 			selection,
 			setSelection,
@@ -173,19 +186,15 @@ function TreeComponent(props) {
 			noSelectorMeansNoResults = false,
 
 		} = props,
-		styles = UiGlobals.styles,
 		forceUpdate = useForceUpdate(),
 		treeRef = useRef(),
 		treeNodeData = useRef(),
+		dragSelectionRef = useRef([]),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
-		[rowToDatumMap, setRowToDatumMap] = useState({}),
 		[searchResults, setSearchResults] = useState([]),
 		[searchFormData, setSearchFormData] = useState([]),
 		[highlitedDatum, setHighlitedDatum] = useState(null),
-		[isDragMode, setIsDragMode] = useState(false),
-		[dragNodeId, setDragNodeId] = useState(null),
-		[dropRowIx, setDropRowIx] = useState(null),
 		[treeSearchValue, setTreeSearchValue] = useState(''),
 
 		// state getters & setters
@@ -270,7 +279,7 @@ function TreeComponent(props) {
 			}
 			const
 				parent = selection[0],
-				parentDatum = getNodeData(parent.id);
+				parentDatum = getDatumById(parent.id);
 
 			if (parent.hasChildren && !parent.areChildrenLoaded) {
 				await loadChildren(parentDatum);
@@ -284,7 +293,7 @@ function TreeComponent(props) {
 			// Add the entity to the tree, show parent as hasChildren and expanded
 			const
 				parent = selection[0],
-				parentDatum = getNodeData(parent.id);
+				parentDatum = getDatumById(parent.id);
 			if (!parent.hasChildren) {
 				parent.hasChildren = true; // since we're adding a new child
 			}
@@ -292,7 +301,6 @@ function TreeComponent(props) {
 				parentDatum.isExpanded = true;
 			}
 
-			buildRowToDatumMap();
 			forceUpdate();
 		},
 		onAfterAddSave = (entities) => {
@@ -307,7 +315,7 @@ function TreeComponent(props) {
 			// Refresh the node's display
 			const
 				node = entities[0],
-				existingDatum = getNodeData(node.id), // TODO: Make this work for >1 entity
+				existingDatum = getDatumById(node.id), // TODO: Make this work for >1 entity
 				newDatum = buildTreeNodeDatum(node);
 
 			// copy the updated data to existingDatum
@@ -317,7 +325,7 @@ function TreeComponent(props) {
 
 			if (node.parent?.id) {
 				const
-					existingParentDatum = getNodeData(node.parent.id),
+					existingParentDatum = getDatumById(node.parent.id),
 					newParentDatum = buildTreeNodeDatum(node.parent);
 				_.assign(existingParentDatum, newParentDatum);
 				existingParentDatum.isExpanded = true;
@@ -331,7 +339,7 @@ function TreeComponent(props) {
 		onBeforeSave = (entities) => {
 			const
 				node = entities[0],
-				datum = getNodeData(node.id); // TODO: Make this work for >1 entity
+				datum = getDatumById(node.id); // TODO: Make this work for >1 entity
 			
 			datum.isLoading = true;
 			forceUpdate();
@@ -339,9 +347,7 @@ function TreeComponent(props) {
 		onAfterDelete = async (entities) => {
 			const parent = entities[0].parent;
 			if (parent) {
-				await reloadNode(parent); // includes buildRowToDatumMap
-			} else {
-				buildRowToDatumMap();
+				await reloadNode(parent);
 			}
 		},
 		onToggle = async (datum, e) => {
@@ -376,7 +382,6 @@ function TreeComponent(props) {
 			}
 			
 			forceUpdate();
-			buildRowToDatumMap();
 		},
 		onCollapseAll = () => {
 			const newTreeNodeData = _.clone(getTreeNodeData());
@@ -473,35 +478,50 @@ function TreeComponent(props) {
 			});
 		},
 
-		// utilities
-		getNodeData = (id) => {
-			function findNodeById(node) {
-				if (node.item.id === id) {
-					return node;
-				}
-				if (!_.isEmpty(node.children)) {
-					let found1 = null;
-					_.each(node.children, (node2) => {
-						const found2 = findNodeById(node2);
-						if (found2) {
-							found1 = found2;
-							return false; // break loop
-						}
-					})
-					return found1
-				}
-				return false;
+		// internal DND
+		onInternalNodeDrop = async (droppedOn, droppedItem) => {
+			let selectedNodes = [];
+			if (droppedItem.getSelection) {
+				selectedNodes = droppedItem.getSelection();
 			}
-			let found = null;
-			_.each(getTreeNodeData(), (node) => {
-				const foundNode = findNodeById(node);
-				if (foundNode) {
-					found = foundNode;
-					return false;
-				}
+			if (_.isEmpty(selectedNodes)) {
+				selectedNodes = [droppedItem.item];
+			}
+
+			// filter out nodes that would already be moved by others in the selection
+			const selectedNodesClone = [...selectedNodes];
+			selectedNodes = selectedNodes.filter((node) => {
+				let isDescendant = false;
+				_.each(selectedNodesClone, (otherNode) => {
+					if (node.id === otherNode.id) {
+						return false; // skip self
+					}
+					isDescendant = isDescendantOf(node, otherNode);
+					if (isDescendant) {
+						return false; // found descendant; break loop
+					}
+					isDescendant = isDescendantOf(otherNode, node);
+					if (isDescendant) {
+						return false; // found ancestor; break loop
+					}
+				});
+				return !isDescendant;
 			});
-			return found;
+			
+			const isMultiSelection = selectedNodes.length > 1;
+			if (isMultiSelection) {
+				alert('moving multiple disparate nodes not yet implemented');
+				return;
+			}
+
+			const selectedNode = selectedNodes[0];
+			const commonAncestorId = await Repository.moveTreeNode(selectedNode, droppedOn.id);
+			const commonAncestorDatum = getDatumById(commonAncestorId);
+			reloadNode(commonAncestorDatum.item);
+
 		},
+
+		// utilities
 		buildTreeNodeDatum = (treeNode, defaultToExpanded = false) => {
 			// Build the data-representation of one node and its children,
 			// caching text & icon, keeping track of the state for whole tree
@@ -511,11 +531,10 @@ function TreeComponent(props) {
 				children = buildTreeNodeData(treeNode.children, defaultToExpanded), // recursively get data for children
 				datum = {
 					item: treeNode,
+					treeRef,
 					text: getNodeText(treeNode),
 					content: getNodeContent ? getNodeContent(treeNode) : null,
-					iconCollapsed: getNodeIcon(COLLAPSED, treeNode),
-					iconExpanded: getNodeIcon(EXPANDED, treeNode),
-					iconLeaf: getNodeIcon(LEAF, treeNode),
+					icon: getNodeIcon(treeNode),
 					isExpanded: treeNode.isExpanded || defaultToExpanded || isRoot, // all non-root treeNodes are collapsed by default
 					isVisible: isRoot ? areRootsVisible : true,
 					isLoading: false,
@@ -548,37 +567,39 @@ function TreeComponent(props) {
 			const treeNodeData = buildTreeNodeData(nodes);
 			setTreeNodeData(treeNodeData);
 
-			buildRowToDatumMap();
-
 			if (onTreeLoad) {
 				onTreeLoad(self);
 			}
 			return treeNodeData;
 		},
-		buildRowToDatumMap = () => {
-			const rowToDatumMap = {};
-			let ix = 0;
-
-			function walkTree(datum) {
-				if (!datum.isVisible) {
-					return;
-				}
-
-				// Add this datum's id
-				rowToDatumMap[ix] = datum;
-				ix++;
+		buildAndSetOneTreeNodeData = (entity) => {
+			
+			if (!entity || !entity.parent) {
+				// If no parent, it might be a root node, so rebuild the tree
+				buildAndSetTreeNodeData();
+				return;
+			}
 
-				if (datum.isExpanded) {
-					_.each(datum.children, (child) => {
-						walkTree(child);
-					});
-				}
+			const parentDatum = getDatumById(entity.parent.id);
+			if (!parentDatum) {
+				// Parent not found in current tree structure, rebuild
+				buildAndSetTreeNodeData();
+				return;
 			}
-			_.each(getTreeNodeData(), (rootDatum) => {
-				walkTree(rootDatum);
-			});
+
+			// Create datum for the new entity and add it to parent's children
+			const newDatum = buildTreeNodeDatum(entity);
+			parentDatum.children.push(newDatum);
 			
-			setRowToDatumMap(rowToDatumMap);
+			// Update parent to show it has children and expand if needed
+			if (!entity.parent.hasChildren) {
+				entity.parent.hasChildren = true;
+			}
+			if (!parentDatum.isExpanded) {
+				parentDatum.isExpanded = true;
+			}
+
+			forceUpdate();
 		},
 		datumContainsSelection = (datum) => {
 			if (_.isEmpty(selection)) {
@@ -698,13 +719,38 @@ function TreeComponent(props) {
 
 			return treeNodes;
 		},
+		belongsToThisTree = (treeNode) => {
+			if (!treeNode) {
+				return false;
+			}
+			const datum = getDatumById(treeNode.id);
+			if (!datum) {
+				return false;
+			}
+			return datum.treeRef === treeRef;
+		},
+		isDescendantOf = (potentialDescendant, potentialAncestor) => {
+			// Check if potentialDescendant is a descendant of potentialAncestor
+			// by walking up the parent chain from potentialDescendant
+			let currentTreeNode = potentialDescendant;
+			while(currentTreeNode) {
+				if (currentTreeNode.id === potentialAncestor.id) {
+					return true;
+				}
+				currentTreeNode = currentTreeNode.parent;
+			}
+			return false;
+		},
+		isChildOf = (potentialChild, potentialParent) => {
+			return potentialChild.parent?.id === potentialParent.id;
+		},
 		reloadTree = () => {
 			Repository.areRootNodesLoaded = false;
 			return buildAndSetTreeNodeData();
 		},
 		reloadNode = async (node) => {
 			// mark node as loading
-			const existingDatum = getNodeData(node.id);
+			const existingDatum = getDatumById(node.id);
 			existingDatum.isLoading = true;
 			forceUpdate();
 
@@ -718,8 +764,6 @@ function TreeComponent(props) {
 			_.assign(existingDatum, _.omit(newDatum, ['isExpanded']));
 			existingDatum.isLoading = false;
 			forceUpdate();
-
-			buildRowToDatumMap();
 		},
 		loadChildren = async (datum, depth = 1) => {
 
@@ -755,12 +799,9 @@ function TreeComponent(props) {
 			// Hide loading indicator
 			datum.isLoading = false;
 			forceUpdate();
-			
-			buildRowToDatumMap();
 		},
 		collapseNodes = (nodes) => {
 			collapseNodesRecursive(nodes);
-			buildRowToDatumMap();
 		},
 		collapseNodesRecursive = (nodes) => {
 			_.each(nodes, (node) => {
@@ -779,7 +820,6 @@ function TreeComponent(props) {
 
 			// expand them in UI
 			expandNodesRecursive(nodes);
-			buildRowToDatumMap();
 		},
 		expandNodesRecursive = (nodes) => {
 			_.each(nodes, (node) => {
@@ -846,7 +886,6 @@ function TreeComponent(props) {
 			}
 
 			setTreeNodeData(newTreeNodeData);
-			buildRowToDatumMap();
 		},
 		scrollToNode = (node) => {
 			// Helper for expandPath
@@ -907,17 +946,6 @@ function TreeComponent(props) {
 						isDisabled: false,
 					},
 				];
-			if (canNodesReorder) {
-				buttons.push({
-					key: 'reorderBtn',
-					text: (isDragMode ? 'Exit' : 'Enter') + ' reorder mode',
-					handler: () => {
-						setIsDragMode(!isDragMode);
-					},
-					icon: isDragMode ? NoReorderRows : ReorderRows,
-					isDisabled: false,
-				});
-			}
 			if (isNodeTextConfigurable && editDisplaySettings) {
 				buttons.push({
 					key: 'editNodeTextBtn',
@@ -978,9 +1006,6 @@ function TreeComponent(props) {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();
 							}
-							if (isDragMode) {
-								return
-							}
 							switch (e.detail) {
 								case SIMULATED_CLICK:
 								case SINGLE_CLICK:
@@ -1014,9 +1039,6 @@ function TreeComponent(props) {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();
 							}
-							if (isDragMode) {
-								return;
-							}
 
 							if (!setSelection) {
 								return;
@@ -1030,6 +1052,8 @@ function TreeComponent(props) {
 							}
 						}}
 						className={`
+							Pressable
+							Node
 							flex-row
 						`}
 						style={{
@@ -1041,32 +1065,197 @@ function TreeComponent(props) {
 							focused,
 							pressed,
 						}) => {
-							let WhichTreeNode = TreeNode,
-								dragProps = {};
-							if (canNodesReorder && isDragMode && !datum.item.isRoot) { // Can't drag root nodes
-								WhichTreeNode = DraggableTreeNode;
-								dragProps = {
-									mode: VERTICAL,
-									onDrag,
-									onDragStop,
-									getParentNode: (node) => node.parentElement.parentElement,
-									getDraggableNodeFromNode: (node) => node.parentElement,
-									getProxy: getDragProxy,
-									proxyParent: treeRef.current,
-									proxyPositionRelativeToParent: true,
-								};
-								nodeProps.className = 'w-full';
+							const nodeDragProps = {};
+							let WhichNode = TreeNode;
+							if (CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN
+								// Create a method that gets an always-current copy of the selection ids
+								dragSelectionRef.current = selection;
+								const getSelection = () => dragSelectionRef.current;
+
+								const userHasPermissionToDrag = (!canUser || canUser(EDIT));
+								if (userHasPermissionToDrag) {
+									// NOTE: The Tree can either drag nodes internally or externally, but not both at the same time!
+
+									// assign event handlers
+									if (canNodesMoveInternally) {
+										// internal drag/drop
+										const nodeDragSourceType = 'internal';
+										WhichNode = DragSourceDropTargetTreeNode;
+										nodeDragProps.isDragSource = !item.isRoot; // Root nodes cannot be dragged
+										nodeDragProps.dragSourceType = nodeDragSourceType;
+										nodeDragProps.dragSourceItem = {
+											id: item.id,
+											item,
+											getSelection,
+											type: nodeDragSourceType,
+										};
+
+										// Prevent root nodes from being dragged, and use custom logic if provided
+										nodeDragProps.canDrag = (monitor) => {
+											const currentSelection = getSelection();
+											
+											// Check if any selected node is a root node (can't drag root nodes)
+											const hasRootNode = currentSelection.some(node => node.isRoot);
+											if (hasRootNode) {
+												return false;
+											}
+											
+											// Use custom drag validation if provided
+											if (canNodeMoveInternally) {
+												// In multi-selection, all nodes must be draggable
+												return currentSelection.every(node => canNodeMoveInternally(node));
+											}
+											
+											return true;
+										};
+
+										// Add custom drag preview options
+										if (dragPreviewOptions) {
+											nodeDragProps.dragPreviewOptions = dragPreviewOptions;
+										}
+
+										// Add drag preview rendering
+										nodeDragProps.getDragProxy = getCustomDragProxy ? 
+											(dragItem) => getCustomDragProxy(item, getSelection()) :
+											null; // Let GlobalDragProxy handle the default case
+
+										const dropTargetAccept = 'internal';
+										nodeDragProps.isDropTarget = true;
+										nodeDragProps.dropTargetAccept = dropTargetAccept;
+										
+										// Define validation logic once for reuse
+										const validateDrop = (draggedItem) => {
+											if (!draggedItem) {
+												return false;
+											}
+											
+											const currentSelection = getSelection();
+
+											// Always include the dragged item itself in validation
+											// If no selection exists, the dragged item is what we're moving
+											const nodesToValidate = currentSelection.length > 0 ? currentSelection : [draggedItem.item];
+											
+											// validate that the dropped item is not already a direct child of the target node
+											if (isChildOf(draggedItem.item, item)) {
+												return false;
+											}
+
+											// Validate that none of the nodes being moved can be dropped into the target location
+											for (const nodeToMove of nodesToValidate) {
+												if (nodeToMove.id === item.id) {
+													// Cannot drop a node onto itself
+													return false;
+												}
+												if (isDescendantOf(item, nodeToMove)) {
+													// Cannot drop a node into its own descendants
+													return false;
+												}
+											}
+											
+											if (canNodeAcceptDrop && typeof canNodeAcceptDrop === 'function') {
+												// custom business logic
+												return canNodeAcceptDrop(item, draggedItem);
+											}
+											return true;
+										};
+										
+										// Use the validation function for React DnD
+										nodeDragProps.canDrop = (draggedItem, monitor) => validateDrop(draggedItem);
+										
+										// Pass the same validation function for visual feedback
+										nodeDragProps.validateDrop = validateDrop;
+										
+										nodeDragProps.onDrop = (droppedItem) => {
+											if (belongsToThisTree(droppedItem)) {
+												onInternalNodeDrop(item, droppedItem);
+											}
+										};
+									} else {
+										// external drag/drop
+										if (areNodesDragSource) {
+											WhichNode = DragSourceTreeNode;
+											nodeDragProps.isDragSource = !item.isRoot; // Root nodes cannot be dragged
+											nodeDragProps.dragSourceType = nodeDragSourceType;
+											if (getNodeDragSourceItem) {
+												nodeDragProps.dragSourceItem = getNodeDragSourceItem(item, getSelection, nodeDragSourceType);
+											} else {
+												nodeDragProps.dragSourceItem = {
+													id: item.id,
+													item,
+													getSelection,
+													type: nodeDragSourceType,
+												};
+											}
+											if (canNodeMoveExternally) {
+												nodeDragProps.canDrag = canNodeMoveExternally;
+											}
+
+											// Add custom drag preview options
+											if (dragPreviewOptions) {
+												nodeDragProps.dragPreviewOptions = dragPreviewOptions;
+											}
+
+											// Add drag preview rendering
+											nodeDragProps.getDragProxy = getCustomDragProxy ? 
+												(dragItem) => getCustomDragProxy(item, getSelection()) :
+												null; // Let GlobalDragProxy handle the default case
+										}
+										if (areNodesDropTarget) {
+											WhichNode = DropTargetTreeNode;
+											nodeDragProps.isDropTarget = true;
+											nodeDragProps.dropTargetAccept = dropTargetAccept;
+											nodeDragProps.canDrop = (droppedItem, monitor) => {
+												// Check if the drop operation would be valid based on business rules
+												if (canNodeAcceptDrop && typeof canNodeAcceptDrop === 'function') {
+													return canNodeAcceptDrop(item, droppedItem);
+												}
+												// Default: allow external drops
+												return true;
+											};
+
+											// Define validation logic once for reuse
+											const validateDrop = (draggedItem) => {
+												if (!draggedItem) {
+													return false;
+												}
+												
+												if (canNodeAcceptDrop && typeof canNodeAcceptDrop === 'function') {
+													// custom business logic
+													return canNodeAcceptDrop(item, draggedItem);
+												}
+												return true;
+											};
+
+											// Use the validation function for React DnD
+											nodeDragProps.canDrop = (draggedItem, monitor) => validateDrop(draggedItem);
+											
+											// Pass the same validation function for visual feedback
+											nodeDragProps.validateDrop = validateDrop;
+
+											nodeDragProps.onDrop = (droppedItem) => {
+												// NOTE: item is sometimes getting destroyed, but it still has the id, so you can still use it
+												onNodeDrop(item, droppedItem);
+											};
+										}
+										if (areNodesDragSource && areNodesDropTarget) {
+											WhichNode = DragSourceDropTargetTreeNode;
+										}
+									}
+								}
 							}
 							
-							return <WhichTreeNode
+							return <WhichNode
 										datum={datum}
 										nodeProps={nodeProps}
 										onToggle={onToggle}
+										isNodeSelectable={isNodeSelectable}
+										isNodeHoverable={isNodeHoverable}
 										isSelected={isSelected}
 										isHovered={hovered}
-										isDragMode={isDragMode}
+										showHovers={showHovers}
+										showSelectHandle={showSelectHandle}
 										isHighlighted={highlitedDatum === datum}
-										{...dragProps}
+										{...nodeDragProps}
 
 										// fields={fields}
 									/>;
@@ -1088,154 +1277,6 @@ function TreeComponent(props) {
 				}
 			});
 			return nodes;
-		},
-
-		// drag/drop
-		getDragProxy = (node) => {
-
-			// TODO: Maybe the proxy should grab itself and all descendants??
-
-			const
-				row = node,
-				rowRect = row.getBoundingClientRect(),
-				parent = row.parentElement,
-				parentRect = parent.getBoundingClientRect(),
-				proxy = row.cloneNode(true),
-				top = rowRect.top - parentRect.top,
-				rows = _.filter(parent.children, (childNode) => {
-					if (childNode.getBoundingClientRect().height === 0 && childNode.style.visibility !== 'hidden') {
-						return false; // Skip zero-height children
-					}
-					if (childNode === proxy) {
-						return false;
-					}
-					return true;
-				}),
-				dragRowIx = Array.from(rows).indexOf(row),
-				dragRowRecord = rowToDatumMap[dragRowIx].item;
-			
-			setDragNodeId(dragRowRecord.id); // the id of which record is being dragged
-
-			proxy.style.top = top + 'px';
-			proxy.style.left = (dragRowRecord.depth * DEPTH_INDENT_PX) + 'px';
-			proxy.style.height = rowRect.height + 'px';
-			proxy.style.width = rowRect.width + 'px';
-			proxy.style.display = 'flex';
-			proxy.style.position = 'absolute';
-			proxy.style.border = '1px solid #bbb';
-			return proxy;
-		},
-		onDrag = (info, e, proxy, node) => {
-			// console.log('onDrag', info, e, proxy, node);
-			const
-				proxyRect = proxy.getBoundingClientRect(),
-				row = node,
-				parent = row.parentElement,
-				parentRect = parent.getBoundingClientRect(),
-				rows = _.filter(parent.children, (childNode) => {
-					if (childNode.getBoundingClientRect().height === 0 && childNode.style.visibility !== 'hidden') {
-						return false; // Skip zero-height children
-					}
-					if (childNode === proxy) {
-						return false;
-					}
-					return true;
-				}),
-				currentY = proxyRect.top - parentRect.top; // top position of pointer, relative to page
-
-			// Figure out which row the user wants as a parentId
-			let newIx = 0; // default to root being new parentId
-			_.each(rows, (child, ix, all) => {
-				const
-					rect = child.getBoundingClientRect(), // rect of the row of this iteration
-					{
-						top,
-						bottom,
-						height,
-					} = rect,
-					compensatedBottom = bottom - parentRect.top;
-
-				if (child === proxy) {
-					return;
-				}
-				if (ix === 0) {
-					// first row
-					if (currentY < compensatedBottom) {
-						newIx = 0;
-						return false;
-					}
-					return;
-				} else if (ix === all.length -1) {
-					// last row
-					if (currentY < compensatedBottom) {
-						newIx = ix;
-						return false;
-					}
-					return;
-				}
-				
-				// all other rows
-				if (currentY < compensatedBottom) {
-					newIx = ix;
-					return false;
-				}
-			});
-
-
-			const
-				dragDatum = getDatumById(dragNodeId),
-				dragDatumChildIds = getDatumChildIds(dragDatum),
-				dropRowDatum = rowToDatumMap[newIx],
-				dropRowRecord = dropRowDatum.item,
-				dropNodeId = dropRowRecord.id,
-				dragNodeContainsDropNode = inArray(dropNodeId, dragDatumChildIds) || dropRowRecord.id === dragNodeId;
-			
-			if (dragNodeContainsDropNode) {
-				// the node can be a child of any node except itself or its own descendants
-				setDropRowIx(null);
-				setHighlitedDatum(null);
-
-			} else {
-				// console.log('setDropRowIx', newIx);
-				setDropRowIx(newIx);
-
-				// highlight the drop node
-				setHighlitedDatum(dropRowDatum);
-
-				// shift proxy's depth
-				const depth = (dropRowRecord.id === dragNodeId) ? dropRowRecord.depth : dropRowRecord.depth + 1;
-				proxy.style.left = (depth * DEPTH_INDENT_PX) + 'px';
-			}
-		},
-		onDragStop = async (delta, e, config) => {
-			// console.log('onDragStop', delta, e, config);
-
-			if (_.isNil(dropRowIx)) {
-				return;
-			}
-			
-			const
-				dragDatum = getDatumById(dragNodeId),
-				dragRowRecord = dragDatum.item,
-				dropRowDatum = rowToDatumMap[dropRowIx],
-				dropRowRecord = dropRowDatum.item;
-
-			if (Repository) {
-				if (!Repository.isDestroyed) {
-					const commonAncestorId = await Repository.moveTreeNode(dragRowRecord, dropRowRecord.id);
-					const commonAncestorDatum = getDatumById(commonAncestorId);
-					reloadNode(commonAncestorDatum.item);
-				}
-			} else {
-
-				throw Error('Not yet implemented');
-				// function arrayMove(arr, fromIndex, toIndex) {
-				// 	var element = arr[fromIndex];
-				// 	arr.splice(fromIndex, 1);
-				// 	arr.splice(toIndex, 0, element);
-				// }
-				// arrayMove(data, dragNodeIx, finalDropIx);
-			}
 		};
 
 	useEffect(() => {
@@ -1268,7 +1309,7 @@ function TreeComponent(props) {
 		Repository.on('load', setFalse);
 		Repository.on('loadRootNodes', setFalse);
 		Repository.on('loadRootNodes', buildAndSetTreeNodeData);
-		Repository.on('add', buildAndSetTreeNodeData);
+		Repository.on('add', buildAndSetOneTreeNodeData);
 		Repository.on('changeFilters', reloadTree);
 		Repository.on('changeSorters', reloadTree);
 
@@ -1284,7 +1325,7 @@ function TreeComponent(props) {
 			Repository.off('load', setFalse);
 			Repository.off('loadRootNodes', setFalse);
 			Repository.off('loadRootNodes', buildAndSetTreeNodeData);
-			Repository.off('add', buildAndSetTreeNodeData);
+			Repository.off('add', buildAndSetOneTreeNodeData);
 			Repository.off('changeFilters', reloadTree);
 			Repository.off('changeSorters', reloadTree);
 		};
@@ -1331,8 +1372,8 @@ function TreeComponent(props) {
 	}
 	
 	const
-		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [Repository?.hash, treeSearchValue, isDragMode, getTreeNodeData()]),
-		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isDragMode, getTreeNodeData()]);
+		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [Repository?.hash, treeSearchValue, getTreeNodeData()]),
+		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, getTreeNodeData()]);
 
 	if (!isReady) {
 		return <CenterBox>
@@ -1365,18 +1406,10 @@ function TreeComponent(props) {
 		w-full
 		min-w-[300px]
 	`;
-	if (isDragMode) {
-		className += `
-			${styles.GRID_REORDER_BORDER_COLOR}
-			${styles.GRID_REORDER_BORDER_WIDTH}
-			${styles.GRID_REORDER_BORDER_STYLE}
-		`;
+	if (isLoading) {
+		className += ' border-t-2 border-[#f00]';
 	} else {
-		if (isLoading) {
-			className += ' border-t-2 border-[#f00]';
-		} else {
-			className += ' border-t-1 border-grey-300';
-		}
+		className += ' border-t-1 border-grey-300';
 	}
 	if (props.className) {
 		className += ' ' + props.className;
@@ -1394,9 +1427,7 @@ function TreeComponent(props) {
 				<VStack
 					ref={treeRef}
 					onClick={() => {
-						if (!isDragMode) {
-							deselectAll();
-						}
+						deselectAll();
 					}}
 					className="Tree-deselector w-full flex-1 p-1 bg-white"
 				>
@@ -1426,15 +1457,17 @@ export const Tree = withComponent(
 							withEvents(
 								withData(
 									withPermissions(
-										// withMultiSelection(
-											withSelection(
-												withFilters(
-													withContextMenu(
-														TreeComponent
+										withDropTarget(
+											// withMultiSelection(
+												withSelection(
+													withFilters(
+														withContextMenu(
+															TreeComponent
+														)
 													)
 												)
-											)
-										// )
+											// )
+										)
 									)
 								)
 							)
@@ -1446,20 +1479,22 @@ export const SideTreeEditor = withComponent(
 										withEvents(
 											withData(
 												withPermissions(
-													// withMultiSelection(
-														withSelection(
-															withSideEditor(
-																withFilters(
-																	withPresetButtons(
-																		withContextMenu(
-																			TreeComponent
+													withDropTarget(
+														// withMultiSelection(
+															withSelection(
+																withSideEditor(
+																	withFilters(
+																		withPresetButtons(
+																			withContextMenu(
+																				TreeComponent
+																			)
 																		)
-																	)
-																),
-																true // isTree
+																	),
+																	true // isTree
+																)
 															)
-														)
-													// )
+														// )
+													)
 												)
 											)
 										)
@@ -1471,20 +1506,22 @@ export const WindowedTreeEditor = withComponent(
 										withEvents(
 											withData(
 												withPermissions(
-													// withMultiSelection(
-														withSelection(
-															withWindowedEditor(
-																withFilters(
-																	withPresetButtons(
-																		withContextMenu(
-																			TreeComponent
+													withDropTarget(
+														// withMultiSelection(
+															withSelection(
+																withWindowedEditor(
+																	withFilters(
+																		withPresetButtons(
+																			withContextMenu(
+																				TreeComponent
+																			)
 																		)
-																	)
-																),
-																true // isTree
+																	),
+																	true // isTree
+																)
 															)
-														)
-													// )
+														// )
+													)
 												)
 											)
 										)