GanttInteractionConfig

GanttInteractionConfig is the chart-wide half of the interaction settings: seven capability flags, one readOnly, and two drag bounds. The type is exported from the package root. The chart takes the ten fields as flat props and builds the object itself, so there is no interaction prop.

import type { GanttInteractionConfig } from '@jaeungkim/gantt-chart';

GanttInteractionConfigCopy Anchor Link

/** Chart-wide interaction settings - every gesture is allowed by default (task creation also needs `onTaskCreate`), and a task's own field of the same name wins. */
export interface GanttInteractionConfig {
  readOnly?: boolean;
  allowMove?: boolean;
  allowResize?: boolean;
  allowProgressChange?: boolean;
  allowLinkCreate?: boolean;
  allowLinkDelete?: boolean;
  allowTaskCreate?: boolean;
  /** Turns row reordering on - opt-in (default false). */
  allowReorder?: boolean;
  minDate?: string;
  maxDate?: string;
}

With every field unset, every gesture is allowed and there are no drag bounds. Two fields differ. allowTaskCreate also needs an onTaskCreate callback. See Task creation. allowReorder is off until set. See canReorder.

The ten props of the same names on GanttProps feed this object. See GanttProps. The per-task fields that override it are listed in Task and task types.

Capability resolutionCopy Anchor Link

An internal function, resolveTaskInteraction, resolves each of the six per-task capabilities. It is not exported from the package root. The order is documented here because it decides what the chart does.

// Precedence: `task.allowX` > `task.readOnly` > `config.allowX` > `config.readOnly` > allowed.
// Summary rows are never resizable and have no draggable progress - both roll up from children.
// Reordering is the exception: its floor is `false`, so only an explicit flag turns it on.
export function resolveTaskInteraction(
  task: Pick<
    Task,
    | 'readOnly'
    | 'allowMove'
    | 'allowResize'
    | 'allowProgressChange'
    | 'allowLinkCreate'
    | 'allowLinkDelete'
    | 'allowReorder'
    | 'minDate'
    | 'maxDate'
  > & { isSummary?: boolean },
  config: GanttInteractionConfig = NO_INTERACTION_CONFIG
): ResolvedTaskInteraction {
  const resolve = (
    taskFlag: boolean | undefined,
    configFlag: boolean | undefined
  ): boolean => {
    if (taskFlag !== undefined) return taskFlag;
    if (task.readOnly !== undefined) return !task.readOnly;
    if (configFlag !== undefined) return configFlag;
    return !config.readOnly;
  };

  const canReorder =
    task.allowReorder ??
    (task.readOnly === true ? false : (config.allowReorder ?? false));

  const derived = task.isSummary === true;

  return {
    canMove: resolve(task.allowMove, config.allowMove),
    canResize:
      !derived &&
      resolve(task.allowResize, config.allowResize),
    canChangeProgress:
      !derived &&
      resolve(task.allowProgressChange, config.allowProgressChange),
    canCreateLink: resolve(task.allowLinkCreate, config.allowLinkCreate),
    canDeleteLink: resolve(task.allowLinkDelete, config.allowLinkDelete),
    canReorder,
    minDate: task.minDate ?? config.minDate,
    maxDate: task.maxDate ?? config.maxDate,
  };
}

Five of the six capabilities follow the order below. canReorder follows a shorter order, described under canReorder.

The order, most specific first:

1. If task.allowX is set, it is the result.
2. If task.readOnly is set, the result is its negation.
3. If config.allowX is set, it is the result.
4. Otherwise the result is the negation of config.readOnly. Unset reads as false, so an untouched chart allows the gesture.

In the table, unset means the field is undefined.

A chart-level readOnly with allowProgressChange: true on one task resolves at level 1 for that task and at level 4 for everything else. See Editing tasks.

The six capabilitiesCopy Anchor Link

Five capabilities read one pair of fields through the order above. The structural mask in the last column is then &&-ed in front of the result. canReorder reads its pair through the shorter order in the next section.

The resolver returns them as a ResolvedTaskInteraction. This type is not exported from the package root either. Its field names appear in the source and in the table above.

interface ResolvedTaskInteraction {
  canMove: boolean;
  canResize: boolean;
  canChangeProgress: boolean;
  canCreateLink: boolean;
  canDeleteLink: boolean;
  canReorder: boolean;
  minDate?: string;
  maxDate?: string;
}

canReorderCopy Anchor Link

Reordering is opt-in, so its order ends at false instead of !config.readOnly.

const canReorder =
  task.allowReorder ??
  (task.readOnly === true ? false : (config.allowReorder ?? false));

config.readOnly is never read. A read-only chart and an untouched chart both block reordering. Only an explicit allowReorder at either level turns it on. The two upper levels are unchanged. A task's own flag wins, and a task with its own readOnly is not reorderable through the chart-wide flag.

Drag boundsCopy Anchor Link

minDate and maxDate do not use the order. Each is resolved by one nullish coalescing step.

minDate: task.minDate ?? config.minDate,
maxDate: task.maxDate ?? config.maxDate,

A task's own bound replaces the chart's. readOnly and the capability flags do not affect either bound. Editing tasks covers what the bounds clamp during a drag.

Task creationCopy Anchor Link

Task creation is chart-wide only, so it has its own two-level resolver. It is internal and not exported.

// Chart-wide only - no entry point starts on a task, so there is no per-task rung
export function canCreateTasks(
  config: GanttInteractionConfig = NO_INTERACTION_CONFIG
): boolean {
  return config.allowTaskCreate ?? !config.readOnly;
}

Task has no allowTaskCreate field, so there is no per-task level. The chart also requires the callback.

const canCreateTask = onTaskCreate !== undefined && canCreateTasks(interaction);

This one value gates all three entry points. Without it the Add task button is not rendered, addTask() returns early, and the drawing gesture is off. Without onTaskCreate there is no way to create a task, regardless of the flags. See Creating tasks.

ConstraintsCopy Anchor Link

A summary row cannot be resized and has no draggable progress. The rule is applied to the resolver's output with &&, so no flag at any level re-enables it.

canResize and canChangeProgress are both false when isSummary is true, even when the task sets allowResize: true and allowProgressChange: true. canMove is unaffected. Moving a summary is allowed and moves its whole subtree.

Both values are derived. rollUpTasks recomputes a summary's start and end from its children on every render, and its progress as well unless the summary carries an explicit one. An edit here would be discarded on the next render or would freeze a derived value.

isSummary is set only when the hierarchy prop is on, so the rule does not apply to a flat chart. readOnly still blocks every gesture on a summary row.

NotesCopy Anchor Link

The package root exports GanttInteractionConfig as a type only.

resolveTaskInteraction, canCreateTasks, ResolvedTaskInteraction and NO_INTERACTION_CONFIG are not exported. They are named on this page only to describe the chart's behaviour. Do not import them.

The gestures these flags govern are described in Editing tasks and Dependencies. The panel fields they gate are described in Detail panel.