From ebe03aca8722ded78f3159849e66bc31f812d1d7 Mon Sep 17 00:00:00 2001 From: ng-nest-moon Date: Wed, 23 Oct 2024 21:44:02 +0800 Subject: [PATCH] feat(module:tree): add drag create sub node close #232 --- .../en_US/default/drag/drag.component.ts | 9 ++++-- .../zh_CN/default/drag/drag.component.ts | 9 ++++-- lib/ng-nest/ui/tree/tree-node.component.ts | 7 +++++ lib/ng-nest/ui/tree/tree.component.ts | 10 ++++--- lib/ng-nest/ui/tree/tree.property.ts | 2 +- lib/ng-nest/ui/tree/tree.service.ts | 30 ++++++++++++++++--- src/environments/environment.development.ts | 2 +- src/main/test/tree/tree.component.html | 4 +-- 8 files changed, 55 insertions(+), 18 deletions(-) diff --git a/lib/ng-nest/ui/tree/examples/en_US/default/drag/drag.component.ts b/lib/ng-nest/ui/tree/examples/en_US/default/drag/drag.component.ts index 0a2e1a20c..3adbd1b82 100644 --- a/lib/ng-nest/ui/tree/examples/en_US/default/drag/drag.component.ts +++ b/lib/ng-nest/ui/tree/examples/en_US/default/drag/drag.component.ts @@ -34,9 +34,12 @@ export class ExDragComponent { if (type === 'started') { console.log('Started drag node:', event.from?.label); } else { - console.log( - `DragDrop node [${event.from?.label}] to [${event.to?.label}] node ${event.position === -1 ? 'Front' : 'Back'}` - ); + const posMap = new Map([ + [-1, 'Front'], + [0, 'Inside'], + [1, 'Back'] + ]); + console.log(`DragDrop node [${event.from?.label}] to [${event.to?.label}] node ${posMap.get(event.position!)}`); } } } diff --git a/lib/ng-nest/ui/tree/examples/zh_CN/default/drag/drag.component.ts b/lib/ng-nest/ui/tree/examples/zh_CN/default/drag/drag.component.ts index 69916158e..768d6ec57 100644 --- a/lib/ng-nest/ui/tree/examples/zh_CN/default/drag/drag.component.ts +++ b/lib/ng-nest/ui/tree/examples/zh_CN/default/drag/drag.component.ts @@ -34,9 +34,12 @@ export class ExDragComponent { if (type === 'started') { console.log('开始拖动节点:', event.from?.label); } else { - console.log( - `拖动节点 [${event.from?.label}] 至 [${event.to?.label}] 节点的 ${event.position === -1 ? '前面' : '后面'}` - ); + const posMap = new Map([ + [-1, '前面'], + [0, '里面'], + [1, '后面'] + ]); + console.log(`拖动节点 [${event.from?.label}] 至 [${event.to?.label}] 节点的 ${posMap.get(event.position!)}`); } } } diff --git a/lib/ng-nest/ui/tree/tree-node.component.ts b/lib/ng-nest/ui/tree/tree-node.component.ts index 8a47dc962..ab7d43a35 100644 --- a/lib/ng-nest/ui/tree/tree-node.component.ts +++ b/lib/ng-nest/ui/tree/tree-node.component.ts @@ -100,6 +100,9 @@ export class XTreeNodeComponent extends XTreeNodeProperty { paddingLeft = computed(() => (this.level()! ? this.level()! : 0) * XToCssPx(this.tree.spacing(), this.fontSize())); indicatorWidth = computed(() => { + if (this.tree.dragPosition() === 0) { + return `calc(100% - ${this.paddingLeft() + XToCssPx(this.tree.spacing(), this.fontSize()) + (this.leaf() ? this.fontSize() * 1.5 : 0)}px)`; + } return `calc(100% - ${this.paddingLeft() + (this.leaf() ? this.fontSize() * 1.5 : 0)}px)`; }); @@ -108,6 +111,10 @@ export class XTreeNodeComponent extends XTreeNodeProperty { return { bottom: `-${0.0625 * this.fontSize()}px` }; } else if (this.tree.dragPosition() === -1) { return { top: `-${0.0625 * this.fontSize()}px` }; + } else if (this.tree.dragPosition() === 0) { + return { + bottom: `-${0.0625 * this.fontSize()}px` + }; } return {}; }); diff --git a/lib/ng-nest/ui/tree/tree.component.ts b/lib/ng-nest/ui/tree/tree.component.ts index 96850eb8e..09e1b9d96 100644 --- a/lib/ng-nest/ui/tree/tree.component.ts +++ b/lib/ng-nest/ui/tree/tree.component.ts @@ -61,7 +61,7 @@ export class XTreeComponent extends XTreeProperty implements OnChanges { treeData = signal([]); dragging = signal(false); - dragPosition = signal<-1 | 1>(-1); + dragPosition = signal<-1 | 0 | 1>(-1); hoverTreeNode = signal(null); hoverTreeEle!: ElementRef; draggingTreeNode = signal(null); @@ -187,7 +187,7 @@ export class XTreeComponent extends XTreeProperty implements OnChanges { } } - insertNode(dragNode: XTreeNode, hoverNode: XTreeNode, dragPosition: -1 | 1) { + insertNode(dragNode: XTreeNode, hoverNode: XTreeNode, dragPosition: -1 | 0 | 1) { let parent = this.nodes().find((x) => x.id === dragNode.pid); this.treeService.moveNode(this.treeData(), dragNode, hoverNode, dragPosition); this.setDataChange(this.treeData(), true, false, true, parent); @@ -201,10 +201,12 @@ export class XTreeComponent extends XTreeProperty implements OnChanges { const target = this.hoverTreeEle.nativeElement as HTMLElement; const { top, height } = target.getBoundingClientRect(); const des = Math.max(height * 0.5, 2); - if (y > top && y < top + des) { + if (y > top && y < top + des - 2) { this.dragPosition.set(-1); - } else if (y > top + des && y < top + height) { + } else if (y > top + des + 2 && y < top + height) { this.dragPosition.set(1); + } else if (y >= top + des - 2 && y <= top + des + 2) { + this.dragPosition.set(0); } hoverTreeNode.change && hoverTreeNode.change(); this.nodeDragMoved.emit({ diff --git a/lib/ng-nest/ui/tree/tree.property.ts b/lib/ng-nest/ui/tree/tree.property.ts index 7dc35dd8c..152c8474b 100644 --- a/lib/ng-nest/ui/tree/tree.property.ts +++ b/lib/ng-nest/ui/tree/tree.property.ts @@ -318,7 +318,7 @@ export interface XTreeNodeDragEvent { * @zh_CN 对应节点的前面还是后面 * @en_US The front or back of the corresponding node */ - position?: -1 | 1; + position?: -1 | 0 | 1; } /** diff --git a/lib/ng-nest/ui/tree/tree.service.ts b/lib/ng-nest/ui/tree/tree.service.ts index 3c986beca..3c12cfd5f 100644 --- a/lib/ng-nest/ui/tree/tree.service.ts +++ b/lib/ng-nest/ui/tree/tree.service.ts @@ -49,18 +49,40 @@ export class XTreeService { return res; } - moveNode(data: XTreeNode[], from: XTreeNode, to: XTreeNode, pos: -1 | 1) { + moveNode(data: XTreeNode[], from: XTreeNode, to: XTreeNode, pos: -1 | 0 | 1) { if (XIsEmpty(data)) return; + const isAddChildNode = pos === 0; const formIndex = data.findIndex((x) => x.id === from.id); const toIndex = data.findIndex((x) => x.id === to.id); XRemove(data, (x) => x.id === from.id); if (from.pid === to.pid) { + let diffLevel = 0; + if (isAddChildNode) { + from.pid = to.id; + diffLevel = to.level! + 1 - from.level!; + from.level = to.level! + 1; + to.open = true; + } else { + diffLevel = to.level! - from.level!; + } + const fromChildren = this.getChildren(data, from); + fromChildren.forEach((x) => { + x.level = x.level! + diffLevel; + }); const index = toIndex > formIndex ? toIndex - 1 : toIndex; data.splice(pos === -1 ? index : index + 1, 0, from); } else if (from.pid !== to.pid) { - from.pid = to.pid; - const diffLevel = to.level! - from.level!; - from.level = to.level; + let diffLevel = 0; + if (isAddChildNode) { + from.pid = to.id; + diffLevel = to.level! + 1 - from.level!; + from.level = to.level! + 1; + to.open = true; + } else { + from.pid = to.pid; + diffLevel = to.level! - from.level!; + from.level = to.level; + } const fromChildren = this.getChildren(data, from); fromChildren.forEach((x) => { x.level = x.level! + diffLevel; diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts index f0f66d4a3..e10a277c2 100644 --- a/src/environments/environment.development.ts +++ b/src/environments/environment.development.ts @@ -1,5 +1,5 @@ export const environment = { layout: 'test', - defaultPage: 'select', + defaultPage: 'tree', static: 'https://ngnest.com/static' }; diff --git a/src/main/test/tree/tree.component.html b/src/main/test/tree/tree.component.html index 01bd6e426..d39992b67 100644 --- a/src/main/test/tree/tree.component.html +++ b/src/main/test/tree/tree.component.html @@ -3,11 +3,11 @@ - + - +