Add drag and drop to move items in FileTreeView

src/project/FileTreeView.js

@@ -35,6 +35,7 @@ define(function (require, exports, module) {
         ReactDOM          = require("thirdparty/react-dom"),
         Classnames        = require("thirdparty/classnames"),
         Immutable         = require("thirdparty/immutable"),
+        Menus             = require("command/Menus"),
         _                 = require("thirdparty/lodash"),
         FileUtils         = require("file/FileUtils"),
         LanguageManager   = require("language/LanguageManager"),
@@ -196,6 +197,46 @@ define(function (require, exports, module) {
         }
     };
 
+    /**
+     * This is a mixin that provides drag and drop move function.
+     */
+     var dragAndDrop = {
+         handleDrag: function(e) {
+             // Pass the dragged item path.
+             e.dataTransfer.setData("text", JSON.stringify({
+                 path: this.myPath()
+             }));
+
+             // Close open menus on drag and clear the context, but only if there's a menu open.
+             if ($(".dropdown.open").length > 0) {
+                 Menus.closeAll();
+                 this.props.actions.setContext(null);
+             }
+
+             e.stopPropagation();
+         },
+         handleDrop: function(e) {
+             var data = JSON.parse(e.dataTransfer.getData("text"));
+
+             this.props.actions.moveItem(data.path, this.myPath());
+             this.props.actions.setDraggedOver(null);
+
+             e.stopPropagation();
+         },
+
+         /**
+          * Allow the drop
+          */
+         handleDragOver: function(e) {
+             this.props.actions.setDraggedOver(this.myPath());
+             e.preventDefault();
+         },
+
+         handleDragLeave: function(e) {
+             this.props.actions.setDraggedOver(null);
+         }
+     };
+
     /**
      * @private
      *
@@ -263,9 +304,9 @@ define(function (require, exports, module) {
             }
             // Return true only for mouse down in rename mode.
             if (this.props.entry.get("rename")) {
+                e.preventDefault(); // Disable drag and drop when renaming
                 return;
             }
-            e.preventDefault();
         }
     };
 
@@ -363,7 +404,7 @@ define(function (require, exports, module) {
      * * forceRender: causes the component to run render
      */
     var fileNode = React.createFactory(React.createClass({
-        mixins: [contextSettable, pathComputer, extendable],
+        mixins: [contextSettable, pathComputer, extendable, dragAndDrop],
 
         /**
          * Ensures that we always have a state object.
@@ -499,7 +540,9 @@ define(function (require, exports, module) {
                     className: this.getClasses("jstree-leaf"),
                     onClick: this.handleClick,
                     onMouseDown: this.handleMouseDown,
-                    onDoubleClick: this.handleDoubleClick
+                    onDoubleClick: this.handleDoubleClick,
+                    draggable: true,
+                    onDragStart: this.handleDrag
                 },
                 DOM.ins({
                     className: "jstree-icon"
@@ -639,7 +682,7 @@ define(function (require, exports, module) {
      * * forceRender: causes the component to run render
      */
     directoryNode = React.createFactory(React.createClass({
-        mixins: [contextSettable, pathComputer, extendable],
+        mixins: [contextSettable, pathComputer, extendable, dragAndDrop],
 
         /**
          * We need to update this component if the sort order changes or our entry object
@@ -735,14 +778,17 @@ define(function (require, exports, module) {
 
             var directoryClasses = cx({
                 'jstree-clicked sidebar-selection': entry.get("selected"),
-                'context-node': entry.get("context")
+                'context-node': entry.get("context"),
+                'jstree-draggedOver': entry.get("draggedOver")
             });
 
             var liArgs = [
                 {
                     className: this.getClasses("jstree-" + nodeClass),
                     onClick: this.handleClick,
-                    onMouseDown: this.handleMouseDown
+                    onMouseDown: this.handleMouseDown,
+                    draggable: true,
+                    onDragStart: this.handleDrag
                 },
                 _createAlignedIns(this.props.depth)
             ];
@@ -761,7 +807,10 @@ define(function (require, exports, module) {
                 // Need to flatten the arguments because getIcons returns an array
                 var aArgs = _.flatten([{
                     href: "#",
-                    className: directoryClasses
+                    className: directoryClasses,
+                    onDrop: this.handleDrop,
+                    onDragOver: this.handleDragOver,
+                    onDragLeave: this.handleDragLeave
                 }, thickness, this.getIcons(), this.props.name]);
                 nameDisplay = DOM.a.apply(DOM.a, aArgs);
             }

src/project/FileTreeViewModel.js

@@ -489,6 +489,40 @@ define(function (require, exports, module) {
         this._commit(treeData);
     };
 
+    /**
+     * Removes the item from the oldPath and adds the item in the newPath
+     *
+     * @param {string} oldPath old path of the item
+     * @param {string} newPath new path of the item
+     */
+    FileTreeViewModel.prototype.moveItem = function(oldPath, newPath) {
+        var treeData = this._treeData,
+            oldObjectPath = _filePathToObjectPath(treeData, oldPath),
+            newObjectPath = _filePathToObjectPath(treeData, FileUtils.getParentPath(newPath)),
+            itemName = _.last(oldObjectPath),
+            element;
+
+        // Back up to the parent directory
+        oldObjectPath.pop();
+
+        // Remove the oldPath
+        treeData = treeData.updateIn(oldObjectPath, function (directory) {
+            element = directory.get(itemName);
+            directory = directory.delete(itemName);
+            return directory;
+        });
+
+        // Add the newPath
+        if (treeData.getIn(newObjectPath).get("children")) {
+            newObjectPath.push("children");
+            newObjectPath.push(itemName);
+            treeData = _setIn(treeData, newObjectPath, element);
+        }
+
+
+        this._commit(treeData);
+    };
+
     /**
      * @private
      *

src/project/ProjectManager.js

@@ -116,7 +116,8 @@ define(function (require, exports, module) {
         ERR_TYPE_LOADING_PROJECT_NATIVE = 6,
         ERR_TYPE_MAX_FILES              = 7,
         ERR_TYPE_OPEN_DIALOG            = 8,
-        ERR_TYPE_INVALID_FILENAME       = 9;
+        ERR_TYPE_INVALID_FILENAME       = 9,
+        ERR_TYPE_MOVE                   = 10;
 
     /**
      * @private
@@ -293,6 +294,13 @@ define(function (require, exports, module) {
         this.model.restoreContext();
     };
 
+    /**
+     * See `ProjectModel.setDraggedOver`
+     */
+    ActionCreator.prototype.setDraggedOver = function (path) {
+        this.model.setDraggedOver(path);
+    };
+
     /**
      * See `ProjectModel.startRename`
      */
@@ -368,6 +376,34 @@ define(function (require, exports, module) {
         _saveTreeState();
     };
 
+    /**
+     * Moves the item in the oldPath to the newDirectory directory
+     *
+     * See `ProjectModel.moveItem`
+     */
+    ActionCreator.prototype.moveItem = function(oldPath, newDirectory) {
+        var self = this;
+
+        // Remove selected marker
+        self.setSelected(null);
+
+        this.model.moveItem(oldPath, newDirectory)
+        .fail(function(errorInfo) {
+            // Need to do display the error message on the next event loop turn
+            // because some errors can come up synchronously and then the dialog
+            // is not displayed.
+            window.setTimeout(function () {
+                switch (errorInfo.type) {
+                    // TODO: handle Errors
+                    default:
+                    console.log(errorInfo.type);
+                    _showErrorDialog(ERR_TYPE_MOVE, errorInfo.isFolder, Strings.FILE_EXISTS_ERR, errorInfo.fullPath);
+                    break;
+                }
+            }, 10);
+        });
+    };
+
     /**
      * See `ProjectModel.refresh`
      */
@@ -604,6 +640,11 @@ define(function (require, exports, module) {
             title = StringUtils.format(Strings.INVALID_FILENAME_TITLE, isFolder ? Strings.DIRECTORY_NAME : Strings.FILENAME);
             message = StringUtils.format(Strings.INVALID_FILENAME_MESSAGE, isFolder ? Strings.DIRECTORY_NAMES_LEDE : Strings.FILENAMES_LEDE, error);
             break;
+        case ERR_TYPE_MOVE:
+            // TODO: Change it to handle move errors
+            title = StringUtils.format(Strings.GENERIC_ERROR, titleType);
+            message = StringUtils.format(Strings.GENERIC_ERROR, path);
+            break;
         }
 
         if (title && message) {

src/project/ProjectModel.js

@@ -714,6 +714,20 @@ define(function (require, exports, module) {
         }
     };
 
+    /**
+     * Moves the draggedOver flag
+     *
+     * @param {string} path full path to the folder over which dragging is done
+     */
+    ProjectModel.prototype.setDraggedOver = function(path) {
+        var oldDraggedOverPath = this.makeProjectRelativeIfPossible(this._selections.draggedOver),
+            newDraggedOverPath = this.makeProjectRelativeIfPossible(path);
+
+        this._selections.draggedOver = path;
+
+        this._viewModel.moveMarker("draggedOver", oldDraggedOverPath, newDraggedOverPath);
+    };
+
     /**
      * Gets the currently selected file or directory.
      *
@@ -1239,6 +1253,50 @@ define(function (require, exports, module) {
         this._viewModel.closeSubtree(this.makeProjectRelativeIfPossible(path));
     };
 
+    /**
+     * Moves the item in oldPath to the newDirectory directory
+     * @param {string} oldPath  old path of the item
+     * @param {string} newDirectory path of the directory to move the item
+     * @return {$.Promise} promise resolved when the item is moved
+     */
+    ProjectModel.prototype.moveItem = function(oldPath, newDirectory) {
+        var self = this,
+            d = new $.Deferred(),
+            fileName = FileUtils.getBaseName(oldPath),
+            fullNewPath = newDirectory + fileName;
+
+        // Add trailing slash if directory is moved
+        if (!_pathIsFile(oldPath)) {
+            fullNewPath = _ensureTrailingSlash(fullNewPath);
+        }
+
+        // Reusing the _renameItem for moving item
+        this._renameItem(oldPath, fullNewPath, fileName, !_pathIsFile(fullNewPath)).then(function () {
+            var newDirectoryRelative = self.makeProjectRelativeIfPossible(newDirectory),
+                needsLoading    = !self._viewModel.isPathLoaded(newDirectoryRelative);
+
+            // If directory view not loaded, load it and then update the view
+            if (needsLoading) {
+                self._getDirectoryContents(newDirectory).then(function(contents) {
+                    self._viewModel.setDirectoryContents(newDirectoryRelative, contents);
+                    self._viewModel.moveItem(self.makeProjectRelativeIfPossible(oldPath), self.makeProjectRelativeIfPossible(fullNewPath));
+                });
+            } else {
+                self._viewModel.moveItem(self.makeProjectRelativeIfPossible(oldPath), self.makeProjectRelativeIfPossible(fullNewPath));
+            }
+            d.resolve();
+        }).fail(function (errorType) {
+            var errorInfo = {
+                type: errorType,
+                isFolder: !_pathIsFile(fullNewPath),
+                fullPath: fullNewPath
+            };
+            d.reject(errorInfo);
+        });
+
+        return d.promise();
+    };
+
     /**
      * Toggle the open state of subdirectories.
      * @param {!string}  path        parent directory

src/styles/jsTreeTheme.less

@@ -32,7 +32,7 @@
 .jstree > ul > li { margin-left:0; }
 .jstree-rtl > ul > li { margin-right:0; }
 .jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; }
-.jstree a:focus { outline: none; }
+.jstree a:focus { outline: none; box-shadow: none; }
 .jstree a > ins { height:16px; width:16px; }
 .jstree a > .jstree-icon { margin-right:3px; }
 .jstree-rtl a > .jstree-icon { margin-left:3px; margin-right:0; }
@@ -51,6 +51,10 @@ li.jstree-closed > ul { display:none; }
     text-decoration: none;
 }
 
+.jstree-draggedOver {
+    background-color: @bc-sidebar-selection;
+}
+
 @jstree-icon-backindent: 12px;
 
 /* Make the links in the JS tree the width of the container