JavaScript/jQuery Diagram - Diagram Tools
The Diagram UI component allows you to customize its UI tools with the following properties.
App.js
- // ...
- import { confirm } from 'devextreme/ui/dialog';
- // ...
- class App extends React.Component {
- // ...
- onCustomCommand(e) {
- if(e.name === 'clear') {
- var result = confirm('Are you sure you want to clear the diagram?
- This action cannot be undone.', 'Warning');
- result.then(
- function(dialogResult) {
- if(dialogResult) {
- e.component.import('');
- }
- }
- );
- }
- else if (e.name == "sayHello")
- alert("Hello!")
- }
- render() {
- return (
- <Diagram id="diagram" ref={this.diagramRef} onCustomCommand={this.onCustomCommand}>
- <ContextMenu enabled={true} commands={['bringToFront', 'sendToBack', 'lock', 'unlock']} />
- <ContextToolbox enabled={true} category="flowchart" shapeIconsPerRow={5} width={200} />
- <PropertiesPanel visibility="visible">
- <Tab>
- <Group title="Page Properties" commands={['pageSize', 'pageOrientation', 'pageColor']} />
- </Tab>
- </PropertiesPanel>
- <HistoryToolbar visible={false} />
- <ViewToolbar visible={true}>
- <Command name="zoomLevel" />
- <Command name="fullScreen" />
- <Command name="units" />
- <Command name="sayHello" icon="blockquote" text="Say Hello" />
- <Command name="export" icon="export" items = {["exportSvg","exportPng","exportJpg"]} />
- </ViewToolbar>
- <MainToolbar visible={true}>
- <Command name="undo" />
- <Command name="redo" />
- <Command name="separator" />
- <Command name="fontName" />
- <Command name="fontSize" />
- <Command name="separator" />
- <Command name="bold" />
- <Command name="italic" />
- <Command name="underline" />
- <Command name="separator" />
- <Command name="fontColor" />
- <Command name="lineColor" />
- <Command name="fillColor" />
- <Command name="separator" />
- <Command name="clear" icon="clearsquare" text="Clear Diagram" />
- </MainToolbar>
- <Toolbox visibility="visible" showSearch={false} shapeIconsPerRow={4} width={220}>
- <Group category="general" title="General" />
- <Group category="flowchart" title="Flowchart" expanded={true} />
- </Toolbox>
- </Diagram>
- );
- }
- }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.