fix some bugs

yinquan · yinquan · commit 5a0d31bef5df · 2023-11-10T23:04:52.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+3.2.0
+- fixed:
+	- if the user dragged a node, moved it from tree A to tree B, and then moved it out of tree B, there would be an arrow on tree B.
+	- if the parent container had a 'transform: translate3d' property, the arrow and ghost image would not work normally, and they would be displayed at the wrong position.
+
 3.1.0
 - changed:
     - improve the performance of drag and drop operations.
@@ -9,7 +14,7 @@
 	- the getDragFrom method.
 	- the fnCustomClasses property.
 - fixed:
-	- the previously selected node will be deselected if the user clicks a node and then the fnBeforeSelect 
+	- the previously selected node will be deselected if the user clicks a node and then the fnBeforeSelect
 	function returns false.
   - the input box's width didn't fit its content well.
   - the reload() method caused an animation playing.
diff --git a/CHANGELOG.zh.md b/CHANGELOG.zh.md
@@ -1,4 +1,9 @@
-4.3.0
+3.2.0
+- 修正:
+	- 如果将一个结点，从树A拖动到树B，然后鼠标又移出树B，则树B上仍会显示一个箭头。
+	- 如果父容器有transform: translate3d属性，拖拽时箭头和缩略图的显示位置会出错。
+
+3.1.0
 - 变动:
     - 提高拖拽性能。
 
diff --git a/docs/assets/index-d2f852c8.js b/docs/assets/index-d2f852c8.js
diff --git a/docs/assets/index-fa2e0088.css b/docs/assets/index-fa2e0088.css
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
   <link rel="icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>vue tree</title>
-  <script type="module" crossorigin src="./assets/index-d880b47d.js"></script>
-  <link rel="stylesheet" href="./assets/index-02454703.css">
+  <script type="module" crossorigin src="./assets/index-d2f852c8.js"></script>
+  <link rel="stylesheet" href="./assets/index-fa2e0088.css">
 </head>
 <body>
   <div id="app"></div>
diff --git a/example/views/ALotOfNodesExample.vue b/example/views/ALotOfNodesExample.vue
@@ -5,7 +5,7 @@
     <button class="btn" @click="edit()" >edit</button>
     <input type="text" v-model="keyword" placeholder="search" @input="search()">
     <div class="panel">
-      <vue-tree :tree="tree" ref="tree" @blur="blur" @select="select" class="tree" animationDuration="0" :autoReload="false" />
+      <vue-tree :tree="tree" ref="tree" @blur="blur" @select="select" class="tree" :autoReload="false" />
     </div>
   </div>
 </template>
diff --git a/example/views/Home.vue b/example/views/Home.vue
@@ -167,13 +167,6 @@ export default {
               sourceCodeUrl: 'https://github.com/TinyWisp/vue-tree/blob/master/example/views/DragAndDropMultipleTreesExample.vue',
               codepenUrl:    'https://codepen.io/tinywisp/pen/eYBggqp'
             },
-            {
-              title_en:      'multiple trees',
-              title_zh:      '多棵树',
-              route:         '/example/drag-and-drop/multiple-trees',
-              sourceCodeUrl: 'https://github.com/TinyWisp/vue-tree/blob/master/example/views/DragAndDropMultipleTreesExample.vue',
-              codepenUrl:    'https://codepen.io/tinywisp/pen/eYBggqp'
-            }
           ]
         },
 
