Расширение Zoom

Вы можете узнать подробности об расширении Zoom в статье Zooming. Настоящая статья предоставляет 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-элемент, над которым запускается зумирование, или функция, возвращающая 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);


// or, in a more simple way levels can be presented as scale arrays
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"), либо его номером в массиве уровней

gantt.ext.zoom.setLevel("year");
// or 
gantt.ext.zoom.setLevel(5);

• getLevels (): ZoomLevel[] - позволяет получить все уровни масштабирования

gantt.ext.zoom.getLevels();

Возвращает массив уровней масштабирования (ZoomLevel[]) переданных в метод 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) - имя события

Returns true, если для события указан обработчик(-и).

События

• onAfterZoom - срабатывает во время переключения уровня масштабирования. Аргументы:

• level - (number | string) - номер уровня
• config - (ZoomLevel) - конфигурация уровня

gantt.ext.zoom.attachEvent("onAfterZoom", function(level, config){ 
    document.querySelector(".gantt_radio[value='" +config.name+ "']").checked = true;
});