Merge pull request #3279 from VisActor/3268-feature-gantt-deleteLinkLine

3268 feature gantt delete link line

Author: fangsmile

common/changes/@visactor/vtable/3268-feature-gantt-deleteLinkLine_2025-01-08-07-27.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add keyboardOptions and add delete_dependency_link contextmenu_dependency_link event #3268\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

docs/assets/api/en/GanttAPI.md

@@ -322,3 +322,28 @@ Event return parameters:
     record: any;
   };
 ```
+
+### CONTEXTMENU_DEPENDENCY_LINK
+
+Events that right-click dependency line
+Event return parameters:
+
+```
+{
+    federatedEvent: FederatedPointerEvent;
+    event: Event;
+    /** dependency link */
+    link: ITaskLink;
+  };
+```
+### DELETE_DEPENDENCY_LINK
+
+Events that delete dependency line
+Event return parameters:
+```
+{
+    event: Event;
+    /** dependency link */
+    link: ITaskLink;
+  };
+```

docs/assets/api/zh/GanttAPI.md

@@ -322,3 +322,28 @@ export interface EVENT_TYPES {
     record: any;
   };
 ```
+
+### CONTEXTMENU_DEPENDENCY_LINK
+
+右键点击依赖关系的事件
+事件回传参数：
+
+```
+{
+    federatedEvent: FederatedPointerEvent;
+    event: Event;
+    /** 依赖信息 */
+    link: ITaskLink;
+  };
+```
+
+### DELETE_DEPENDENCY_LINK
+删除了任务依赖关系
+事件回传参数：
+```
+{
+    event: Event;
+    /** 依赖信息 */
+    link: ITaskLink;
+  };
+```

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

@@ -116,10 +116,7 @@ links:[
   }
 ]
 ```
-
-The value of `linkedFromTaskKey` is the unique identifier field in records. The field name of the unique identifier field defaults to `id`. If you need to modify it, you can modify it through the `taskKeyField` configuration item.
-
-Through the `dependency.linkLineStyle` configuration item set link line style, you can customize the style of the dependencies between tasks. Through the `dependency.linkLineSelectedStyle` configuration item, you can customize the style of the dependencies between tasks when they are selected. In addition, you can dynamically create association lines. Through the `dependency.linkCreatable` configuration item, you can set whether association lines can be created.
+The values of `linkedFromTaskKey` and `linkedToTaskKey` need to correspond to the unique identifier field in the `records`, with the default field name being `id`. If you need to modify it, you can do so through the `taskKeyField` configuration item.
 
 ### Interaction
 
@@ -201,10 +198,23 @@ In the vtable-gantt component, the main supported configurations include:
 
 3. Dependency Line `dependency`
 
-   1. Dependencies: Through the links configuration item, you can set dependencies between tasks.
-   2. Link line style: You can set the link line style, including color, width, dashed line style, etc., through the linkLineStyle configuration item.
-   3. Link creation: Through the linkCreatable configuration item, you can set whether to allow the creation of link lines.
-   4. The operation style of the association line creation process: Through the linkSelectedLineStyle linkCreatingPointStyle linkCreatingLineStyle configuration items, you can set the style of the association line selection process, including color, width, dashed line style, etc.
+   Introduction to related configuration items for task dependencies:
+
+    - `dependency.links`：You can set the dependencies between tasks through the `dependency.links` configuration item.
+
+    - `taskKeyField`：You can set the field name of the unique identifier field for dependencies through the `taskKeyField` configuration item.
+
+    - `dependency.linkLineStyle`：You can configure the style of dependency lines, including color, width, dashed style, etc., through `dependency.linkLineStyle`.
+
+    - `dependency.linkLineSelectedStyle`：You can customize the style of dependencies when selected between tasks.
+
+    - `dependency.linkCreatable`：You can set whether association lines can be created through the `dependency.linkCreatable` configuration item.
+
+    - `dependency.linkSelectable`：You can set whether association lines can be selected through the `dependency.linkSelectable` configuration item.
+
+    - `dependency.linkDeletable`：You can set whether association lines can be deleted through the `dependency.linkDeletable` configuration item. If you want to delete association lines through the right-click menu, you can listen to the `CONTEXTMENU_DEPENDENCY_LINK` event to actively call the deleteLink interface to delete. If you configure shortcut keys `keyboardOptions.deleteLinkOnDel` or `keyboardOptions.deleteLinkOnBack` to delete association lines by pressing the 'del' or 'back' key on the keyboard.
+
+    - Operation style during the creation of association lines: You can set the style of the association line selection process, including color, width, dashed style, etc., through the `linkSelectedLineStyle` `linkCreatePointStyle` `linkCreatingPointStyle` `linkCreatingLineStyle` configuration items.
 
 4. Date Header Configuration `timelineHeader`
    1. Custom Rendering: You can customize the rendering of date headers through the `customLayout` configuration item.

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

@@ -117,9 +117,7 @@ links:[
 ]
 ```
 