@@ -575,10 +568,11 @@ export default {
   display: block;
 }
 .home.wide .main {
-  flex: calc(100% - 250px);
-  height: auto;
+  width: calc(100% - 250px);
+  height: 100vh;
   min-height: 100vh;
   flex-grow: 1;
+  overflow: auto;
 }
 
 .home.narrow {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tinywisp/vue-tree",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "main": "lib/vue-tree.cjs.js",
   "module": "lib/vue-tree.esm.js",
   "unpkg": "lib/vue-tree.min.js",
diff --git a/src/DragArrow.vue b/src/DragArrow.vue
@@ -34,9 +34,9 @@ export default {
   padding: 0;
   margin: 0;
   text-indent: 0;
-  position: fixed;
-  left: calc(var(--overNodeX) + var(--overNodeFullIndent) + 1em);
-  top: var(--overNodeY);
+  position: absolute;
+  left: calc(var(--overNodeX) + var(--overNodeFullIndent) + 1em - var(--treeClientX));
+  top: calc(var(--overNodeY) - var(--treeClientY));
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
diff --git a/src/DragImage.vue b/src/DragImage.vue
@@ -33,11 +33,12 @@ export default {
 <style scoped>
 .vue-tree-wrapper .vue-tree-drag-image-wrapper {
   display: block;
-  position: fixed;
+  position: absolute;
   z-index: 11;
-  left: calc(var(--mousex) + var(--dragImageOffsetX));
-  top: calc(var(--mousey) + var(--dragImageOffsetY));
+  left: calc(var(--mousex) + var(--dragImageOffsetX) - var(--treeClientX));
+  top: calc(var(--mousey) + var(--dragImageOffsetY) - var(--treeClientY));
   font-size: var(--dragNodeFontSize);
   text-indent: 0;
+  text-wrap: nowrap;
 }
 </style>
diff --git a/src/VueTree.vue b/src/VueTree.vue
@@ -8,7 +8,9 @@
       '--dragImageOffsetX': dragImageOffsetX,
       '--dragImageOffsetY': dragImageOffsetY,
       '--animationDuration': animationDuration,
-      '--treeWidth': treeWidth + 'px'
+      '--treeClientX': treeRect.clientX + 'px',
+      '--treeClientY': treeRect.clientY + 'px',
+      '--treeWidth': treeRect.width + 'px'
     }">
     <transition-group
       tag="ul" 
@@ -313,8 +315,13 @@ export default {
       nodes: JSON.parse(JSON.stringify(this.tree)),
       items: this.getItems(),
       autoIdCounter: 0,
-      treeWidth: 0,
-      treeWidthInterval: null,
+      treeRect: {
+        clientX: 0,
+        clientY: 0,
+        width: 0,
+        height: 0
+      },
+      treeRectInterval: null,
       spareDefaultAttrs: {
         selected: false,
         directoryState: 'expanded',
@@ -600,9 +607,9 @@ export default {
       this.refresh()
     },
     refresh() {
-      this.treeWidth = this.$refs.tree.offsetWidth
       this.items = this.getItems()
       this.refreshAllDirectoryCheckboxState()
+      this.calcTreeRect()
     },
     getNestedTree() {
       return this.nodes
@@ -763,6 +770,21 @@ export default {
         top: offsetTop
       }
     },
+    calcTreeRect() {
+      const rect = this.$refs.tree.$el.getBoundingClientRect()
+      if (this.treeRect.clientX !== rect.x) {
+        this.treeRect.clientX = rect.x
+      }
+      if (this.treeRect.clientY !== rect.y) {
+        this.treeRect.clientY = rect.y
+      }
+      if (this.treeRect.width !== rect.width) {
+        this.treeRect.width = rect.width
+      }
+      if (this.treeRect.height !== rect.height) {
+        this.treeRect.height = rect.height
+      }
+    },
 
     //---------------------------------- select ----------------------------------------
     getSelected() {
@@ -1280,6 +1302,7 @@ export default {
       } else if (isInTreeArea === false && this.dragAndDrop.dragNode === null) {
         this.dragAndDrop.status = this.DND_STATUS.NONE
         if (prevStatus === this.DND_STATUS.INTO) {
+          this.dragLeave(this.dragAndDrop.overNode)
           this.$emit('dragleavetree', this.dragAndDrop)
           this.dragAndDrop.from = null
         }
@@ -1785,8 +1808,11 @@ export default {
           this.expand(node)
         }
     },
+
+  //------------------------------------  others ---------------------------------------------
+
     resizeTree() {
-      this.treeWidth = this.$refs.tree.$el.offsetWidth
+      this.calcTreeRect()
     }
   },
 
@@ -1795,7 +1821,6 @@ export default {
 
   mounted() {
     this.refresh()
-    console.log(this.items.length)
 
     //drag and drop
     document.body.addEventListener('dragover', this.globalDragOverEvent.bind(this), {capture: true})
@@ -1807,16 +1832,12 @@ export default {
     document.body.addEventListener('touchmove', this.globalTouchMoveEvent.bind(this), {capture:true, passive: false})
     document.body.addEventListener('touchend', this.globalTouchEndEvent.bind(this), {capture:true, passive: false})
 
-    //calculate the tree's width
-    this.treeWidthInterval = setInterval(function(){
-      let treeWidth = this.$refs.tree.$el.offsetWidth
-      if (this.treeWidth !== treeWidth) {
-        this.treeWidth = treeWidth
-      }
-    }.bind(this), 300)
+    // calculate the tree's properties: width, height, clientX, clientY
+    this.calcTreeRect()
+    this.treeRectInterval = setInterval(this.calcTreeRect.bind(this), 300)
   },
   beforeUnmount() {
-    clearInterval(this.treeWidthInterval)
+    clearInterval(this.treeRectInterval)
     document.removeEventListener('dragover', this.globalDragOverEvent.bind(this), {capture: true})
     document.removeEventListener('touchend', this.globalTouchEndEvent.bind(this), {capture: true})
     document.removeEventListener('touchmove', this.globalTouchMoveEvent.bind(this), {capture: true})
@@ -1827,6 +1848,9 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.vue-tree-wrapper {
+  position: relative;
+}
 .vue-tree-wrapper .vue-tree {
   position: relative;
   padding-inline-start: 0;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@tinywisp/vue-tree",`
`3`		`- "version": "3.1.0",`
	`3`	`+ "version": "3.2.0",`
`4`	`4`	`"main": "lib/vue-tree.cjs.js",`
`5`	`5`	`"module": "lib/vue-tree.esm.js",`
`6`	`6`	`"unpkg": "lib/vue-tree.min.js",`