strict mode fixes, + allow async plugin loading

Author: jaredly

classy.js

@@ -37,19 +37,24 @@ class Treed {
 
         var store = this.store = new MainStore({
           actions: options.actions,
-          plugins: pluginType(this.options.plugins, 'store'),
-          allPlugins: this.options.plugins,
+          // plugins: pluginType(this.options.plugins, 'store'),
+          // allPlugins: this.options.plugins,
           db: db
         })
-        this.keyManager.attach(store)
-        resolve(store)
+
+        store.init(this.options.plugins, (err) => {
+          if (err) return reject(err)
+          this.keyManager.attach(store)
+          resolve(store)
+        })
       })
     })
   }
 
   on (what, handler) {
     this.store.on(what, handler)
   }
+
   off (what, handler) {
     this.store.on(what, handler)
   }

index.js

@@ -13,6 +13,8 @@ var KeyManager = require('./key-manager')
 var ListView = require('./views/list')
 var MainStore = require('./stores/main')
 
+console.warn('DEPRECATED! Please switch to treed/classy')
+
 function flattenKeySections(keys) {
   var ret = {}
   for (var name in keys) {

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "async": "~0.9.0",
     "bluebird": "~1.2.4",
+    "classnames": "^1.2.0",
     "envify": "~3.0.0",
     "escodegen": "~1.4.1",
     "esprima": "~1.2.2",

plugins/collapse/store.js

@@ -57,6 +57,7 @@ module.exports = {
 
     toggleCollapseDeep: function (id) {
       if (!arguments.length) id = this.view.active
+      let ids
       if (this.view.mode === 'visual') {
         ids = this.view.selection
       } else {
@@ -69,7 +70,7 @@ module.exports = {
         if (!node.children.length) return []
         return [].concat.apply([id], node.children.map(allParents))
       }
-      pedigrees = ids.map(allParents)
+      let pedigrees = ids.map(allParents)
       var commands = pedigrees.map((ids) => {
         return ['setMany', {ids: ids, attr: 'collapsed', values: !this.db.nodes[ids[0]].collapsed}]
       })

plugins/rebase/index.js

@@ -1,4 +1,6 @@
 
+import React from 'react'
+
 var Breadcrumb = require('./breadcrumb')
 
 module.exports = {

plugins/rebase/index.less

@@ -12,7 +12,8 @@
   position: relative;
   cursor: pointer;
   border-radius: 10px;
-  font-family: bold;
+  font-weight: bold;
+  color: #999;
 
   &:hover {
     background-color: #eee;

quickstart.js

@@ -17,20 +17,6 @@ Treed.prototype.quickstart = function (el, options) {
     actions: options.actions || require('./views/list/actions'),
   }).then(() => {
     return this.startView(el, options)
-    /*
-    return new Promise((resolve, reject) => {
-      var viewOptions = extend({
-        keys: options.keys || ListView.keys,
-      }, options.viewOptions)
-      var View = options.View || ListView
-        , props = this.addView(viewOptions)
-
-      React.render(<View {...props}/>, el, function (err) {
-        if (err) return reject(err)
-        resolve(props.store)
-      })
-    })
-    */
   }).catch(error => {
     console.warn('Treed initialization failed!', error)
     throw error

skins/regular/index.less

@@ -154,6 +154,19 @@
   box-sizing: border-box;
   background-color: transparent;
 
+  blockquote {
+    border-left: 5px solid #ccc;
+    padding-left: 10px;
+    margin: 10px 0;
+
+    > p:first-child {
+      margin-top: 0;
+    }
+    > p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
   > *:first-child {
     margin-top: 0;
   }

stores/base.js

@@ -1,4 +1,6 @@
 
+import async from 'async'
+
 var Promise = require('bluebird')
 
 module.exports = BaseStore
@@ -13,23 +15,33 @@ function BaseStore(options) {
     }
   }
 
-  if (options.plugins) {
-    options.plugins.forEach((plugin) => this.addPlugin(plugin, options.allPlugins))
-  }
-  this.allPlugins = options.allPlugins
 }
 
 BaseStore.prototype = {
   actions: {},
 
+  init(plugins, done) {
+    this.allPlugins = plugins || []
+    if (!plugins) return done()
+    const tasks = plugins
+      .map(plugin => plugin.store)
+      .filter(plugin => !!plugin)
+      .map(plugin => this.addPlugin.bind(this, plugin))
+
+    async.parallel(tasks, done)
+    /*
+    if (options.plugins) {
+      options.plugins.forEach((plugin) => this.addPlugin(plugin, options.allPlugins))
+    }
+    */
+
+  },
+
   teardown: function () {
     this._plugin_teardowns.forEach(fn => fn(this))
   },
 
-  addPlugin: function (plugin, allPlugins) {
-    if (plugin.init) {
-      plugin.init(this) // TODO async?
-    }
+  addPlugin: function (plugin, done) {
     if (plugin.teardown) {
       this._plugin_teardowns.push(plugin.teardown)
     }
@@ -38,7 +50,7 @@ BaseStore.prototype = {
       , actions
     if (plugin.actions) {
       if ('function' === typeof plugin.actions) {
-        actions = plugin.actions(allPlugins)
+        actions = plugin.actions(this.allPlugins)
       } else {
         actions = plugin.actions
       }
@@ -52,6 +64,14 @@ BaseStore.prototype = {
         this[name] = plugin.extend[name]
       }
     }
+
+    if (plugin.init) {
+      plugin.init(this) // TODO async?
+    } else if (plugin.asyncInit) {
+      return plugin.asyncInit(this, done)
+    }
+
+    done()
   },
 
   on: function (changes, listener) {

stores/main.js

@@ -190,13 +190,13 @@ MainStore.prototype = extend(Object.create(BaseStore.prototype), {
 
   events: {
     nodeChanged: (id) => 'node:' + id,
-    nodeViewChanged: function (id) { return this.nodeChanged(id) + ':view:' + this.vid },
+    nodeViewChanged(id) { return this.nodeChanged(id) + ':view:' + this.vid },
 
     activeViewChanged: () => 'active-view',
-    activeNodeChanged: function () { return 'active-node:' + this.vid },
-    rootChanged: function () { return 'root:' + this.vid },
-    modeChanged: function () { return 'mode:' + this.vid },
-    activeModeChanged: function () { return 'mode:active' },
+    activeNodeChanged() { return 'active-node:' + this.vid },
+    rootChanged() { return 'root:' + this.vid },
+    modeChanged() { return 'mode:' + this.vid },
+    activeModeChanged() { return 'mode:active' },
     changed: () => 'changed'
   },
 

views/mindmap/actions.js

@@ -23,6 +23,7 @@ module.exports = {
       }
     }
     this.executeCommand('create', pos, (err, cmd) => {
+      if (err) return console.warn('failed to create', err) // TODO UI?
       this.edit(cmd.id)
     })
   },
@@ -54,11 +55,13 @@ module.exports = {
         },
         'create', pos,
         (err, cmd) => {
+          if (err) return console.warn('failed to create', err) // TODO UI?
           this.editStart(cmd.id)
         }
       )
     } else {
       this.executeCommand('create', pos, (err, cmd) => {
+      if (err) return console.warn('failed to create', err) // TODO UI?
         this.edit(cmd.id)
       })
     }

views/mindmap/calcpos.js

@@ -4,9 +4,8 @@ module.exports = function calcPos(root, nodes, xsep, ysep, cellHeight, heights)
 
   var {boxes, height, width} = calcBoxes(tree, cellHeight, xsep, 1, ysep)
   var links = []
-  var rbox = boxes[root]
-    , rx = 0//rbox.x
-    , ry = 0//rbox.y
+  var rx = 0
+    , ry = 0
   relativize(tree, rx, ry)
 
   return {boxes, links, height, width}
@@ -55,13 +54,13 @@ function calcBoxes(data, cellHeight, xsep, pxscale, ysep) {
     return a.width + b.width + (xsep || 0)
   });
   var nodes = t.nodes(data)
-  var links = t.links(nodes)
+  // var links = t.links(nodes)
 
   var {xscale, ydepth} = findScale(data, xsep)
   var xs = pxscale
     , ys = cellHeight
     , height = ydepth * (cellHeight + ysep || 0)
-    , width = pxscale / xscale 
+    , width = pxscale / xscale
   //console.log(xscale, ydepth)
 
   var boxes = {}
@@ -78,7 +77,7 @@ function calcBoxes(data, cellHeight, xsep, pxscale, ysep) {
   return {boxes, width, height}
 }
 
-function findScale(node, sep) {
+function findScale(rootNode, sep) {
   var min = null
     , maxdepth = 1
   function getWidth(node, depth) {
@@ -98,7 +97,7 @@ function findScale(node, sep) {
       getWidth(node.children[node.children.length-1], depth + 1)
     }
   }
-  getWidth(node, 1)
+  getWidth(rootNode, 1)
   return {xscale: min, ydepth: maxdepth}
 }
 

views/mindmap/links.js

@@ -1,6 +1,5 @@
 var React = require('react/addons')
-  , cx = React.addons.classSet
-  , PT = React.PropTypes
+  // , PT = React.PropTypes
 
 function line(obj) {
   var {x1, y1, x2, y2} = obj

views/mindmap/movable.js

@@ -53,30 +53,30 @@ var Movable = React.createClass({
   ],
 
   componentWillReceiveProps: function (nextProps) {
-        var aid = this.state.activeNode
-          , pos = nextProps.positions.boxes[aid]
-        if (!pos) return
-        var nx = this.state.left + pos.x
-          , ny = this.state.top + pos.y
-          , margin = 30
-          , dx = 0
-          , dy = 0
-        if (nx - margin < 0) {
-          dx -= nx - margin
-        }
-        if (ny - margin < 0) {
-          dy -= ny - margin
-        }
-        if (nx + pos.width + margin > this.props.width) {
-          dx -= nx + pos.width + margin - this.props.width
-        }
-        if (ny + pos.height + margin > this.props.height) {
-          dy -= ny + pos.height + margin - this.props.height
-        }
-        this.setState( {
-          left: this.state.left + dx,
-          top: this.state.top + dy,
-        })
+    var aid = this.state.activeNode
+      , pos = nextProps.positions.boxes[aid]
+    if (!pos) return
+    var nx = this.state.left + pos.x
+      , ny = this.state.top + pos.y
+      , margin = 30
+      , dx = 0
+      , dy = 0
+    if (nx - margin < 0) {
+      dx -= nx - margin
+    }
+    if (ny - margin < 0) {
+      dy -= ny - margin
+    }
+    if (nx + pos.width + margin > this.props.width) {
+      dx -= nx + pos.width + margin - this.props.width
+    }
+    if (ny + pos.height + margin > this.props.height) {
+      dy -= ny + pos.height + margin - this.props.height
+    }
+    this.setState( {
+      left: this.state.left + dx,
+      top: this.state.top + dy,
+    })
     /*
     var aid = this.props.store.view.active
       , ppos = this.props.positions.boxes[aid]

views/mindmap/movement.js

@@ -4,7 +4,8 @@ var movement = module.exports = {
     if (nodes[id].children && nodes[id].children.length && (!nodes[id].collapsed || id === root)) {
       return nodes[id].children[0]
     }
-    var up = down = id
+    let up = id
+    let down = id
     while (up || down) {
       if (down) {
         if (nodes[down].children && nodes[down].children.length && !nodes[down].collapsed) {
@@ -26,7 +27,7 @@ var movement = module.exports = {
   // TODO: refactor below and nextSiblingOrCousin to remove duplicate logic.
   below: function (id, root, nodes) {
     if (id === root) return
-    var pid = nodes[id].parent
+    let pid = nodes[id].parent
       , p = nodes[pid]
       , ch = p.children
       , ix = ch.indexOf(id)
@@ -149,12 +150,11 @@ var movement = module.exports = {
 
   nextCousin: function (id, root, nodes) {
     if (id === root) return
-    var aunt
+    let aunt
       , degree = 1
       , parent = nodes[id].parent
     while (!aunt) {
-      var pid = nodes[parent].parent
-        , ch = nodes[parent].children
+      let ch = nodes[parent].children
         , ix = ch.indexOf(parent) + 1
       while (ix < ch.length && !(nodes[ch[ix]].children &&
                                      !nodes[ch[ix]].collapsed &&
@@ -169,7 +169,7 @@ var movement = module.exports = {
       degree += 1
       parent = nodes[parent].parent
     }
-    cousin = aunt
+    let cousin = aunt
     for (; degree > 0 && nodes[cousin].children && nodes[cousin].children.length; degree--) {
       cousin = nodes[cousin].children[0]
     }