Editbar

Sie können Editbar-Steuerelemente für jedes Diagram-Element einzeln sowie für eine Gruppe von Elementen unter Berücksichtigung verschiedener Bedingungen konfigurieren. Verwenden Sie dazu die Editbar-Konfiguration properties.

Wenn Sie Editbar-Steuerelemente für eine einzelne Form konfigurieren möchten, müssen Sie den entsprechenden Formtyp innerhalb der Konfiguration properties angeben, wie im folgenden Beispiel gezeigt:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        editbar: {
            properties: {
                rectangle: [ // Editbar-Steuerelemente für die Form „pert“ konfigurieren
                    { type: "arrange", $properties: { angle: { hidden: true } }},
                    // ... weitere Editbar-Steuerelemente konfigurieren
                ],
                // ... weitere Formen konfigurieren
            }
        }
    }
});

Um eine Gruppe von Elementen zu konfigurieren, müssen Sie die folgenden Service-Eigenschaften innerhalb der Konfiguration properties verwenden:

• $default - ermöglicht die Konfiguration von Editbar-Steuerelementen, wenn keine Elemente oder mehr als ein Element ausgewählt sind
• $shape - ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Formen, einschließlich benutzerdefinierter Formen
• $group - ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ group
• $swimlane - ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ swimlane
• $line - ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ line
• $lineTitle - ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ lineTitle

Editbar für den Rasterbereich konfigurieren

Die Service-Eigenschaft $default ermöglicht die Konfiguration von Editbar-Steuerelementen, wenn keine Elemente oder mehr als ein Element ausgewählt sind.

properties: {
    $default: [
        {
            type: "gridStep",
            readOnly: true,
            // ...
        }
    ]
}

Verwandte komplexe Steuerelemente: Rasterschritt, Rahmen, Anordnen

Editbar für Formen konfigurieren

Die Service-Eigenschaft $shape ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Formen, einschließlich benutzerdefinierter Formen.

properties: {
    $shape: [
        {
            type: "position",
            $properties: {
                dx: { disabled: true },
                // ...
            },
            // ...
        }
    ]
}

Verwandte komplexe Steuerelemente: Rahmen, Anordnen, Position, Größe, Textausrichtung, Textstil

Editbar für Gruppenelemente konfigurieren

Die Service-Eigenschaft $group ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ group.

properties: {
    $group: [
        {
            type: "header",
            label: "Group header style",
            // ...
        }
    ]
}

Verwandte komplexe Steuerelemente: Rahmen, Anordnen, Kopfzeile, Allgemeine Kopfzeile, Kopfzeilenposition, Größe, Textausrichtung, Textstil

Editbar für Swimlanes konfigurieren

Die Service-Eigenschaft $swimlane ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ swimlane.

properties: {
    $swimlane: [
        {
            type: "header",
            label: "Swimlane header style",
            // ...
        }
    ]
}

Verwandte komplexe Steuerelemente: Rahmen, Anordnen, Kopfzeile, Allgemeine Kopfzeile, Kopfzeilenposition, Größe, Textausrichtung, Textstil

Editbar für Linien konfigurieren

Die Service-Eigenschaft $line ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ line.

properties: {
    $line: [
        {
            type: "lineShape",
            label: "Line connection type",
            // ...
        }
    ]
}

Verwandte komplexe Steuerelemente: Rahmen, Linienform, Zeigeransicht

Editbar für Linientitel konfigurieren

Die Service-Eigenschaft $lineTitle ermöglicht die Konfiguration von Editbar-Steuerelementen für alle Elemente vom Typ lineTitle.

properties: {
    $lineTitles: [
        {
            type: "textAlign",
            label: "Text align",
            // ...
        },
        // ...
    ]
}

Verwandte komplexe Steuerelemente: Textausrichtung, Textstil

Benutzerdefinierte Editbar-Steuerelemente erstellen und konfigurieren

Sie können die Eigenschaft controls der Editbar-Ansicht verwenden, um ein benutzerdefiniertes Steuerelement auf Grundlage der Basissteuerelemente und/oder komplexen Steuerelemente zu erstellen.

Warnung

Wir empfehlen nicht, einen Standard-Steuerelementtyp (siehe Basissteuerelemente und/oder Komplexe Steuerelemente) als Namen für ein benutzerdefiniertes Steuerelement zu verwenden. Verwenden Sie für jedes benutzerdefinierte Steuerelement einen eindeutigen Namen, um Fehler zu vermeiden!

Nachdem Sie ein benutzerdefiniertes Steuerelement erstellt haben, müssen Sie es über die Eigenschaft properties auf das gewünschte Diagram-Element anwenden.