|
| 1 | +import { Component, ViewChild, Input } from '@angular/core'; |
| 2 | +import { DataService } from 'src/app/services/data.service'; |
| 3 | +import { DxTreeViewComponent } from 'devextreme-angular'; |
| 4 | + |
| 5 | +@Component({ |
| 6 | + selector: 'tree-view-hierarchy', |
| 7 | + templateUrl: './tree-view-hierarchy.component.html' |
| 8 | +}) |
| 9 | +export class TreeViewHierarchyComponent { |
| 10 | + @ViewChild("treeView") treeView: DxTreeViewComponent; |
| 11 | + @Input() shouldClearSelection: boolean; |
| 12 | + treeItems: any[]; |
| 13 | + constructor(dataService: DataService) { |
| 14 | + this.treeItems = dataService.getHierarchicalData(); |
| 15 | + } |
| 16 | + dragStart(e) { |
| 17 | + const treeView = this.treeView.instance; |
| 18 | + e.itemData = treeView.getSelectedNodes(); |
| 19 | + e.cancel = !this.canDrag(treeView, e); |
| 20 | + } |
| 21 | + dragChange(e) { |
| 22 | + const treeView = this.treeView.instance; |
| 23 | + e.cancel = !this.canDrop(treeView, e); |
| 24 | + } |
| 25 | + dragEnd(e) { |
| 26 | + const treeView = this.treeView.instance; |
| 27 | + const allItems = treeView.option("items"); |
| 28 | + if (this.canDrop(treeView, e)) { |
| 29 | + const toNode = this.getNodeByVisualIndex(treeView, this.calculateToIndex(e)); |
| 30 | + const treeViewExpr = { |
| 31 | + items: treeView.option("itemsExpr"), |
| 32 | + key: treeView.option("keyExpr") |
| 33 | + } |
| 34 | + this.moveNodes(allItems, e, toNode, treeViewExpr); |
| 35 | + } |
| 36 | + treeView.option("items", allItems); |
| 37 | + if (this.shouldClearSelection) |
| 38 | + treeView.unselectAll(); |
| 39 | + } |
| 40 | + canDrag(treeView, e) { |
| 41 | + const fromNode = this.getNodeByVisualIndex(treeView, e.fromIndex); |
| 42 | + return fromNode.selected && e.itemData && e.itemData.length; |
| 43 | + } |
| 44 | + canDrop(treeView, e) { |
| 45 | + const toNode = this.getNodeByVisualIndex(treeView, e.toIndex); |
| 46 | + const canAcceptChildren = (e.dropInsideItem && toNode.itemData.isDirectory) || !e.dropInsideItem; |
| 47 | + const toNodeIsChild = toNode && e.itemData.some(i => this.isParent(toNode, i)); |
| 48 | + const fromIndices = e.itemData.map(node => this.getVisualIndexByNode(treeView, node)); |
| 49 | + const targetThemselves = toNode && (e.itemData.some(i => i.key === toNode.key) || fromIndices.includes(e.toIndex)); |
| 50 | + return canAcceptChildren && !toNodeIsChild && !targetThemselves; |
| 51 | + } |
| 52 | + moveNodes(items, e, toNode, treeFieldExpr) { |
| 53 | + const nodesToMove = this.getTopNodes(e.itemData); |
| 54 | + nodesToMove.forEach(nodeToMove => { |
| 55 | + const fromNodeContainingArray = this.getNodeContainingArray(nodeToMove, items, treeFieldExpr.items); |
| 56 | + const fromIndex = this.getLocalIndex(fromNodeContainingArray, nodeToMove.key, treeFieldExpr.key); |
| 57 | + fromNodeContainingArray.splice(fromIndex, 1); |
| 58 | + }); |
| 59 | + if (e.dropInsideItem) { |
| 60 | + const toIndex = toNode.itemData[treeFieldExpr.items].length; |
| 61 | + toNode.itemData[treeFieldExpr.items].splice(toIndex, 0, ...nodesToMove.map(i => i.itemData)); |
| 62 | + } else { |
| 63 | + const toNodeContainingArray = this.getNodeContainingArray(toNode, items, treeFieldExpr.items); |
| 64 | + const toIndex = toNode === null |
| 65 | + ? items.length |
| 66 | + : this.getLocalIndex(toNodeContainingArray, toNode.key, treeFieldExpr.key); |
| 67 | + toNodeContainingArray.splice(toIndex, 0, ...nodesToMove.map(i => i.itemData)); |
| 68 | + } |
| 69 | + } |
| 70 | + isParent(node, possibleParentNode) { |
| 71 | + if (!node.parent) return false; |
| 72 | + return node.parent.key !== possibleParentNode.key ? this.isParent(node.parent, possibleParentNode) : true; |
| 73 | + } |
| 74 | + getTopNodes(nodes) { |
| 75 | + return nodes.filter(nodeToCheck => { |
| 76 | + return !nodes.some(n => this.isParent(nodeToCheck, n)); |
| 77 | + }); |
| 78 | + } |
| 79 | + getNodeContainingArray(node, rootArray, itemsExpr) { |
| 80 | + return node === null || node.parent === null |
| 81 | + ? rootArray |
| 82 | + : node.parent.itemData[itemsExpr]; |
| 83 | + } |
| 84 | + getVisualIndexByNode(treeView, node) { |
| 85 | + const nodeElements = Array.from(treeView.element().querySelectorAll('.dx-treeview-node')); |
| 86 | + const nodeElement = nodeElements.find(n => (<Element>n).getAttribute('data-item-id') === node.key); |
| 87 | + return nodeElements.indexOf(nodeElement); |
| 88 | + } |
| 89 | + getNodeByVisualIndex(treeView, index) { |
| 90 | + const nodeElement = treeView.element().querySelectorAll('.dx-treeview-node')[index]; |
| 91 | + if (nodeElement) { |
| 92 | + return this.getNodeByKey(treeView.getNodes(), nodeElement.getAttribute('data-item-id')); |
| 93 | + } |
| 94 | + return null; |
| 95 | + } |
| 96 | + getNodeByKey(nodes, key) { |
| 97 | + for (let i = 0; i < nodes.length; i++) { |
| 98 | + if (nodes[i].key == key) { |
| 99 | + return nodes[i]; |
| 100 | + } |
| 101 | + if (nodes[i].children) { |
| 102 | + const node = this.getNodeByKey(nodes[i].children, key); |
| 103 | + if (node != null) { |
| 104 | + return node; |
| 105 | + } |
| 106 | + } |
| 107 | + } |
| 108 | + return null; |
| 109 | + } |
| 110 | + calculateToIndex(e) { |
| 111 | + if (e.dropInsideItem) return e.toIndex; |
| 112 | + return e.fromIndex >= e.toIndex ? e.toIndex : e.toIndex + 1; |
| 113 | + } |
| 114 | + getLocalIndex(array, key, keyExpr) { |
| 115 | + const idsArray = array.map((elem) => elem[keyExpr]); |
| 116 | + return idsArray.indexOf(key); |
| 117 | + } |
| 118 | +} |
0 commit comments