Dependency Links——VisActor/VTable tutorial documents

Task Dependency Relationships

VTable Gantt supports task dependency relationships, which can be displayed as lines connecting tasks.

Dependency Types

Four dependency types are supported, defined in the DependencyType enumeration:

FinishToStart：The previous task must finish before the next task can start.
StartToStart：Both tasks must start at the same time.
FinishToFinish：Both tasks must finish at the same time.
StartToFinish：The previous task must start before the next task can finish.

Configure a dependency relationship as follows:

// Use dependency type
import { DependencyType } from '@visactor/vtable-gantt';

const dependencyLinks = [
  {
    type: DependencyType.FinishToStart,
    linkedFromTaskKey: 1,
    linkedToTaskKey: 2
  }
];

const ganttOptions = {
  dependency: {
    links: dependencyLinks
  }
};

The values of linkedFromTaskKey and linkedToTaskKey need to correspond to the unique identifier field in the task data. The default unique identifier field name is id, which can be modified using the taskKeyField configuration option. Each dependency relationship can have its own style set through the linkLineStyle property, such as line color, width, etc., which helps better distinguish between different types of dependency relationships.

Create Dependencies

Dependencies can be created through API or interaction:

API：

// Add dependency
gantt.addLink({
  type: 'finish_to_start',
  linkedFromTaskKey: 3,
  linkedToTaskKey: 4
});

// Delete dependency
gantt.deleteLink({
  type: 'finish_to_start',
  linkedFromTaskKey: 1,
  linkedToTaskKey: 2
});

Interactive：

After enabling the dependency.linkCreatable configuration option, dependencies can be created through interaction.

Delete Dependencies

After enabling the dependency.linkDeletable configuration option, dependencies can be deleted through interaction.

Example 1:

To delete a dependency link through a right-click, you can listen for the CONTEXTMENU_DEPENDENCY_LINK event and call the deleteLink interface to delete it.

Example 2:

Configure the shortcut key keyboardOptions.deleteLinkOnDel or keyboardOptions.deleteLinkOnBack to delete the dependency link by pressing the 'del' or 'back' key on the keyboard.

Dependency Style Configuration

Style configuration entry:

{
  /** Basic dependency line style */
  linkLineStyle?: ILineStyle;
  /** Selected line style */
  linkSelectedLineStyle?: ITaskLinkSelectedStyle;
  /** Create link operation point */
  linkCreatePointStyle?: IPointStyle;
  /** Create link operation point response status effect */
  linkCreatingPointStyle?: IPointStyle;
  /** Create link operation line style */
  linkCreatingLineStyle?: ILineStyle;
}

Example:

const ganttOptions = {
  dependency: {
    // Basic dependency line style
    linkLineStyle: {
      lineColor: '#8c8c8c',
      lineWidth: 1,
      lineDash: [4, 2]
    },
    // Selected line style
    linkSelectedLineStyle: {
      lineColor: '#1890ff',
      lineWidth: 2,
      shadowBlur: 4,
      shadowColor: 'rgba(24, 144, 255, 0.5)'
    },
    // Create point style
    linkCreatePointStyle: {
      strokeColor: '#8c8c8c',
      strokeWidth: 1,
      fillColor: '#fff',
      radius: 5
    },
    // Creating point style
    linkCreatingPointStyle: {
      strokeColor: '#1890ff',
      strokeWidth: 2,
      fillColor: '#fff',
      radius: 6
    },
    // Creating line style
    linkCreatingLineStyle: {
      lineColor: '#1890ff',
      lineWidth: 2,
      lineDash: [4, 2]
    }
  }
};

In addition to setting unified dependency line styles, you can also configure styles for each dependency line individually. In the links array, each link object can set the style of that dependency line through the linkLineStyle property. The interface type of linkLineStyle is also ILineStyle.

const dependencyLinks = [
  {
    type: DependencyType.FinishToStart,
    linkedFromTaskKey: 1,
    linkedToTaskKey: 2,
    // style
    linkLineStyle: {
      lineColor: 'skyblue',
      lineWidth: 2,
      lineDash: [4, 2]
    }
  }
];

const ganttOptions = {
  dependency: {
    links: dependencyLinks
  }
};

Notes