Zoom-Erweiterung

Details zur Zoom-Erweiterung finden Sie im Artikel Zooming.

Der vorliegende Artikel enthält die API-Referenz des zoom-Objekts:

Zoom-Stufen

Die Zoom-Erweiterung verwendet eine Reihe von Skalen-Einstellungen und ermöglicht das schnelle Wechseln zwischen ihnen.

ZoomLevel ist ein Objekt, das die Skalen-Einstellungen enthält. Es hat folgende Eigenschaften:

• name - (string) - der Name der Stufe
• scale_height? - (number) - die Höhe der Skala
• height? - (number) - die Höhe der Skala
• min_column_width? - (number) - die minimale Breite einer Spalte. Sie hat eine höhere Priorität als minColumnWidth und maxColumnWidth
• scales - (Scales) - ein Array von Skalen, zwischen denen beim Zoomen hinein/heraus auf dieser Ebene gewechselt wird

Methoden

• init (zoomConfig): void - initialisiert die Erweiterung mit der übergebenen Konfiguration.
  • zoomConfig - (object) - ein Objekt mit Konfigurationseinstellungen, das das levels-Array von Zoom-Leveln und eine Reihe zusätzlicher Eigenschaften enthält:
    • levels - (ZoomLevel[]) - erforderlich, ein Array von ZoomLevel-Objekten
    • handler? - (Function): void - ermöglicht das Festlegen eines benutzerdefinierten Mausrad-Handlers zur manuellen Steuerung des Zoomings
      • e - (Event) - ein natives Event-Objekt.
    • startDate? - (Date) - der Startwert der Zeit-Skala-Zoomung
    • endDate? - (Date) - der Endwert der Zeit-Skala-Zoomung
    • activeLevelIndex? - (number) - die Nummer des standardmäßig aktiven Levels
    • widthStep? - (number) - der Schritt zum Erhöhen/Verringern der Breite der Skala beim Wechsel zum nächsten/vorherigen Zoom-Level
    • minColumnWidth? - (number) - die minimale Breite einer Spalte, die einen Wechsel zum vorherigen Zoom-Level ermöglicht
    • maxColumnWidth? - (number) - die maximale Breite einer Spalte, die einen Wechsel zum nächsten Zoom-Level ermöglicht
    • useKey? - (string) - die Taste, die das Zoomen durch Scrollen mit dem Mausrad aktiviert: "ctrlKey" | "altKey" | "shiftKey"
    • trigger? - (string | null | undefined) - der Auslöser des Zoomens: "wheel" | null | undefined
    • element? - (HTMLElement | Function): HTMLElement - ein DOM-Element, über dem Zoomen ausgelöst wird oder eine Funktion, die ein DOM-Element zurückgibt

Dies sind zwei Beispiele zur Einstellung der zoom-Konfiguration:

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


// oder, in einer einfacheren Weise können Ebenen auch als Skalen-Arrays dargestellt werden
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 - Gibt die Nummer (Index) des aktuellen Zoom-Level zurück

gantt.ext.zoom.getCurrentLevel();

• setLevel (level): void - wechselt zum angegebenen Zoom-Level.
  • level - (number | string) - Das Level wird entweder durch einen String definiert (den Namen des Levels aus der Konfiguration, z. B. "year"), oder durch seine Nummer im Array der Levels

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

• getLevels (): ZoomLevel[] - ermöglicht das Abrufen aller Zoom-Level

gantt.ext.zoom.getLevels();

Gibt ein Array von Zoom-Leveln (ZoomLevel[]) zurück, das an die Methode init() übergeben wurde, die die Erweiterung initialisiert.

• zoomIn (): void - erhöht das aktuelle Zoom-Level

gantt.ext.zoom.zoomIn();

Für denselben Zweck können Sie auch Folgendes verwenden:

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

• zoomOut (): void - verringert das aktuelle Zoom-Level

gantt.ext.zoom.zoomOut();

Für denselben Zweck können Sie auch Folgendes verwenden:

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

• attachEvent (name, handler): string - hängt einen Ereignis-Handler an

  • name - (string) - der Name des Ereignis-Handlers
  • handler - (Function) - die Funktion, die aufgerufen wird, wenn das Ereignis ausgelöst wird

• detachEvent (id): void - trennt einen Handler von einem Ereignis

  • id - (string) - die ID des angehängten Ereignis-Handlers

• callEvent (name, params): boolean - ruft ein internes Ereignis auf

  • name - (string) - der Name des Ereignisses, case-insensitive
  • params - (Array<any>) - optional, ein Array von ereignisbezogenen Daten

• checkEvent (name): boolean - prüft, ob für ein Ereignis irgendein Handler angegeben ist

  • name - (string) - der Name des Ereignisses

Gibt true zurück, wenn für das Ereignis ein Handler angegeben ist.

Ereignisse

• onAfterZoom - löst während des Wechsels des Zoom-Levels aus. Die Argumente sind:

• level - (number | string) - die Nummer des Levels
• config - (ZoomLevel) - die Konfiguration des Levels

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