Zoom Extension

Подробности о расширении Zoom можно найти в статье Зумирование. Этот документ сосредоточен на справочнике API для объекта zoom.

Уровни зума

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

ZoomLevel — это объект, содержащий настройки масштаба. Вот что он включает:

name - (строка) - имя уровня зума.
scale_height? - (число) - высота масштаба.
height? - (число) - высота масштаба.
min_column_width? - (число) - минимальная допустимая ширина колонки. Это имеет приоритет над minColumnWidth и maxColumnWidth.
scales - (Scales) - массив шкал, используемых для увеличения и уменьшения на этом уровне.

Методы

init (zoomConfig): void

Этот метод инициализирует расширение с использованием предоставленной конфигурации.

zoomConfig - (объект) - объект, содержащий параметры конфигурации, который включает:
- levels - (ZoomLevel[]) - обязательный, массив уровней зума.
- handler? - (Function): void - пользовательский обработчик для колесика мыши для ручного управления зумом.
  - e - (Event) - объект нативного события.
- startDate? - (Date) - начальная точка для зумирования по временной шкале.
- endDate? - (Date) - конечная точка для зумирования по временной шкале.
- activeLevelIndex? - (число) - индекс уровня, активного по умолчанию.
- widthStep? - (число) - шаг для настройки ширины масштаба при переключении уровней зума.
- minColumnWidth? - (число) - минимальная допустимая ширина колонки для перехода на предыдущий уровень зума.
- maxColumnWidth? - (число) - максимальная допустимая ширина колонки для перехода на следующий уровень зума.
- useKey? - (строка) - клавиша, активирующая зумирование через колесико мыши: "ctrlKey", "altKey" или "shiftKey".
- trigger? - (строка | 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 - (число | строка) - может быть строкой (имя уровня из конфигурации, например, "year") или числом (его позиция в массиве уровней).

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 - (строка) - имя события.
handler - (Function) - функция, которая будет выполняться при наступлении события.

detachEvent (id): void

Удаляет обработчик события.

id - (строка) - идентификатор обработчика события.

callEvent (name, params): boolean

Вызывает внутреннее событие.

name - (строка) - имя события (нечувствительно к регистру).
params - (Array<any>) - опционально, массив данных, относящихся к событию.

checkEvent (name): boolean

Проверяет, есть ли у события прикрепленные обработчики.

name - (строка) - имя события.

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

События

onAfterZoom

Это событие срабатывает при изменении уровня зума.

Аргументы: - level - (число | строка) - индекс или имя уровня. - config - (ZoomLevel) - конфигурация уровня.

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

К началу