From 2f618106c1c865039b0cef5e093871cff7a3e7bc Mon Sep 17 00:00:00 2001
From: ark_65 <liuwufangzhou@vip.qq.com>
Date: Thu, 26 Oct 2023 16:31:00 +0800
Subject: [PATCH] feat: #INFR-10087 support drag-and-drop across bars that
 extend beyond the time span

---
 .../src/app/gantt-advanced/gantt-advanced.component.html | 7 ++++---
 packages/gantt/src/components/bar/bar-drag.ts            | 9 +++++++--
 packages/gantt/src/gantt-upper.ts                        | 2 ++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/example/src/app/gantt-advanced/gantt-advanced.component.html b/example/src/app/gantt-advanced/gantt-advanced.component.html
index 7c953285..6aa90e27 100644
--- a/example/src/app/gantt-advanced/gantt-advanced.component.html
+++ b/example/src/app/gantt-advanced/gantt-advanced.component.html
@@ -1,5 +1,5 @@
-<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
     >
@@ -7,7 +7,7 @@
     <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
index 503b075d..a97edef8 100644
--- 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
index bee8665a..04b006aa 100644
--- 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]
     };