Toolbar

Die Toolbar ist der obere Bereich des Diagram Editors, der Benutzern hilft, den Bearbeitungsprozess zu steuern.

Um die Toolbar zu konfigurieren, können Sie die folgenden Eigenschaften verwenden:

css - wendet die benutzerdefinierte CSS-Klasse an
navigationType - definiert die Aktion, die ein Toolbar-Element aktiviert. Sie können eine der folgenden Aktionen angeben:
- "click" - aktiviert ein Toolbar-Element, wenn ein Benutzer darauf klickt
- "pointer" - aktiviert ein Toolbar-Element, wenn ein Benutzer den Mauszeiger darüber bewegt
items - das Array von items (Steuerelementen), die auf der Toolbar angeordnet sind. Es gibt 2 Möglichkeiten, Toolbar-Elemente zu konfigurieren:
- Konfigurieren von Elementen über Strings
- Konfigurieren von Elementen über Objekte

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        // toolbar: true, // zeigt die Standard-Toolbar an
        // oder konfigurieren Sie die Toolbar über ein Objekt
        toolbar: {
            css: "custom_css",
            navigationType: "pointer",
            items: [
                {
                    type: "file",
                    items: [
                        "importJson",
                        {
                            type: "exportJson",
                            value: "Export to JSON"
                        },
                        {
                            id: "custom_id_1",
                            type: "menuItem",
                            value: "Server export",
                            icon: "dxi dxi-vault",
                            items: [
                                "exportPdf",
                                {
                                    id: "custom_id_2",
                                    type: "menuItem",
                                    value: "PNG",
                                    handler: editor => {
                                        editor.diagram.export.png();
                                        // eigene Logik hier
                                    }
                                }
                            ]
                        }
                    ]
                },
                "spacer",
                "scale"
            ]
        }
    }
});

Service-Elemente

Toolbar-Elemente werden durch Service-Elemente dargestellt. Sie können die folgenden Service-Elemente verwenden und konfigurieren:

file - bildet eine Gruppe von Service-Elementen zum Importieren und Exportieren von Dateien
Details
Das Element file hat die folgende Struktur:
- file - importJson - export - exportJson - exportPdf - exportPng
Die Elementsammlung file sieht folgendermaßen aus:
importJson - öffnet ein Dialogfeld zum Importieren einer Datei im JSON-Format
export - bildet eine Gruppe von Service-Elementen zum Exportieren einer Datei im gewählten Format
Details
Das Element export hat die folgende Struktur:
- export - exportJson - exportPdf - exportPng
exportJson - exportiert eine Datei im JSON-Format
exportPdf - exportiert eine Datei im PDF-Format
exportPng - exportiert eine Datei im PNG-Format

edit - bildet eine Gruppe von Service-Elementen zum Verwalten und Bearbeiten von Shapes, Lines, Groups und Swimlanes

Details

Im Modus default hat die Elementsammlung edit die folgende Standardstruktur:

- edit
    - undo
    - redo
    - separator
    - duplicate
    - copy
    - paste
    - separator
    - copyStyle
    - pasteStyle
    - separator
    - selectAll
    - selectNone

In den Modi org/mindmap hat die Elementsammlung edit die folgende Standardstruktur:

- edit
    - undo
    - redo
    - separator
    - copyStyle
    - pasteStyle
    - separator
    - selectAll
    - selectNone

undo - geht einen Schritt im Änderungsverlauf zurück
redo - geht einen Schritt im Änderungsverlauf vorwärts
duplicate - dupliziert ausgewählte Elemente
copy - kopiert ausgewählte Dateien in das Objekt model
paste - fügt kopierte Dateien aus dem Objekt model ein
copyStyle - kopiert die Stile der ausgewählten Elemente in das Objekt model
pasteStyle - wendet die im Objekt model gespeicherten Stile auf die ausgewählten Elemente an
selectAll - wählt alle zur Auswahl verfügbaren Elemente aus
selectNone - hebt die Auswahl aller verfügbaren Elemente auf

view - bildet eine Gruppe von Service-Elementen zur Verwaltung der Ansicht von Diagram-Editor-Elementen

Details

Im Modus default hat die Elementsammlung view die folgende Standardstruktur:

- view
    - theme
        - themeLight
        - themeDark
        - themeLightContrast
        - themeDarkContrast
    - separator
    - shapebar
    - editbar
    - grid
    - separator
    - connectionPoints
    - resizePoints
    - magnetic
    - separator
    - zoomIn
    - zoomOut

In den Modi org/mindmap hat die Elementsammlung view die folgende Standardstruktur:

- view
    - theme
        - themeLight
        - themeDark
        - themeLightContrast
        - themeDarkContrast
    - separator
    - editbar
    - separator
    - grid
    - separator
    - resizePoints
    - itemsDraggable
    - separator
    - zoomIn
    - zoomOut

