Merge pull request #1787 from blink1073/use-drag-scroll

Use the new phosphor dragscroll capability

src/common/dragscroll.ts

@@ -1,144 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import {
-  IDragEvent
-} from '@phosphor/dragdrop';
-
-
-/**
- * A class that allows scrolling within a drag node.
- */
-export
-class DragScrollHandler {
-  /**
-   * Construct a new scroll handler.
-   */
-  constructor(options: DragScrollHandler.IOptions) {
-    this._node = options.node;
-    this._edgeDistance = options.edgeDistance || 30;
-    this._maxSpeed = options.maxSpeed || 20;
-  }
-
-  /**
-   * Handle scrolling for drag events.
-   *
-   * @param event - The drag event.
-   *
-   * #### Notes
-   * This should be called for all handled drag events during a drag operation
-   * on the node.
-   */
-  handleDragEvent(event: IDragEvent) {
-    switch (event.type) {
-    case 'p-dragleave':
-      if (!this._node.contains(event.relatedTarget as HTMLElement)) {
-        this._clear();
-      }
-      break;
-    case 'p-dragover':
-      this._handleDragOver(event);
-      break;
-    case 'p-drop':
-      this._clear();
-      break;
-    default:
-      break;
-    }
-  }
-
-  /**
-   * Handle a `'p-dragover'` event.
-   */
-  private _handleDragOver(event: IDragEvent) {
-    let yPos = event.clientY;
-    let node = this._node;
-    let rect = node.getBoundingClientRect();
-    let maxSpeed = this._maxSpeed;
-    let edgeDistance = this._edgeDistance;
-    let distanceFromTop = yPos - rect.top;
-    let distanceFromBottom = rect.top + rect.height - yPos;
-
-    // Step 1: Enable/disable scrolling.
-    if ((distanceFromTop <= edgeDistance ||
-         distanceFromBottom <= edgeDistance) &&
-        !this._isScrolling) {
-       // Activate scrolling.
-       this._isScrolling = true;
-       this._scrollAmount = 0;
-       // Update at 60fps.
-       this._scrollInterval = window.setInterval(() => {
-          if (this._scrollAmount === 0) {
-            return;
-          }
-          let prev = node.scrollTop;
-          node.scrollTop += this._scrollAmount;
-          if (node.scrollTop === prev) {
-            this._clear();
-          }
-       }, 16);
-    } else if (distanceFromTop > edgeDistance &&
-               distanceFromBottom > edgeDistance &&
-               this._isScrolling) {
-      // Deactivate scrolling.
-      this._clear();
-    }
-
-    // Step 2: Set scrolling speed.
-    if (this._isScrolling) {
-      // Scrolling is happening so compute the scroll speed.
-      let direction = 1;  // Default to scroll down.
-      let distance = distanceFromBottom;
-      if (distanceFromTop <= edgeDistance) {
-        direction = -1;  // Scroll up.
-        distance = distanceFromTop;
-      }
-      let ratio = distance / edgeDistance;
-      this._scrollAmount = direction * Math.min(1, 1 - ratio) * maxSpeed;
-    }
-  }
-
-  /**
-   * Clear the scroll state.
-   */
-  private _clear(): void {
-    clearInterval(this._scrollInterval);
-    this._isScrolling = false;
-  }
-
-  private _scrollInterval = -1;
-  private _isScrolling = false;
-  private _scrollAmount = 0;
-  private _node: HTMLElement;
-  private _edgeDistance = -1;
-  private _maxSpeed = -1;
-}
-
-
-/**
- * The namespace for `DragScrollHandler` statics.
- */
-export
-namespace DragScrollHandler {
-  /**
-   * The options used to initialize a drag scroll handler.
-   */
-  export
-  interface IOptions {
-    /**
-     * The scrollable node.
-     */
-    node: HTMLElement;
-
-    /**
-     * The distance from the edit in pixels for drag scroll initiation.
-     * The default is 30.
-     */
-    edgeDistance?: number;
-
-    /**
-     * The max scroll speed in pixels per frame.  The default is 20.
-     */
-    maxSpeed?: number;
-  }
-}

src/notebook/widget.ts

@@ -55,10 +55,6 @@ import {
   IEditorMimeTypeService, CodeEditor
 } from '../codeeditor';
 
-import {
-  DragScrollHandler
-} from '../common/dragscroll';
-
 import {
   IChangedArgs
 } from '../common/interfaces';
@@ -669,7 +665,8 @@ class Notebook extends StaticNotebook {
   constructor(options: StaticNotebook.IOptions) {
     super(options);
     this.node.tabIndex = -1;  // Allow the widget to take focus.
-    this._scrollHandler = new DragScrollHandler({ node: this.node });
+    // Allow the node to scroll while dragging items.
+    this.node.setAttribute('data-p-dragscroll', 'true');
   }
 
   /**
@@ -1170,7 +1167,6 @@ class Notebook extends StaticNotebook {
     if (!event.mimeData.hasData(JUPYTER_CELL_MIME)) {
       return;
     }
-    this._scrollHandler.handleDragEvent(event);
     event.preventDefault();
     event.stopPropagation();
     let target = event.target as HTMLElement;
@@ -1190,7 +1186,6 @@ class Notebook extends StaticNotebook {
     if (!event.mimeData.hasData(JUPYTER_CELL_MIME)) {
       return;
     }
-    this._scrollHandler.handleDragEvent(event);
     event.preventDefault();
     event.stopPropagation();
     let elements = this.node.getElementsByClassName(DROP_TARGET_CLASS);
@@ -1213,7 +1208,6 @@ class Notebook extends StaticNotebook {
     if (elements.length) {
       (elements[0] as HTMLElement).classList.remove(DROP_TARGET_CLASS);
     }
-    this._scrollHandler.handleDragEvent(event);
     let target = event.target as HTMLElement;
     let index = this._findCell(target);
     if (index === -1) {
@@ -1230,7 +1224,6 @@ class Notebook extends StaticNotebook {
     if (!event.mimeData.hasData(JUPYTER_CELL_MIME)) {
       return;
     }
-    this._scrollHandler.handleDragEvent(event);
     event.preventDefault();
     event.stopPropagation();
     if (event.proposedAction === 'none') {
@@ -1413,7 +1406,6 @@ class Notebook extends StaticNotebook {
   private _mode: NotebookMode = 'command';
   private _drag: Drag = null;
   private _dragData: { pressX: number, pressY: number, index: number } = null;
-  private _scrollHandler: DragScrollHandler = null;
   private _activeCellChanged = new Signal<this, BaseCellWidget>(this);
   private _stateChanged = new Signal<this, IChangedArgs<any>>(this);
   private _selectionChanged = new Signal<this, void>(this);