Merge pull request #3244 from VisActor/3235-feature-gantttable-schedulecreatable

feat: tasksShowMode sub_task mode support createSchedule #3235

Author: fangsmile

common/changes/@visactor/vtable/feature-taskBarCreatableSupportFn_2024-12-25-10-50.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "docs: add scheduleCreatable doc\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

common/changes/@visactor/vtable/feature-taskBarCreatableSupportFn_2024-12-26-07-10.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: change taskRecord type from string to any\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

docs/assets/api/en/GanttAPI.md

@@ -67,7 +67,9 @@ update markLine
 Update a specific data record
 
 ```
-  updateTaskRecord: (record: any, index: number) => void
+  /** Updating data information can be passed into a specific index, and updating subtasks can also be passed into an index array */
+  updateTaskRecord(record: any, task_index: number | number[]): void;
+  updateTaskRecord(record: any, task_index: number, sub_task_index: number): void;
 ```
 
 ### release(Function)

docs/assets/api/zh/GanttAPI.md

@@ -67,7 +67,9 @@
 更新某一条数据
 
 ```
-  updateTaskRecord: (record: any, index: number) => void
+  /** 更新数据信息 可以传入具体的索引，更新子任务也可以传入索引数组 */
+  updateTaskRecord(record: any, task_index: number | number[]): void;
+  updateTaskRecord(record: any, task_index: number, sub_task_index: number): void;
 ```
 
 ### release(Function)

docs/assets/guide/en/gantt/introduction.md

@@ -151,11 +151,18 @@ Through the `dependency.linkCreatable` configuration item, you can set whether t
 
 #### Creation Schedule
 
+Configuration taskBar. ScheduleCreatable to true.
+
 If there is no field data for the task date in the original data, you can create a schedule to specify a start time and end time for the task. By default, when you hover over a grid without date data, a button to add a schedule will appear.
 
 The button style can be configured via `taskBar.scheduleCreation.buttonStyle`.
 
 If the current configuration does not meet your needs, you can also customize the display effect of the creation schedule through the `taskBar.scheduleCreation.customLayout` configuration item.
+**Note: Different Gantt chart instances have different capabilities to create schedules.**
+
+When `tasksShowMode` is `TasksShowMode.Tasks_Separate` or `TasksShowMode.Sub_Tasks_Separate`, each piece of data has a corresponding row position display, but when there is no `startDate` and `endDate` field set in the data, a create button will appear when the mouse hovers over the row, and clicking the button will create a schedule and display the task bar.
+
+When `tasksShowMode` is `TasksShowMode.Sub_Tasks_Inline`, `TasksShowMode.Sub_Tasks_Arrange`, or `TasksShowMode.Sub_Tasks_Compact`, a create button will be displayed when the mouse hovers over the blank area, and clicking the button will trigger the event `GANTT_EVENT_TYPE.CREATE_TASK_SCHEDULE`, but it will not actually create a task schedule. The user needs to listen for this event and create a schedule update data according to business needs.
 
 ## Leveraging the Capabilities of the Table
 

docs/assets/guide/zh/gantt/introduction.md

