Track new/deleted files in project view.

Refresh now works, but nodes will be re-used instead of generating a completely new tree.

js/project/node.js

@@ -11,6 +11,15 @@ define([
   //TODO: implement a polling-based watch for directories
   //TODO: pull the blacklist and use it during readdir()
   
+  var fileListSort = function(a, b) {
+    if (a.isDir != b.isDir) {
+      return ~~b.isDir - ~~a.isDir;
+    }
+    if (a.name < b.name) return -1;
+    if (a.name > b.name) return 1;
+    return 0;
+  };
+  
   var noop = function() {};
   var guid = 0;
   
@@ -90,6 +99,8 @@ define([
         ul.className = "children";
         this.element.append(ul);
       }
+      if (!this.children.length) return done();
+      this.children.sort(fileListSort);
       M.map(this.children, function(item, i, c) {
         if (!item.element) {
           var li = document.createElement("li");
@@ -101,24 +112,38 @@ define([
     },
     readdir: function(done) {
       if (!this.isDir) return done();
-      //TODO: track entries, compare to existing, do not duplicate
       var self = this;
       var reader = this.entry.createReader();
       var entries = [];
+      var existing = {};
+      this.children.forEach(function(child) {
+        existing[child.name] = child;
+      });
       var collect = function(list) {
         if (!list.length) return complete();
         entries.push.apply(entries, list);
         reader.readEntries(collect);
       };
       var complete = function() {
+        var matched = [];
+        var added = [];
+        var oldChildren = self.children;
         self.children = entries.map(function(entry) {
+          if (existing[entry.name]) {
+            return existing[entry.name];
+          }
           return new Node(entry);
         });
+        //cull files that disappeared
+        oldChildren.forEach(function(child) {
+          if (self.children.indexOf(child) == -1) {
+            if (child.element) child.element.remove();
+          }
+        })
         self.isDirty = false;
         done();
       };
       reader.readEntries(collect);
-      
     },
     walk: function(f, done) {
       M.map(this.children, function(node, i, c) {

js/project/tree.js

@@ -4,8 +4,9 @@ define([
   "util/elementData",
   "util/i18n",
   "ui/contextMenus",
+  "util/manos",
   "util/dom2"
-], function(Node, command, elementData, i18n, context) {
+], function(Node, command, elementData, i18n, context, M) {
   
   var directories = [];
   var pathMap = {};
@@ -69,6 +70,7 @@ define([
     var li = e.target.findUp("li");
     var node = elementData.get(li);
     if (!li || !node) return;
+    e.preventDefault();
     if (e.target.hasClass("directory")) {
       node.toggle();
     } else {
@@ -83,8 +85,11 @@ define([
         dir.readdir.bind(dir),
         dir.render.bind(dir),
         function() { 
-          dir.walk(function(node) {
+          dir.walk(function(node, c) {
             pathMap[node.entry.fullPath] = node;
+            if (node.isDir) {
+              node.readdir(c);
+            } else c();
           });
         }
       );