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

…d the time span (#424) * feat: #INFR-10087 support drag-and-drop across bars that extend beyond the time span * feat: #INFR-10087 support drag-and-drop across bars that extend beyond the time span * feat: #INFR-10087 support drag-and-drop across bars that extend beyond the time span * feat: #INFR-10087 support drag-and-drop across bars that extend beyond the time span * feat: #INFR-10087 support drag-and-drop across bars that extend beyond the time span
worktile · Oct 30, 2023 · 5c1d19a · 5c1d19a
1 parent e8ec5ee
commit 5c1d19a
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/example/src/app/configuration/parameters/api/zh-cn.js b/example/src/app/configuration/parameters/api/zh-cn.js
@@ -121,6 +121,12 @@ module.exports = [
                 type: 'boolean',
                 default: 'false'
             },
+            {
+                name: 'restrictToBounds',
+                description: '设置是否限制拖拽边界，同时自定义拖拽到时间范围外时，需继承 `GanttView` 并重写其中的 `getDateByXPoint`',
+                type: 'boolean',
+                default: 'true'
+            },
             {
                 name: 'toolbarOptions',
                 description: `工具栏配置项`,

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,7 +147,9 @@ export class GanttBarDrag implements OnDestroy {
     private createBarDrag() {
         const dragRef = this.createDragRef(this.barElement);
         dragRef.lockAxis = 'x';
-        dragRef.withBoundaryElement(this.dom.mainItems as HTMLElement);
+        if (this.ganttUpper.restrictToBounds) {
+            dragRef.withBoundaryElement(this.dom.mainItems as HTMLElement);
+        }
         dragRef.started.subscribe(() => {
             this.setDraggingStyles();
             this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
@@ -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]
     };

diff --git a/packages/gantt/src/views/view.ts b/packages/gantt/src/views/view.ts
@@ -173,14 +173,28 @@ export abstract class GanttView {
     }
 
     // 根据X坐标获取对应时间
-    getDateByXPoint(x: number) {
-        const indexOfSecondaryDate = Math.max(Math.floor(x / this.getCellWidth()), 0);
-        const matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
-        const dayWidth = this.getDayOccupancyWidth(matchDate?.start);
+    getDateByXPoint(x: number): GanttDate {
+        let indexOfSecondaryDate: number;
+        let matchDate: GanttDatePoint;
+        let dayWidth: number;
+        let day: number;
+        if (x >= 0) {
+            indexOfSecondaryDate = Math.floor(x / this.getCellWidth());
+            matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
+            dayWidth = this.getDayOccupancyWidth(matchDate?.start);
+        } else {
+            const datePointTemp = this.secondaryDatePoints[0];
+            dayWidth = this.getDayOccupancyWidth(datePointTemp?.start);
+            day = Math.floor(x / dayWidth);
+            return datePointTemp?.start.addDays(day);
+        }
         if (dayWidth === this.getCellWidth()) {
             return matchDate?.start;
         } else {
-            const day = Math.floor((x % this.getCellWidth()) / dayWidth) + 1;
+            day = Math.floor((x % this.getCellWidth()) / dayWidth) + 1;
+            if (indexOfSecondaryDate > this.secondaryDatePoints.length - 1) {
+                day += (indexOfSecondaryDate - (this.secondaryDatePoints.length - 1)) * 30;
+            }
             if (this.getCellWidth() / dayWidth === 7) {
                 return matchDate?.start.addDays(day);
             }