2.2.0 move property 'level' from node to node vm. fix issue: #37 (comment)

Author: phphe

README.md

@@ -89,7 +89,10 @@ data: [
 ### template
 ```pug
 Tree(:data="data" draggable crossTree)
-  div(slot-scope="{data, store}")
+  div(slot-scope="{data, store, vm}")
+    //- data is node
+    //- store is the tree
+    //- vm is node Vue instance, you can get node level by vm.level
     template(v-if="!data.isDragPlaceHolder")
       b(v-if="data.children && data.children.length" @click="store.toggleOpen(data)") {{data.open ? '-' : '+'}} 
       span {{data.text}}
@@ -148,7 +151,17 @@ change(node, targetTree, oldTree), // after drop, only when the node position ch
 <a name="tree_methods"></a>
 ### Tree methods
 ```js
-pure(node, withChildren) // return a node data without runtime properties.(!: property which starts with '_' will be removed)
+pure(node, withChildren, after)
+/*
+pure
+return a node data without runtime properties.(!: property which starts with '_' will be removed)
+withChildren: optional. after: Function, optional
+the code about after(t is computed node data):
+if (after) {
+  return after(t, node) || t
+}
+return t
+*/
 getNodeById(id)
 getActivated()
 getOpened()
@@ -157,10 +170,12 @@ toggleActive(node, inactiveOld)
 openNode(node, closeOld)
 toggleOpen(node, closeOld)
 // follow methods are easy, so I paste their soure code
-getPureData() { return this.pure(this.rootData, true).children }
+getPureData(after) { return this.pure(this.rootData, true, after).children } // after: Function, optional
 deleteNode(node) { return hp.arrayRemove(node.parent.children, node) }
 // add node: like array. eg: node.children.push(newNodeData)
 // update node: just assign to the node properties directly
+isNodeDraggable(node)
+isNodeDroppable(node)
 ```
 <a name="node_properties"></a>
 ### node properties
@@ -171,7 +186,6 @@ _vm
 parent
 children: [],
 open,
-level,
 active: false,
 style: {},
 class: '',
@@ -188,6 +202,7 @@ isDragPlaceHolder
 #### node deep properties example
 ```js
 node._vm // vm
+node._vm.level // 节点层级, 只读
 node._vm.store // tree
 node.parent._vm // parent node vm
 node._vm.store

README_CN.md

@@ -89,7 +89,10 @@ data: [
 ### template / 模板
 ```pug
 Tree(:data="data" draggable crossTree)
-  div(slot-scope="{data, store}")
+  div(slot-scope="{data, store, vm}")
+    //- data是节点数据
+    //- store是树的实例
+    //- vm是节点实例, vm.level是节点的层级
     template(v-if="!data.isDragPlaceHolder")
       b(v-if="data.children && data.children.length" @click="store.toggleOpen(data)") {{data.open ? '-' : '+'}} 
       span {{data.text}}
@@ -149,7 +152,18 @@ change(node, targetTree, oldTree), // 拖动结束后并且有节点位置发生
 <a name="tree_methods"></a>
 ### Tree methods / 树的方法
 ```js
-pure(node, withChildren) // 获得干净数据(不含运行时的属性例如_id之类的), 下划线开头的属性会被删掉. withChildren为true的话则会把节点的子节点的数据也获取到.
+
+pure(node, withChildren, after)
+/*
+pure
+获得干净数据(不含运行时的属性例如_id之类的), 下划线开头的属性会被删掉. withChildren为true的话则会把节点的子节点的数据也获取到.
+withChildren: 可选. after: Function, 可选, after可以自定义返回数据
+关于after的源码(t是干净的节点数据):
+if (after) {
+  return after(t, node) || t
+}
+return t
+*/
 getNodeById(id)
 getActivated()
 getOpened()
@@ -158,10 +172,12 @@ toggleActive(node, inactiveOld)
 openNode(node, closeOld)
 toggleOpen(node, closeOld)
 // 下面的方法很简单, 所以附上源码.
-getPureData() { return this.pure(this.rootData, true).children } // 获取树的干净数据
+getPureData(after) { return this.pure(this.rootData, true, after).children } // 获取树的干净数据 after: Function, 可选
 deleteNode(node) { return hp.arrayRemove(node.parent.children, node) } // 删除节点
 // 增加节点, 像操作数组一样就可以了. 例子: node.children.push(newNodeData)
 // 更新节点, 直接修改节点属性就可以了
+isNodeDraggable(node) // 判断节点是否draggable
+isNodeDroppable(node) // 判断节点是否droppable
 ```
 <a name="node_properties"></a>
 ### node properties / 节点属性
@@ -172,7 +188,6 @@ _vm // 节点的实例
 parent // 父节点
 children: [], // 子节点
 open, // 是否打开
-level, // 节点层级, 根节点为0, 传入的data数组从1开始
 active: false,
 style: {}, // 可以控制节点的style
 class: '', // 可以控制节点的class
@@ -191,6 +206,7 @@ isDragPlaceHolder // 该节点是不是拖动占位节点
 在一些回调函数和事件里的参数可能只有node, 而想访问更多(例如节点实例, 节点的爸爸, 节点所在树)怎么办? 其实可以直接通过node访问, 因为他们都嵌套在里面了
 ```js
 node._vm // vm
+node._vm.level // node level, readonly
 node._vm.store // tree
 node.parent._vm // parent node vm
 node._vm.store

UPGRADE_GUIDE.md

@@ -15,3 +15,17 @@ Change to:
 Tree
   div(slot-scope="{data, store}") {{data.level}}
 ```
+### 2.1.8 -> 2.2.0
+
+#### `level` moved into node vm from node. `vm` add to slot props
+
+```pug
+Tree
+  div(slot-scope="{data, store}") {{data.level}}
+```
+Change to:
+
+```pug
+Tree
+  div(slot-scope="{data, store, vm}") {{vm.level}}
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-draggable-nested-tree",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "description": "A draggable tree view component for vue2",
   "main": "dist/vue-draggable-nested-tree.cjs.js",
   "module": "dist/vue-draggable-nested-tree.es.js",
@@ -87,4 +87,4 @@
     "last 2 versions",
     "not ie <= 8"
   ]
-}
+}

