fix: fix drag insert index bug when target expanded (#328)

worktile · Mar 16, 2023 · 57f82da · 57f82da
1 parent 9d4aff7
commit 57f82da
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/packages/gantt/src/class/test/item.spec.ts b/packages/gantt/src/class/test/item.spec.ts
@@ -34,7 +34,7 @@ describe('GanttItemInternal', () => {
     it(`should has correct end`, () => {
         expect(ganttItemInternal.end.getUnixTime()).toBe(new GanttDate('2020-06-19 23:59:59').getUnixTime());
 
-        ganttItemInternal = new GanttItemInternal(ganttItem, { fillDays: 1 });
+        ganttItemInternal = new GanttItemInternal(ganttItem, 0, { fillDays: 1 });
         expect(ganttItemInternal.end.getUnixTime()).toBe(new GanttDate('2020-05-21 23:59:59').getUnixTime());
     });
 
@@ -44,7 +44,7 @@ describe('GanttItemInternal', () => {
         ganttItemInternal = new GanttItemInternal(ganttItem);
         expect(ganttItemInternal.start.getUnixTime()).toBe(new GanttDate('2020-04-22 00:00:00').getUnixTime());
 
-        ganttItemInternal = new GanttItemInternal(ganttItem, { fillDays: 1 });
+        ganttItemInternal = new GanttItemInternal(ganttItem, 0, { fillDays: 1 });
         expect(ganttItemInternal.start.getUnixTime()).toBe(new GanttDate('2020-05-21 00:00:00').getUnixTime());
     });
 

diff --git a/packages/gantt/src/components/table/body/gantt-table-body.component.ts b/packages/gantt/src/components/table/body/gantt-table-body.component.ts
@@ -154,7 +154,7 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
     onItemDragStarted(event: CdkDragStart<GanttItemInternal>) {
         this.ganttTableDragging = true;
         // 拖动开始时隐藏所有的子项
-        const children = this.getChildrenElementsByDragRef(event.source);
+        const children = this.getChildrenElementsByElement(event.source.getPlaceholderElement());
         children.forEach((element) => {
             element.classList.add('drag-item-hide');
         });
@@ -256,9 +256,19 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
     }
 
     private insertItem(target: GanttItemInternal, inserted: GanttItemInternal, position: 'before' | 'after') {
-        const appendIndex = position === 'after' ? 1 : 0;
-        this.renderData.splice(this.renderData.indexOf(target) + appendIndex, 0, inserted);
-        this.flatData.splice(this.flatData.indexOf(target) + appendIndex, 0, inserted);
+        if (position === 'before') {
+            this.renderData.splice(this.renderData.indexOf(target), 0, inserted);
+            this.flatData.splice(this.flatData.indexOf(target), 0, inserted);
+        } else {
+            const dragRef = this.cdkDrags.find((drag) => drag.data === target);
+            // 如果目标项是展开的，插入的 index 位置需要考虑子项的数量
+            let childrenCount = 0;
+            if (target.expanded) {
+                childrenCount = this.getChildrenElementsByElement(dragRef.element.nativeElement)?.length || 0;
+            }
+            this.renderData.splice(this.renderData.indexOf(target) + 1 + childrenCount, 0, inserted);
+            this.flatData.splice(this.flatData.indexOf(target) + 1 + childrenCount, 0, inserted);
+        }
     }
 
     private insertChildrenItem(target: GanttItemInternal, inserted: GanttItemInternal) {
@@ -275,10 +285,11 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
         });
     }
 
-    private getChildrenElementsByDragRef(dragRef: CdkDrag<GanttItemInternal>) {
+    private getChildrenElementsByElement(element: HTMLElement) {
         // 通过循环持续查找 next element，如果 element 的 level 小于当前 item 的 level，则为它的 children
         const children: HTMLElement[] = [];
-        let nextElement = dragRef.getPlaceholderElement().nextElementSibling as HTMLElement;
+        const dragRef = this.itemDragRefMap.get(element);
+        let nextElement = element.nextElementSibling as HTMLElement;
         let nextDragRef = this.itemDragRefMap.get(nextElement);
         while (nextDragRef && nextDragRef.data.level > dragRef.data.level) {
             children.push(nextElement);