fix(tree): transition should be disabled when drop

demo/components/treeDemo/basicUsage.demo.vue

@@ -21,8 +21,6 @@
 </template>
 
 <script>
-import { setTimeout } from 'timers'
-
 let key = 0
 
 function genData (layer = 4, depth = 0, prefix = '') {
@@ -44,20 +42,6 @@ export default {
     return {
       data: genData()
     }
-  },
-  methods: {
-    handleClick () {
-      this.$refs.tree.handleDragStart({
-        key: 0,
-        isLeaf: false
-      })
-      setTimeout(() => {
-        this.$refs.tree.handleDragEnter({
-          key: 85,
-          isLeaf: false
-        })
-      }, 100)
-    }
   }
 }
 </script>

demo/components/treeDemo/blockNode.demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="n-doc-section">
     <div class="n-doc-section__header">
-      Scaffold
+      Block Node
     </div>
     <div
       class="n-doc-section__view"
@@ -11,13 +11,9 @@
       <n-tree
         ref="tree"
         :data="data"
+        block-node
       /> <!--EXAMPLE_END-->
     </div>
-    <div class="n-doc-section__inspect">
-      <n-button @click="handleClick">
-        dragEnter
-      </n-button>
-    </div>
     <n-doc-source-block>
       <!--SOURCE-->
     </n-doc-source-block>
@@ -25,8 +21,6 @@
 </template>
 
 <script>
-import { setTimeout } from 'timers'
-
 let key = 0
 
 function genData (layer = 2, depth = 0, prefix = '') {
@@ -48,20 +42,6 @@ export default {
     return {
       data: genData()
     }
-  },
-  methods: {
-    handleClick () {
-      this.$refs.tree.handleDragStart({
-        key: 0,
-        isLeaf: false
-      })
-      setTimeout(() => {
-        this.$refs.tree.handleDragEnter({
-          key: 85,
-          isLeaf: false
-        })
-      }, 100)
-    }
   }
 }
 </script>

demo/components/treeDemo/index.vue

@@ -5,23 +5,23 @@
   >
     <div class="n-doc-header">
       <n-gradient-text :font-size="20">
-        scaffold
+        blockNode
       </n-gradient-text>
     </div>
     <div class="n-doc-body">
       <basic-usage />
-      <scaffold />
+      <block-node />
     </div>
   </div>
 </template>
 
 <script>
 import basicUsage from './basicUsage.demo.vue'
