feat(gantt): support gantt table body dragStarted dragEnded function(…

…#INFR-7138) (#350) * feat(gantt): support gantt table body dragStarted dragEnded function(#INFR-7138) * feat(gantt): support gantt table body dragStarted dragEnded function(#INFR-7138) * feat(gantt): support gantt table body dragStarted dragEnded function(#INFR-7138) * feat(gantt): support gantt table body dragStarted dragEnded function(#INFR-7138) * feat(gantt): support gantt table body dragStarted dragEnded function(#INFR-7138) * feat(gantt): support gantt table body dragStarted dragEnded function(#INFR-7138)
worktile · Apr 3, 2023 · 2fece74 · 2fece74
1 parent 368d98a
commit 2fece74
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 4 deletions.
diff --git a/docs/guides/basic/event.md b/docs/guides/basic/event.md
@@ -93,3 +93,25 @@ export class GanttTableDragDroppedEvent<T = unknown> {
   dropPosition: GanttTableDropPosition; // 拖动放下的位置  'before' | 'inside' | 'after'
 }
 ```
+
+# GanttTableDragStartedEvent
+
+Table 组件拖拽开始后事件
+
+```ts
+export class GanttTableDragStartedEvent<T = unknown> {
+  source: GanttItem<T>; // 拖动开始数据项
+  sourceParent: GanttItem<T>; // 拖动开始数据项父
+}
+```
+
+# GanttTableDragEndedEvent
+
+Table 组件拖拽结束后事件
+
+```ts
+export class GanttTableDragEndedEvent<T = unknown> {
+  source: GanttItem<T>; // 拖动开始数据项
+  sourceParent: GanttItem<T>; // 拖动开始数据项父
+}
+```
diff --git a/example/src/app/configuration/parameters/api/zh-cn.js b/example/src/app/configuration/parameters/api/zh-cn.js
@@ -212,6 +212,16 @@ module.exports = [
                 description: `当把一个数据项拖动到另一个数据项时就会触发`,
                 type: 'EventEmitter<GanttTableDragDroppedEvent>'
             },
+            {
+                name: 'dragStarted',
+                description: `拖拽开始后事件`,
+                type: 'EventEmitter<GanttTableDragStartedEvent>'
+            },
+            {
+                name: 'dragEnded',
+                description: `拖拽结束后事件`,
+                type: 'EventEmitter<GanttTableDragEndedEvent>'
+            },
             {
                 name: 'columnChanges',
                 description: `列宽变化事件集`,

diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -45,7 +45,13 @@
       (selectedChange)="selectedChange($event)"
       (linkDragEnded)="linkDragEnded($event)"
     >
-      <ngx-gantt-table [draggable]="true" [dropEnterPredicate]="dropEnterPredicate" (dragDropped)="onDragDropped($event)">
+      <ngx-gantt-table
+        [draggable]="true"
+        [dropEnterPredicate]="dropEnterPredicate"
+        (dragDropped)="onDragDropped($event)"
+        (dragStarted)="onDragStarted($event)"
+        (dragEnded)="onDragEnded($event)"
+      >
         <ngx-gantt-column name="开始时间" [class.start-time]="true" [width]="140">
           <ng-template #cell let-item="item">
             {{ item.id }}

diff --git a/example/src/app/gantt/gantt.component.ts b/example/src/app/gantt/gantt.component.ts
@@ -13,7 +13,9 @@ import {
     GanttView,
     GanttToolbarOptions,
     GanttTableDragEnterPredicateContext,
-    GanttTableDragDroppedEvent
+    GanttTableDragDroppedEvent,
+    GanttTableDragStartedEvent,
+    GanttTableDragEndedEvent
 } from 'ngx-gantt';
 import { finalize, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
@@ -222,4 +224,12 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
         }
         this.items = [...this.items];
     }
+
+    onDragStarted(event: GanttTableDragStartedEvent) {
+        console.log('拖拽开始了', event);
+    }
+
+    onDragEnded(event: GanttTableDragEndedEvent) {
+        console.log('拖拽结束了', event);
+    }
 }
diff --git a/packages/gantt/src/class/event.ts b/packages/gantt/src/class/event.ts
@@ -46,6 +46,16 @@ export class GanttTableDragDroppedEvent<T = unknown> {
     dropPosition: GanttTableDropPosition;
 }
 
+export class GanttTableDragStartedEvent<T = unknown> {
+    source: GanttItem<T>;
+    sourceParent: GanttItem<T>;
+}
+
+export class GanttTableDragEndedEvent<T = unknown> {
+    source: GanttItem<T>;
+    sourceParent: GanttItem<T>;
+}
+
 export type GanttTableDropPosition = 'before' | 'inside' | 'after';
 
 export class GanttTableDragEnterPredicateContext<T = unknown> {

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
@@ -20,7 +20,9 @@ import {
     GanttSelectedEvent,
     GanttTableDropPosition,
     GanttTableDragEnterPredicateContext,
-    GanttTableDragDroppedEvent
+    GanttTableDragDroppedEvent,
+    GanttTableDragStartedEvent,
+    GanttTableDragEndedEvent
 } from '../../../class';
 import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
@@ -68,6 +70,10 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
 
     @Output() dragDropped = new EventEmitter<GanttTableDragDroppedEvent>();
 
+    @Output() dragStarted = new EventEmitter<GanttTableDragStartedEvent>();
+
+    @Output() dragEnded = new EventEmitter<GanttTableDragEndedEvent>();
+
     @Output() itemClick = new EventEmitter<GanttSelectedEvent>();
 
     @HostBinding('class.gantt-table-body') ganttTableClass = true;
@@ -158,6 +164,10 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
         children.forEach((element) => {
             element.classList.add('drag-item-hide');
         });
+        this.dragStarted.emit({
+            source: event.source.data?.origin,
+            sourceParent: this.getParentByItem(event.source.data)?.origin
+        });
     }
 
     emitItemDragMoved(event: CdkDragMove) {
@@ -207,6 +217,10 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
 
     onItemDragEnded(event: CdkDragEnd<GanttItemInternal>) {
         this.ganttTableDragging = false;
+        this.dragEnded.emit({
+            source: event.source.data?.origin,
+            sourceParent: this.getParentByItem(event.source.data)?.origin
+        });
     }
 
     onListDropped(event: CdkDragDrop<GanttItemInternal[], GanttItemInternal[], GanttItemInternal>) {

diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -28,6 +28,8 @@
             [draggable]="table.draggable"
             [dropEnterPredicate]="table.dropEnterPredicate"
             (dragDropped)="table.dragDropped.emit($event)"
+            (dragStarted)="table.dragStarted.emit($event)"
+            (dragEnded)="table.dragEnded.emit($event)"
             (itemClick)="selectItem($event)"
           ></gantt-table-body>
         </div>

diff --git a/packages/gantt/src/table/gantt-table.component.ts b/packages/gantt/src/table/gantt-table.component.ts
@@ -1,5 +1,11 @@
 import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
-import { GanttTableDragEnterPredicateContext, GanttTableDragDroppedEvent, GanttTableEvent } from '../class';
+import {
+    GanttTableDragEnterPredicateContext,
+    GanttTableDragDroppedEvent,
+    GanttTableEvent,
+    GanttTableDragStartedEvent,
+    GanttTableDragEndedEvent
+} from '../class';
 
 @Component({
     selector: 'ngx-gantt-table',
@@ -12,6 +18,10 @@ export class NgxGanttTableComponent {
 
     @Output() dragDropped = new EventEmitter<GanttTableDragDroppedEvent>();
 
+    @Output() dragStarted = new EventEmitter<GanttTableDragStartedEvent>();
+
+    @Output() dragEnded = new EventEmitter<GanttTableDragEndedEvent>();
+
     @Output() columnChanges = new EventEmitter<GanttTableEvent>();
 
     @ContentChild('rowBeforeSlot', { static: true }) rowBeforeTemplate: TemplateRef<any>;