remove hooks: isNodeDraggable, isNodeDroppable; remove tree properties: idMapping, activated, opened; add tree methods: getNodeById, getActivated, getOpened, getPureData, deleteNode; add event: drag; fix events: drop, change

Author: phphe

README.md

@@ -60,6 +60,7 @@ Tree(:data="data" draggable crossTree)
 # api
 **The 'store' is the tree vm**
 ### Tree props
+###### Noraml - Tree props
 ```js
 // base tree
 data: {},
@@ -72,31 +73,44 @@ getTriggerEl: {type: Function}, // get the el trigger drag, default is node self
 draggable: {}, // is the tree draggable, default false
 droppable: {default: true}, // is the tree droppable, default true
 crossTree: {}, // can a node of the tree be dragged into other tree, or receive other tree node
-ondragstart: {type: Function}, // hook. return false to prevent drag. arguments(node, nodeVm, store, event, draggable helper option, draggable helper store)
-ondragend: {type: Function}, // hook. return false to prevent drop. arguments(node, nodeVm, store, event, draggable helper option, draggable helper store)
-isNodeDraggable: {type: Function}, // hook. arguments(node, nodeVm, store). Please check 'draggable & droppable' below
-isNodeDroppable: {type: Function}, // hook. arguments(node, nodeVm, store). Please check 'draggable & droppable' below
 ```
+###### Hooks - Tree props
+```js
+ondragstart: {type: Function}, // hook. return false to prevent drag. arguments(node, draggableHelperInfo)
+ondragend: {type: Function}, // hook. return false to prevent drop. arguments(node, draggableHelperInfo)
+```
+###### draggableHelperInfo: {event, options, store}
 ### Tree properties
 ```js
 rootData, // generated by tree
-activated: [], // activated nodes
-opened: [], // opened nodes
-idMapping: {}, // key: node id, value: node
 ```
 ### Tree events
 ```js
 // store is the tree vm
-drop(node, nodeVm, store), // after drop. It is a bit like ondragend. It is after ondragend.
-change(node, nodeVm, store), // after drop, only when the node position changed
+drag(node), // on drag start.
+drop(node, targetTree, oldTree), // after drop.
+change(node, targetTree, oldTree), // after drop, only when the node position changed
 ```
+* targetTree and oldTree are tree vm.
+* oldTree is available only when cross tree. Otherwise null.
+* if cross tree, both targetTree and oldTree will emit drop and change
+ targetTree and oldTree.
+
 ### Tree methods
 ```js
 pure(node, withChildren) // return a node data without runtime properties.(!: property which starts with '_' will be removed)
+getNodeById(id)
+getActivated()
+getOpened()
 activeNode(node, inactiveOld)
 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 }
+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
 ```
 ### node properties
 ```js
@@ -145,6 +159,8 @@ droppable // default true. Please check 'draggable & droppable' below
   align-items: center;
 }
 ```
+### examples
+todo
 # other
 ### draggable & droppable <a name="draggable_droppable"></a>
 A node is default draggable and droppable. You can set draggable and droppable property of a node. The another way is use hooks: isNodeDraggable and isNodeDroppable. The hook will override draggable or droppable property.

config/dev.env.js

@@ -3,5 +3,6 @@ const merge = require('webpack-merge')
 const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
+  NODE_ENV: '"development"',
+  DEVELOPE_SELF: 'true',
 })

src/App.vue

@@ -1,7 +1,7 @@
 <!-- this is an example -->
 <template lang="pug">
 #app(style="height:10000px")
-  Tree(:data="data" draggable crossTree :isNodeDroppable="isNodeDroppable" ref="tree1" @change="tree1Change")
+  Tree(:data="data" draggable crossTree ref="tree1" @change="tree1Change")
     div(slot-scope="{data, store}")
       b(v-if="data.children && data.children.length" @click="store.toggleOpen(data)") {{data.open ? '-' : '+'}}&nbsp;
       span {{data.text}}-level:{{data.level}}
