Diagram Editor
The Kendo UI for Angular Diagram Editor adds a main toolbar and contextual toolbars to a Diagram. Use the editor to let users perform rich-text editing, insert and format shapes, connections, and text directly on the canvas.
When hovering over the Diagram, the default editor displays a main toolbar above the component for undo, redo, selection, panning, text insertion, and shape insertion actions.
Using the Diagram Editor
The Diagram Editor provides a main toolbar for canvas actions and contextual toolbars for selected shapes, connections, and text.
The following table summarizes the actions available in each default editing context.
| Editing context | Available actions |
|---|---|
Shape | Select a shape to open its toolbar. Change its type, fill, border width, border color, or border style; change its stacking order; rotate, duplicate, or delete it. |
Connection | Select a connection to open its toolbar. Change its line color, width, style, route type, or start and end caps; edit its label or delete it. |
| Text | Double-click shape or connection text to open the rich-text editor. The content uses ShapeRichTextContent or ConnectionRichTextContent. Change its color, font family, font size, bold, italic, underline, or alignment. Shape text also supports vertical alignment. |
The Diagram Editor modifies rich-text content in place. For details, see the Rich Text Content article.
Configuring the Diagram Editor
The Diagram renders its editor through the <kendo-diagram-editor> component. To add the editor to a Diagram, follow these steps:
-
Define the
<kendo-diagram>element in your template:html<kendo-diagram></kendo-diagram> -
Add the
<kendo-diagram-editor>selector as a child of the Diagram element:html<kendo-diagram> <kendo-diagram-editor></kendo-diagram-editor> </kendo-diagram>
Customizing Toolbars
The Diagram Editor provides a main toolbar and contextual toolbars for shapes, connections, and text. Set the toolbars input to a DiagramEditorToolbarsOptions object to configure each of these toolbars.
Each object property in the DiagramEditorToolbarsOptions object controls one toolbar. You can set a property to false to hide its toolbar, true to show its defaults, or use an additional options object to customize it.
The following table lists the options available for each toolbar:
| Toolbar | Configuration property | Options |
|---|---|---|
| Main | diagram | tools—specifies the controls; position—sets the top or bottom placement. |
| Shape | shape | tools—specifies the controls. |
| Connection | connection | tools—specifies the connection toolbar controls. |
| Text | text | tools—specifies the controls; fontNames—sets the available font families; fontSizes—sets the available font sizes. |
Use the following demo to compare toolbar visibility, placement, and preset tool sets. Select a shape or connection to open its contextual toolbar, or double-click a label to edit text.
The Component Properties configurator in the above example demonstrates predefined toolbar presets. To specify the desired individual controls or add separators, configure the toolbars input directly.
You can add a 'separator' in the tools array of a toolbar to divide tool groups. The following snippet shows how to configure a bottom main toolbar with separators, a focused shape toolbar, no connection toolbar, and limited font choices:
public fontTypes: FontTypeItem[] = [
{ text: 'Arial', value: 'Arial, sans-serif' },
{ text: 'Georgia', value: 'Georgia, serif' }
];
public fontSizes: FontSizeItem[] = [
{ text: '14', value: '14px' },
{ text: '18', value: '18px' },
{ text: '24', value: '24px' }
];
public toolbars: DiagramEditorToolbarsOptions = {
diagram: {
position: 'bottom',
tools: ['undo', 'redo', 'separator', 'select', 'pan', 'text', 'separator', 'shape']
},
shape: {
tools: ['backColor', 'borderColor', 'separator', 'duplicate', 'delete']
},
connection: false,
text: {
tools: ['fontType', 'fontSize', 'separator', 'bold', 'italic', 'underline', 'align'],
fontNames: this.fontTypes,
fontSizes: this.fontSizes
}
};Limiting Available Shapes
Use the <kendo-diagram-editor>'s shapes input to limit flowchart shapes in the main toolbar and shape toolbar. The following example offers three FlowchartShapeType values:
<kendo-diagram>
<kendo-diagram-editor [shapes]="availableShapes"></kendo-diagram-editor>
</kendo-diagram>Customizing Text Options
Set the fontTypes and fontSizes properties of the <kendo-diagram-editor> component to define shared text appearance options. The text toolbar's fontNames and fontSizes options override the corresponding shared choices.
The following example defines shared font lists, then limits the text toolbar to two fonts and two sizes:
<kendo-diagram>
<kendo-diagram-editor
[fontTypes]="fontTypes"
[fontSizes]="fontSizes"
[toolbars]="toolbars"
></kendo-diagram-editor>
</kendo-diagram>