feat: dropping items on empty trees (#182)

Author: lukasbach

packages/core/src/controlledEnvironment/DragAndDropProvider.tsx

@@ -161,6 +161,7 @@ export const DragAndDropProvider: React.FC<React.PropsWithChildren> = ({
   const onDragOverTreeHandler = useOnDragOverTreeHandler(
     dragCode,
     setDragCode,
+    draggingItems,
     itemHeight,
     setDraggingPosition,
     performDrag

packages/core/src/controlledEnvironment/useCanDropAt.ts

@@ -11,6 +11,10 @@ export const useCanDropAt = () => {
         if (!environment.canReorderItems) {
           return false;
         }
+      } else if (draggingPosition.targetType === 'root') {
+        if (!environment.canDropOnFolder) {
+          return false;
+        }
       } else {
         const resolvedItem = environment.items[draggingPosition.targetItem];
         if (

packages/core/src/controlledEnvironment/useOnDragOverTreeHandler.ts

@@ -22,8 +22,19 @@ const getHoveringPosition = (
 ) => {
   const hoveringPosition = (clientY - treeTop) / itemHeight;
 
+  const treeLinearItems = linearItems[treeId];
   const linearIndex = Math.floor(hoveringPosition);
-  const targetLinearItem = linearItems[treeId][linearIndex];
+
+  if (linearIndex > treeLinearItems.length - 1) {
+    return {
+      linearIndex: treeLinearItems.length - 1,
+      targetItem: treeLinearItems[treeLinearItems.length - 1].item,
+      offset: 'bottom',
+      targetLinearItem: treeLinearItems[treeLinearItems.length - 1],
+    } as const;
+  }
+
+  const targetLinearItem = treeLinearItems[linearIndex];
   const targetItem = items[targetLinearItem.item];
   let offset: 'top' | 'bottom' | undefined;
 
@@ -42,6 +53,7 @@ const getHoveringPosition = (
 export const useOnDragOverTreeHandler = (
   lastDragCode: string,
   setLastDragCode: (code: string) => void,
+  draggingItems: TreeItem[] | undefined,
   itemHeight: number,
   onDragAtPosition: (draggingPosition: DraggingPosition | undefined) => void,
   onPerformDrag: (draggingPosition: DraggingPosition) => void
@@ -53,7 +65,7 @@ export const useOnDragOverTreeHandler = (
     linearItems,
     items,
     canReorderItems,
-    viewState,
+    trees,
   } = useTreeEnvironment();
   const getParentOfLinearItem = useGetGetParentOfLinearItem();
 
@@ -63,6 +75,10 @@ export const useOnDragOverTreeHandler = (
       treeId: string,
       containerRef: React.MutableRefObject<HTMLElement | undefined>
     ) => {
+      if (!draggingItems) {
+        return;
+      }
+
       if (!canDragAndDrop) {
         return;
       }
@@ -78,6 +94,18 @@ export const useOnDragOverTreeHandler = (
       const treeBb = containerRef.current.getBoundingClientRect();
       const outsideContainer = isOutsideOfContainer(e, treeBb);
 
+      if (linearItems[treeId].length === 0) {
+        // Empty tree
+        onPerformDrag({
+          targetType: 'root',
+          treeId,
+          depth: 0,
+          linearIndex: 0,
+          targetItem: trees[treeId].rootItem,
+        });
+        return;
+      }
+
       let { linearIndex, offset } = getHoveringPosition(
         e.clientY,
         treeBb.top,
@@ -130,7 +158,11 @@ export const useOnDragOverTreeHandler = (
 
       const parent = getParentOfLinearItem(linearIndex, treeId);
 
-      if (viewState[treeId]?.selectedItems?.includes(targetItem.item)) {
+      if (
+        draggingItems.some(
+          draggingItem => draggingItem.index === targetItem.item
+        )
+      ) {
         return;
       }
 
@@ -178,6 +210,7 @@ export const useOnDragOverTreeHandler = (
       canDropOnFolder,
       canDropOnNonFolder,
       canReorderItems,
+      draggingItems,
       getParentOfLinearItem,
       itemHeight,
       items,
@@ -186,7 +219,7 @@ export const useOnDragOverTreeHandler = (
       onDragAtPosition,
       onPerformDrag,
       setLastDragCode,
-      viewState,
+      trees,
     ]
   );
 };

packages/core/src/renderers/createDefaultRenderers.tsx

@@ -173,7 +173,12 @@ export const createDefaultRenderers = (
         info.areItemsSelected && 'rct-tree-root-itemsselected'
       )}
     >
-      <div {...containerProps}>{children}</div>
+      <div
+        {...containerProps}
+        style={{ minHeight: '30px', ...containerProps.style }}
+      >
+        {children}
+      </div>
     </div>
   ),
   renderItemsContainer: ({ children, containerProps }) => (

packages/core/src/stories/BasicExamples.stories.tsx

@@ -206,6 +206,78 @@ export const MultipleTrees = () => (
   </UncontrolledTreeEnvironment>
 );
 
+export const DropOnEmptyTree = () => (
+  <UncontrolledTreeEnvironment<string>
+    canDragAndDrop
+    canDropOnFolder
+    canReorderItems
+    dataProvider={
+      new StaticTreeDataProvider(
+        {
+          ...longTree.items,
+          empty: {
+            data: 'Empty Folder',
+            index: 'empty',
+            isFolder: true,
+          },
+        },
+        (item, data) => ({
+          ...item,
+          data,
+        })
+      )
+    }
+    getItemTitle={item => item.data}
+    viewState={{
+      'tree-1': {},
+    }}
+    renderTreeContainer={({ children, containerProps, info }) => (
+      <div
+        className={[
+          'rct-tree-root',
+          info.isFocused && 'rct-tree-root-focus',
+          info.isRenaming && 'rct-tree-root-renaming',
+          info.areItemsSelected && 'rct-tree-root-itemsselected',
+        ].join(' ')}
+      >
+        <div
+          {...containerProps}
+          style={{ minHeight: '400px', ...containerProps.style }}
+        >
+          {children}
+        </div>
+      </div>
+    )}
+  >
+    <div
+      style={{
+        display: 'flex',
+        backgroundColor: '#D8DEE9',
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+        padding: '20px 0',
+      }}
+    >
+      <div
+        style={{
+          width: '28%',
+          backgroundColor: 'white',
+        }}
+      >
+        <Tree treeId="tree-1" rootItem="root" treeLabel="Tree 1" />
+      </div>
+      <div
+        style={{
+          width: '28%',
+          backgroundColor: 'white',
+        }}
+      >
+        <Tree treeId="tree-2" rootItem="empty" treeLabel="Tree 2" />
+      </div>
+    </div>
+  </UncontrolledTreeEnvironment>
+);
+
 export const SwitchMountedTree = () => {
   const [showFirstTree, setShowFirstTree] = useState(false);
   return (

packages/core/src/tree/TreeManager.tsx

@@ -32,24 +32,22 @@ export const TreeManager = (): JSX.Element => {
 
   const rootChildren = environment.items[rootItem].children;
 
-  if (!rootChildren) {
-    throw Error(`Root ${rootItem} does not contain any children`);
-  }
-
   const treeChildren = (
     <>
       <MaybeLiveDescription />
       <TreeItemChildren depth={0} parentId={treeId}>
-        {rootChildren}
+        {rootChildren ?? []}
       </TreeItemChildren>
       <DragBetweenLine treeId={treeId} />
       <SearchInput containerRef={containerRef.current} />
     </>
   );
 
   const containerProps: HTMLProps<any> = {
-    // onDragOver: createOnDragOverHandler(environment, containerRef, lastHoverCode, getLinearItems, rootItem, treeId),
-    onDragOver: e => dnd.onDragOverTreeHandler(e as any, treeId, containerRef),
+    onDragOver: e => {
+      e.preventDefault(); // Allow drop. Also implicitly set by items, but needed here as well for dropping on empty space
+      dnd.onDragOverTreeHandler(e as any, treeId, containerRef);
+    },
     onMouseDown: () => dnd.abortProgrammaticDrag(),
     ref: containerRef,
     style: { position: 'relative' },

packages/core/src/tree/resolveLiveDescriptor.ts

@@ -33,7 +33,10 @@ export const resolveLiveDescriptor = (
         if (!dnd.draggingPosition) {
           return 'None';
         }
-        if (dnd.draggingPosition.targetType === 'item') {
+        if (
+          dnd.draggingPosition.targetType === 'item' ||
+          dnd.draggingPosition.targetType === 'root'
+        ) {
           return `within ${getItemTitle(dnd.draggingPosition.targetItem)}`;
         }
         const parentItem = environment.items[dnd.draggingPosition.parentItem];

packages/core/src/types.ts

@@ -300,25 +300,32 @@ export interface DragAndDropContextProps<T = any> {
 
 export type DraggingPosition =
   | DraggingPositionItem
-  | DraggingPositionBetweenItems;
+  | DraggingPositionBetweenItems
+  | DreaggingPositionRoot;
 
 export interface AbstractDraggingPosition {
-  targetType: 'item' | 'between-items';
+  targetType: 'item' | 'between-items' | 'root';
   treeId: string;
-  parentItem: TreeItemIndex;
   linearIndex: number;
   depth: number;
 }
 
 export interface DraggingPositionItem extends AbstractDraggingPosition {
   targetType: 'item';
   targetItem: TreeItemIndex;
+  parentItem: TreeItemIndex;
 }
 
 export interface DraggingPositionBetweenItems extends AbstractDraggingPosition {
   targetType: 'between-items';
   childIndex: number;
   linePosition: 'top' | 'bottom';
+  parentItem: TreeItemIndex;
+}
+
+export interface DreaggingPositionRoot extends AbstractDraggingPosition {
+  targetType: 'root';
+  targetItem: TreeItemIndex;
 }
 
 export interface ControlledTreeEnvironmentProps<

packages/core/src/uncontrolledEnvironment/UncontrolledTreeEnvironment.tsx

@@ -126,7 +126,6 @@ export const UncontrolledTreeEnvironment = React.forwardRef<
           const parent = Object.values(currentItems).find(potentialParent =>
             potentialParent.children?.includes(item.index)
           );
-          const newParent = currentItems[target.parentItem];
 
           if (!parent) {
             throw Error(`Could not find parent of item "${item.index}"`);
@@ -138,7 +137,7 @@ export const UncontrolledTreeEnvironment = React.forwardRef<
             );
           }
 
-          if (target.targetType === 'item') {
+          if (target.targetType === 'item' || target.targetType === 'root') {
             if (target.targetItem === parent.index) {
               // NOOP
             } else {
@@ -156,6 +155,7 @@ export const UncontrolledTreeEnvironment = React.forwardRef<
               );
             }
           } else {
+            const newParent = currentItems[target.parentItem];
             const newParentChildren = [...(newParent.children ?? [])].filter(
               child => child !== item.index
             );

packages/docs/docs/changelog.mdx

@@ -30,6 +30,9 @@ were renamed alongside to match.
   the previous selection range should be cleared before selecting the new range.
 - Removed unnecessary memoization for event handlers, favoring stable callbacks stored in refs instead.
 - Fixed a bug where renaming an item would make the page loose focus of the active tree.
+- Items can now be dropped on empty trees. The tree container will need to be rendered with a minimum height for this
+  to work, in the default renderers the container will now render with a minimum height of 30px, which can be adjusted
+  in custom renderers.
 
 ### Other Changes