Skip to content

Commit 5a0d31b

Browse files
author
yinquan
committed
fix some bugs
1 parent 837fe95 commit 5a0d31b

11 files changed

+72
-35
lines changed

‎CHANGELOG.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
3.2.0
2+
- fixed:
3+
- 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.
4+
- 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.
5+
16
3.1.0
27
- changed:
38
- improve the performance of drag and drop operations.
@@ -9,7 +14,7 @@
914
- the getDragFrom method.
1015
- the fnCustomClasses property.
1116
- fixed:
12-
- the previously selected node will be deselected if the user clicks a node and then the fnBeforeSelect
17+
- the previously selected node will be deselected if the user clicks a node and then the fnBeforeSelect
1318
function returns false.
1419
- the input box's width didn't fit its content well.
1520
- the reload() method caused an animation playing.

‎CHANGELOG.zh.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
4.3.0
1+
3.2.0
2+
- 修正:
3+
- 如果将一个结点，从树A拖动到树B，然后鼠标又移出树B，则树B上仍会显示一个箭头。
4+
- 如果父容器有transform: translate3d属性，拖拽时箭头和缩略图的显示位置会出错。
5+
6+
3.1.0
27
- 变动:
38
- 提高拖拽性能。
49

‎docs/assets/index-d2f852c8.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-fa2e0088.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<link rel="icon" href="./favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>vue tree</title>
8-
<script type="module" crossorigin src="./assets/index-d880b47d.js"></script>
9-
<link rel="stylesheet" href="./assets/index-02454703.css">
8+
<script type="module" crossorigin src="./assets/index-d2f852c8.js"></script>
9+
<link rel="stylesheet" href="./assets/index-fa2e0088.css">
1010
</head>
1111
<body>
1212
<div id="app"></div>

‎example/views/ALotOfNodesExample.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<button class="btn" @click="edit()" >edit</button>
66
<input type="text" v-model="keyword" placeholder="search" @input="search()">
77
<div class="panel">
8-
<vue-tree :tree="tree" ref="tree" @blur="blur" @select="select" class="tree" animationDuration="0" :autoReload="false" />
8+
<vue-tree :tree="tree" ref="tree" @blur="blur" @select="select" class="tree" :autoReload="false" />
99
</div>
1010
</div>
1111
</template>

‎example/views/Home.vue

