Zoom-Erweiterung

Sie können Details zur Zoom-Erweiterung im Artikel Zooming lesen. Der aktuelle Artikel bietet die API-Referenz des zoom-Objekts:

Zoom-Stufen

Die Zoom-Erweiterung verwendet eine Reihe von Skaleneinstellungen und ermöglicht ein schnelles Umschalten zwischen ihnen.

ZoomLevel ist ein Objekt, das die Skaleneinstellungen enthält. Es besitzt die folgenden 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 innerhalb dieser Stufe gewechselt wird

Methoden

• init(zoomConfig): void - initialisiert die Erweiterung mit der übergebenen Konfiguration.
  • zoomConfig? - (object) - ein Objekt mit Konfigurationseinstellungen, das das levels-Array der Zoom-Stufen und eine Reihe zusätzlicher Eigenschaften enthält:
    • levels? - (ZoomLevel[]) - ein Array von Zoom-Stufen. Optional – wird es weggelassen, verwendet man ein Set von Standard benannten Ebenen ("hour", "day", "week", "month", "year")
    • handler? - (Function): void - ermöglicht das Spezifizieren eines benutzerdefinierten Handlers für das Mausrad, um das Zoomen manuell zu steuern
      • e - (Event) - ein natives Ereignisobjekt.
    • startDate? - (Date) - der Startwert der Zeitmaßstab-Zoomung
    • endDate? - (Date) - der Endwert der Zeitmaßstab-Zoomung
    • activeLevelIndex? - (number) - die Nummer des standardmäßig aktiven Levels
    • widthStep? - (number) - der Schritt zum Erhöhen/verkleinern der Breite der Skala beim Wechsel zum nächsten/vorherigen Zoom-Level
    • minColumnWidth? - (number) - die minimale Breite einer Spalte, die den Wechsel zum vorherigen Zoom-Level ermöglicht
    • maxColumnWidth? - (number) - die maximale Breite einer Spalte, die den Wechsel zum nächsten Zoom-Level ermöglicht
    • useKey? - (string) - die Taste, die das Zoomen durch Scrollen der Maus 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
    • fit? - (object) - die Standard zoom-to-fit-Einstellungen. Zusammen mit den unten aufgeführten Optionen von zoomToFit akzeptiert es levels (ein eigener Satz von Skalen, der ausschließlich zum Anpassen verwendet wird) und handler (eine Funktion, die die Level-Auswahl überschreibt)

Dies sind zwei Beispiele zur Einstellung der zoom-Konfiguration:

