/** * Copyright (c) 2006-2013, JGraph Ltd * * UIConfig example * * This example demonstrates using a config * file to configure the toolbar and popup menu in Editor. */ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; import { error } from '../../packages/core/src/util/gui/MaxWindow'; import { load } from '../../packages/core/src/util/network/MaxXmlRequest'; const HTML_TEMPLATE = `

` MaxLog.show(); // Creates the graph inside the given container. The // editor is used to create certain functionality for the // graph, such as the rubberband selection, but most parts // of the UI are custom in this example. let editor = new Editor(); // Configures the editor's UI, the toolbar and the popupmenu. // Note that the element with the id toolbox is used in the // config file, the toolbar element (top element) is used below // to create a second toolbar programmatically. // The cells to be created via drag and drop are added // in the templates array in Editor, and a custom action is // added to the built-in actions in the editor, as well. // The ui section maps the existing DOM elements to the graph // and toolbar objects, respectively. // Keep in mind that the as-attributes of the add-items in the // toolbar and popupmenu sections refer to keys in mxResources. let config = load('uiconfig.xml').getDocumentElement(); ObjectCodec.allowEval = true; editor.configure(config); ObjectCodec.allowEval = false; // Enables new connections in the graph editor.graph.setConnectable(true); // Creates the second toolbar programmatically let container = document.getElementById('toolbar'); let toolbar = new EditorToolbar(container, editor); // Use eg. mxResources.get("delete") to translate tooltip toolbar.addItem('Show XML', 'images/icons48/gear.png', 'myFirstAction'); toolbar.addItem('Delete', 'images/icons48/keys.png', 'delete'); console.log('editor', editor);