From 5c1d19a1e03ab123ea6ac1011110ddaa4ece921e Mon Sep 17 00:00:00 2001 From: ark_65 Date: Mon, 30 Oct 2023 11:41:15 +0800 Subject: [PATCH] feat: #INFR-10087 support drag-and-drop across bars that extend beyond 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 --- .../app/configuration/parameters/api/zh-cn.js | 6 +++++ .../gantt-advanced.component.html | 7 +++--- packages/gantt/src/components/bar/bar-drag.ts | 7 +++++- packages/gantt/src/gantt-upper.ts | 2 ++ packages/gantt/src/views/view.ts | 24 +++++++++++++++---- 5 files changed, 37 insertions(+), 9 deletions(-) diff --git a/example/src/app/configuration/parameters/api/zh-cn.js b/example/src/app/configuration/parameters/api/zh-cn.js index 69ba26f5..d8ba846e 100644 --- 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 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 @@ -
-
+
+
NgxGantt 导出了 ngx-gantt-root、ngx-gantt-bar @@ -7,7 +7,7 @@
下面示例实现了任务分组的展示，并且将每个分组下任务按时间维度打平展示。
-
+
@@ -19,6 +19,7 @@ [groups]="groups" [viewType]="options.viewType" [draggable]="options.draggable" + [restrictToBounds]="false" [styles]="options.styles" > diff --git a/packages/gantt/src/components/bar/bar-drag.ts b/packages/gantt/src/components/bar/bar-drag.ts index 503b075d..459f4b47 100644 --- 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 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] }; diff --git a/packages/gantt/src/views/view.ts b/packages/gantt/src/views/view.ts index aade6405..cb5ad0c2 100644 --- 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); }