feat(module:tree): add drag create sub node

close #232
NG-NEST · Oct 23, 2024 · ebe03ac · ebe03ac
1 parent 25ec5ff
commit ebe03ac
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 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
@@ -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<number, string>([
+        [-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
@@ -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<number, string>([
+        [-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
@@ -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
@@ -61,7 +61,7 @@ export class XTreeComponent extends XTreeProperty implements OnChanges {
   treeData = signal<XTreeNode[]>([]);
 
   dragging = signal(false);
-  dragPosition = signal<-1 | 1>(-1);
+  dragPosition = signal<-1 | 0 | 1>(-1);
   hoverTreeNode = signal<XTreeNode | null>(null);
   hoverTreeEle!: ElementRef;
   draggingTreeNode = signal<XTreeNode | null>(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
@@ -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
@@ -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
@@ -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
@@ -3,11 +3,11 @@
 <!-- <ex-checkbox></ex-checkbox> -->
 <!-- <ex-control></ex-control> -->
 <!-- <ex-custom></ex-custom> -->
-<!-- <ex-drag></ex-drag> -->
+<ex-drag></ex-drag>
 <!-- <ex-height></ex-height> -->
 <!-- <ex-icon></ex-icon> -->
 <!-- <ex-lazy></ex-lazy> -->
 <!-- <ex-line></ex-line> -->
 <!-- <ex-open></ex-open> -->
 <!-- <ex-status></ex-status> -->
-<ex-virtual-scroll></ex-virtual-scroll>
+<!-- <ex-virtual-scroll></ex-virtual-scroll> -->