src/components/DraggableTreeNode.vue

@@ -3,13 +3,15 @@ import * as hp from 'helper-js'
 import * as th from 'tree-helper'
 import draggableHelper from 'draggable-helper'
 import TreeNode from './TreeNode.vue'
-import autoMoveDragPlaceHolder from './autoMoveDragPlaceHolder'
+import autoMoveDragPlaceHolder, {isNodeDraggable, isNodeDroppable} from './autoMoveDragPlaceHolder'
 import * as ut from '../plugins/utils'
 
 export default {
   extends: TreeNode,
   name: 'TreeNode',
   mounted() {
+    this.store.isNodeDraggable = isNodeDraggable
+    this.store.isNodeDroppable = isNodeDroppable
     if (this.isRoot || this.data.isDragPlaceHolder) {
       return
     }
@@ -22,6 +24,7 @@ export default {
           getEl: () => this.$el,
           minTranslate: 10,
           drag: (e, opt, store) => {
+            autoMoveDragPlaceHolder.dragStart()
             // this store is not tree
             const draggableHelperInfo = {event: e, options: opt, store}
             if (this.store.ondragstart && this.store.ondragstart(this.data, draggableHelperInfo) === false) {
@@ -30,14 +33,14 @@ export default {
             if (!isNodeDraggable(this.data)) {
               return false
             }
+            this.store.$emit('drag', this.data)
             // record start positon
             const siblings = this.data.parent.children
             this.startPosition = {siblings, index: siblings.indexOf(this.data)}
             //
             dplh.innerStyle.height = store.el.offsetHeight + 'px'
             th.insertAfter(dplh, this.data)
             this.data.class += ' dragging'
-            this.store.$emit('drag', this.data)
             // console.log('drag start');
           },
           moving: (e, opt, store) => {
@@ -82,12 +85,4 @@ export default {
   },
 }
 
-function isNodeDraggable(node, nodeVm) {
-  if (node.hasOwnProperty('draggable')) {
-    return node.draggable
-  } else {
-    return true
-  }
-}
-
 </script>

src/components/Tree.vue

@@ -2,7 +2,7 @@
 .he-tree.tree
   TreeNode(:data="rootData" :store="store")
     template(slot-scope="props")
-      slot(:data="props.data" :store="store")
+      slot(:data="props.data" :store="store" :vm="props.vm")
 </template>
 
 <script>
@@ -35,7 +35,7 @@ export default {
           return
         }
         // make rootData always use a same object
-        this.rootData = this.rootData || {isRoot: true, _id: `tree_${this._uid}_node_root`, level: 0}
+        this.rootData = this.rootData || {isRoot: true, _id: `tree_${this._uid}_node_root`}
         th.breadthFirstSearch(data, (node, k, parent) => {
           this.compeleteNode(node, parent)
         })
@@ -62,28 +62,18 @@ export default {
         }
       }
       this.$set(node, 'parent', parent || this.rootData)
-      this.$set(node, 'level', node.parent.level + 1)
       if (!node.hasOwnProperty('_id')) {
         node._id = `tree_${this._uid}_node_${hp.strRand(this.idLength)}`
       }
       node._treeNodePropertiesCompleted = true
     },
-    updateBranchLevel(branch, startLevel = branch.parent.level + 1) {
-      branch.level = startLevel
-      if (branch.children && branch.children.length > 0) {
-        th.breadthFirstSearch(branch.children, (node, i, p) => {
-          node.level = node.parent.level + 1
-        })
-      }
-    },
     // pure node self
-    pure(node, withChildren) {
+    pure(node, withChildren, after) {
       const t = Object.assign({}, node)
       delete t._id
       delete t.parent
       delete t.children
       delete t.open
-      delete t.level
       delete t.active
       delete t.style
       delete t.class
@@ -102,6 +92,9 @@ export default {
           t.children[k] = this.pure(v, withChildren)
         })
       }
+      if (after) {
+        return after(t, node) || t
+      }
       return t
     },
     getNodeById(id) {
@@ -164,8 +157,8 @@ export default {
         this.openNode(node, closeOld)
       }
     },
-    getPureData() {
-      return this.pure(this.rootData, true).children
+    getPureData(after) {
+      return this.pure(this.rootData, true, after).children
     },
     deleteNode(node) {
       return hp.arrayRemove(node.parent.children, node)

src/components/TreeNode.vue

@@ -1,17 +1,18 @@
 <template lang="pug">
 .tree-node(
   :class="[data.active ? store.activatedClass : '', data.open ? store.openedClass : '', data.class]"
-  :id="data._id" :data-level="data.level"
+  :style="data.style"
+  :id="data._id"
 )
   .tree-node-inner-back(v-if="!isRoot" :style="[innerBackStyle, data.innerBackStyle]" :class="[data.innerBackClass]")
     .tree-node-inner(:style="[data.innerStyle]" :class="[data.innerClass]")
-      slot(:data="data" :store="store")
+      slot(:data="data" :store="store" :vm="vm")
   .tree-node-children(v-if="childrenVisible")
     TreeNode(v-for="child in data.children" :key="child._id"
-      :data="child" :store="store"
+      :data="child" :store="store" :level="childrenLevel"
     )
       template(slot-scope="props")
-        slot(:data="props.data" :store="props.store")
+        slot(:data="props.data" :store="props.store" :vm="props.vm")
 </template>
 <script>
 import * as th from 'tree-helper'
@@ -21,13 +22,18 @@ export default {
   props: {
     data: {},
     store: {},
+    level: {default: 0}, // readonly
+  },
+  data() {
+    return {
+      vm: this,
+    }
   },
-  // data() {
-  //   return {
-  //   }
-  // },
   computed: {
-    isRoot() {return this.data.level === 0},
+    childrenLevel() {
+      return this.level + 1
+    },
+    isRoot() {return this.data.isRoot},
     childrenVisible() {
       const {data} = this
       return this.isRoot || data.children && data.children.length && data.open
@@ -36,9 +42,8 @@ export default {
       const r = {
         marginBottom: this.store.space + 'px'
       }
-      if (!this.isRoot && this.data.level > 1) {
-        const {indentType} = this.store
-        r.paddingLeft = (this.data.level - 1) * this.store.indent + 'px'
+      if (!this.isRoot && this.level > 1) {
+        r.paddingLeft = (this.level - 1) * this.store.indent + 'px'
       }
       return r
     },
@@ -49,22 +54,12 @@ export default {
       handler(data) {
         if (data) {
           data._vm = this
-          // the level of root is 0, no need to update root level
           if (!data._treeNodePropertiesCompleted && !data.isRoot) {
-            // this.store.compeleteNode(data, this.$parent.data)
-            th.breadthFirstSearch(data, (node, k, parent) => { this.store.compeleteNode(node, parent) })
+            this.store.compeleteNode(data, this.$parent.data)
           }
         }
       }
     },
-    'data.parent': {
-      immediate: true,
-      handler(parent, old) {
-        if (parent !== old) {
-          this.store.updateBranchLevel(this.data)
-        }
-      }
-    }
   },
   // methods: {},
   // created() {},