preliminaries working

demo/workflowy/index.js

@@ -1,6 +1,6 @@
 
-function WFNode(data, options) {
-  DefaultNode.call(this, data, options)
+function WFNode(data, options, isNew) {
+  DefaultNode.call(this, data, options, isNew)
 }
 
 WFNode.prototype = Object.create(DefaultNode.prototype)

lib/base-node.js

@@ -1,6 +1,7 @@
 
-function BaseNode(data, options) {
+function BaseNode(data, options, isNew) {
   this.name = data.name
+  this.isNew = isNew
   this.o = options
   this.o.keybindings = merge(this.default_keys, options.keys)
 

lib/commands.js

@@ -27,7 +27,7 @@ var commands = {
       var cr = model.create(this.pid, this.index, this.text)
       this.id = cr.node.id
       view.add(cr.node, cr.before)
-      view.startEditing(cr.node.id)
+      // view.startEditing(cr.node.id)
     },
     undo: function (view, model) {
       var ed = view.editing

lib/controller.js

@@ -110,6 +110,18 @@ Controller.prototype = {
       this.executeCommands('paste', [id])
     },
     changed: function (id, attr, value) {
+      if (id === 'new') {
+        var nw = this.view.removeNew()
+        if (value) this.executeCommands('newNode', [nw.pid, nw.index, value])
+        else {
+          if (nw.index == 0) {
+            this.view.setSelection([nw.pid])
+          } else {
+            this.view.setSelection([this.model.ids[nw.pid].children[nw.index-1]])
+          }
+        }
+        return
+      }
       this.executeCommands('changeNodeAttr', [id, attr, value])
     },
     move: function (where, id, target) {

lib/default-node.js

@@ -9,21 +9,21 @@ marked.setOptions({
   smartypants: true
 })
 
-function DefaultNode(data, options) {
-  BaseNode.call(this, data, options)
+function DefaultNode(data, options, isNew) {
+  BaseNode.call(this, data, options, isNew)
 }
 
 DefaultNode.prototype = Object.create(BaseNode.prototype)
 DefaultNode.prototype.constructor = DefaultNode
 // merge(DefaultNode, BaseNode)
 
-function merge(a, b) {
+function tmerge(a, b) {
   for (var c in b) {
     a[c] = b[c]
   }
 }
 
-merge(DefaultNode.prototype, {
+tmerge(DefaultNode.prototype, {
   setInputValue: function (value) {
     var html = value.replace(/</g, '&lt;').replace(/>/g, '&gt;')
     this.input.innerHTML = html;
@@ -77,14 +77,14 @@ merge(DefaultNode.prototype, {
   stopEditing: function () {
     if (!this.editing) return
     var value = this.getInputValue()
-    if (this.name != value) {
+    this.editing = false
+    this.node.replaceChild(this.text, this.input)
+    this.o.doneEditing();
+    if (this.name != value || this.isNew) {
       this.setTextContent(value)
       this.name = value
       this.o.changed('name', this.name)
     }
-    this.editing = false
-    this.node.replaceChild(this.text, this.input)
-    this.o.doneEditing();
   },
 
   isAtStart: function () {

lib/dom-vl.js

@@ -224,7 +224,7 @@ DomViewLayer.prototype = {
 
   /** returns a dom node **/
   bodyFor: function (id, data, bounds) {
-    var dom = new this.o.node(data, bounds)
+    var dom = new this.o.node(data, bounds, id === 'new')
     dom.node.classList.add('listless__body')
     return dom
   },

lib/model.js

@@ -72,6 +72,14 @@ Model.prototype = {
     return cr
   },
 
+  getBefore: function (pid, index) {
+    var before = false
+    if (index < this.ids[pid].children.length - 1) {
+      before = this.ids[pid].children[index + 1]
+    }
+    return before
+  },
+
   // operations
   create: function (pid, index, text) {
     var node = {

lib/view.js

@@ -26,6 +26,8 @@ function View(bindActions, model, ctrl, options) {
   this.ctrl = ctrl
   this.dnd = new DungeonsAndDragons(this.vl, ctrl.actions.move.bind(ctrl))
   this.childrened = {}
+
+  this.newNode = null
   this.attachListeners()
 }
 
@@ -44,7 +46,7 @@ View.prototype = {
     this.root = root
     this.populateChildren(root)
     if (!node.children.length) {
-      this.addNew()
+      this.addNew(this.root, 0)
     }
     this.selectSomething()
     return rootNode
@@ -53,7 +55,26 @@ View.prototype = {
     var targets = this.vl.dropTargets(this.root, this.model, id, true)
     this.dnd.startMoving(targets, id)
   },
-  addNew: function () {
+  addNew: function (pid, index) {
+    this.newNode = {
+      pid: pid,
+      index: index
+    }
+    var before = this.model.getBefore(pid, index-1)
+    this.vl.addNew({
+      id: 'new',
+      data: {name: ''},
+      parent: pid
+    }, this.bindActions('new'), before)
+    // this.setSelection('new')
+    this.vl.body('new').startEditing()
+  },
+  removeNew: function () {
+    var nw = this.newNode
+      , lastchild = !this.model.ids[nw.pid].children.length
+    this.vl.remove('new', nw.pid, lastchild)
+    this.newNode = null
+    return nw
   },
   selectSomething: function () {
     var child
@@ -249,8 +270,8 @@ View.prototype = {
     },
     'new after': function () {
       if (!this.selection.length) return
-      this.ctrl.addAfter(this.selection[0])
-      this.startEditing(this.selection[0])
+      var nw = this.model.idNew(this.selection[0])
+      this.addNew(nw.pid, nw.index)
     },
     // movez!
     'toggle collapse': function () {
@@ -401,7 +422,7 @@ View.prototype = {
     sel = sel.filter(function (id) {
       return !!this.vl.dom[id] && (id !== this.root || !this.o.noSelectRoot)
     }.bind(this))
-    if (!sel.length) return
+    if (!sel.length) sel = [this.root]
     this.vl.clearSelection(this.selection)
     this.selection = sel
     this.vl.showSelection(sel)