Drag drop console cells into notebook

examples/notebook/package.json

@@ -12,11 +12,11 @@
     "@jupyterlab/completer": "^0.19.1",
     "@jupyterlab/docmanager": "^0.19.1",
     "@jupyterlab/docregistry": "^0.19.1",
+    "@jupyterlab/mathjax2": "^0.7.1",
     "@jupyterlab/notebook": "^0.19.2",
     "@jupyterlab/rendermime": "^0.19.1",
     "@jupyterlab/services": "^3.2.1",
     "@jupyterlab/theme-light-extension": "^0.19.1",
-    "@jupyterlab/mathjax2": "^0.7.1",
     "@phosphor/commands": "^1.6.1",
     "@phosphor/widgets": "^1.6.0",
     "es6-promise": "~4.1.1"

packages/cells/package.json

@@ -40,9 +40,11 @@
     "@jupyterlab/outputarea": "^0.19.1",
     "@jupyterlab/rendermime": "^0.19.1",
     "@jupyterlab/services": "^3.2.1",
+    "@phosphor/algorithm": "^1.1.2",
     "@phosphor/coreutils": "^1.3.0",
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/signaling": "^1.2.2",
+    "@phosphor/virtualdom": "^1.1.2",
     "@phosphor/widgets": "^1.6.0",
     "react": "~16.4.2"
   },

packages/cells/src/celldragutils.ts