-`linkedFromTaskKey` 的值是 records 中的唯一标识字段，唯一表示字段的字段名默认为`id`，如果需要修改可以通过`taskKeyField`配置项来修改。
-
-样式可以通过 `dependency.linkLineStyle` 配置项，可以自定义任务之间的依赖关系的样式。通过 `dependency.linkLineSelectedStyle` 配置项，可以自定义任务之间的依赖关系选中时的样式。另外可以动态创建关联线，通过 `dependency.linkCreatable` 配置项，可以设置是否可以创建关联线。
+其中`linkedFromTaskKey` 和 `linkedToTaskKey` 的值需要对应 records 中的唯一标识字段，唯一标识的字段名默认为`id`，如果需要修改可以通过`taskKeyField`配置项来修改。
 
 ### 交互
 
@@ -202,10 +200,23 @@ VTableGantt 内部借助这个表格实例 tableInstance 实现的能力有：
 
 3. 依赖关联线 `dependency`
 
-   1. 依赖关系：通过 `links` 配置项，可以设置任务之间的依赖关系。
-   2. 关联线的样式: 通过 `linkLineStyle` 配置项，可以设置关联线的样式，包括颜色、宽度、虚线样式等。
-   3. 关联线创建: 通过 `linkCreatable` 配置项，可以设置是否允许创建关联线。
-   4. 关联线创建过程的操作样式: 通过 `linkSelectedLineStyle` `linkCreatingPointStyle` `linkCreatingLineStyle` 配置项，可以设置关联线选中过程的样式，包括颜色、宽度、虚线样式等。
+   任务依赖关系的相关配置项介绍：
+
+   - `dependency.links`：可以通过 `dependency.links` 配置项，设置任务之间的依赖关系。
+
+   - `taskKeyField`：可以通过 `taskKeyField` 配置项，设置依赖关系唯一标识字段的字段名。
+
+   - `dependency.linkLineStyle`：可以通过 `dependency.linkLineStyle` 配置依赖线样式，包括颜色、宽度、虚线样式等。
+
+   - `dependency.linkLineSelectedStyle`：可以自定义任务之间的依赖关系选中时的样式。
+
+   - `dependency.linkCreatable`：通过 `dependency.linkCreatable` 配置项，可以设置是否可以创建关联线。
+
+   - `dependency.linkSelectable`：通过 `dependency.linkSelectable` 配置项，可以设置是否可以选中关联线。
+
+   - `dependency.linkDeletable`：通过 `dependency.linkDeletable` 配置项，可以设置是否可以删除关联线,如果想要通过鼠标右键删除关联线，可以监听`CONTEXTMENU_DEPENDENCY_LINK`事件，来主动调用接口 deleteLink 来删除。如果配置快捷键`keyboardOptions.deleteLinkOnDel`或者`keyboardOptions.deleteLinkOnBack`来通过按下键盘'del'或者'back'键来删除关联线。
+
+   - 关联线创建过程的操作样式: 通过 `linkSelectedLineStyle` `linkCreatePointStyle` `linkCreatingPointStyle` `linkCreatingLineStyle` 配置项，可以设置关联线选中过程的样式，包括颜色、宽度、虚线样式等。
 
 4. 日期表头配置 timelineHeader
    1. 自定义渲染: 通过 customLayout 配置项，可以自定义日期表头的渲染方式。