theme - bildet eine Gruppe von Service-Elementen zum Anwenden von Themes
Details
Das Element theme hat die folgende Struktur:
- theme - themeLight - themeDark - themeLightContrast - themeDarkContrast
themeLight - wendet das Light-Theme an
themeDark - wendet das Dark-Theme an
themeLightContrast - wendet das LightContrast-Theme an
themeDarkContrast - wendet das DarkContrast-Theme an
shapebar - zeigt das Panel Shapebar an oder blendet es aus
editbar - zeigt das Panel Editbar an oder blendet es aus
grid - zeigt das grid im Grid-Bereich an oder blendet es aus
connectionPoints - zeigt die Verbindungspunkte an oder blendet sie aus
resizePoints - zeigt die Größenänderungspunkte an oder blendet sie aus
magnetic - schaltet die Funktion magnetic ein oder aus
zoomIn - erhöht den Maßstabswert um 0.05 (5%)
zoomOut - verringert den Maßstabswert um 0.05 (5%)

arrange - bildet eine Gruppe von Service-Elementen zum Anordnen von Diagram-Editor-Elementen

Details

Im Modus default hat die Elementsammlung arrange die folgende Standardstruktur:

- arrange
    - layout
        - layoutMode
            - layoutModeDirect
            - layoutModeEdges
        - separator
        - layoutOrthogonal
        - layoutRadial
    - align
        - alignHorizontalLeft
        - alignHorizontalCenter
        - alignHorizontalRight
        - separator
        - alignVerticalTop
        - alignVerticalCenter
        - alignVerticalBottom
    - distribute
        - distributeVertical
        - distributeHorizontal

layout - bildet eine Gruppe von Service-Elementen zur automatischen Platzierung von Diagram-Editor-Elementen

Details

Das Element layout hat die folgende Struktur:

- layout
    - layoutMode
        - layoutModeDirect
        - layoutModeEdges
    - separator
    - layoutOrthogonal
    - layoutRadial

layoutMode - bildet eine Gruppe von Service-Elementen zur Verwaltung des Modus für die automatische Platzierung
Details
Das Element layoutMode hat die folgende Struktur:
- layoutMode - layoutModeDirect - layoutModeEdges
layoutModeDirect - wendet den Modus direct für die Elementverbinder an
layoutModeEdges - wendet den Modus edges für die Elementverbinder an
layoutOrthogonal - wendet den Modus orthogonal für die Elementanordnung an
layoutRadial - wendet den Modus radial für die Elementanordnung an

align - bildet eine Gruppe von Service-Elementen zur Verwaltung der Ausrichtung der Diagram-Editor-Elemente

Details

Das Element align hat die folgende Struktur:

- align
    - alignHorizontalLeft
    - alignHorizontalCenter
    - alignHorizontalRight
    - separator
    - alignVerticalTop
    - alignVerticalCenter
    - alignVerticalBottom

alignHorizontalLeft - richtet Elemente horizontal links aus
alignHorizontalCenter - richtet Elemente horizontal zentriert aus
alignHorizontalRight - richtet Elemente horizontal rechts aus
alignVerticalTop - richtet Elemente vertikal oben aus
alignVerticalCenter - richtet Elemente vertikal zentriert aus
alignVerticalBottom - richtet Elemente vertikal unten aus
distribute - bildet eine Gruppe von Service-Elementen zum Verteilen der Diagram-Editor-Elemente
Details
Das Element distribute hat die folgende Struktur:
- distribute - distributeVertical - distributeHorizontal
distributeVertical - verteilt Elemente vertikal
distributeHorizontal - verteilt Elemente horizontal

scale - das Steuerelement, mit dem Benutzer den Maßstabswert um 0.05 (5%) erhöhen oder verringern können

Details
Das Element scale sieht folgendermaßen aus:
separator - eine horizontale (zwischen Menüoptionen) oder vertikale (zwischen Toolbar-Steuerelementen) Linie, die Elemente/Elementgruppen voneinander trennt.
spacer - ein Abstand auf der Toolbar, der zum Ausrichten von Steuerelementen verwendet wird

Basiselemente

Neben den Service-Elementen können Sie mithilfe des Objekt-Ansatzes auch die folgenden Basiselemente angeben und konfigurieren:

Das folgende Beispiel zeigt, wie Sie das Steuerelement Button zur Toolbar hinzufügen:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "org", // "default" | "org" | "mindmap"
    view: {
        // toolbar: true, // zeigt die Standard-Toolbar an
        // oder konfigurieren Sie die Toolbar über ein Objekt
        toolbar: {
            items: [
                {
                    type: "button",
                    value: "Best button"
                }
            ]
        }
    }
});

Zusätzlich zu den inneren Eigenschaften der Basiselemente (mit Ausnahme von Separator, Spacer und Title) können Sie auch die folgenden Eigenschaften verwenden:

checkIcon - (optional) - der Handler, der die CSS-Klasse des Icons zurückgibt. Er wird mit dem folgenden Argument aufgerufen:
- editor - das Diagram-Editor-Objekt

checkIcon?: (editor: IDiagramEditor) => string; // Nur für Basiselemente verwenden, die ein Icon enthalten

handler - (optional) - der Handler, der ausgeführt wird, wenn das Event click oder inputChange eintritt. Er wird mit den folgenden Argumenten aufgerufen:
- editor - das Diagram-Editor-Objekt
- event - ein natives Event

handler?: (editor: object, event: Event) => void;

Service-Elemente​

Basiselemente​

Service-Elemente

Basiselemente