LineTitles

Übersicht

LineTitles legen den Text für Linien fest, die Formen verbinden. Sie können einer Linie sowohl im Diagram als auch im Editor Text hinzufügen, indem Sie auf die Linie doppelklicken, oder indem Sie die Symbolleiste der Linie im Editor verwenden (klicken Sie auf eine Linie, um sie zu aktivieren). Sie können LineTitles sowohl im Diagram als auch im Editor auch per Doppelklick bearbeiten.

Eine weitere Möglichkeit, einer Linie Text hinzuzufügen und ihn zu bearbeiten, besteht darin, einen Datensatz vorzubereiten.

Hinweis

LineTitles sind nur im Standardmodus von Diagram/Diagram Editor verfügbar (type: "default").

LineTitles erstellen

Um einen LineTitle zu erstellen, müssen Sie type: "lineTitle" innerhalb des LineTitle-Objekts angeben, während Sie einen Datensatz zum Laden in das Diagram vorbereiten:

const data = [
    { type: "rectangle", id: "shape_1" },
    { type: "rectangle", id: "shape_2", x: 400 },
    { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
    // LineTitle konfigurieren
    { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
];

// Diagram initialisieren
const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

Eigenschaften eines LineTitle-Objekts

Sehen Sie sich die vollständige Liste der Konfigurationseigenschaften eines LineTitle-Objekts an, um das Erscheinungsbild anzupassen sowie die Positionierung von LineTitles zu konfigurieren.

Arbeiten mit LineTitles

Sie können LineTitles über die DataCollection-API bearbeiten.

Hinweis

Die folgenden Beispiele eignen sich sowohl für Diagram als auch für Diagram Editor.

LineTitle hinzufügen

Sie können einen LineTitle über die Methode add von DataCollection hinzufügen:

const editor= new dhx.DiagramEditor("editor_container", {
    type: "default"
});
editor.parse(data);
editor.diagram.data.add({
    type: "lineTitle",
    parent: "line_1",
    text: "Some text",
    fill: "#BCE4CE"
});

Übergeben Sie ein Objekt mit der Konfiguration eines neuen LineTitle als Parameter der Methode.

Hinweis

Sehen Sie sich die vollständige Liste der Konfigurationseigenschaften eines LineTitle-Objekts an.

Hinzufügen von LineTitles blockieren

Wenn Sie das Hinzufügen von LineTitles verhindern müssen, können Sie das Event beforeAdd von DataCollection verwenden:

const editor= new dhx.DiagramEditor("editor_container", {
    type: "default"
});
editor.parse(data);
editor.diagram.data.events.on("beforeAdd", (item) => item.type !== "lineTitle");

Über LineTitles iterieren

Mit Hilfe der Methode eachChild() von DataCollection können Sie über LineTitles als untergeordnete Elemente von Linien iterieren:

const editor= new dhx.DiagramEditor("editor_container", {
    type: "default"
});
editor.parse([
    { type: "rectangle", id: "shape_1" },
    { type: "rectangle", id: "shape_2", x: 400 },
    { type: "line", id: "line_1", from: "shape_1", to: "shape_2" },
    { type: "lineTitle", id: "title_1", parent: "line_1", text: "Text 1", distance: 50 },
    { type: "lineTitle", id: "title_2", parent: "line_1", text: "Text 2", distance: 70 }
]);
editor.diagram.data.eachChild("line_1", (child) => {
    console.log(child.id); // => "title_1", "title_2"
});

Übergeben Sie die ID der Linie, deren Titel iteriert werden sollen, als ersten Parameter. Im obigen Beispiel wird die Callback-Funktion auf jedes untergeordnete Element der angegebenen Linie angewendet und gibt deren IDs zurück.