Zoom 扩展

有关 Zoom 扩展的更多详细信息，请参阅缩放功能文章。本文档主要介绍 zoom 对象的 API 参考：

缩放级别

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);
 
 
// 或者，也可以仅将 levels 定义为刻度数组
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();

该方法返回传递给 init() 方法的缩放级别数组（ZoomLevels[]）。

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