Customize the Context Menu's Items
The example below demonstrates how to show default and custom commands in the context menu depending on the selected item:
- <dx-diagram #diagram id="diagram" (onSelectionChanged)="selectionChanged($event)" (onCustomCommand)="customCommand($event)">
- </dx-diagram>
- import { Component, ViewChild} from '@angular/core';
- import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- @ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;
- selectionChanged(e) {
- // Displays the "showGrid" and "snapToGrid" commands if a user selects no items
- if (e.items.length === 0)
- e.component.option("contextMenu.commands", ["showGrid", "snapToGrid"]);
- else
- // Displays the "fontName", "fontSize", and "selectShapes" commands when a user selects a shape
- if (e.items[0].itemType === "shape")
- e.component.option("contextMenu.commands", ["fontName", "fontSize", {name: "selectShapes", text: "Select All Shapes"}]);
- else
- // Displays the "connectorLineStart", "connectorLineEnd", and "selectConnectors" commands when a user selects a connector
- e.component.option("contextMenu.commands", ["connectorLineStart", "connectorLineEnd", {name: "selectConnectors", text: "Select All Connectors"}]);
- }
- customCommand(e) {
- if (e.name == "selectShapes") {
- var shapes = e.component.getItems().filter(function(item) {
- return (item.itemType === "shape")
- });
- e.component.setSelectedItems(shapes);
- }
- if (e.name == "selectConnectors") {
- var connectors = e.component.getItems().filter(function(item) {
- return (item.itemType === "connector")
- });
- e.component.setSelectedItems(connectors);
- }
- }
- }
Specify a Command's Location on the Main Toolbar
Use the location property to set the location of a command or separator on the main toolbar. This property accepts one of the following values:
center
Places the command in the center of the main toolbar.before
Places the command before the central element(s).after
Places the command after the central element(s).
The Diagram UI component displays commands with the same location property value in the order in which you listed them. When the main toolbar cannot accommodate all commands, the component places excess commands in the overflow menu.
The example below demonstrates how to customize the main toolbar:
- <dx-diagram #diagram id="diagram" (onCustomCommand)="onCustomCommand($event)">
- <dxo-main-toolbar [visible]="true">
- <dxi-command name="undo" location="before"> </dxi-command>
- <dxi-command name="redo" location="before"> </dxi-command>
- <dxi-command name="separator" location="before"> </dxi-command>
- <dxi-command name="copy" location="center"> </dxi-command>
- <dxi-command name="paste" location="center"> </dxi-command>
- <dxi-command name="cut" location="center"> </dxi-command>
- <dxi-command name="separator" location="after"> </dxi-command>
- <dxi-command
- name="clear"
- icon="clearsquare"
- text="Clear Diagram"
- location="after">
- </dxi-command>
- </dxo-main-toolbar>
- <dxo-toolbox visibility="hidden"> </dxo-toolbox>
- <dxo-history-toolbar [visible]="false"> </dxo-history-toolbar>
- <dxo-view-toolbar [visible]="false"> </dxo-view-toolbar>
- </dx-diagram>
- import { NgModule, Component, ViewChild, enableProdMode, } from '@angular/core';
- import { BrowserModule } from '@angular/platform-browser';
- import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- import { HttpClient, HttpClientModule } from '@angular/common/http';
- import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
- import dialog from 'devextreme/ui/dialog';
- @Component({
- selector: 'demo-app',
- templateUrl: 'app/app.component.html',
- styleUrls: ['app/app.component.css'],
- preserveWhitespaces: true,
- })
- export class AppComponent {
- @ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;
- constructor(http: HttpClient) {
- http.get('data/diagram-flow.json').subscribe((data) => {
- this.diagram.instance.import(JSON.stringify(data));
- }, (err) => {
- throw 'Data Loading Error';
- });
- }
- onCustomCommand(e) {
- if (e.name === 'clear') {
- const result = dialog.confirm('Are you sure you want to clear the diagram? This action cannot be undone.', 'Warning');
- result.then(
- (dialogResult) => {
- if (dialogResult) {
- e.component.import('');
- }
- },
- );
- }
- }
- }
- @NgModule({
- imports: [
- BrowserModule,
- HttpClientModule,
- DxDiagramModule,
- ],
- declarations: [AppComponent],
- bootstrap: [AppComponent],
- })
- export class AppModule { }
- platformBrowserDynamic().bootstrapModule(AppModule);
If you have technical questions, please create a support ticket in the DevExpress Support Center.