@@ -151,12 +151,20 @@ links:[
 
 #### 创建排期
 
+配置 taskBar.scheduleCreatable 为 true。
+
 原始数据中如果没有任务日期的字段数据，那么可以通过创建排期能力来给任务指定一个开始时间和结束时间。默认当 hover 到没有日期数据的网格上时，会出现一个添加排期的按钮。
 
 按钮的样式可以通过`taskBar.scheduleCreation.buttonStyle`配置。
 
 如果当前配置不能满足需求，也可以通过`taskBar.scheduleCreation.customLayout`配置项自定义创建排期的展示效果。
 
+**注意：不同的甘特图实例，创建排期能力不同。：**
+
+当`tasksShowMode`为`TasksShowMode.Tasks_Separate`或`TasksShowMode.Sub_Tasks_Separate`，也就是没条数据有对应的一行位置展示，但是数据中没有设置 startDate 和 endDate 的字段时，鼠标 hover 到该行会出现创建按钮，点击按钮会创建排期并展示任务条。
+
+当`tasksShowMode`为`TasksShowMode.Sub_Tasks_Inline`或`TasksShowMode.Sub_Tasks_Arrange`或`TasksShowMode.Sub_Tasks_Compact`，当鼠标 hover 到空白区域即会显示创建按钮，点击按钮会触发事件`GANTT_EVENT_TYPE.CREATE_TASK_SCHEDULE`但不会真正的创建任务排期，使用者需要监听该事件根据业务需求来自行创建排期更新数据。
+
 ## 借助表格的能力
 
 甘特图是基于 VTable 的 ListTable 实现的，看上去相当于一个拼接形式，左侧是任务信息表格，右侧是任务条列表。

docs/assets/option/en/common/gantt/task-bar.md

@@ -70,7 +70,7 @@ Optional
       | ((interactionArgs: TaskBarInteractionArgumentType) => boolean | [boolean, boolean]);
 
 export type TaskBarInteractionArgumentType = {
-  taskRecord: string;
+  taskRecord: any;
   index: number;
   startDate: Date;
   endDate: Date;
@@ -88,7 +88,7 @@ Optional
 moveable?: boolean | ((interactionArgs: TaskBarInteractionArgumentType) => boolean);
 
 export type TaskBarInteractionArgumentType = {
-  taskRecord: string;
+  taskRecord: any;
   index: number;
   startDate: Date;
   endDate: Date;
@@ -137,12 +137,24 @@ Whether the service clause is optional, the default is true
 
 Not required
 
-${prefix} scheduleCreatable(boolean) = true
+${prefix} scheduleCreatable(boolean | Function) = true
 
 When there is no schedule, you can create a task bar schedule by clicking on the create button. The default is true.
 
 Optional
 
+```
+scheduleCreatable?: boolean | ((interactionArgs: TaskBarInteractionArgumentType) => boolean);
+
+export type TaskBarInteractionArgumentType = {
+  taskRecord: any;
+  index: number;
+  startDate: Date;
+  endDate: Date;
+  ganttInstance: Gantt;
+};
+```
+
 ${prefix} scheduleCreation(Object)
 
 For tasks without assigned dates, you can display the create button.

docs/assets/option/zh/common/gantt/task-bar.md

@@ -72,7 +72,7 @@ ${prefix} resizable(boolean | [ boolean, boolean ] | Function) = true
 
 //其中：
 export type TaskBarInteractionArgumentType = {
-  taskRecord: string;
+  taskRecord: any;
   index: number;
   startDate: Date;
   endDate: Date;
@@ -91,7 +91,7 @@ moveable?: boolean | ((interactionArgs: TaskBarInteractionArgumentType) => boole
 
 //其中：
 export type TaskBarInteractionArgumentType = {
-  taskRecord: string;
+  taskRecord: any;
   index: number;
   startDate: Date;
   endDate: Date;
@@ -140,12 +140,25 @@ ${prefix} selectable(boolean)
 
 非必填
 
-${prefix} scheduleCreatable(boolean) = true
+${prefix} scheduleCreatable(boolean | Function) = true
 
 数据没有排期时，可通过创建任务条排期。默认为 true
 
 非必填
 
+```
+scheduleCreatable?: boolean | ((interactionArgs: TaskBarInteractionArgumentType) => boolean);
+
+//其中：
+export type TaskBarInteractionArgumentType = {
+  taskRecord: any;
+  index: number;
+  startDate: Date;
+  endDate: Date;
+  ganttInstance: Gantt;
+};
+```
+
 ${prefix} scheduleCreation(Object)
 
 针对没有分配日期的任务，可以显示出创建按钮

packages/vtable-gantt/examples/gantt/gantt-Sub_Tasks_Arrange.ts

@@ -307,6 +307,7 @@ export function createTable() {
     },
     headerRowHeight: 60,
     taskBar: {
+      scheduleCreatable: true,
       startDateField: 'start',
       endDateField: 'end',
       progressField: 'progress',
@@ -457,7 +458,9 @@ export function createTable() {
   ganttInstance.on('scroll', e => {
     console.log('scroll', e);
   });
-
+  ganttInstance.on('create_task_schedule', e => {
+    console.log('CREATE_TASK_SCHEDULE', e);
+  });
   ganttInstance.listTableInstance?.on('scroll', e => {
     console.log('listTable scroll', e);
   });

packages/vtable-gantt/examples/gantt/gantt-Sub_Tasks_Inline.ts

@@ -444,7 +444,9 @@ export function createTable() {
   ganttInstance.on('scroll', e => {
     console.log('scroll', e);
   });
-
+  ganttInstance.on('create_task_schedule', e => {
+    console.log('CREATE_TASK_SCHEDULE', e);
+  });
   ganttInstance.listTableInstance?.on('scroll', e => {
     console.log('listTable scroll', e);
   });

packages/vtable-gantt/examples/gantt/gantt-Sub_Tasks_Separate.ts

@@ -91,8 +91,7 @@ export function createTable() {
           id: 7,
           title: 'Determine project scope',
           developer: '[email protected]',
-          start: '2024-08-09',
-          end: '2024-09-11',
+
           progress: 100,
           priority: 'P1'
         }

packages/vtable-gantt/src/Gantt.ts

@@ -62,6 +62,7 @@ import {
 } from './tools/util';
 import { DataSource } from './data/DataSource';
 import { isValid } from '@visactor/vutils';
+import type { GanttTaskBarNode } from './scenegraph/gantt-node';
 // import { generateGanttChartColumns } from './gantt-helper';
 export function createRootElement(padding: any, className: string = 'vtable-gantt'): HTMLElement {
   const element = document.createElement('div');
@@ -141,7 +142,7 @@ export class Gantt extends EventTarget {
     taskBarDragOrder: boolean;
     taskBarLabelStyle: ITaskBarLabelTextStyle;
     taskBarCustomLayout: ITaskBarCustomLayout;
-    taskBarCreatable: boolean;
+    taskBarCreatable: boolean | ((interactionArgs: TaskBarInteractionArgumentType) => boolean);
     taskBarCreationButtonStyle: ILineStyle & {
       cornerRadius?: number;
       backgroundColor?: string;
@@ -736,22 +737,22 @@ export class Gantt extends EventTarget {
     return this.records[taskShowIndex];
   }
 
-  _refreshTaskBar(taskShowIndex: number) {
+  _refreshTaskBar(taskShowIndex: number, sub_task_index: number) {
     // this.taskListTableInstance.updateRecords([record], [index]);
-    this.scenegraph.taskBar.updateTaskBarNode(taskShowIndex);
+    this.scenegraph.taskBar.updateTaskBarNode(taskShowIndex, sub_task_index);
     this.scenegraph.refreshRecordLinkNodes(
       taskShowIndex,
       undefined,
-      this.scenegraph.taskBar.getTaskBarNodeByIndex(taskShowIndex)
+      this.scenegraph.taskBar.getTaskBarNodeByIndex(taskShowIndex, sub_task_index) as GanttTaskBarNode
     );
     this.scenegraph.updateNextFrame();
   }
-  _updateRecordToListTable(record: any, index: number) {
-    const indexs = this.taskListTableInstance.getRecordIndexByCell(
-      0,
-      index + this.taskListTableInstance.columnHeaderLevelCount
-    );
-    this.taskListTableInstance.updateRecords([record], [indexs]);
+  _updateRecordToListTable(record: any, index: number | number[]) {
+    // const indexs = this.taskListTableInstance.getRecordIndexByCell(
+    //   0,
+    //   index + this.taskListTableInstance.columnHeaderLevelCount
+    // );
+    this.taskListTableInstance.updateRecords([record], [index]);
   }
   /**
    * 获取指定index处任务数据的具体信息
@@ -882,11 +883,27 @@ export class Gantt extends EventTarget {
     // const source_taskRecord = this.getRecordByIndex(source_index, source_sub_task_index);
     this.data.adjustOrder(source_index, source_sub_task_index, target_index, target_sub_task_index);
   }
-  /** 目前不支持树形tree的情况更新单条数据 需要的话目前可以setRecords。 */
-  updateTaskRecord(record: any, index: number) {
-    //const taskRecord = this.getRecordByIndex(index);
+  // 定义多个函数签名
+  /** 更新数据信息 */
+  updateTaskRecord(record: any, task_index: number | number[]): void;
+  updateTaskRecord(record: any, task_index: number, sub_task_index: number): void;
+  updateTaskRecord(record: any, task_index: number | number[], sub_task_index?: number) {
+    if (isValid(sub_task_index)) {
+      const index = typeof task_index === 'number' ? task_index : task_index[0];
+      this._updateRecordToListTable(record, [index, sub_task_index]);
+      this._refreshTaskBar(index, sub_task_index);
+      return;
+    }
+    if (Array.isArray(task_index)) {
+      const index = (task_index as number[])[0];
+      const sub_index = (task_index as number[])[1];
+      this._updateRecordToListTable(record, isValid(sub_index) ? [index, sub_index] : index);
+      this._refreshTaskBar(index, sub_index);
+      return;
+    }
+    const index = task_index as number;
     this._updateRecordToListTable(record, index);
-    this._refreshTaskBar(index);
+    this._refreshTaskBar(index, undefined);
   }
 
   /**