-import scaffold from './scaffold.demo.vue'
+import blockNode from './blockNode.demo.vue'
 
 export default {
   components: {
-    scaffold,
+    blockNode,
     basicUsage
   },
   data () {

packages/common/Tree/src/ChildNodesExpandTransition.js

@@ -1,4 +1,10 @@
 export default {
+  props: {
+    transitionDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
   methods: {
     handleBeforeLeave () {
       this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
@@ -6,6 +12,7 @@ export default {
       this.$el.getBoundingClientRect()
     },
     handleLeave () {
+      // debugger
       this.$el.style.maxHeight = 0
       this.$el.getBoundingClientRect()
     },
@@ -22,6 +29,15 @@ export default {
       this.$el.style.maxHeight = null
     }
   },
+  beforeDestroy () {
+    if (this.transitionDisabled) {
+      const parent = this.$el.parentElement
+      if (parent) parent.removeChild(this.$el)
+    }
+  },
+  destroyed () {
+    console.log('destroyed')
+  },
   render (h) {
     return h('transition', {
       props: {

packages/common/Tree/src/TreeNodeContent.vue

@@ -18,6 +18,7 @@
     @drop="handleContentDrop"
     @click="handleClick"
   >
+    <div class="n-tree-node-content__padding-box" />
     <slot />
   </span>
 </template>

packages/common/Tree/src/main.js

@@ -30,25 +30,27 @@ function genSingleNode (node, h, self) {
     blockNode: self.blockNode,
     checked: self.synthesizedCheckedKeys.includes(node.key)
   }
-  if (node.isLeaf) {
-    return h(NTreeNode, {
-      props,
-      on: listeners,
-      key: node.key
-    })
-  } else if (node.children) {
-    return h(NTreeNode, {
-      props,
-      on: listeners,
-      key: node.key
-    }, [h(NTreeChildNodesExpandTransition, {},
-      [ expanded
+  return h(NTreeNode, {
+    props,
+    on: listeners,
+    key: node.key
+  },
+  [!node.isLeaf
+    ? h(NTreeChildNodesExpandTransition, {
+      props: {
+        transitionDisabled: self.transitionDisabled
+      }
+    },
+    [
+      expanded
         ? h('ul', {
           staticClass: 'n-tree-children-wrapper'
         }, node.children.map(child => genSingleNode(child, h, self)))
-        : null]
-    )])
-  }
+        : null
+    ]
+    )
+    : null]
+  )
 }
 
 function convertRootedOptionsToVNodeTree (root, h, self) {
@@ -115,7 +117,8 @@ export default {
       draggingNodeKey: null,
       draggingNode: null,
       dropNodeKey: null,
-      expandTimerId: null
+      expandTimerId: null,
+      transitionDisabled: false
     }
   },
   watch: {
@@ -165,6 +168,12 @@ export default {
   mounted () {
   },
   methods: {
+    disableTransition () {
+      this.transitionDisabled = true
+    },
+    enableTransition () {
+      this.transitionDisabled = false
+    },
     handleCheck (node, checked) {
       if (!this.hasCheckedKeys) {
         if (checked) {
@@ -180,7 +189,13 @@ export default {
     handleDrop (node, dropType) {
       const drop = [this.draggingNode, node, dropType]
       if (dropIsValid(drop)) {
-        applyDrop(drop)
+        this.disableTransition()
+        this.$nextTick().then(() => {
+          applyDrop(drop)
+          return this.$nextTick()
+        }).then(() => {
+          this.enableTransition()
+        })
       }
       this.draggingNodeKey = null
       this.draggingNode = null
@@ -238,10 +253,8 @@ export default {
     }
   },
   render (h) {
-    console.log('render')
     const lOptions = linkedCascaderOptions(this.treeData, 'multiple-all-options')
     const mOptions = menuOptions(lOptions)[0]
-    console.log(mOptions)
     return h('div', {
       staticClass: 'n-tree'
     }, convertRootedOptionsToVNodeTree(mOptions, h, this))

packages/utils/data/menuModel.js

@@ -139,32 +139,6 @@ function rootedOptions (options) {
   }])
 }
 
-function patchedOptionsUsingProp (options, patches, prop = 'key') {
-  const patchesMap = new Map()
-  for (const [id, children] of patches) {
-    patchesMap.set(id, children)
-  }
-  function traverse (options) {
-    if (!Array.isArray(options)) return
-    for (let i = 0; i < options.length; ++i) {
-      const option = options[i]
-      const id = option[prop]
-      // console.log('iterate on option', id)
-      if (!hasChildren(option)) {
-        if (patches.has(id)) {
-          // console.log('patched on option', id)
-          option.children = patches.get(id)
-          option.loaded = true
-        }
-      }
-      traverse(option.children)
-    }
-  }
-  traverse(options)
-  // console.log('patchedOptions output', options)
-  return options
-}
-
 /**
  *
  * @param {*} options
@@ -229,7 +203,7 @@ function treedOptions (options) {
 }
 
 function applyDrop ([sourceNode, targetNode, type]) {
-  if (type === 'append') {
+  if (type === 'append' || type === 'insertAfter') {
     const parent = sourceNode.parent
     const index = parent.children.findIndex(child => child.key === sourceNode.key)
     if (~index) {
@@ -242,13 +216,17 @@ function applyDrop ([sourceNode, targetNode, type]) {
       throw new Error('[n-tree]: switch error')
     }
     if (Array.isArray(targetNode.children)) {
-      targetNode.children.push(sourceNode)
+      if (type === 'append') {
+        targetNode.children.push(sourceNode)
+      } else {
+        targetNode.children.unshift(sourceNode)
+      }
     } else {
       targetNode.isLeaf = false
       targetNode.children = [sourceNode]
     }
     sourceNode.parent = targetNode
-  } else if (type === 'insertBefore' || type === 'insertAfter') {
+  } else if (type === 'insertBefore') {
     let parent = sourceNode.parent
     const sourceIndex = parent.children.findIndex(child => child.key === sourceNode.key)
     if (~sourceIndex) {
@@ -263,11 +241,7 @@ function applyDrop ([sourceNode, targetNode, type]) {
     parent = targetNode.parent
     const targetIndex = parent.children.findIndex(child => child.key === targetNode.key)
     if (~targetIndex) {
-      if (type === 'insertBefore') {
-        parent.children.splice(targetIndex, 0, sourceNode)
-      } else {
-        parent.children.splice(targetIndex + 1, 0, sourceNode)
-      }
+      parent.children.splice(targetIndex, 0, sourceNode)
       if (!parent.children.length) {
         parent.children = null
         parent.isLeaf = true
@@ -473,7 +447,6 @@ export {
   firstOptionId,
   rootedOptions,
   patchedOptions,
-  patchedOptionsUsingProp,
   dropIsValid,
   applyDrop,
   treedOptions,

styles/Tree.scss

@@ -1,6 +1,7 @@
 @import './mixins/mixins.scss';
 @import './theme/default.scss';
 
+// 0.55 * 0.7
 $tree-content-hover-background-color: main-color-with-alpha(.45);
 $tree-content-active-background-color: main-color-with-alpha(.3);
 $tree-content-selected-background-color: main-color-with-alpha(.3);
@@ -17,7 +18,10 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
     margin-left: 16px;
   }
   @include b(tree-node) {
-    padding: 4px 0 4px 0;
+    padding: 3px 0 3px 0;
+    &:first-child {
+      padding-top: 6px;
+    }
     &:last-child {
       padding-bottom: 0;
     }
@@ -67,23 +71,33 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
     cursor: pointer;
     border-radius: 3px;
     transition: .2s background-color $default-cubic-bezier, .2s border-color $default-cubic-bezier;
-    // &:hover {
-    //   background-color: $tree-content-hover-background-color;
-    // }
+    &:hover {
+      background-color: $tree-content-hover-background-color;
+    }
     &:active {
       background-color: $tree-content-active-background-color;
     }
+    &:last-child {
+      margin-bottom: 0;
+    }
+    @include e(padding-box) {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+    }
     @include m(block) {
       width: calc(100% - 24px);
       @include m(checkable) {
         width: calc(100% - 48px);
       }
     }
-    @include m(selected) {
-      background-color: $tree-content-selected-background-color;
-    }
-    
     @include m(pending) {
+      &:hover {
+        background-color: transparent;
+      }
       @include m(pending-bottom) {
         border-bottom: 3px solid $tree-content-hover-background-color;
       }
@@ -94,5 +108,8 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
         background-color: $tree-content-hover-background-color;
       }
     }
+    @include m(selected) {
+      background-color: $tree-content-selected-background-color;
+    }
   }
 }