const 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: (date) => {
                        const dateToStr = gantt.date.date_to_str("%d %M");
                        const endDate = gantt.date.add(date, 6, "day");
                        const weekNumber = gantt.date.date_to_str("%W")(date);

                        return `#${weekNumber}, ${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: (date) => {
                        const dateToStr = gantt.date.date_to_str("%M");
                        const 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);


// or, in a more simple way levels can be presented as scale arrays
const hourToStr = gantt.date.date_to_str("%H:%i");
const hourRangeFormat = (step) => {
    return (date) => {
        const intervalEnd = new Date(gantt.date.add(date, step, "hour") - 1);

        return `${hourToStr(date)} - ${hourToStr(intervalEnd)}`;
    };
};
const simpleZoomConfig = {
    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(simpleZoomConfig);

• getCurrentLevel(): number - gibt die Nummer (den Index) der aktuellen Zoom-Stufe zurück

gantt.ext.zoom.getCurrentLevel();

• setLevel(level): void - wechselt zur angegebenen Zoom-Stufe.
  • level - (number | string) - Die Stufe wird entweder durch einen Namen aus der Konfiguration (z. B. "year") oder durch ihre Nummer im Array der Ebenen definiert

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

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

gantt.ext.zoom.getLevels();

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

• zoomIn(): void - erhöht die aktuelle Zoom-Stufe

gantt.ext.zoom.zoomIn();

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

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

• zoomOut(): void - reduziert die aktuelle Zoom-Stufe

gantt.ext.zoom.zoomOut();

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

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

• zoomToFit(options?): boolean - wählt die detaillierteste Zoom-Stufe aus, bei der die Zielaufgaben in die Timeline-Breite passen, ohne horizontal zu scrollen, und wendet sie an. Siehe Zoom to fit für die Liste der Optionen. Die Methode ist idempotent und gibt true zurück, wenn eine passende Stufe angewendet wurde, false sonst.

gantt.ext.zoom.zoomToFit();
// oder nur die aktuell sichtbaren (erweiterten) Zeilen anpassen
gantt.ext.zoom.zoomToFit({ scope: "visible" });

• resetZoom(): boolean - stellt das Zoom-Level und den Zeitmaßstab wieder her, die vor dem ersten Aufruf von zoomToFit() aktiv waren. Gibt true zurück, wenn eine gespeicherte Skala wiederhergestellt wurde, false wenn nichts wiederhergestellt werden kann.

gantt.ext.zoom.resetZoom();

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

  • name - (string) - der Name des Ereignis-Handler
  • 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, Groß-/Kleinschreibung ignoriert
  • params - (Array<any>) - optional, ein Array der ereignisbezogenen Daten

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

  • name - (string) - der Name des Ereignisses

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

Zoom-to-fit

zoomToFit(options) und die fit-Einstellung von init() akzeptieren folgende Optionen:

• scope? - ("all" | "visible") - welche Aufgaben angepasst werden sollen: "all" (Standard) passt jede geladene Aufgabe, einschließlich Aufgaben unter zusammengeklappten Zweigen; "visible" passt nur die derzeit erweiterten Zeilen
• taskId? - (string | number) - passt eine einzelne Aufgabe zusammen mit ihrem Teilbaum
• range? - (object) - passt einen expliziten Datumsbereich mit den Eigenschaften start_date und end_date (Date)
• rangeMode? - ("auto" | "preserve" | "target") - ob der angezeigte start_date/end_date durch den angepassten Bereich überschrieben wird. "target" setzt immer den angepassten Bereich, "preserve" behält die aktuellen Grenzen, "auto" (Standard) behält explizite Grenzen bei, wenn sie gesetzt sind, und setzt andernfalls den angepassten Bereich
• padding? - (number) - die Anzahl zusätzlicher Spalten vor dem ersten und nach dem letzten passenden Datum. Standard: 1
• minLevel? - (string | number) - die detaillierteste Zoom-Stufe, die zoomToFit auswählen darf
• maxLevel? - (string | number) - die grobste Zoom-Stufe, die zoomToFit auswählen darf

Wenn via die fit-Eigenschaft von init() gesetzt, akzeptiert die Konfiguration zusätzlich:

• levels? - (ZoomLevel[]) - ein dediziertes Set von Zoom-Stufen, das nur von zoomToFit berücksichtigt wird. Wird ausgelassen, werden die interaktiven Zoom-Stufen verwendet
• handler? - (Function): string | number | boolean | void - überschreibt die Level-Auswahl. Es erhält ein context-Objekt und sollte einen Level-Namen bzw. Index zurückgeben, um anzuwenden, false, um die Anpassung abzubrechen, oder nichts, um das berechnete Level beizubehalten
  • context - (object) - ein Objekt { range, viewportWidth, levels, padding, defaultLevel }, wobei defaultLevel der Level-Index ist, den der eingebaute Algorithmus gewählt hat

Optionen, die direkt an zoomToFit() übergeben werden, überschreiben die Standards, die über init({ fit }) festgelegt wurden.

gantt.ext.zoom.init({
    fit: {
        scope: "all",
        // ein dediziertes Satz von Skalen, der nur zum Anpassen verwendet wird
        levels: [
            { name: "weeks", scale_height: 50, scales: [{ unit: "week", step: 1, format: "Week #%W" }] },
            { name: "months", scale_height: 50, scales: [{ unit: "month", step: 1, format: "%F, %Y" }] }
        ],
        handler: (context) => {
            // geben Sie einen Level-Namen/Index zurück, false zum Abbruch oder nichts, um das Standard-Verhalten beizubehalten
            return context.defaultLevel;
        }
    }
});

gantt.ext.zoom.zoomToFit();

• onAfterZoom Ereignis
• löst beim Wechsel der Zoom-Stufe aus. Die Argumente sind:

• level - (number | string) - die Nummer der Stufe
• config - (ZoomLevel) - die Konfiguration der Stufe

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