docs/assets/option/en/column/base-column-type.md

@@ -71,7 +71,7 @@ Header cell icon configuration. Available configuration types are:
 string | ColumnIconOption | (string | ColumnIconOption)[];
 ```
 
-For the specific configuration of ColumnIconOption, refer to the [definition](/zh/option.html#ListTable-columns-text.icon.ColumnIconOption定义：)
+For the specific configuration of ColumnIconOption, refer to the [definition](./ListTable-columns-text#icon.ColumnIconOption)
 
 ${prefix} icon(string|Object|Array|Funciton)
 

docs/assets/option/en/common/gantt/dependency-line.md

@@ -4,17 +4,18 @@ Specific definition:
 
 ```
 {
-links: ITaskLink[];
-linkLineStyle?: ILineStyle;
-linkCreatable?: boolean;
-linkSelectable?: boolean;
-linkSelectedLineStyle?: ITaskLinkSelectedStyle;
-/** Create an operation point for the association line */
-linkCreatePointStyle?: IPointStyle;
-/** Create the operating point response status effect of the association line */
-linkCreatingPointStyle?: IPointStyle;
-/** Create an operation line style for the association line */
-linkCreatingLineStyle?: ILineStyle;
+  links: ITaskLink[];
+  linkLineStyle?: ILineStyle;
+  linkCreatable?: boolean;
+  linkSelectable?: boolean;
+  linkDeletable?: boolean;
+  linkSelectedLineStyle?: ITaskLinkSelectedStyle;
+  /** Create an operation point for the association line */
+  linkCreatePointStyle?: IPointStyle;
+  /** Create the operating point response status effect of the association line */
+  linkCreatingPointStyle?: IPointStyle;
+  /** Create an operation line style for the association line */
+  linkCreatingLineStyle?: ILineStyle;
 }
 ```
 

docs/assets/option/en/common/row-series-number.md

@@ -40,7 +40,7 @@ Table header cell icon configuration. The configurable types are:
 string | ColumnIconOption | (string | ColumnIconOption)[];
 ```
 
