Перейти к основному содержимому

Расширение Zoom

Более подробную информацию о расширении Zoom можно найти в статье Масштабирование. Этот документ посвящён описанию API для объекта zoom:

Уровни масштабирования​

Расширение Zoom работает с набором настроек масштаба, что позволяет быстро переключаться между ними.

ZoomLevel - это объект, представляющий настройки масштаба, со следующими свойствами:

  • name - (string) - имя, присвоенное уровню
  • scale_height? - (number) - высота шкалы
  • height? - (number) - высота шкалы
  • min_column_width? - (number) - минимальная ширина колонки; имеет приоритет над minColumnWidth и maxColumnWidth
  • scales - (Scales) - массив шкал, между которыми можно переключаться при увеличении или уменьшении масштаба

Методы​

  • init (zoomConfig): void - инициализирует расширение с использованием переданной конфигурации.
    • zoomConfig - (object) - объект конфигурации, включающий массив levels с определением уровней масштабирования, а также ряд необязательных свойств:
      • levels - (ZoomLevel[]) - обязательно, массив, определяющий уровни масштабирования
      • handler? - (Function): void - позволяет определить пользовательский обработчик колесика мыши для ручного управления зумом
        • e - (Event) - нативный объект события
      • startDate? - (Date) - начальная точка для масштабирования временной шкалы
      • endDate? - (Date) - конечная точка для масштабирования временной шкалы
      • activeLevelIndex? - (number) - индекс уровня масштабирования, который будет активен по умолчанию
      • widthStep? - (number) - шаг увеличения/уменьшения ширины шкалы при переключении уровней зума
      • minColumnWidth? - (number) - минимальная ширина колонки, позволяющая перейти к предыдущему уровню зума
      • maxColumnWidth? - (number) - максимальная ширина колонки, позволяющая перейти к следующему уровню зума
      • useKey? - (string) - указывает, какая клавиша разрешает масштабирование с помощью прокрутки мыши: "ctrlKey" | "altKey" | "shiftKey"
      • trigger? - (string | null | undefined) - определяет триггер масштабирования: "wheel" | null | undefined
      • element? - (HTMLElement | Function): HTMLElement - DOM-элемент, инициирующий масштабирование, либо функция, возвращающая такой элемент

Ниже приведены два примера конфигурации расширения zoom:

var zoomConfig = {
    levels: [
      {
        name:"day",
        scale_height: 27,
        min_column_width:80,
        scales:[
            {unit: "day", step: 1, format: "%d %M"}
        ]
      },
      {
         name:"week",
         scale_height: 50,
         min_column_width:50,
         scales:[
          {unit: "week", step: 1, format: function (date) {
           var dateToStr = gantt.date.date_to_str("%d %M");
           var endDate = gantt.date.add(date, 6, "day");
           var weekNum = gantt.date.date_to_str("%W")(date);
           return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
           }},
           {unit: "day", step: 1, format: "%j %D"}
         ]
       },
       {
         name:"month",
         scale_height: 50,
         min_column_width:120,
         scales:[
             {unit: "month", format: "%F, %Y"},
             {unit: "week", format: "Week #%W"}
         ]
        },
        {
         name:"quarter",
         height: 50,
         min_column_width:90,
         scales:[
          {unit: "month", step: 1, format: "%M"},
          {
           unit: "quarter", step: 1, format: function (date) {
            var dateToStr = gantt.date.date_to_str("%M");
            var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
            return dateToStr(date) + " - " + dateToStr(endDate);
           }
         }
          ]},
        {
          name:"year",
          scale_height: 50,
          min_column_width: 30,
          scales:[
              {unit: "year", step: 1, format: "%Y"}
        ]}
    ]
};

gantt.ext.zoom.init(zoomConfig);


// альтернативно, уровни можно определить как массивы шкал
var hourToStr = gantt.date.date_to_str("%H:%i");
var hourRangeFormat = function(step){
    return function(date){
        var intervalEnd = new Date(gantt.date.add(date, step, "hour") - 1)
        return hourToStr(date) + " - " + hourToStr(intervalEnd);
    };
};
var zoomConfig = {
    levels: [
        [
            { unit: "month", format: "%M %Y", step: 1},
        ],
        [
            { unit: "month", format: "%M %Y", step: 1},
            { unit: "day", format: "%d %M", step: 1}
        ],
        [
            { unit: "day", format: "%d %M", step: 1},
            { unit: "hour", format: hourRangeFormat(12), step: 12}
        ],
        [
            {unit: "day", format: "%d %M",step: 1},
            {unit: "hour",format: hourRangeFormat(6),step: 6}
        ],
        [
            { unit: "day", format: "%d %M", step: 1 },
            { unit: "hour", format: "%H:%i", step: 1}
        ]
    ]
}

gantt.ext.zoom.init(zoomConfig);
  • getCurrentLevel (): number - возвращает индекс текущего уровня масштабирования
gantt.ext.zoom.getCurrentLevel();
  • setLevel (level): void - изменяет уровень масштабирования на указанный.
    • level - (number | string) - может быть либо именем уровня (например, "year"), либо его индексом в массиве levels
gantt.ext.zoom.setLevel("year");
// или 
gantt.ext.zoom.setLevel(5);
  • getLevels (): ZoomLevel[] - возвращает все определённые уровни масштабирования
gantt.ext.zoom.getLevels();

Метод возвращает массив уровней масштабирования (ZoomLevels[]), который был передан в метод init().

  • zoomIn (): void - переходит на более высокий уровень масштабирования
gantt.ext.zoom.zoomIn();

Также можно добиться того же с помощью:

gantt.ext.zoom.setLevel(zoom.getCurrentLevel() - 1)
  • zoomOut (): void - переходит на более низкий уровень масштабирования
gantt.ext.zoom.zoomOut();

Либо можно использовать:

gantt.ext.zoom.setLevel(zoom.getCurrentLevel() + 1)

  • attachEvent (name, handler): string - добавляет обработчик события

    • name - (string) - имя события, на которое нужно подписаться
    • handler - (Function) - функция, которая будет вызвана при возникновении события

  • detachEvent (id): void - удаляет ранее добавленный обработчик события

    • id - (string) - идентификатор обработчика события для удаления

  • callEvent (name, params): boolean - инициирует внутреннее событие

    • name - (string) - имя события, не зависит от регистра
    • params - (Array<any>) - необязательный массив данных, связанных с событием

  • checkEvent (name): boolean - проверяет, есть ли зарегистрированные обработчики для указанного события

    • name - (string) - имя события

Возвращает true, если для события зарегистрирован хотя бы один обработчик.

События​

  • onAfterZoom - возникает при изменении уровня масштабирования. Событие предоставляет следующие аргументы:
  • level - (number | string) - индекс или имя уровня масштабирования
  • config - (ZoomLevel) - объект конфигурации для уровня масштабирования
 
gantt.ext.zoom.attachEvent("onAfterZoom", function(level, config){ 
    document.querySelector(".gantt_radio[value='" +config.name+ "']").checked = true;
});