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: "all" | "grid" | "chart",
  _compactMode: boolean,        // true when container width <= 650px
  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 ---
  history: object,            // PRO
  undo: boolean,              // PRO
  baselines: boolean,         // PRO
  markers: array,             // PRO
  unscheduledTasks: boolean,  // PRO
  splitTasks: boolean,        // PRO
  criticalPath: object,       // PRO
  schedule: object,           // PRO
  projectStart: Date,         // PRO
  projectEnd: Date,           // PRO
};

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

State-only properties​

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,
};

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
};

scrollTop​

Represents the vertical scroll position:

scrollTop: number;

scrollLeft​

Represents the horizontal scroll position:

scrollLeft: number;

_compactMode​

A read-only boolean that is true when the Gantt container width is 650px or below, and false otherwise. Gantt sets this value automatically — it is not a configuration option.

_compactMode: 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: