/** * Copyright (c) 2006-2013, JGraph Ltd * * Menustyle * Menustyle. This example demonstrates using * CSS to style the mxPopupMenu. */ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; const HTML_TEMPLATE = `
` // Disables built-in context menu InternalEvent.disableContextMenu(document.body); // Changes some default colors mxConstants.HANDLE_FILLCOLOR = '#99ccff'; mxConstants.HANDLE_STROKECOLOR = '#0088cf'; mxConstants.VERTEX_SELECTION_COLOR = '#00a8ff'; // Creates the graph inside the given container let graph = new mxGraph(container); graph.setTooltips(true); // Enables rubberband selection new mxRubberband(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). let parent = graph.getDefaultParent(); // Adds cells to the model in a single step graph.batchUpdate(() => { var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); var e1 = graph.insertEdge(parent, null, '', v1, v2); }); // Creates a new overlay with an image and a tooltip and makes it "transparent" to events let overlay = new CellOverlay(new mxImage('editors/images/overlays/check.png', 16, 16), 'Overlay tooltip'); let mxCellRendererInstallCellOverlayListeners = mxCellRenderer.prototype.installCellOverlayListeners; mxCellRenderer.prototype.installCellOverlayListeners = function(state, overlay, shape){ mxCellRendererInstallCellOverlayListeners.apply(this, arguments); var graph = state.view.graph; mxEvent.addGestureListeners(shape.node, function (evt) { graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt, state)); }, function (evt) { graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt, state)); }, function (evt) { }); if (!Client.IS_TOUCH) { mxEvent.addListener(shape.node, 'mouseup', function(evt) { overlay.fireEvent(new mxEventObject(mxEvent.CLICK, 'event', evt, 'cell', state.cell)); }); } }; // Sets the overlay for the cell in the graph graph.addCellOverlay(v1, overlay); // Configures automatic expand on mouseover graph.getPlugin('PopupMenuHandler').autoExpand = true; // Installs context menu graph.getPlugin('PopupMenuHandler').factoryMethod = function(menu, cell, evt) { menu.addItem('Item 1', null, function() { alert('Item 1'); }); menu.addItem('Item 2', null, function() { alert('Item 2'); }); menu.addSeparator(); var submenu1 = menu.addItem('Submenu 1', null, null); menu.addItem('Subitem 1', null, function() { alert('Subitem 1'); }, submenu1); menu.addItem('Subitem 1', null, function() { alert('Subitem 2'); }, submenu1); };