Zoom-Erweiterung

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

Zoomstufen

Die Zoom-Erweiterung enthält vordefinierte Skaleneinstellungen, die das Wechseln zwischen ihnen erleichtern.

Ein ZoomLevel ist ein Objekt, das die Skaleneinstellungen enthält. Es umfasst:

name - (string) - der Name der Zoomstufe.
scale_height? - (number) - die Höhe der Skala.
height? - (number) - die Höhe der Skala.
min_column_width? - (number) - die kleinste zulässige Spaltenbreite. Dies hat Vorrang vor minColumnWidth und maxColumnWidth.
scales - (Scales) - ein Array von Skalen, die zum Ein- und Auszoomen auf dieser Stufe verwendet werden.

Methoden

init (zoomConfig): void

Diese Methode initialisiert die Erweiterung mit der bereitgestellten Konfiguration.

zoomConfig - (object) - ein Objekt mit Konfigurationseinstellungen, das Folgendes umfasst:
- levels - (ZoomLevel[]) - erforderlich, ein Array von Zoomstufen.
- handler? - (Function): void - benutzerdefinierter Handler für das Mausrad, um das Zoomen manuell zu verwalten.
  - e - (Event) - das native Ereignisobjekt.
- startDate? - (Date) - der Startpunkt für das Zoomen der Zeitskala.
- endDate? - (Date) - der Endpunkt für das Zoomen der Zeitskala.
- activeLevelIndex? - (number) - der Index der standardmäßig aktiven Stufe.
- widthStep? - (number) - der Schritt zur Anpassung der Skalabreite beim Wechseln der Zoomstufen.
- minColumnWidth? - (number) - die kleinste zulässige Spaltenbreite, um zu einer vorherigen Zoomstufe zu wechseln.
- maxColumnWidth? - (number) - die größte zulässige Spaltenbreite, um zu einer nächsten Zoomstufe zu wechseln.
- useKey? - (string) - die Taste, die das Zoomen über das Mausrad aktiviert: "ctrlKey", "altKey" oder "shiftKey".
- trigger? - (string | null | undefined) - der Zoom-Auslöser: "wheel", null oder undefined.
- element? - (HTMLElement | Function): HTMLElement - ein DOM-Element für das Auslösen des Zoomens oder eine Funktion, die eines zurückgibt.

Hier sind zwei Beispiele zur Konfiguration der zoom-Erweiterung:

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 als Skalen-Arrays 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

Diese Methode ruft den Index der derzeit aktiven Zoomstufe ab.

gantt.ext.zoom.getCurrentLevel();

setLevel (level): void

Wechselt zu einer bestimmten Zoomstufe.

level - (number | string) - kann ein String (der Name der Stufe aus der Konfiguration, z.B. "year") oder eine Zahl (ihre Position im Stufenarray) sein.

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

getLevels (): ZoomLevel[]

Gibt alle konfigurierten Zoomstufen zurück.

gantt.ext.zoom.getLevels();

Das Ergebnis ist ein Array von Zoomstufen (ZoomLevels[]), wie in der init()-Methode definiert.

zoomIn (): void

Erhöht die Zoomstufe.

gantt.ext.zoom.zoomIn();

Alternativ können Sie verwenden:

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

zoomOut (): void

Verringert die Zoomstufe.

gantt.ext.zoom.zoomOut();

Alternativ können Sie verwenden:

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

attachEvent (name, handler): string

Fügt einen Ereignishandler hinzu.

name - (string) - der Name des Ereignisses.
handler - (Function) - die Funktion, die ausgeführt wird, wenn das Ereignis eintritt.

detachEvent (id): void

Entfernt einen Ereignishandler.

id - (string) - die Kennung des Ereignishandlers.

callEvent (name, params): boolean

Löst ein internes Ereignis aus.

name - (string) - der Name des Ereignisses (unempfindlich gegenüber Groß- und Kleinschreibung).
params - (Array<any>) - optional, ein Array von Daten, die für das Ereignis relevant sind.

checkEvent (name): boolean

Prüft, ob ein Ereignis Handler angehängt hat.

name - (string) - der Name des Ereignisses.

Gibt true zurück, wenn es Handler für das Ereignis gibt.

Ereignisse

onAfterZoom

Dieses Ereignis wird ausgelöst, wenn sich die Zoomstufe ändert.

Argumente: - level - (number | string) - der Index oder Name der Stufe. - config - (ZoomLevel) - die Konfiguration der Stufe.

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

Zurück nach oben