#55: Add states like draggable, dropable; Fix bugs

demo/pages/dnd.html

@@ -88,9 +88,9 @@
             MY_TEXT: 'JS: The Right Way',
             OPTIONS: { expanded: true },
             KIDS: [
-              { MY_TEXT: 'Getting Started', OPTIONS: { checked: true, draggable: false } },
+              { MY_TEXT: 'Getting Started (NOT DRAGGABLE)', OPTIONS: { checked: true, draggable: false } },
               { MY_TEXT: 'JavaScript Code Style', OPTIONS: { selected: true } },
-              { MY_TEXT: 'MVC Pattern' },
+              { MY_TEXT: 'MVC Pattern (NOT DROPABLE)', OPTIONS: {dropable: false} },
               { MY_TEXT: 'MVP Pattern' },
               { MY_TEXT: 'MVVM Pattern' },
               { MY_TEXT: 'The Good Parts', KIDS: [

src/components/TreeNode.vue

@@ -30,7 +30,7 @@
         class="tree-children">
           <node
             v-for="child in node.children"
-            v-if="child.visible()"
+            v-if="child && child.visible()"
 
             :key="child.id"
             :node="child"

src/components/TreeRoot.vue

@@ -18,7 +18,7 @@
         <template v-else>
           <TreeNode
             v-for="node in model"
-            v-if="node.visible()"
+            v-if="node && node.visible()"
 
             :key="node.id"
             :node="node"

src/lib/Node.js

@@ -391,6 +391,14 @@ export default class Node {
     return this.expand()
   }
 
+  isDropable () {
+    return this.enabled() && this.state('dropable')
+  }
+
+  isDraggable () {
+    return this.enabled() && this.state('draggable')
+  }
+
   startDragging () {
     if (this.disabled() || this.state('draggable') === false || this.state('dragging')) {
       return false
@@ -409,6 +417,10 @@ export default class Node {
   }
 
   finishDragging (destination, destinationPosition) {
+    if (!destination.isDropable()) {
+      return
+    }
+
     const tree = this.tree
     const clone = this.clone()
     const parent = this.parent
@@ -432,8 +444,9 @@ export default class Node {
 
     this.remove()
 
-    parent.refreshIndeterminateState()
+    parent && parent.refreshIndeterminateState()
     tree.__silence = false
+
     this.state('dragging', false)
     this.$emit('dragging:finish')
   }
@@ -574,7 +587,7 @@ export default class Node {
   }
 
   find (criteria, deep) {
-    if (criteria instanceof Node) {
+    if (this.tree.isNode(criteria)) {
       return criteria
     }
 
@@ -599,27 +612,15 @@ export default class Node {
   }
 
   clone () {
-    const node = new Node(
-      this.tree,
-      this.toJSON()
-    )
-
-    node.children = node.children.map(child => {
-      const c = new Node(this.tree, child)
-      c.parent = node
-      c.children = c.children.map(child => new Node(this.tree, child))
-      return c
-    })
-
-    return node
+    return this.tree.objectToNode(this.toJSON())
   }
 
   toJSON () {
     return {
       text: this.text,
       data: this.data,
       state: this.states,
-      children: this.children.map(node => node.toJSON())
+      children: this.children.map(node => this.tree.objectToNode(node).toJSON())
     }
   }
 }

src/lib/Tree.js

@@ -646,7 +646,7 @@ export default class Tree {
   }
 
   find (criteria, multiple) {
-    if (criteria instanceof Node) {
+    if (this.isNode(criteria)) {
       return criteria
     }
 
@@ -677,7 +677,7 @@ export default class Tree {
   }
 
   getNode (node) {
-    if (node instanceof Node) {
+    if (this.isNode(node)) {
       return node
     }
 

src/mixins/DndMixin.js

@@ -79,6 +79,10 @@ export default {
     },
 
     startDragging (node, event) {
+      if (!node.isDraggable()) {
+        return
+      }
+
       this.$$startDragPosition = [event.clientX, event.clientY]
       this.$$possibleDragNode = node
 
@@ -88,6 +92,11 @@ export default {
     initDragListeners () {
       let dropPosition
 
+      const removeListeners = () => {
+        window.removeEventListener('mouseup', onMouseUp, true)
+        window.removeEventListener('mousemove', onMouseMove, true)
+      }
+
       const onMouseUp = (e) => {
         if (!this.$$startDragPosition) {
           e.stopPropagation()
@@ -103,8 +112,7 @@ export default {
         this.$$possibleDragNode = null
         this.$set(this, 'draggableNode', null)
 
-        window.removeEventListener('mouseup', onMouseUp, true)
-        window.removeEventListener('mousemove', onMouseMove, true)
+        removeListeners()
       }
 
       const onMouseMove = (e) => {
@@ -138,6 +146,11 @@ export default {
 
           if (!this.$$dropDestination || this.$$dropDestination.id !== dropDestinationId) {
             this.$$dropDestination = this.tree.getNodeById(dropDestinationId)
+
+            if (!this.$$dropDestination.isDropable()) {
+              this.$$dropDestination = null
+              return
+            }
           }
 
           dropPosition = highlightDropDestination(e, dropDestination)

src/mixins/TreeMixin.js

@@ -30,16 +30,18 @@ function initEvents (vm) {
   }
 
   tree.$on('node:added', (targetNode, newNode) => {
+    const node = newNode || targetNode
+
     if (checkbox) {
-      if (newNode.state('checked') && !tree.checkedNodes.has(newNode)) {
-        tree.checkedNodes.add(newNode)
+      if (node.state('checked') && !tree.checkedNodes.has(node)) {
+        tree.checkedNodes.add(node)
       }
 
-      newNode.refreshIndeterminateState()
+      node.refreshIndeterminateState()
     }
 
-    if (newNode.state('selected') && !tree.selectedNodes.has(newNode)) {
-      tree.select(newNode)
+    if (node.state('selected') && !tree.selectedNodes.has(node)) {
+      tree.select(node)
     }
 
     emitter()

src/utils/objectToNode.js

@@ -14,7 +14,9 @@ const nodeStates = {
   indeterminate: false,
   matched: false,
   editable: true,
-  dragging: false
+  dragging: false,
+  draggable: true,
+  dropable: true
 }
 
 function merge (state = {}) {

test/utils/objectToNode.spec.js

@@ -11,7 +11,9 @@ const nodeStates = {
   indeterminate: false,
   matched: false,
   editable: true,
-  dragging: false
+  dragging: false,
+  draggable: true,
+  dropable: true
 }
 
 const tree = {}