LineTitles

Overview

Line titles set text for lines that connect shapes. You can add text to a line both in the diagram and in the editor by double-clicking on the line, or by using the line's toolbar in the editor (click a line to activate it). You can also use double-clicking to edit line titles both in the diagram and in the editor.

Another way to add a text to a line and manipulate it is to prepare a data set.

note

LineTitles are available only in the default mode of Diagram/Diagram Editor (type: "default").

Creating line titles

To create a line title, you need to specify type: "lineTitle" inside the line title object while preparing a data set to load into the diagram:

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" },
    // configuring a line title
    { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" }
];

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

Properties of a line title object

Check the full list of configuration properties of a line title object to adjust the look and feel as well as configure the positioning of line titles.

Working with line titles

You can manipulate line titles via the DataCollection API.

note

The examples below are suitable both for Diagram and Diagram Editor.

Adding a line title

You can add a line title via the add method of DataCollection:

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"
});

Provide an object with the configuration of a new line title as a parameter of the method.

note

See the full list of configuration properties of a line title object.

Blocking line titles adding

If you need to prevent adding line titles, you can use the beforeAdd event of DataCollection:

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

Iterating over line titles

You can iterate over line titles as child items of lines with the help of the eachChild() method of DataCollection:

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"
});

Pass the id of the line whose titles should be iterated over as the first parameter. In the above example, the callback function will be applied to each child of the specified line and return their ids.