-For detailed configuration of ColumnIconOption, please refer to [Definition](/zh/option.html#ListTable-columns-text.icon.ColumnIconOptionDefinition:)
+For detailed configuration of ColumnIconOption, please refer to [Definition](./ListTable-columns-text#icon.ColumnIconOption)
 
 ${prefix} icon(string|Object|Array|Funciton)
 

docs/assets/option/zh/column/base-column-type.md

@@ -71,7 +71,7 @@ ${prefix} headerIcon(string|Object|Array)
 string | ColumnIconOption | (string | ColumnIconOption)[];
 ```
 
-ColumnIconOption 具体配置可参考[定义](/zh/option.html#ListTable-columns-text.icon.ColumnIconOption定义：)
+ColumnIconOption 具体配置可参考[定义](./ListTable-columns-text#icon.ColumnIconOption)
 
 ${prefix} icon(string|Object|Array|Funciton)
 

docs/assets/option/zh/common/gantt/dependency-line.md

@@ -8,6 +8,7 @@
   linkLineStyle?: ILineStyle;
   linkCreatable?: boolean;
   linkSelectable?: boolean;
+  linkDeletable?: boolean;
   linkSelectedLineStyle?: ITaskLinkSelectedStyle;
   /** 创建关联线的操作点 */
   linkCreatePointStyle?: IPointStyle;

docs/assets/option/zh/common/row-series-number.md

@@ -40,7 +40,7 @@ ${prefix} headerIcon(string|Object|Array)
 string | ColumnIconOption | (string | ColumnIconOption)[];
 ```
 
-ColumnIconOption 具体配置可参考[定义](/zh/option.html#ListTable-columns-text.icon.ColumnIconOption定义：)
+ColumnIconOption 具体配置可参考[定义](./ListTable-columns-text#icon.ColumnIconOption)
 
 ${prefix} icon(string|Object|Array|Funciton)
 

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

@@ -174,7 +174,12 @@ export function createTable() {
       minTableWidth: 100,
       maxTableWidth: 600
     },
+    keyboardOptions: {
+      deleteLinkOnDel: true,
+      deleteLinkOnBack: true
+    },
     dependency: {
+      linkDeletable: true,
       links: [
         {
           type: DependencyType.FinishToStart,
@@ -393,7 +398,13 @@ export function createTable() {
   ganttInstance.taskListTableInstance?.on('scroll', e => {
     console.log('listTable scroll', e);
   });
+  ganttInstance.on('contextmenu_dependency_link', e => {
+    console.log('contextmenu_dependency_link', e);
+  });
 
+  ganttInstance.on('delete_dependency_link', e => {
+    console.log('delete_dependency_link', e);
+  });
   // bindDebugTool(ganttInstance.scenegraph.stage as any, {
   //   customGrapicKeys: ['role', '_updateTag']
   // });

packages/vtable-gantt/src/Gantt.ts

@@ -25,7 +25,8 @@ import type {
   IPointStyle,
   TaskBarInteractionArgumentType,
   IEventOptions,
-  IMilestoneStyle
+  IMilestoneStyle,
+  IKeyboardOptions
 } from './ts-types';
 import { TasksShowMode } from './ts-types';
 import type { ListTableConstructorOptions } from '@visactor/vtable';
@@ -181,13 +182,15 @@ export class Gantt extends EventTarget {
     dependencyLinks?: ITaskLink[];
     dependencyLinkCreatable: boolean;
     dependencyLinkSelectable: boolean;
+    dependencyLinkDeletable: boolean;
     dependencyLinkLineStyle: ILineStyle;
     dependencyLinkSelectedLineStyle: ITaskLinkSelectedStyle;
     dependencyLinkLineCreatePointStyle: IPointStyle;
     dependencyLinkLineCreatingPointStyle: IPointStyle;
     dependencyLinkLineCreatingStyle?: ILineStyle;
     underlayBackgroundColor: string;
     eventOptions: IEventOptions;
+    keyboardOptions: IKeyboardOptions;
   } = {} as any;
   /** 左侧任务表格的整体宽度 比表格实例taskListTableInstance的tableNoFrameWidth会多出左侧frame边框的宽度  */
   taskTableWidth: number;
@@ -1055,17 +1058,19 @@ export class Gantt extends EventTarget {
     this.scenegraph.updateNextFrame();
   }
   deleteLink(link: ITaskLink) {
-    const index = this.parsedOptions.dependencyLinks.findIndex(
-      item =>
-        item.type === link.type &&
-        item.linkedFromTaskKey === link.linkedFromTaskKey &&
-        item.linkedToTaskKey === link.linkedToTaskKey
-    );
-    if (index !== -1) {
-      const link = this.parsedOptions.dependencyLinks[index];
-      this.parsedOptions.dependencyLinks.splice(index, 1);
-      this.scenegraph.dependencyLink.deleteLink(link);
-      this.scenegraph.updateNextFrame();
+    if (this.parsedOptions.dependencyLinkDeletable) {
+      const index = this.parsedOptions.dependencyLinks.findIndex(
+        item =>
+          item.type === link.type &&
+          item.linkedFromTaskKey === link.linkedFromTaskKey &&
+          item.linkedToTaskKey === link.linkedToTaskKey
+      );
+      if (index !== -1) {
+        const link = this.parsedOptions.dependencyLinks[index];
+        this.parsedOptions.dependencyLinks.splice(index, 1);
+        this.scenegraph.dependencyLink.deleteLink(link);
+        this.scenegraph.updateNextFrame();
+      }
     }
   }
   get scrollTop(): number {