Zoom-Erweiterung

Weitere Details zur Zoom-Erweiterung finden Sie im Artikel Zooming. Dieses Dokument konzentriert sich auf die API-Referenz für das zoom-Objekt:

Zoom-Stufen

Die Zoom-Erweiterung arbeitet mit einer Reihe von Skaleneinstellungen, die ein schnelles Umschalten zwischen diesen ermöglichen.

ZoomLevel ist ein Objekt, das die Skaleneinstellungen repräsentiert und folgende Eigenschaften besitzt:

name - (string) - der Name, der der Stufe zugeordnet ist
scale_height? - (number) - die Höhe der Skala
height? - (number) - die Höhe der Skala
min_column_width? - (number) - die minimale Spaltenbreite; hat Vorrang vor minColumnWidth und maxColumnWidth
scales - (Scales) - ein Array von Skalen, zwischen denen beim Hinein- oder Herauszoomen auf dieser Stufe gewechselt werden kann

Methoden

init (zoomConfig): void – initialisiert die Erweiterung mit der angegebenen Konfiguration.
- zoomConfig - (object) - Konfigurationsobjekt, das das levels-Array mit den Zoom-Stufen enthält sowie mehrere optionale Eigenschaften:
  - levels - (ZoomLevel[]) - erforderlich, ein Array, das die Zoom-Stufen definiert
  - handler? - (Function): void - ermöglicht die Definition eines eigenen Mausrad-Handlers für die manuelle Zoom-Steuerung
    - e - (Event) - das native Event-Objekt
  - startDate? - (Date) - Startpunkt für das Zoomen auf der Zeitskala
  - endDate? - (Date) - Endpunkt für das Zoomen auf der Zeitskala
  - activeLevelIndex? - (number) - Index der standardmäßig aktiven Zoom-Stufe
  - widthStep? - (number) - Schrittweite für die Breitenänderung bei Wechsel der Zoom-Stufe
  - minColumnWidth? - (number) - minimale Spaltenbreite, die das Umschalten auf eine vorherige Zoom-Stufe erlaubt
  - maxColumnWidth? - (number) - maximale Spaltenbreite, die das Umschalten auf die nächste Zoom-Stufe erlaubt
  - useKey? - (string) - bestimmt, mit welcher Taste das Zoomen per Mausrad aktiviert wird: "ctrlKey" | "altKey" | "shiftKey"
  - trigger? - (string | null | undefined) - definiert den Zoom-Auslöser: "wheel" | null | undefined
  - element? - (HTMLElement | Function): HTMLElement - das DOM-Element, das das Zoomen auslöst, oder eine Funktion, die ein solches Element zurückgibt

Hier sind zwei Beispiele, wie die zoom-Erweiterung konfiguriert werden kann:

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);
 
 
// alternativ können die Stufen auch einfach als Arrays von Skalen definiert 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 den Index der aktuellen Zoom-Stufe zurück

gantt.ext.zoom.getCurrentLevel();

setLevel (level): void – wechselt zur angegebenen Zoom-Stufe.
- level - (number | string) - kann entweder der Name der Stufe als String (z.B. "year") oder ihr Index im Levels-Array sein

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

getLevels (): ZoomLevel[] – gibt alle definierten Zoom-Stufen zurück

gantt.ext.zoom.getLevels();

Dies gibt das Array der Zoom-Stufen (ZoomLevels[]) zurück, das an die init()-Methode übergeben wurde.

zoomIn (): void – wechselt zu einer höheren Zoom-Stufe

gantt.ext.zoom.zoomIn();

Alternativ ist dies auch möglich mit:

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

zoomOut (): void – wechselt zu einer niedrigeren Zoom-Stufe

gantt.ext.zoom.zoomOut();

Alternativ können Sie verwenden:

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

attachEvent (name, handler): string – fügt einen Ereignis-Handler hinzu
- name - (string) - Name des Ereignisses, das überwacht werden soll
- handler - (Function) - Funktion, die beim Eintreten des Ereignisses ausgeführt wird
detachEvent (id): void – entfernt einen zuvor hinzugefügten Ereignis-Handler
- id - (string) - die Kennung des zu entfernenden Ereignis-Handlers
callEvent (name, params): boolean – löst ein internes Ereignis aus
- name - (string) - Name des Ereignisses, Groß-/Kleinschreibung wird ignoriert
- params - (Array<any>) - optionales Array mit Daten zum Ereignis
checkEvent (name): boolean – prüft, ob für ein bestimmtes Ereignis Handler registriert sind
- name - (string) - Name des Ereignisses

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

Ereignisse

onAfterZoom – wird ausgelöst, wenn sich die Zoom-Stufe ändert. Das Ereignis liefert folgende Argumente:
- level - (number | string) - der Index oder Name der Zoom-Stufe
- config - (ZoomLevel) - das Konfigurationsobjekt für die Zoom-Stufe

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

Zurück nach oben