+3-9
Original file line numberDiff line numberDiff line change
@@ -167,13 +167,6 @@ export default {
167167
sourceCodeUrl: 'https://github.com/TinyWisp/vue-tree/blob/master/example/views/DragAndDropMultipleTreesExample.vue',
168168
codepenUrl: 'https://codepen.io/tinywisp/pen/eYBggqp'
169169
},
170-
{
171-
title_en: 'multiple trees',
172-
title_zh: '多棵树',
173-
route: '/example/drag-and-drop/multiple-trees',
174-
sourceCodeUrl: 'https://github.com/TinyWisp/vue-tree/blob/master/example/views/DragAndDropMultipleTreesExample.vue',
175-
codepenUrl: 'https://codepen.io/tinywisp/pen/eYBggqp'
176-
}
177170
]
178171
},
179172
@@ -575,10 +568,11 @@ export default {
575568
display: block;
576569
}
577570
.home.wide .main {
578-
flex: calc(100% - 250px);
579-
height: auto;
571+
width: calc(100% - 250px);
572+
height: 100vh;
580573
min-height: 100vh;
581574
flex-grow: 1;
575+
overflow: auto;
582576
}
583577
584578
.home.narrow {

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@tinywisp/vue-tree",
3-
"version": "3.1.0",
3+
"version": "3.2.0",
44
"main": "lib/vue-tree.cjs.js",
55
"module": "lib/vue-tree.esm.js",
66
"unpkg": "lib/vue-tree.min.js",

‎src/DragArrow.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export default {
3434
padding: 0;
3535
margin: 0;
3636
text-indent: 0;
37-
position: fixed;
38-
left: calc(var(--overNodeX) + var(--overNodeFullIndent) + 1em);
39-
top: var(--overNodeY);
37+
position: absolute;
38+
left: calc(var(--overNodeX) + var(--overNodeFullIndent) + 1em - var(--treeClientX));
39+
top: calc(var(--overNodeY) - var(--treeClientY));
4040
display: flex;
4141
flex-direction: column;
4242
flex-wrap: nowrap;

‎src/DragImage.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,12 @@ export default {
3333
<style scoped>
3434
.vue-tree-wrapper .vue-tree-drag-image-wrapper {
3535
display: block;
36-
position: fixed;
36+
position: absolute;
3737
z-index: 11;
38-
left: calc(var(--mousex) + var(--dragImageOffsetX));
39-
top: calc(var(--mousey) + var(--dragImageOffsetY));
38+
left: calc(var(--mousex) + var(--dragImageOffsetX) - var(--treeClientX));
39+
top: calc(var(--mousey) + var(--dragImageOffsetY) - var(--treeClientY));
4040
font-size: var(--dragNodeFontSize);
4141
text-indent: 0;
42+
text-wrap: nowrap;
4243
}
4344
</style>

‎src/VueTree.vue

+38-14
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
'--dragImageOffsetX': dragImageOffsetX,
99
'--dragImageOffsetY': dragImageOffsetY,
1010
'--animationDuration': animationDuration,
11-
'--treeWidth': treeWidth + 'px'
11+
'--treeClientX': treeRect.clientX + 'px',
12+
'--treeClientY': treeRect.clientY + 'px',
13+
'--treeWidth': treeRect.width + 'px'
1214
}">
1315
<transition-group
1416
tag="ul"
@@ -313,8 +315,13 @@ export default {
313315
nodes: JSON.parse(JSON.stringify(this.tree)),
314316
items: this.getItems(),
315317
autoIdCounter: 0,
316-
treeWidth: 0,
317-
treeWidthInterval: null,
318+
treeRect: {
319+
clientX: 0,
320+
clientY: 0,
321+
width: 0,
322+
height: 0
323+
},
324+
treeRectInterval: null,
318325
spareDefaultAttrs: {
319326
selected: false,
320327
directoryState: 'expanded',
@@ -600,9 +607,9 @@ export default {
600607
this.refresh()
601608
},
602609
refresh() {
603-
this.treeWidth = this.$refs.tree.offsetWidth
604610
this.items = this.getItems()
605611
this.refreshAllDirectoryCheckboxState()
612+
this.calcTreeRect()
606613
},
607614
getNestedTree() {
608615
return this.nodes
@@ -763,6 +770,21 @@ export default {
763770
top: offsetTop
764771
}
765772
},
773+
calcTreeRect() {
774+
const rect = this.$refs.tree.$el.getBoundingClientRect()
775+
if (this.treeRect.clientX !== rect.x) {
776+
this.treeRect.clientX = rect.x
777+
}
778+
if (this.treeRect.clientY !== rect.y) {
779+
this.treeRect.clientY = rect.y
780+
}
781+
if (this.treeRect.width !== rect.width) {
782+
this.treeRect.width = rect.width
783+
}
784+
if (this.treeRect.height !== rect.height) {
785+
this.treeRect.height = rect.height
786+
}
787+
},
766788
767789
//---------------------------------- select ----------------------------------------
768790
getSelected() {
@@ -1280,6 +1302,7 @@ export default {
12801302
} else if (isInTreeArea === false && this.dragAndDrop.dragNode === null) {
12811303
this.dragAndDrop.status = this.DND_STATUS.NONE
12821304
if (prevStatus === this.DND_STATUS.INTO) {
1305+
this.dragLeave(this.dragAndDrop.overNode)
12831306
this.$emit('dragleavetree', this.dragAndDrop)
12841307
this.dragAndDrop.from = null
12851308
}
@@ -1785,8 +1808,11 @@ export default {
17851808
this.expand(node)
17861809
}
17871810
},
1811+
1812+
//------------------------------------ others ---------------------------------------------
1813+
17881814
resizeTree() {
1789-
this.treeWidth = this.$refs.tree.$el.offsetWidth
1815+
this.calcTreeRect()
17901816
}
17911817
},
17921818
@@ -1795,7 +1821,6 @@ export default {
17951821
17961822
mounted() {
17971823
this.refresh()
1798-
console.log(this.items.length)
17991824
18001825
//drag and drop
18011826
document.body.addEventListener('dragover', this.globalDragOverEvent.bind(this), {capture: true})
@@ -1807,16 +1832,12 @@ export default {
18071832
document.body.addEventListener('touchmove', this.globalTouchMoveEvent.bind(this), {capture:true, passive: false})
18081833
document.body.addEventListener('touchend', this.globalTouchEndEvent.bind(this), {capture:true, passive: false})
18091834
1810-
//calculate the tree's width
1811-
this.treeWidthInterval = setInterval(function(){
1812-
let treeWidth = this.$refs.tree.$el.offsetWidth
1813-
if (this.treeWidth !== treeWidth) {
1814-
this.treeWidth = treeWidth
1815-
}
1816-
}.bind(this), 300)
1835+
// calculate the tree's properties: width, height, clientX, clientY
1836+
this.calcTreeRect()
1837+
this.treeRectInterval = setInterval(this.calcTreeRect.bind(this), 300)
18171838
},
18181839
beforeUnmount() {
1819-
clearInterval(this.treeWidthInterval)
1840+
clearInterval(this.treeRectInterval)
18201841
document.removeEventListener('dragover', this.globalDragOverEvent.bind(this), {capture: true})
18211842
document.removeEventListener('touchend', this.globalTouchEndEvent.bind(this), {capture: true})
18221843
document.removeEventListener('touchmove', this.globalTouchMoveEvent.bind(this), {capture: true})
@@ -1827,6 +1848,9 @@ export default {
18271848
18281849
<!-- Add "scoped" attribute to limit CSS to this component only -->
18291850
<style scoped>
1851+
.vue-tree-wrapper {
1852+
position: relative;
1853+
}
18301854
.vue-tree-wrapper .vue-tree {
18311855
position: relative;
18321856
padding-inline-start: 0;

0 commit comments

Comments
 (0)