Scroll container when dragging near edges

Author: fritz-c

README.md

@@ -57,6 +57,7 @@ onMoveNode                | func           |                     |          | Ca
 onVisibilityToggle        | func           |                     |          | Called after children nodes collapsed or expanded. <div>`({ treeData: object[], node: object, expanded: bool }): void`</div>
 reactVirtualizedListProps | object         |                     |          | Custom properties to hand to the [react-virtualized list](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types)
 rowHeight                 | number or func | `62`                |          | Used by react-virtualized. Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`
+slideRegionSize           | number         | `100`               |          | Size in px of the region near the edges that initiates scrolling on dragover.
 scaffoldBlockPxWidth      | number         | `44`                |          | The width of the blocks containing the lines representing the structure of the tree.
 nodeContentRenderer       | any            | NodeRendererDefault |          | Override the default component for rendering nodes (but keep the scaffolding generator) This is an advanced option for complete customization of the appearance. It is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed.
 

src/react-sortable-tree.js

@@ -46,6 +46,7 @@ class ReactSortableTree extends Component {
             rows: this.getRows(props.treeData),
             searchMatches: [],
             searchFocusTreeIndex: null,
+            scrollToPixel: null,
         };
 
         this.toggleChildrenVisibility = this.toggleChildrenVisibility.bind(this);
@@ -286,17 +287,34 @@ class ReactSortableTree extends Component {
         });
     }
 
+    scrollBy(x, y) {
+        if (!this.containerRef) {
+            return;
+        }
+
+        if (x !== 0) {
+            this.containerRef.getElementsByClassName(styles.virtualScrollOverride)[0].scrollLeft += x;
+        }
+
+        if (y !== 0) {
+            this.scrollTop = this.scrollTop ? (this.scrollTop + y) : y;
+            this.setState({ scrollToPixel: this.scrollTop });
+        }
+    }
+
     render() {
         const {
             style,
             className,
             innerStyle,
             rowHeight,
+            _connectDropTarget,
         } = this.props;
         const {
             rows,
             searchMatches,
             searchFocusTreeIndex,
+            scrollToPixel,
         } = this.state;
 
         // Get indices for rows that match the search conditions
@@ -306,10 +324,11 @@ class ReactSortableTree extends Component {
         // Seek to the focused search result if there is one specified
         const scrollToInfo = searchFocusTreeIndex !== null ? { scrollToIndex: searchFocusTreeIndex } : {};
 
-        return (
+        return _connectDropTarget(
             <div
                 className={styles.tree + (className ? ` ${className}` : '')}
                 style={{ height: '100%', ...style }}
+                ref={(el) => { this.containerRef = el; }}
             >
                 <AutoSizer>
                     {({height, width}) => (
@@ -318,6 +337,8 @@ class ReactSortableTree extends Component {
                             scrollToAlignment="start"
                             className={styles.virtualScrollOverride}
                             width={width}
+                            scrollTop={scrollToPixel}
+                            onScroll={({ scrollTop }) => { this.scrollTop = scrollTop; }}
                             height={height}
                             style={innerStyle}
                             rowCount={rows.length}
@@ -412,6 +433,9 @@ ReactSortableTree.propTypes = {
     // height of a row given its index: `({ index: number }): number`
     rowHeight: PropTypes.oneOfType([ PropTypes.number, PropTypes.func ]),
 
+    // Size in px of the region near the edges that initiates scrolling on dragover
+    slideRegionSize: PropTypes.number.isRequired, // eslint-disable-line react/no-unused-prop-types
+
     // Custom properties to hand to the react-virtualized list
     // https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types
     reactVirtualizedListProps: PropTypes.object,
@@ -463,12 +487,16 @@ ReactSortableTree.propTypes = {
 
     // Called after children nodes collapsed or expanded.
     onVisibilityToggle: PropTypes.func,
+
+    // Injected by react-dnd
+    _connectDropTarget: PropTypes.func.isRequired,
 };
 
 ReactSortableTree.defaultProps = {
     getNodeKey: defaultGetNodeKey,
     nodeContentRenderer: NodeRendererDefault,
     rowHeight: 62,
+    slideRegionSize: 100,
     scaffoldBlockPxWidth: 44,
     style: {},
     innerStyle: {},

src/react-sortable-tree.scss

@@ -9,9 +9,6 @@
  * Extra class applied to VirtualScroll through className prop
  */
 .virtualScrollOverride {
-    overflow-x: visible !important;
-    overflow-y: auto !important;
-
     * {
         box-sizing: border-box;
     }

src/utils/drag-and-drop-utils.js

@@ -9,7 +9,7 @@ import {
     getDepth,
 } from './tree-data-utils';
 
-const myDragSource = {
+const nodeDragSource = {
     beginDrag(props) {
         props.startDrag(props);
 
@@ -82,7 +82,7 @@ function canDrop(dropTargetProps, monitor, isHover = false) {
     );
 }
 
-const myDropTarget = {
+const nodeDropTarget = {
     drop(dropTargetProps, monitor) {
         return {
             node:             monitor.getItem().node,
@@ -108,15 +108,93 @@ const myDropTarget = {
     canDrop,
 };
 
-function dragSourcePropInjection(connect, monitor) {
+const scrollDropTarget = {
+    hover(props, monitor, component) {
+        const cancelAnimationFrame = window.cancelAnimationFrame || (timeout => clearTimeout(timeout));
+        const requestAnimationFrame = window.requestAnimationFrame || (func => setTimeout(func, 1000 / 60));
+
+        // If already scrolling, stop the previous scroll loop
+        if (this.lastScroll) {
+            cancelAnimationFrame(this.lastScroll);
+            this.lastScroll = null;
+            clearTimeout(this.removeTimeout);
+        }
+
+        const slideRegionSize = component.props.slideRegionSize;
+        const { x: dragXOffset, y: dragYOffset } = monitor.getClientOffset();
+        const {
+            top:    containerTop,
+            bottom: containerBottom,
+            left:   containerLeft,
+            right:  containerRight,
+        } = component.containerRef.getBoundingClientRect();
+        let yScrollDirection = 0;
+        let yScrollMagnitude = 0;
+        const fromTop = dragYOffset - slideRegionSize - Math.max(containerTop, 0);
+        if (fromTop <= 0) {
+            // Move up
+            yScrollDirection = -1;
+            yScrollMagnitude = Math.sqrt(-1 * fromTop);
+        } else {
+            const fromBottom = dragYOffset + slideRegionSize - Math.min(containerBottom, window.innerHeight);
+            if (fromBottom >= 0) {
+                // Move down
+                yScrollDirection = 1;
+                yScrollMagnitude = Math.sqrt(fromBottom);
+            }
+        }
+
+        let xScrollDirection = 0;
+        let xScrollMagnitude = 0;
+        const fromLeft = dragXOffset - slideRegionSize - Math.max(containerLeft, 0);
+        if (fromLeft <= 0) {
+            // Move up
+            xScrollDirection = -1;
+            xScrollMagnitude = Math.ceil(Math.sqrt(-1 * fromLeft));
+        } else {
+            const fromRight = dragXOffset + slideRegionSize - Math.min(containerRight, window.innerWidth);
+            if (fromRight >= 0) {
+                // Move down
+                xScrollDirection = 1;
+                xScrollMagnitude = Math.ceil(Math.sqrt(fromRight));
+            }
+        }
+
+        // Don't do anything if there is no scroll operation
+        if (xScrollDirection === 0 && yScrollDirection === 0) {
+            return;
+        }
+
+        // Indefinitely scrolls the container at a constant rate
+        const doScroll = () => {
+            component.scrollBy(xScrollDirection * xScrollMagnitude, yScrollDirection * yScrollMagnitude);
+            this.lastScroll = requestAnimationFrame(doScroll);
+        };
+
+        // Stop the scroll loop after a period of inactivity
+        this.removeTimeout = setTimeout(() => {
+            cancelAnimationFrame(this.lastScroll);
+            this.lastScroll = null;
+        }, 20);
+
+        // Start the scroll loop
+        this.lastScroll = requestAnimationFrame(doScroll);
+    },
+
+    canDrop() {
+        return false;
+    },
+};
+
+function nodeDragSourcePropInjection(connect, monitor) {
     return {
         connectDragSource:  connect.dragSource(),
         connectDragPreview: connect.dragPreview(),
         isDragging:         monitor.isDragging(),
     };
 }
 
-function dropTargetPropInjection(connect, monitor) {
+function nodeDropTargetPropInjection(connect, monitor) {
     const dragged = monitor.getItem();
     return {
         connectDropTarget: connect.dropTarget(),
@@ -126,14 +204,22 @@ function dropTargetPropInjection(connect, monitor) {
     };
 }
 
+function scrollDropTargetPropInjection(connect) {
+    return {
+        _connectDropTarget: connect.dropTarget(),
+    };
+}
+
 export function dndWrapSource(el) {
-    return dragSource(ItemTypes.HANDLE, myDragSource, dragSourcePropInjection)(el);
+    return dragSource(ItemTypes.HANDLE, nodeDragSource, nodeDragSourcePropInjection)(el);
 }
 
 export function dndWrapTarget(el) {
-    return dropTarget(ItemTypes.HANDLE, myDropTarget, dropTargetPropInjection)(el);
+    return dropTarget(ItemTypes.HANDLE, nodeDropTarget, nodeDropTargetPropInjection)(el);
 }
 
 export function dndWrapRoot(el) {
-    return dragDropContext(HTML5Backend)(el);
+    return dragDropContext(HTML5Backend)(
+        dropTarget(ItemTypes.HANDLE, scrollDropTarget, scrollDropTargetPropInjection)(el)
+    );
 }