Skip to main content

api.getReactiveState()

Description​

Gets the state object with the reactive properties of Gantt

This method allows you to subscribe to the returned properties in the same way as actions.

Usage​

api.getReactiveState(): object;

Returns​

The method returns an object with the following reactive properties:

{
  tasks: array,
  links: array,
  start: Date,
  end: Date,

  columns: false | array,
  scales: array,
  scaleHeight: number,
  cellWidth: number,
  cellHeight: number,
  cellBorders: "column" | "full",
  lengthUnit: string,
  durationUnit: string,
  displayMode: ("grid" | "chart" | "subGrid")[], // "subGrid" is PRO
  gridWidth: number,
  highlightTime?: (date: Date, unit: "day" | "hour") => string,

  taskTypes: array,
  zoom: boolean | array,
  selected: number | string,
  activeTask: number | string,

  autoScale: boolean,
  scrollTop: number,
  scrollLeft: number,

  // --- PRO FEATURES ---
  subGridWidth: number,       // PRO
  history: object,            // PRO
  undo: boolean,              // PRO
  baselines: boolean,         // PRO
  markers: array,             // PRO
  unscheduledTasks: boolean,  // PRO
  splitTasks: boolean,        // PRO
  criticalPath: object,       // PRO
  schedule: object,           // PRO
  conflicts: array,           // PRO
  showConflicts: boolean,     // PRO
  projectStart: Date,         // PRO
  projectEnd: Date,           // PRO
};

The Gantt properties detailed description you can find here: Gantt properties overview.

note

The state returns displayMode as an array of panels. The array contains the preferred layout. The visible panels may differ from displayMode if the screen is not wide enough. For example, the chart requires at least 100px width to be shown in the ["grid", "chart"] display mode.

State-only properties​

area​

Represents the visible horizontal time range of the Gantt chart.

area: {
  start: number, // timestamp (ms) of the first visible date on screen
  end: number,   // timestamp (ms) of the last visible date on screen
  from: number   // horizontal scroll offset in pixels from the start of the timeline
};

conflicts​

PRO

The functionality is available in PRO Edition only

conflicts is an array of conflicts reported by the last scheduling calculation. It includes two kinds of entries: constraints and links.

conflicts: {
    type: "link" | "constraint",
    task: string | number,
    link?: string | number,
    required: Date,
}[]

You can find the detailed description for the entries here: set-conflicts.

history​

PRO

The functionality is available in PRO Edition only

history is an object with the number of operations for each undo/redo action:

history: {
  undo: number,
  redo: number,
};

scrollLeft​

Represents the horizontal scroll position:

scrollLeft: number;

scrollTop​

Represents the vertical scroll position:

scrollTop: number;

showConflicts​

PRO

The functionality is available in PRO Edition only

Shows whether the ConflictReport list is open. The value is changed by the show-conflicts action:

showConflicts: boolean;

Example​

In the example below, we subscribe to the selected state property exposed by the Gantt API. This allows us to track which task is currently selected and enable or disable the Delete task button accordingly.

<script setup>
   import { Gantt } from "@svar-ui/vue-gantt";
   import { Button } from "@svar-ui/vue-core";
   import { getData } from "./common/data";
   import { ref } from "vue";

   const data = getData();

   const api = ref();
   const selected = ref();
   function init(obj) {
      api.value = obj;
      selected.value = api.value.getReactiveState().selected;
   }
 
   function handleDelete() {
      api.value.exec("delete-task", { id: selected.value });
   }
</script>

<template>
   <Button :onclick="handleDelete" :disabled="!selected?.length">Delete task</Button>
   <Gantt :tasks="data.tasks" :init="init" />
</template>

Related articles: