feat: #INFR-10087 support drag-and-drop across bars that extend beyon…

…d the time span
worktile · Oct 26, 2023 · 2f61810 · 2f61810
1 parent e8ec5ee
commit 2f61810
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/example/src/app/gantt-advanced/gantt-advanced.component.html b/example/src/app/gantt-advanced/gantt-advanced.component.html
@@ -1,13 +1,13 @@
-<div style="line-height: 30px; padding: 15px; display: flex;">
-  <div style="flex: 1;">
+<div style="line-height: 30px; padding: 15px; display: flex">
+  <div style="flex: 1">
     <span class="text-primary">NgxGantt</span> 导出了 <span class="text-primary">ngx-gantt-root</span>、<span class="text-primary"
       >ngx-gantt-bar</span
     >
     等基础组件，结合这些基础组件使用者可以结合自己的业务场景来封装自己的 Gantt 组件。
     <br />
     下面示例实现了任务分组的展示，并且将每个分组下任务按时间维度打平展示。
   </div>
-  <div style="padding-right: 15px;">
+  <div style="padding-right: 15px">
     <a href="https://github.com/worktile/ngx-gantt/blob/master/example/src/app/gantt-advanced" target="_blank">查看源码</a>
   </div>
 </div>
@@ -19,6 +19,7 @@
       [groups]="groups"
       [viewType]="options.viewType"
       [draggable]="options.draggable"
+      [restrictToBounds]="false"
       [styles]="options.styles"
     >
       <ng-template #group let-group="group">

diff --git a/packages/gantt/src/components/bar/bar-drag.ts b/packages/gantt/src/components/bar/bar-drag.ts
@@ -147,8 +147,10 @@ export class GanttBarDrag implements OnDestroy {
     private createBarDrag() {
         const dragRef = this.createDragRef(this.barElement);
         dragRef.lockAxis = 'x';
-        dragRef.withBoundaryElement(this.dom.mainItems as HTMLElement);
-        dragRef.started.subscribe(() => {
+        if (this.ganttUpper.restrictToBounds) {
+            dragRef.withBoundaryElement(this.dom.mainItems as HTMLElement);
+        }
+        dragRef.started.subscribe((event) => {
             this.setDraggingStyles();
             this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
             this.createDragScrollEvent(dragRef).subscribe(() => {
@@ -563,6 +565,9 @@ export class GanttBarDrag implements OnDestroy {
         const itemEnd = end.getUnixTime();
         const viewStart = this.ganttUpper.view.start.getUnixTime();
         const viewEnd = this.ganttUpper.view.end.getUnixTime();
+        if (!this.ganttUpper.restrictToBounds) {
+            return true;
+        }
         if (itemStart < viewStart || itemEnd > viewEnd) {
             return false;
         } else {

diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -68,6 +68,8 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
 
     @Input() showToolbar = false;
 
+    @Input() restrictToBounds = true;
+
     @Input() toolbarOptions: GanttToolbarOptions = {
         viewTypes: [GanttViewType.day, GanttViewType.month, GanttViewType.year]
     };