Skip to content

Commit c61a241

Browse files
phphephphe
committed
fix utils
1 parent d2270ae commit c61a241

File tree

7 files changed

+91
-114
lines changed

7 files changed

+91
-114
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
},
2424
"dependencies": {
2525
"@babel/runtime": "^7.7.7",
26-
"draggable-helper": "^3.0.4",
27-
"helper-js": "^1.4.24",
26+
"draggable-helper": "^4.0.0",
27+
"helper-js": "^1.4.26",
2828
"vue-functions": "^2.0.1",
2929
"vue-runtime-helpers": "^1.1.2"
3030
},

‎src/components/Tree.vue‎

Lines changed: 21 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -81,47 +81,26 @@ const Tree = {
8181
}
8282
},
8383
// computed: {},
84-
// watch: {},
85-
methods: {
86-
// todo move iteratePath, getAllNodesByPath, getNodeByPath to helper-js
87-
* iteratePath(path, opt = {}) {
88-
if (!opt.reverse) {
89-
let prevPath = []
90-
let prevNode
91-
let prevChildren = this.treeData
92-
for (const index of path) {
93-
const currentPath = [...prevPath, index]
94-
const currentNode = prevChildren[index]
95-
yield {path: currentPath, node: currentNode}
96-
prevPath = currentPath
97-
prevNode = currentNode
98-
prevChildren = currentNode.children
99-
}
100-
} else {
101-
const allReversedNodes = this.getAllNodesByPath(path)
102-
allReversedNodes.reverse()
103-
let currentPath = path.slice()
104-
for (const node of allReversedNodes) {
105-
yield {path: currentPath, node: node}
106-
currentPath = hp.arrayWithoutEnd(currentPath, 1)
107-
}
84+
watch: {
85+
treeData: {
86+
immediate: true,
87+
handler(treeData) {
88+
this._TreeDataHelper = new hp.TreeData(this.treeData)
10889
}
109-
},
110-
walkTreeData(handler, ...args) {
111-
return ut.walkTreeData(this.treeData, handler, ...args)
90+
}
91+
},
92+
methods: {
93+
iteratePath(path, opt) {
94+
return this._TreeDataHelper.iteratePath(path, opt)
11295
},
11396
getTreeVmByTreeEl(treeEl) {
11497
return this.trees[treeEl.getAttribute('data-tree-id')]
11598
},
11699
getAllNodesByPath(path) {
117-
const nodes = []
118-
for (const {node} of this.iteratePath(path)) {
119-
nodes.push(node)
120-
}
121-
return nodes
100+
return this._TreeDataHelper.getAllNodes(path)
122101
},
123102
getNodeByPath(path) {
124-
return hp.arrayLast(this.getAllNodesByPath(path))
103+
return this._TreeDataHelper.getNode(path)
125104
},
126105
getPathByBranchEl(branchEl) {
127106
return branchEl.getAttribute('data-tree-node-path').split(',').map(v => parseInt(v))
@@ -133,20 +112,20 @@ const Tree = {
133112
return this.getNodeByPath(this.getPathByBranchEl(branchEl))
134113
},
135114
getNodeParentByPath(path) {
136-
return hp.arrayWithoutEnd(this.getAllNodesByPath(path), 1)
115+
return this._TreeDataHelper.getNodeParent(path)
137116
},
138117
removeNodeByPath(path) {
139-
const parentPath = path.slice()
140-
const index = parentPath.pop()
141-
const parent = this.getNodeByPath(parentPath) || this.rootNode
142-
parent.children.splice(index, 1)
118+
return this._TreeDataHelper.removeNode(path)
119+
},
120+
walkTreeData(handler, opt) {
121+
return ut.walkTreeData(this.treeData, handler, opt)
143122
},
144-
cloneTreeData() {
145-
return ut.cloneTreeData(this.treeData)
123+
cloneTreeData(opt) {
124+
return ut.cloneTreeData(this.treeData, opt)
146125
},
147126
// return cloned new tree data without property witch starts with `$`
148-
getPureTreeData(treeData=this.treeData) {
149-
return ut.getPureTreeData(treeData)
127+
getPureTreeData() {
128+
return ut.getPureTreeData(this.treeData)
150129
},
151130
},
152131
created() {

‎src/plugins/check.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import * as ut from '../utils.js'
2+
13
export default {
24
props: {},
35
methods: {
@@ -11,7 +13,7 @@ export default {
1113
}
1214
// update children
1315
if (node.children && node.children.length > 0) {
14-
this.walkTreeData(node.children, (childNode) => {
16+
ut.walkTreeData(node.children, (childNode) => {
1517
this.$set(childNode, '$checked', node.$checked)
1618
})
1719
}
@@ -29,7 +31,7 @@ export default {
2931
this.afterCheckChanged(node, path)
3032
},
3133
setCheckedOfAllNodes(to, nodeOrNodes = this.treeData) {
32-
this.walkTreeData(nodeOrNodes, (childNode) => {
34+
ut.walkTreeData(nodeOrNodes, (childNode) => {
3335
this.$set(childNode, '$checked', to)
3436
})
3537
},

‎src/plugins/draggable/Draggable.vue‎

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
import * as hp from 'helper-js'
3+
import * as ut from '../../utils'
34
import makeTreeDraggable from './draggable.js'
45
56
const treesStore = {}
@@ -118,6 +119,7 @@ export default {
118119
indent: this.indent,
119120
triggerClass: this.triggerClass,
120121
unfoldWhenDragover: this.unfoldWhenDragover,
122+
cloneWhenDrag: this.cloneWhenDrag,
121123
treeClass: 'he-tree',
122124
rootClass: 'tree-root',
123125
childrenClass: 'tree-children',
@@ -187,6 +189,9 @@ export default {
187189
const {startTree, dragBranchEl, startPath} = store
188190
const path = startTree.getPathByBranchEl(dragBranchEl)
189191
store.dragNode = startTree.getNodeByPath(path)
192+
if (this.cloneWhenDrag) {
193+
store.dragNode = ut.cloneTreeData(store.dragNode)
194+
}
190195
if (!startTree.isNodeDraggable(store.dragNode, path)) {
191196
return false
192197
}
@@ -201,7 +206,9 @@ export default {
201206
const {startTree} = store
202207
if (startTree !== targetTree) {
203208
if (this._internal_hook_filterTargetTree) {
204-
return this._internal_hook_filterTargetTree(store)
209+
if (this._internal_hook_filterTargetTree(targetTree, store) === false) {
210+
return false
211+
}
205212
} else {
206213
console.log('he-tree: The plugin DraggablePro is required for `crossTree` feature.')
207214
return false
@@ -227,29 +234,31 @@ export default {
227234
ondrop: (store, t) => {
228235
if (store.pathChanged) {
229236
const {startTree, targetTree, startPath, targetPath, dragNode} = store
230-
// remove from start position
231-
const startParentPath = hp.arrayWithoutEnd(startPath, 1)
232-
const startParent = startTree.getNodeByPath(startParentPath)
233-
const startSiblings = startParent ? startParent.children : startTree.treeData
234-
const startIndex = hp.arrayLast(startPath)
235-
startSiblings.splice(startIndex, 1)
236-
// update targetPath
237-
if (startTree === targetTree) {
238-
if (startPath.length <= targetPath.length) {
239-
const lenNoEnd = startPath.length - 1
240-
let same = true
241-
for (let i = 0; i < lenNoEnd; i++) {
242-
const s = startPath[i]
243-
const t = targetPath[i]
244-
if (s !== t) {
245-
same = false
246-
break
237+
if (this.cloneWhenDrag !== true) {
238+
// remove from start position
239+
const startParentPath = hp.arrayWithoutEnd(startPath, 1)
240+
const startParent = startTree.getNodeByPath(startParentPath)
241+
const startSiblings = startParentPath.length === 0 ? startTree.treeData : startParent.children
242+
const startIndex = hp.arrayLast(startPath)
243+
startSiblings.splice(startIndex, 1)
244+
// update targetPath
245+
if (startTree === targetTree) {
246+
if (startPath.length <= targetPath.length) {
247+
const lenNoEnd = startPath.length - 1
248+
let same = true
249+
for (let i = 0; i < lenNoEnd; i++) {
250+
const s = startPath[i]
251+
const t = targetPath[i]
252+
if (s !== t) {
253+
same = false
254+
break
255+
}
247256
}
248-
}
249-
if (same) {
250-
const endIndex = startPath.length - 1
251-
if (startPath[endIndex] < targetPath[endIndex]) {
252-
targetPath[endIndex] -= 1
257+
if (same) {
258+
const endIndex = startPath.length - 1
259+
if (startPath[endIndex] < targetPath[endIndex]) {
260+
targetPath[endIndex] -= 1
261+
}
253262
}
254263
}
255264
}
@@ -258,13 +267,13 @@ export default {
258267
const targetParentPath = hp.arrayWithoutEnd(targetPath, 1)
259268
const targetParent = targetTree.getNodeByPath(targetParentPath)
260269
let targetSiblings
261-
if (targetParent) {
270+
if (targetParentPath.length === 0) {
271+
targetSiblings = targetTree.treeData
272+
} else {
262273
if (!targetParent.children) {
263274
this.$set(targetParent, 'children', [])
264275
}
265276
targetSiblings = targetParent.children
266-
} else {
267-
targetSiblings = targetTree.treeData
268277
}
269278
const targetIndex = hp.arrayLast(targetPath)
270279
targetSiblings.splice(targetIndex, 0, dragNode)
@@ -285,8 +294,11 @@ export default {
285294
}
286295
const _makeTreeDraggable_obj = this._makeTreeDraggable_obj = makeTreeDraggable(this.$el, options);
287296
// watch props and update options
288-
['indent', 'triggerClass', 'unfoldWhenDragover'].forEach(name => {
289-
this.$watch(name, (value) => { _makeTreeDraggable_obj.options[name] = value })
297+
['indent', 'triggerClass', 'unfoldWhenDragover', 'cloneWhenDrag'].forEach(name => {
298+
this.$watch(name, (value) => {
299+
_makeTreeDraggable_obj.options[name] = value
300+
_makeTreeDraggable_obj.optionsUpdated()
301+
})
290302
})
291303
},
292304
}

‎src/plugins/draggable/draggable.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,10 @@ export default function makeTreeDraggable(treeEl, options = {}) {
2424
...options,
2525
treeEl,
2626
}
27-
const destroy = draggableHelper(treeEl, {
27+
const {destroy, draggableHelperOptions} = draggableHelper(treeEl, {
2828
draggingClass: options.draggingClass,
2929
restoreDOMManuallyOndrop: true,
30+
clone: options.cloneWhenDrag,
3031
beforeDrag(startEvent, moveEvent, store, opt) {
3132
store.startTreeEl = treeEl
3233
if (options.beforeDrag && options.beforeDrag(store, opt) === false) {
@@ -444,7 +445,7 @@ export default function makeTreeDraggable(treeEl, options = {}) {
444445
}
445446
},
446447
})
447-
return {destroy, options}
448+
return {destroy, options, optionsUpdated}
448449
function getParentBranchByEl(el) {
449450
return hp.findParent(el, el => {
450451
if (hp.hasClass(el, options.branchClass)) {
@@ -455,6 +456,9 @@ export default function makeTreeDraggable(treeEl, options = {}) {
455456
}
456457
})
457458
}
459+
function optionsUpdated() {
460+
draggableHelperOptions.clone = options.cloneWhenDrag
461+
}
458462
}
459463

460464
function isElementHidden(el) {

‎src/plugins/fold.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as hp from 'helper-js'
2-
31
export default {
42
props: {
53
foldingTransitionName: {type: String},
@@ -10,7 +8,6 @@ export default {
108
fold(node, path) {
119
if (!node.$folded) {
1210
this.$set(node, '$folded', true)
13-
this.$emit('folded', {node, path})
1411
}
1512
},
1613
unfold(node, path, opt = {}) {
@@ -24,7 +21,6 @@ export default {
2421
}
2522
if (node.$folded) {
2623
this.$set(node, '$folded', false)
27-
this.$emit('unfolded', {node, path, opt})
2824
}
2925
if (opt.unfoldParent && path.length > 1) {
3026
const parentPath = path.slice(0, path.length - 1)
@@ -40,12 +36,12 @@ export default {
4036
}
4137
},
4238
foldAll() {
43-
hp.walkTreeData(this.treeData, (childNode) => {
39+
this.walkTreeData((childNode) => {
4440
this.fold(childNode)
4541
})
4642
},
4743
unfoldAll() {
48-
hp.walkTreeData(this.treeData, (childNode) => {
44+
this.walkTreeData((childNode) => {
4945
this.unfold(childNode, {unfoldParent: false})
5046
})
5147
},

‎src/utils.js‎

Lines changed: 16 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,22 @@
1-
import * as hp from 'helper-js'
1+
import {TreeData} from 'helper-js'
22

3-
export function cloneTreeData(treeData) {
4-
let notArray
5-
if (!hp.isArray(treeData)) {
6-
treeData = [treeData]
7-
notArray = true
8-
}
9-
const getNewNodes = (nodes) => {
10-
const newNodes = nodes.map(node => {
11-
const newNode = {}
12-
Object.keys(node).forEach(key => {
13-
newNode[key] = node[key]
14-
if (key === 'children') {
15-
newNode[key] = getNewNodes(node[key])
16-
}
17-
})
18-
return newNode
19-
})
20-
return newNodes
21-
}
22-
const result = getNewNodes(treeData)
23-
return notArray ? result[0] : result
3+
export function cloneTreeData(treeData, opt) {
4+
return (new TreeData(treeData)).clone(opt)
245
}
256

26-
export const walkTreeData = hp.walkTreeData
7+
export function walkTreeData(treeData, handler, opt) {
8+
return (new TreeData(treeData)).walk(handler, opt)
9+
}
2710

2811
export function getPureTreeData(treeData) {
29-
const newTreeData = cloneTreeData(treeData)
30-
walkTreeData(newTreeData, (node) => {
31-
Object.keys(node).forEach(key => {
32-
if (key[0] === '$') {
33-
delete node[key]
34-
}
35-
})
36-
})
37-
return newTreeData
12+
const opt = {
13+
afterNodeCreated: newNode => {
14+
Object.keys(newNode).forEach(key => {
15+
if (key[0] === '$') {
16+
delete newNode[key]
17+
}
18+
})
19+
},
20+
}
21+
return cloneTreeData(treeData, opt)
3822
}

0 commit comments

Comments
 (0)