@@ -59,11 +59,7 @@ export default {
   // computed: {},
   // watch: {},
   methods: {
-    isNodeDroppable(node, nodeVm, store) {
-      return node.level < 3
-    },
-    tree1Change(node, nodeVm, store) {
-      this.data0 = store.pure(store.rootData, true).children
+    tree1Change(node) {
     },
   },
   // created() {},

src/components/DraggableTree.vue

@@ -30,8 +30,6 @@ export default {
     crossTree: {},
     ondragstart: {type: Function},
     ondragend: {type: Function},
-    isNodeDraggable: {type: Function},
-    isNodeDroppable: {type: Function},
   },
   components: {
     TreeNode: DraggableTreeNode,
@@ -44,14 +42,7 @@ export default {
     }
   },
   // computed: {},
-  watch: {
-    idMapping: {
-      immediate: true,
-      handler(idMapping) {
-        idMapping[this.dplh._id] = this.dplh
-      }
-    }
-  },
+  // watch: {},
   // methods: {},
   created() {
     trees.push(this)

src/components/DraggableTreeNode.vue

@@ -23,10 +23,11 @@ export default {
           minTranslate: 10,
           drag: (e, opt, store) => {
             // this store is not tree
-            if (this.store.ondragstart && this.store.ondragstart(this.data, this, this.store, e, opt, store) === false) {
+            const draggableHelperInfo = {event: e, options: opt, store}
+            if (this.store.ondragstart && this.store.ondragstart(this.data, draggableHelperInfo) === false) {
               return false
             }
-            if (!isNodeDraggable(this.data, this)) {
+            if (!isNodeDraggable(this.data)) {
               return false
             }
             // record start positon
@@ -36,46 +37,51 @@ export default {
             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) => {
-            return autoMoveDragPlaceHolder.call(this, e, opt, store, this.store.trees)
+            const draggableHelperInfo = {event: e, options: opt, store}
+            return autoMoveDragPlaceHolder.call(this, draggableHelperInfo)
           },
           drop: (e, opt, store) => {
-            if (this.store.ondragend && this.store.ondragend(this.data, this, this.store, e, opt, store) === false) {
+            const draggableHelperInfo = {event: e, options: opt, store}
+            if (this.store.ondragend && this.store.ondragend(this.data, draggableHelperInfo) === false) {
               // can't drop, no change
             } else {
+              const targetTree = dplh._vm.store
+              const crossTree = targetTree !== this.store
+              const oldTree = crossTree ? this.store : null
               th.insertAfter(this.data, dplh)
               hp.arrayRemove(dplh.parent.children, dplh)
               this.data.class = this.data.class.replace(/(^| )dragging( |$)/g, ' ')
+              targetTree.$emit('drop', this.data, targetTree, oldTree)
+              oldTree && oldTree.$emit('drop', this.data, targetTree, oldTree)
               // emit change event if changed
               const siblings = this.data.parent.children
               if (siblings === this.startPosition.siblings && siblings.indexOf(this.data) === this.startPosition.index) {
                 // not moved
               } else {
-                this.store.$emit('change', this.data, this, this.store)
+                this.store.$emit('change', this.data, targetTree, oldTree)
+                oldTree && oldTree.$emit('change', this.data, targetTree, oldTree)
               }
-              delete this.startPosition
+              this.startPosition = null
             }
-            this.store.$emit('drop', this.data, this, this.store)
             // console.log('drag end');
           },
         })
       } else {
         if (this._draggableDestroy) {
           this._draggableDestroy()
-          delete this._draggableDestroy
+          this._draggableDestroy = null
         }
       }
     }, {immediate: true})
   },
 }
 
 function isNodeDraggable(node, nodeVm) {
-  const {store} = nodeVm
-  if (store.isNodeDraggable) {
-    return store.isNodeDraggable(node, nodeVm, store)
-  } else if (node.hasOwnProperty('draggable')) {
+  if (node.hasOwnProperty('draggable')) {
     return node.draggable
   } else {
     return true

src/components/Tree.vue

@@ -8,7 +8,9 @@
 <script>
 import * as hp from 'helper-js'
 import * as th from 'tree-helper'
+import * as ut from '../utils.js'
 import TreeNode from './TreeNode.vue'
+
 export default {
   props: {
     data: {},
@@ -23,60 +25,50 @@ export default {
     return {
       store: this,
       rootData: null,
-      activated: [],
-      opened: [],
-      idMapping: {},
     }
   },
-  computed: {
-  },
+  // computed: {},
   watch: {
     data: {
       immediate: true,
       handler(data, old) {
+        if (data === old) {
+          return
+        }
         // make rootData always use a same object
         this.rootData = this.rootData || {isRoot: true, _id: `tree_${this._uid}_node_root`, level: 0}
-        this.rootData.children = data
-        const activated = []
-        const opened = []
-        const idMapping = {}
-        th.breadthFirstSearch(data, (item, k, parent) => {
-          const compeletedData = {
-            open: true,
-            children: [],
-            active: false,
-            style: {},
-            class: '',
-            innerStyle: {},
-            innerClass: '',
-            innerBackStyle: {},
-            innerBackClass: {},
-          }
-          for (const key in compeletedData) {
-            if (!item.hasOwnProperty(key)) {
-              this.$set(item, key, compeletedData[key])
-            }
-          }
-          this.$set(item, 'parent', parent || this.rootData)
-          this.$set(item, 'level', item.parent.level + 1)
-          if (!item.hasOwnProperty('_id')) {
-            item._id = `tree_${this._uid}_node_${hp.strRand(this.idLength)}`
-          }
-          idMapping[item._id] = item
-          if (item.active) {
-            activated.push(item)
-          }
-          if (item.open) {
-            opened.push(item)
-          }
+        th.breadthFirstSearch(data, (node, k, parent) => {
+          this.compeleteNode(node, parent)
         })
-        this.activated = activated
-        this.opened = opened
-        this.idMapping = idMapping
+        this.rootData.children = data
       }
     }
   },
   methods: {
+    compeleteNode(node, parent) {
+      const compeletedData = {
+        open: true,
+        children: [],
+        active: false,
+        style: {},
+        class: '',
+        innerStyle: {},
+        innerClass: '',
+        innerBackStyle: {},
+        innerBackClass: {},
+      }
+      for (const key in compeletedData) {
+        if (!node.hasOwnProperty(key)) {
+          this.$set(node, key, compeletedData[key])
+        }
+      }
+      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) {
@@ -113,14 +105,41 @@ export default {
       }
       return t
     },
+    getNodeById(id) {
+      let r
+      th.breadthFirstSearch(this.rootData.children, (node) => {
+        if (node._id === id) {
+          r = node
+          return false
+        }
+      })
+      return r
+    },
+    getActivated() {
+      const r = []
+      th.breadthFirstSearch(this.rootData.children, (node) => {
+        if (node.active) {
+          r.push(node)
+        }
+      })
+      return r
+    },
+    getOpened() {
+      const r = []
+      th.breadthFirstSearch(this.rootData.children, (node) => {
+        if (node.open) {
+          r.push(node)
+        }
+      })
+      return r
+    },
     activeNode(node, inactiveOld) {
+      let {activated} = this
       if (inactiveOld) {
-        this.activated.forEach(item => {
-          item.active = false
+        this.getActivated().forEach(node2 => {
+          node2.active = false
         })
-        this.activated = []
       }
-      this.activated.push(node)
       node.active = true
     },
     toggleActive(node, inactiveOld) {
@@ -131,13 +150,12 @@ export default {
       }
     },
     openNode(node, closeOld) {
+      let {opened} = this
       if (closeOld) {
-        this.opened.forEach(item => {
-          item.open = false
+        this.getOpened().forEach(node2 => {
+          node2.open = false
         })
-        this.opened = []
       }
-      this.opened.push(node)
       node.open = true
     },
     toggleOpen(node, closeOld) {
@@ -147,6 +165,12 @@ export default {
         this.openNode(node, closeOld)
       }
     },
+    getPureData() {
+      return this.pure(this.rootData, true).children
+    },
+    deleteNode(node) {
+      return hp.arrayRemove(node.parent.children, node)
+    },
   },
   // created() {},
   // mounted() {},