@progress/kendo-angular-gantt
Version:
Kendo UI Angular Gantt
95 lines (94 loc) • 4.8 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, EventEmitter, Output } from '@angular/core';
import { TaskDragService } from './task-drag.service';
import { DragTargetContainerDirective } from '@progress/kendo-angular-utils';
import { Subscription } from 'rxjs';
import { GanttComponent } from '../gantt.component';
import { getEditItem } from '../editing/utils';
import { MappingService } from '../common/mapping.service';
import { hasObservers } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "../gantt.component";
import * as i2 from "../common/mapping.service";
import * as i3 from "@progress/kendo-angular-utils";
import * as i4 from "./task-drag.service";
/**
* Represents the Gantt task drag directive.
*
* Use this directive to enable dragging of tasks in the Gantt. The directive listens and emits events with information about the dragged task.
*
* @example
* ```html
* <kendo-gantt [data]="tasks" kendoGanttTaskDrag (taskDrag)="onTaskDrag($event)" (taskDragEnd)="onTaskDragEnd($event)">
* </kendo-gantt>
* ```
*
* @remarks
* Applied to: {@link GanttComponent}
*/
export class TaskDragDirective {
/**
* Emits while the user resizes or moves a task by dragging.
*/
taskDrag = new EventEmitter();
/**
* Fires when the user finishes dragging to resize or move a task.
* The event data gives you all information needed to update the task and related tasks.
*/
taskDragEnd = new EventEmitter();
subs = new Subscription();
constructor(gantt, mapper, dragTargetContainer, taskDragService) {
dragTargetContainer.mode = 'manual';
dragTargetContainer.dragTargetFilter = '.k-resize-handle, .k-task, .k-task-draghandle';
dragTargetContainer.cursorStyle = null;
dragTargetContainer.threshold = 5;
this.subs.add(dragTargetContainer.onDragStart.subscribe((args) => {
taskDragService.onDragStart(args);
}));
this.subs.add(dragTargetContainer.onDrag.subscribe((args) => {
taskDragService.onDrag(args);
}));
this.subs.add(dragTargetContainer.onDragEnd.subscribe((args) => {
taskDragService.onDragEnd(args);
}));
this.subs.add(taskDragService.drag.subscribe((args) => {
hasObservers(this.taskDrag) && this.taskDrag.emit({
start: args.start,
end: args.end,
completionRatio: args.completionRatio,
item: getEditItem(args.item, gantt.treeList.view.data, mapper),
dragEvent: args.dragEvent
});
}));
this.subs.add(taskDragService.dragEnd.subscribe((args) => {
hasObservers(this.taskDragEnd) && this.taskDragEnd.emit({
start: args.start,
end: args.end,
completionRatio: args.completionRatio,
item: getEditItem(args.item, gantt.treeList.view.data, mapper),
dragEvent: args.dragEvent
});
}));
}
ngOnDestroy() {
this.subs.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TaskDragDirective, deps: [{ token: i1.GanttComponent }, { token: i2.MappingService }, { token: i3.DragTargetContainerDirective }, { token: i4.TaskDragService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TaskDragDirective, isStandalone: true, selector: "[kendoGanttTaskDrag]", outputs: { taskDrag: "taskDrag", taskDragEnd: "taskDragEnd" }, providers: [TaskDragService], hostDirectives: [{ directive: i3.DragTargetContainerDirective }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TaskDragDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGanttTaskDrag]',
standalone: true,
providers: [TaskDragService],
hostDirectives: [DragTargetContainerDirective]
}]
}], ctorParameters: () => [{ type: i1.GanttComponent }, { type: i2.MappingService }, { type: i3.DragTargetContainerDirective }, { type: i4.TaskDragService }], propDecorators: { taskDrag: [{
type: Output
}], taskDragEnd: [{
type: Output
}] } });