@@ -0,0 +1,210 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/**
+ * This module contains some utility functions to operate on cells. This
+ * could be shared by widgets that contain cells, like the CodeConsole or
+ * Notebook widgets.
+ */
+
+import { each, IterableOrArrayLike } from '@phosphor/algorithm';
+import { ICodeCellModel } from './model';
+import { Cell } from './widget';
+import { h, VirtualDOM } from '@phosphor/virtualdom';
+import { nbformat } from '@jupyterlab/coreutils';
+
+/**
+ * Constants for drag
+ */
+
+/**
+ * The threshold in pixels to start a drag event.
+ */
+const DRAG_THRESHOLD = 5;
+/**
+ * The class name added to drag images.
+ */
+const DRAG_IMAGE_CLASS = 'jp-dragImage';
+
+/**
+ * The class name added to singular drag images
+ */
+const SINGLE_DRAG_IMAGE_CLASS = 'jp-dragImage-singlePrompt';
+
+/**
+ * The class name added to the drag image cell content.
+ */
+const CELL_DRAG_CONTENT_CLASS = 'jp-dragImage-content';
+
+/**
+ * The class name added to the drag image cell content.
+ */
+const CELL_DRAG_PROMPT_CLASS = 'jp-dragImage-prompt';
+
+/**
+ * The class name added to the drag image cell content.
+ */
+const CELL_DRAG_MULTIPLE_BACK = 'jp-dragImage-multipleBack';
+
+export namespace CellDragUtils {
+  export type ICellTargetArea = 'input' | 'prompt' | 'cell' | 'unknown';
+
+  /**
+   * Find the cell index containing the target html element.
+   * This function traces up the DOM hierarchy to find the root cell
+   * node. Then find the corresponding child and select it.
+   *
+   * @param node - the cell node or a child of the cell node.
+   * @param cells - an iterable of Cells
+   * @param isCellNode - a function that takes in a node and checks if
+   * it is a cell node.
+   *
+   * @returns index of the cell we're looking for. Returns -1 if
+   * the cell is not founds
+   */
+  export function findCell(
+    node: HTMLElement,
+    cells: IterableOrArrayLike<Cell>,
+    isCellNode: (node: HTMLElement) => boolean
+  ): number {
+    let cellIndex: number = -1;
+    while (node && node.parentElement) {
+      if (isCellNode(node)) {
+        each(cells, (cell, index) => {
+          if (cell.node === node) {
+            cellIndex = index;
+            return false;
+          }
+        });
+        break;
+      }
+      node = node.parentElement;
+    }
+    return cellIndex;
+  }
+
+  /**
+   * Detect which part of the cell triggered the MouseEvent
+   *
+   * @param cell - The cell which contains the MouseEvent's target
+   * @param target - The DOM node which triggered the MouseEvent
+   */
+  export function detectTargetArea(
+    cell: Cell,
+    target: HTMLElement
+  ): ICellTargetArea {
+    let targetArea: ICellTargetArea = null;
+    if (cell) {
+      if (cell.editorWidget.node.contains(target)) {
+        targetArea = 'input';
+      } else if (cell.promptNode.contains(target)) {
+        targetArea = 'prompt';
+      } else {
+        targetArea = 'cell';
+      }
+    } else {
+      targetArea = 'unknown';
+    }
+    return targetArea;
+  }
+
+  /**
+   * Detect if a drag event should be started. This is down if the
+   * mouse is moved beyond a certain distance (DRAG_THRESHOLD).
+   *
+   * @param prevX - X Coordinate of the mouse pointer during the mousedown event
+   * @param prevY - Y Coordinate of the mouse pointer during the mousedown event
+   * @param nextX - Current X Coordinate of the mouse pointer
+   * @param nextY - Current Y Coordinate of the mouse pointer
+   */
+  export function shouldStartDrag(
+    prevX: number,
+    prevY: number,
+    nextX: number,
+    nextY: number
+  ): boolean {
+    let dx = Math.abs(nextX - prevX);
+    let dy = Math.abs(nextY - prevY);
+    return dx >= DRAG_THRESHOLD || dy >= DRAG_THRESHOLD;
+  }
+
+  /**
+   * Create an image for the cell(s) to be dragged
+   *
+   * @param activeCell - The cell from where the drag event is triggered
+   * @param selectedCells - The cells to be dragged
+   */
+  export function createCellDragImage(
+    activeCell: Cell,
+    selectedCells: nbformat.ICell[]
+  ): HTMLElement {
+    const count = selectedCells.length;
+    let promptNumber: string;
+    if (activeCell.model.type === 'code') {
+      let executionCount = (activeCell.model as ICodeCellModel).executionCount;
+      promptNumber = ' ';
+      if (executionCount) {
+        promptNumber = executionCount.toString();
+      }
+    } else {
+      promptNumber = '';
+    }
+
+    const cellContent = activeCell.model.value.text.split('\n')[0].slice(0, 26);
+    if (count > 1) {
+      if (promptNumber !== '') {
+        return VirtualDOM.realize(
+          h.div(
+            h.div(
+              { className: DRAG_IMAGE_CLASS },
+              h.span(
+                { className: CELL_DRAG_PROMPT_CLASS },
+                '[' + promptNumber + ']:'
+              ),
+              h.span({ className: CELL_DRAG_CONTENT_CLASS }, cellContent)
+            ),
+            h.div({ className: CELL_DRAG_MULTIPLE_BACK }, '')
+          )
+        );
+      } else {
+        return VirtualDOM.realize(
+          h.div(
+            h.div(
+              { className: DRAG_IMAGE_CLASS },
+              h.span({ className: CELL_DRAG_PROMPT_CLASS }),
+              h.span({ className: CELL_DRAG_CONTENT_CLASS }, cellContent)
+            ),
+            h.div({ className: CELL_DRAG_MULTIPLE_BACK }, '')
+          )
+        );
+      }
+    } else {
+      if (promptNumber !== '') {
+        return VirtualDOM.realize(
+          h.div(
+            h.div(
+              { className: `${DRAG_IMAGE_CLASS} ${SINGLE_DRAG_IMAGE_CLASS}` },
+              h.span(
+                { className: CELL_DRAG_PROMPT_CLASS },
+                '[' + promptNumber + ']:'
+              ),
+              h.span({ className: CELL_DRAG_CONTENT_CLASS }, cellContent)
+            )
+          )
+        );
+      } else {
+        return VirtualDOM.realize(
+          h.div(
+            h.div(
+              { className: `${DRAG_IMAGE_CLASS} ${SINGLE_DRAG_IMAGE_CLASS}` },
+              h.span({ className: CELL_DRAG_PROMPT_CLASS }),
+              h.span({ className: CELL_DRAG_CONTENT_CLASS }, cellContent)
+            )
+          )
+        );
+      }
+    }
+  }
+}

packages/cells/src/index.ts

@@ -5,6 +5,7 @@
 
 import '../style/index.css';
 
+export * from './celldragutils';
 export * from './collapser';
 export * from './headerfooter';
 export * from './inputarea';

packages/console/package.json

@@ -41,6 +41,7 @@
     "@phosphor/algorithm": "^1.1.2",
     "@phosphor/coreutils": "^1.3.0",
     "@phosphor/disposable": "^1.1.2",
+    "@phosphor/dragdrop": "^1.3.0",
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/signaling": "^1.2.2",
     "@phosphor/widgets": "^1.6.0"