properties

Beschreibung

Optional. Eine Reihe von Konfigurationen, die Steuerelemente für Diagram-Elemente (Formen, Gruppen, Swimlanes usw.) verändern

Info

Die Konfiguration properties ermöglicht Folgendes:

• Ändern der Editbar-Steuerelemente für alle oder einzelne Diagram-Elemente basierend auf den Basis-Steuerelementen und/oder Komplexen Steuerelementen
• Anwenden benutzerdefinierter Editbar-Steuerelemente, die über die Eigenschaft controls definiert wurden, auf Diagram-Elemente
• Festlegen von Bedingungen für die Anwendung eines Editbar-Steuerelements (benutzerdefiniert oder Standard) auf Diagram-Elemente

Weitere Informationen zur Konfiguration finden Sie im Leitfaden Editbar-Konfiguration!

Verwendung

properties?: {
    [type: string]: object[] | function, // benutzerdefinierte Konfigurationen für Steuerelemente, die auf Diagram-Elemente angewendet werden
};

Parameter

• type - der Name eines Diagram-Elements oder einer Gruppe von Elementen

  • object - das Konfigurationsobjekt eines Diagram-Elements

  oder

  • function - eine Callback-Funktion, die ein Array von Objekten mit der Konfiguration der Steuerelemente eines Diagram-Elements zurückgeben soll. Die Funktion wird mit einem Objekt aufgerufen, das die folgenden Parameter enthält:
    • item - (optional) das Objekt des ausgewählten Elements
    • editor - (erforderlich) das Objekt des Diagram Editors

Sie können Editbar-Steuerelemente für ein einzelnes Diagram-Element konfigurieren, zum Beispiel rectangle, circle, card usw.:

properties: {
    // Editbar-Steuerelemente für einzelne Elemente (Formen) ändern
    rectangle: [], // Steuerelemente für den Typ "rectangle" konfigurieren
    circle: [], // Steuerelemente für den Typ "circle" konfigurieren
    card: [], // Steuerelemente für den Typ "card" konfigurieren
    estimate: [], // Steuerelemente für den benutzerdefinierten Typ "estimate" konfigurieren
    // weitere Elemente
}

Sie können Editbar-Steuerelemente auch für eine bestimmte Gruppe von Diagram-Elementen konfigurieren. Zur Konfiguration von Gruppen stehen die folgenden Diensteigenschaften zur Verfügung:

• $default - ermöglicht die Konfiguration von Editbar-Steuerelementen, wenn keine Elemente ausgewählt sind oder mehr als ein Element ausgewählt ist
• $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"

properties: {
    $default: [],
    $shape: [],
    $group: [],
    $swimlane: [],
    $line: [],
    $lineTitle: [],
    // ... weitere Parameter
}

Beispiel

const editor = new dhx.DiagramEditor("editor_container", {
    type: "org",
    view: {
        // editbar: true, // zeigt die Standard-Editbar an
        // oder Editbar über ein Objekt konfigurieren
        editbar: {
            css: "custom_css",
            show: true,
            width: 300,
            properties: {
                $shape: ({ item, editor }) => {
                    const controls = [
                        { type: "position" },
                        { type: "size" }
                    ];
                    if (item.hasOwnProperty("title")) {
                        controls.push({ type: "input", key: "title", label: "Title", wrap: true });
                    }
                    if (item.hasOwnProperty("text")) {
                        controls.push({ type: "textarea", key: "text", height: 200, label: "Text", wrap: true });
                    }
                    if (item.hasOwnProperty("img")) {
                        controls.push({ type: "avatar", key: "img", label: "Image", wrap: true });
                    }
                    return controls;
                },
                $group: [
                    {
                        type: "arrange",
                        $properties: {
                            angle: { hidden: true }
                        }
                    },
                    { type: "header" },
                    {
                        type: "border",
                        $properties: {
                            stroke: { key: ["style", "stroke"] },
                            strokeType: { hidden: true },
                            strokeWidth: { key: ["style", "strokeWidth"], width: "85%" }
                        }
                    }
                ]
            }
        }
    }
});

Changelog: Die Eigenschaft wurde in v6.0 hinzugefügt

Verwandter Artikel: Editbar-Konfiguration

Verwandtes Beispiel: Diagram Editor. Standardmodus. Anpassung der Editbar. Formzähler hinzugefügt