/**
* Copyright (c) 2006-2012, JGraph Ltd
*/
/**
* Constructs a new graph editor
*/
Menus = function(editorUi)
{
this.editorUi = editorUi;
this.menus = new Object();
this.init();
// Pre-fetches checkmark image
if (!mxClient.IS_SVG)
{
new Image().src = this.checkmarkImage;
}
};
/**
* Sets the default font family.
*/
Menus.prototype.defaultFont = 'Helvetica';
/**
* Sets the default font size.
*/
Menus.prototype.defaultFontSize = '12';
/**
* Sets the default font size.
*/
Menus.prototype.defaultMenuItems = ['file', 'edit', 'view', 'arrange', 'extras', 'help'];
/**
* Adds the label menu items to the given menu and parent.
*/
Menus.prototype.defaultFonts = ['Helvetica', 'Verdana', 'Times New Roman', 'Garamond', 'Comic Sans MS',
'Courier New', 'Georgia', 'Lucida Console', 'Tahoma'];
/**
* Adds the label menu items to the given menu and parent.
*/
Menus.prototype.init = function()
{
var graph = this.editorUi.editor.graph;
var isGraphEnabled = mxUtils.bind(graph, graph.isEnabled);
this.customFonts = [];
this.customFontSizes = [];
this.put('fontFamily', new Menu(mxUtils.bind(this, function(menu, parent)
{
var addItem = mxUtils.bind(this, function(fontname)
{
var tr = this.styleChange(menu, fontname, [mxConstants.STYLE_FONTFAMILY], [fontname], null, parent, function()
{
document.execCommand('fontname', false, fontname);
});
tr.firstChild.nextSibling.style.fontFamily = fontname;
});
for (var i = 0; i < this.defaultFonts.length; i++)
{
addItem(this.defaultFonts[i]);
}
menu.addSeparator(parent);
if (this.customFonts.length > 0)
{
for (var i = 0; i < this.customFonts.length; i++)
{
addItem(this.customFonts[i]);
}
menu.addSeparator(parent);
menu.addItem(mxResources.get('reset'), null, mxUtils.bind(this, function()
{
this.customFonts = [];
}), parent);
menu.addSeparator(parent);
}
this.promptChange(menu, mxResources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, mxConstants.STYLE_FONTFAMILY, parent, true, mxUtils.bind(this, function(newValue)
{
this.customFonts.push(newValue);
}));
})));
this.put('formatBlock', new Menu(mxUtils.bind(this, function(menu, parent)
{
function addItem(label, tag)
{
return menu.addItem(label, null, mxUtils.bind(this, function()
{
// TODO: Check if visible
graph.cellEditor.textarea.focus();
document.execCommand('formatBlock', false, '<' + tag + '>');
}), parent);
};
addItem(mxResources.get('normal'), 'p');
addItem('', 'h1').firstChild.nextSibling.innerHTML = '
' + mxResources.get('heading') + ' 1
';
addItem('', 'h2').firstChild.nextSibling.innerHTML = '' + mxResources.get('heading') + ' 2
';
addItem('', 'h3').firstChild.nextSibling.innerHTML = '' + mxResources.get('heading') + ' 3
';
addItem('', 'h4').firstChild.nextSibling.innerHTML = '' + mxResources.get('heading') + ' 4
';
addItem('', 'h5').firstChild.nextSibling.innerHTML = '' + mxResources.get('heading') + ' 5
';
addItem('', 'h6').firstChild.nextSibling.innerHTML = '' + mxResources.get('heading') + ' 6
';
addItem('', 'pre').firstChild.nextSibling.innerHTML = '' + mxResources.get('formatted') + '
';
addItem('', 'blockquote').firstChild.nextSibling.innerHTML = '' + mxResources.get('blockquote') + '
';
})));
this.put('fontSize', new Menu(mxUtils.bind(this, function(menu, parent)
{
var sizes = [6, 8, 9, 10, 11, 12, 14, 18, 24, 36, 48, 72];
var addItem = mxUtils.bind(this, function(fontsize)
{
this.styleChange(menu, fontsize, [mxConstants.STYLE_FONTSIZE], [fontsize], null, parent, function()
{
// Creates an element with arbitrary size 3
document.execCommand('fontSize', false, '3');
// Changes the css font size of the first font element inside the in-place editor with size 3
// hopefully the above element that we've just created. LATER: Check for new element using
// previous result of getElementsByTagName (see other actions)
var elts = graph.cellEditor.textarea.getElementsByTagName('font');
for (var i = 0; i < elts.length; i++)
{
if (elts[i].getAttribute('size') == '3')
{
elts[i].removeAttribute('size');
elts[i].style.fontSize = fontsize + 'px';
break;
}
}
});
});
for (var i = 0; i < sizes.length; i++)
{
addItem(sizes[i]);
}
menu.addSeparator(parent);
if (this.customFontSizes.length > 0)
{
for (var i = 0; i < this.customFontSizes.length; i++)
{
addItem(this.customFontSizes[i]);
}
menu.addSeparator(parent);
menu.addItem(mxResources.get('reset'), null, mxUtils.bind(this, function()
{
this.customFontSizes = [];
}), parent);
menu.addSeparator(parent);
}
this.promptChange(menu, mxResources.get('custom') + '...', '(pt)', '12', mxConstants.STYLE_FONTSIZE, parent, true, mxUtils.bind(this, function(newValue)
{
this.customFontSizes.push(newValue);
}));
})));
this.put('direction', new Menu(mxUtils.bind(this, function(menu, parent)
{
menu.addItem(mxResources.get('flipH'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_FLIPH, false); }, parent);
menu.addItem(mxResources.get('flipV'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false); }, parent);
this.addMenuItems(menu, ['-', 'rotation'], parent);
})));
this.put('align', new Menu(mxUtils.bind(this, function(menu, parent)
{
menu.addItem(mxResources.get('leftAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_LEFT); }, parent);
menu.addItem(mxResources.get('center'), null, function() { graph.alignCells(mxConstants.ALIGN_CENTER); }, parent);
menu.addItem(mxResources.get('rightAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_RIGHT); }, parent);
menu.addSeparator(parent);
menu.addItem(mxResources.get('topAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_TOP); }, parent);
menu.addItem(mxResources.get('middle'), null, function() { graph.alignCells(mxConstants.ALIGN_MIDDLE); }, parent);
menu.addItem(mxResources.get('bottomAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_BOTTOM); }, parent);
})));
this.put('distribute', new Menu(mxUtils.bind(this, function(menu, parent)
{
menu.addItem(mxResources.get('horizontal'), null, function() { graph.distributeCells(true); }, parent);
menu.addItem(mxResources.get('vertical'), null, function() { graph.distributeCells(false); }, parent);
})));
this.put('layout', new Menu(mxUtils.bind(this, function(menu, parent)
{
menu.addItem(mxResources.get('horizontalFlow'), null, mxUtils.bind(this, function()
{
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
this.editorUi.executeLayout(function()
{
var selectionCells = graph.getSelectionCells();
layout.execute(graph.getDefaultParent(), selectionCells.length == 0 ? null : selectionCells);
}, true);
}), parent);
menu.addItem(mxResources.get('verticalFlow'), null, mxUtils.bind(this, function()
{
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_NORTH);
this.editorUi.executeLayout(function()
{
var selectionCells = graph.getSelectionCells();
layout.execute(graph.getDefaultParent(), selectionCells.length == 0 ? null : selectionCells);
}, true);
}), parent);
menu.addSeparator(parent);
menu.addItem(mxResources.get('horizontalTree'), null, mxUtils.bind(this, function()
{
var tmp = graph.getSelectionCell();
var roots = null;
if (tmp == null || graph.getModel().getChildCount(tmp) == 0)
{
if (graph.getModel().getEdgeCount(tmp) == 0)
{
roots = graph.findTreeRoots(graph.getDefaultParent());
}
}
else
{
roots = graph.findTreeRoots(tmp);
}
if (roots != null && roots.length > 0)
{
tmp = roots[0];
}
if (tmp != null)
{
var layout = new mxCompactTreeLayout(graph, true);
layout.edgeRouting = false;
layout.levelDistance = 30;
this.editorUi.executeLayout(function()
{
layout.execute(graph.getDefaultParent(), tmp);
}, true);
}
}), parent);
menu.addItem(mxResources.get('verticalTree'), null, mxUtils.bind(this, function()
{
var tmp = graph.getSelectionCell();
var roots = null;
if (tmp == null || graph.getModel().getChildCount(tmp) == 0)
{
if (graph.getModel().getEdgeCount(tmp) == 0)
{
roots = graph.findTreeRoots(graph.getDefaultParent());
}
}
else
{
roots = graph.findTreeRoots(tmp);
}
if (roots != null && roots.length > 0)
{
tmp = roots[0];
}
if (tmp != null)
{
var layout = new mxCompactTreeLayout(graph, false);
layout.edgeRouting = false;
layout.levelDistance = 30;
this.editorUi.executeLayout(function()
{
layout.execute(graph.getDefaultParent(), tmp);
}, true);
}
}), parent);
menu.addItem(mxResources.get('radialTree'), null, mxUtils.bind(this, function()
{
var tmp = graph.getSelectionCell();
var roots = null;
if (tmp == null || graph.getModel().getChildCount(tmp) == 0)
{
if (graph.getModel().getEdgeCount(tmp) == 0)
{
roots = graph.findTreeRoots(graph.getDefaultParent());
}
}
else
{
roots = graph.findTreeRoots(tmp);
}
if (roots != null && roots.length > 0)
{
tmp = roots[0];
}
if (tmp != null)
{
var layout = new mxRadialTreeLayout(graph, false);
layout.levelDistance = 60;
layout.autoRadius = true;
this.editorUi.executeLayout(function()
{
layout.execute(graph.getDefaultParent(), tmp);
if (!graph.isSelectionEmpty())
{
tmp = graph.getModel().getParent(tmp);
if (graph.getModel().isVertex(tmp))
{
graph.updateGroupBounds([tmp], graph.gridSize * 2, true);
}
}
}, true);
}
}), parent);
menu.addSeparator(parent);
menu.addItem(mxResources.get('organic'), null, mxUtils.bind(this, function()
{
var layout = new mxFastOrganicLayout(graph);
this.editorUi.executeLayout(function()
{
var tmp = graph.getSelectionCell();
if (tmp == null || graph.getModel().getChildCount(tmp) == 0)
{
tmp = graph.getDefaultParent();
}
layout.execute(tmp);
if (graph.getModel().isVertex(tmp))
{
graph.updateGroupBounds([tmp], graph.gridSize * 2, true);
}
}, true);
}), parent);
menu.addItem(mxResources.get('circle'), null, mxUtils.bind(this, function()
{
var layout = new mxCircleLayout(graph);
this.editorUi.executeLayout(function()
{
var tmp = graph.getSelectionCell();
if (tmp == null || graph.getModel().getChildCount(tmp) == 0)
{
tmp = graph.getDefaultParent();
}
layout.execute(tmp);
if (graph.getModel().isVertex(tmp))
{
graph.updateGroupBounds([tmp], graph.gridSize * 2, true);
}
}, true);
}), parent);
})));
this.put('navigation', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ['home', '-', 'exitGroup', 'enterGroup', '-', 'expand', 'collapse', '-', 'collapsible'], parent);
})));
this.put('arrange', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ['toFront', 'toBack', '-'], parent);
this.addSubmenu('direction', menu, parent);
this.addMenuItems(menu, ['turn', '-'], parent);
this.addSubmenu('align', menu, parent);
this.addSubmenu('distribute', menu, parent);
menu.addSeparator(parent);
this.addSubmenu('navigation', menu, parent);
this.addSubmenu('insert', menu, parent);
this.addSubmenu('layout', menu, parent);
this.addMenuItems(menu, ['-', 'group', 'ungroup', 'removeFromGroup', '-', 'clearWaypoints', 'autosize'], parent);
}))).isEnabled = isGraphEnabled;
this.put('insert', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ['insertLink', 'insertImage'], parent);
})));
this.put('view', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ((this.editorUi.format != null) ? ['formatPanel'] : []).
concat(['outline', 'layers', '-', 'pageView', 'pageScale', '-', 'scrollbars', 'tooltips', '-',
'grid', 'guides', '-', 'connectionArrows', 'connectionPoints', '-',
'resetView', 'zoomIn', 'zoomOut'], parent));
})));
// Two special dropdowns that are only used in the toolbar
this.put('viewPanels', new Menu(mxUtils.bind(this, function(menu, parent)
{
if (this.editorUi.format != null)
{
this.addMenuItems(menu, ['formatPanel'], parent);
}
this.addMenuItems(menu, ['outline', 'layers'], parent);
})));
this.put('viewZoom', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ['resetView', '-'], parent);
var scales = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
for (var i = 0; i < scales.length; i++)
{
(function(scale)
{
menu.addItem((scale * 100) + '%', null, function()
{
graph.zoomTo(scale);
}, parent);
})(scales[i]);
}
this.addMenuItems(menu, ['-', 'fitWindow', 'fitPageWidth', 'fitPage', 'fitTwoPages', '-', 'customZoom'], parent);
})));
this.put('file', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ['new', 'open', '-', 'save', 'saveAs', '-', 'import', 'export', '-', 'pageSetup', 'print'], parent);
})));
this.put('edit', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ['undo', 'redo', '-', 'cut', 'copy', 'paste', 'delete', '-', 'duplicate', '-',
'editData', 'editTooltip', 'editStyle', '-', 'edit', '-', 'editLink', 'openLink', '-',
'selectVertices', 'selectEdges', 'selectAll', 'selectNone', '-', 'lockUnlock']);
})));
this.put('extras', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ['copyConnect', 'collapseExpand', '-', 'editDiagram']);
})));
this.put('help', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ['help', '-', 'about']);
})));
};
/**
* Adds the label menu items to the given menu and parent.
*/
Menus.prototype.put = function(name, menu)
{
this.menus[name] = menu;
return menu;
};
/**
* Adds the label menu items to the given menu and parent.
*/
Menus.prototype.get = function(name)
{
return this.menus[name];
};
/**
* Adds the given submenu.
*/
Menus.prototype.addSubmenu = function(name, menu, parent)
{
var enabled = this.get(name).isEnabled();
if (menu.showDisabled || enabled)
{
var submenu = menu.addItem(mxResources.get(name), null, null, parent, null, enabled);
this.addMenu(name, menu, submenu);
}
};
/**
* Adds the label menu items to the given menu and parent.
*/
Menus.prototype.addMenu = function(name, popupMenu, parent)
{
var menu = this.get(name);
if (menu != null && (popupMenu.showDisabled || menu.isEnabled()))
{
this.get(name).execute(popupMenu, parent);
}
};
/**
* Adds a menu item to insert a table.
*/
Menus.prototype.addInsertTableItem = function(menu)
{
// KNOWN: Does not work in IE8 standards and quirks
var graph = this.editorUi.editor.graph;
function createTable(rows, cols)
{
var html = [''];
for (var i = 0; i < rows; i++)
{
html.push('');
for (var j = 0; j < cols; j++)
{
html.push('
| ');
}
html.push('
');
}
html.push('
');
return html.join('');
};
// Show table size dialog
var elt2 = menu.addItem('', null, mxUtils.bind(this, function(evt)
{
var td = graph.getParentByName(mxEvent.getSource(evt), 'TD');
if (td != null)
{
var row2 = graph.getParentByName(td, 'TR');
// To find the new link, we create a list of all existing links first
// LATER: Refactor for reuse with code for finding inserted image below
var tmp = graph.cellEditor.textarea.getElementsByTagName('table');
var oldTables = [];
for (var i = 0; i < tmp.length; i++)
{
oldTables.push(tmp[i]);
}
// Finding the new table will work with insertHTML, but IE does not support that
graph.container.focus();
graph.pasteHtmlAtCaret(createTable(row2.sectionRowIndex + 1, td.cellIndex + 1));
// Moves cursor to first table cell
var newTables = graph.cellEditor.textarea.getElementsByTagName('table');
if (newTables.length == oldTables.length + 1)
{
// Inverse order in favor of appended tables
for (var i = newTables.length - 1; i >= 0; i--)
{
if (i == 0 || newTables[i] != oldTables[i - 1])
{
graph.selectNode(newTables[i].rows[0].cells[0]);
break;
}
}
}
}
}));
// Quirks mode does not add cell padding if cell is empty, needs good old spacer solution
var quirksCellHtml = '';
function createPicker(rows, cols)
{
var table2 = document.createElement('table');
table2.setAttribute('border', '1');
table2.style.borderCollapse = 'collapse';
if (!mxClient.IS_QUIRKS)
{
table2.setAttribute('cellPadding', '8');
}
for (var i = 0; i < rows; i++)
{
var row = table2.insertRow(i);
for (var j = 0; j < cols; j++)
{
var cell = row.insertCell(-1);
if (mxClient.IS_QUIRKS)
{
cell.innerHTML = quirksCellHtml;
}
}
}
return table2;
};
function extendPicker(picker, rows, cols)
{
for (var i = picker.rows.length; i < rows; i++)
{
var row = picker.insertRow(i);
for (var j = 0; j < picker.rows[0].cells.length; j++)
{
var cell = row.insertCell(-1);
if (mxClient.IS_QUIRKS)
{
cell.innerHTML = quirksCellHtml;
}
}
}
for (var i = 0; i < picker.rows.length; i++)
{
var row = picker.rows[i];
for (var j = row.cells.length; j < cols; j++)
{
var cell = row.insertCell(-1);
if (mxClient.IS_QUIRKS)
{
cell.innerHTML = quirksCellHtml;
}
}
}
};
elt2.firstChild.innerHTML = '';
var picker = createPicker(5, 5);
elt2.firstChild.appendChild(picker);
var label = document.createElement('div');
label.style.padding = '4px';
label.style.fontSize = Menus.prototype.defaultFontSize + 'px';
label.innerHTML = '1x1';
elt2.firstChild.appendChild(label);
mxEvent.addListener(picker, 'mouseover', function(e)
{
var td = graph.getParentByName(mxEvent.getSource(e), 'TD');
if (td != null)
{
var row2 = graph.getParentByName(td, 'TR');
extendPicker(picker, Math.min(20, row2.sectionRowIndex + 2), Math.min(20, td.cellIndex + 2));
label.innerHTML = (td.cellIndex + 1) + 'x' + (row2.sectionRowIndex + 1);
for (var i = 0; i < picker.rows.length; i++)
{
var r = picker.rows[i];
for (var j = 0; j < r.cells.length; j++)
{
var cell = r.cells[j];
if (i <= row2.sectionRowIndex && j <= td.cellIndex)
{
cell.style.backgroundColor = 'blue';
}
else
{
cell.style.backgroundColor = 'white';
}
}
}
mxEvent.consume(e);
}
});
};
/**
* Adds a style change item to the given menu.
*/
Menus.prototype.edgeStyleChange = function(menu, label, keys, values, sprite, parent, reset)
{
return menu.addItem(label, null, mxUtils.bind(this, function()
{
var graph = this.editorUi.editor.graph;
graph.stopEditing(false);
graph.getModel().beginUpdate();
try
{
var cells = graph.getSelectionCells();
var edges = [];
for (var i = 0; i < cells.length; i++)
{
var cell = cells[i];
if (graph.getModel().isEdge(cell))
{
if (reset)
{
var geo = graph.getCellGeometry(cell);
// Resets all edge points
if (geo != null)
{
geo = geo.clone();
geo.points = null;
graph.getModel().setGeometry(cell, geo);
}
}
for (var j = 0; j < keys.length; j++)
{
graph.setCellStyles(keys[j], values[j], [cell]);
}
edges.push(cell);
}
}
this.editorUi.fireEvent(new mxEventObject('styleChanged', 'keys', keys,
'values', values, 'cells', edges));
}
finally
{
graph.getModel().endUpdate();
}
}), parent, sprite);
};
/**
* Adds a style change item to the given menu.
*/
Menus.prototype.styleChange = function(menu, label, keys, values, sprite, parent, fn)
{
var apply = this.createStyleChangeFunction(keys, values);
return menu.addItem(label, null, mxUtils.bind(this, function()
{
var graph = this.editorUi.editor.graph;
if (fn != null && graph.cellEditor.isContentEditing())
{
fn();
}
else
{
apply();
}
}), parent, sprite);
};
/**
*
*/
Menus.prototype.createStyleChangeFunction = function(keys, values)
{
return mxUtils.bind(this, function()
{
var graph = this.editorUi.editor.graph;
graph.stopEditing(false);
graph.getModel().beginUpdate();
try
{
for (var i = 0; i < keys.length; i++)
{
graph.setCellStyles(keys[i], values[i]);
}
this.editorUi.fireEvent(new mxEventObject('styleChanged', 'keys', keys, 'values', values,
'cells', graph.getSelectionCells()));
}
finally
{
graph.getModel().endUpdate();
}
});
};
/**
* Adds a style change item with a prompt to the given menu.
*/
Menus.prototype.promptChange = function(menu, label, hint, defaultValue, key, parent, enabled, fn, sprite)
{
return menu.addItem(label, null, mxUtils.bind(this, function()
{
var graph = this.editorUi.editor.graph;
var value = defaultValue;
var state = graph.getView().getState(graph.getSelectionCell());
if (state != null)
{
value = state.style[key] || value;
}
var dlg = new FilenameDialog(this.editorUi, value, mxResources.get('apply'), mxUtils.bind(this, function(newValue)
{
if (newValue != null && newValue.length > 0)
{
graph.getModel().beginUpdate();
try
{
graph.stopEditing(false);
graph.setCellStyles(key, newValue);
}
finally
{
graph.getModel().endUpdate();
}
if (fn != null)
{
fn(newValue);
}
}
}), mxResources.get('enterValue') + ((hint.length > 0) ? (' ' + hint) : ''));
this.editorUi.showDialog(dlg.container, 300, 80, true, true);
dlg.init();
}), parent, sprite, enabled);
};
/**
* Adds a handler for showing a menu in the given element.
*/
Menus.prototype.pickColor = function(key, cmd, defaultValue)
{
var graph = this.editorUi.editor.graph;
if (cmd != null && graph.cellEditor.isContentEditing())
{
// Saves and restores text selection for in-place editor
var selState = graph.cellEditor.saveSelection();
var dlg = new ColorDialog(this.editorUi, defaultValue || '000000', mxUtils.bind(this, function(color)
{
graph.cellEditor.restoreSelection(selState);
document.execCommand(cmd, false, (color != mxConstants.NONE) ? color : 'transparent');
}), function()
{
graph.cellEditor.restoreSelection(selState);
});
this.editorUi.showDialog(dlg.container, 220, 430, true, true);
dlg.init();
}
else
{
if (this.colorDialog == null)
{
this.colorDialog = new ColorDialog(this.editorUi);
}
this.colorDialog.currentColorKey = key;
var state = graph.getView().getState(graph.getSelectionCell());
var color = 'none';
if (state != null)
{
color = state.style[key] || color;
}
if (color == 'none')
{
color = 'ffffff';
this.colorDialog.picker.fromString('ffffff');
this.colorDialog.colorInput.value = 'none';
}
else
{
this.colorDialog.picker.fromString(color);
}
this.editorUi.showDialog(this.colorDialog.container, 220, 430, true, true);
this.colorDialog.init();
}
};
/**
* Adds a handler for showing a menu in the given element.
*/
Menus.prototype.toggleStyle = function(key, defaultValue)
{
var graph = this.editorUi.editor.graph;
var value = graph.toggleCellStyles(key, defaultValue);
this.editorUi.fireEvent(new mxEventObject('styleChanged', 'keys', [key], 'values', [value],
'cells', graph.getSelectionCells()));
};
/**
* Creates the keyboard event handler for the current graph and history.
*/
Menus.prototype.addMenuItem = function(menu, key, parent, trigger, sprite)
{
var action = this.editorUi.actions.get(key);
if (action != null && (menu.showDisabled || action.isEnabled()) && action.visible)
{
var item = menu.addItem(action.label, null, function()
{
action.funct(trigger);
}, parent, sprite, action.isEnabled());
// Adds checkmark image
if (action.toggleAction && action.isSelected())
{
menu.addCheckmark(item, Editor.checkmarkImage);
}
this.addShortcut(item, action);
return item;
}
return null;
};
/**
* Adds a checkmark to the given menuitem.
*/
Menus.prototype.addShortcut = function(item, action)
{
if (action.shortcut != null)
{
var td = item.firstChild.nextSibling.nextSibling;
var span = document.createElement('span');
span.style.color = 'gray';
mxUtils.write(span, action.shortcut);
td.appendChild(span);
}
};
/**
* Creates the keyboard event handler for the current graph and history.
*/
Menus.prototype.addMenuItems = function(menu, keys, parent, trigger, sprites)
{
for (var i = 0; i < keys.length; i++)
{
if (keys[i] == '-')
{
menu.addSeparator(parent);
}
else
{
this.addMenuItem(menu, keys[i], parent, trigger, (sprites != null) ? sprites[i] : null);
}
}
};
/**
* Creates the keyboard event handler for the current graph and history.
*/
Menus.prototype.createPopupMenu = function(menu, cell, evt)
{
var graph = this.editorUi.editor.graph;
menu.smartSeparators = true;
if (graph.isSelectionEmpty())
{
this.addMenuItems(menu, ['undo', 'redo', '-', 'pasteHere'], null, evt);
}
else
{
this.addMenuItems(menu, ['delete', '-', 'cut', 'copy', '-', 'duplicate'], null, evt);
}
if (graph.getSelectionCount() > 0)
{
if (graph.getSelectionCount() == 1)
{
this.addMenuItems(menu, ['setAsDefaultStyle'], null, evt);
}
menu.addSeparator();
cell = graph.getSelectionCell();
var state = graph.view.getState(cell);
if (state != null)
{
if (graph.getSelectionCount() == 1)
{
this.addMenuItems(menu, ['toFront', 'toBack', '-'], null, evt);
}
if (graph.getModel().isEdge(cell) && mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) != 'entityRelationEdgeStyle' &&
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) != 'arrow')
{
var handler = graph.selectionCellsHandler.getHandler(cell);
var isWaypoint = false;
if (handler instanceof mxEdgeHandler && handler.bends != null && handler.bends.length > 2)
{
var index = handler.getHandleForEvent(graph.updateMouseEvent(new mxMouseEvent(evt)));
// Configures removeWaypoint action before execution
// Using trigger parameter is cleaner but have to find waypoint here anyway.
var rmWaypointAction = this.editorUi.actions.get('removeWaypoint');
rmWaypointAction.handler = handler;
rmWaypointAction.index = index;
isWaypoint = index > 0 && index < handler.bends.length - 1;
}
this.addMenuItems(menu, ['-', (isWaypoint) ? 'removeWaypoint' : 'addWaypoint'], null, evt);
// Adds reset waypoints option if waypoints exist
var geo = graph.getModel().getGeometry(cell);
if (geo != null && geo.points != null && geo.points.length > 0)
{
this.addMenuItems(menu, ['clearWaypoints'], null, evt);
}
}
if (graph.getSelectionCount() > 1)
{
menu.addSeparator();
this.addMenuItems(menu, ['group'], null, evt);
}
else if (graph.getSelectionCount() == 1 && !graph.getModel().isEdge(cell) && !graph.isSwimlane(cell) &&
graph.getModel().getChildCount(cell) > 0)
{
menu.addSeparator();
this.addMenuItems(menu, ['ungroup'], null, evt);
}
if (graph.getSelectionCount() == 1)
{
menu.addSeparator();
this.addMenuItems(menu, ['edit', '-', 'editData', 'editLink'], null, evt);
// Shows edit image action if there is an image in the style
if (graph.getModel().isVertex(cell) && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null)
{
menu.addSeparator();
this.addMenuItem(menu, 'image', null, evt).firstChild.nextSibling.innerHTML = mxResources.get('editImage') + '...';
}
}
}
}
else
{
this.addMenuItems(menu, ['-', 'selectVertices', 'selectEdges', '-', 'selectAll'], null, evt);
}
};
/**
* Creates the keyboard event handler for the current graph and history.
*/
Menus.prototype.createMenubar = function(container)
{
var menubar = new Menubar(this.editorUi, container);
var menus = this.defaultMenuItems;
for (var i = 0; i < menus.length; i++)
{
(mxUtils.bind(this, function(menu)
{
var elt = menubar.addMenu(mxResources.get(menus[i]), mxUtils.bind(this, function()
{
// Allows extensions of menu.funct
menu.funct.apply(this, arguments);
}));
if (elt != null)
{
menu.addListener('stateChanged', function()
{
elt.enabled = menu.enabled;
if (!menu.enabled)
{
elt.className = 'geItem mxDisabled';
if (document.documentMode == 8)
{
elt.style.color = '#c3c3c3';
}
}
else
{
elt.className = 'geItem';
if (document.documentMode == 8)
{
elt.style.color = '';
}
}
});
}
}))(this.get(menus[i]));
}
return menubar;
};
/**
* Construcs a new menubar for the given editor.
*/
function Menubar(editorUi, container)
{
this.editorUi = editorUi;
this.container = container;
};
/**
* Adds the menubar elements.
*/
Menubar.prototype.hideMenu = function()
{
this.editorUi.hideCurrentMenu();
};
/**
* Adds a submenu to this menubar.
*/
Menubar.prototype.addMenu = function(label, funct)
{
var elt = document.createElement('a');
elt.setAttribute('href', 'javascript:void(0);');
elt.className = 'geItem';
mxUtils.write(elt, label);
this.addMenuHandler(elt, funct);
this.container.appendChild(elt);
return elt;
};
/**
* Adds a handler for showing a menu in the given element.
*/
Menubar.prototype.addMenuHandler = function(elt, funct)
{
if (funct != null)
{
var show = true;
var clickHandler = mxUtils.bind(this, function(evt)
{
if (show && elt.enabled == null || elt.enabled)
{
this.editorUi.editor.graph.popupMenuHandler.hideMenu();
var menu = new mxPopupMenu(funct);
menu.div.className += ' geMenubarMenu';
menu.smartSeparators = true;
menu.showDisabled = true;
menu.autoExpand = true;
// Disables autoexpand and destroys menu when hidden
menu.hideMenu = mxUtils.bind(this, function()
{
mxPopupMenu.prototype.hideMenu.apply(menu, arguments);
this.editorUi.resetCurrentMenu();
menu.destroy();
});
var offset = mxUtils.getOffset(elt);
menu.popup(offset.x, offset.y + elt.offsetHeight, null, evt);
this.editorUi.setCurrentMenu(menu, elt);
}
mxEvent.consume(evt);
});
// Shows menu automatically while in expanded state
mxEvent.addListener(elt, 'mousemove', mxUtils.bind(this, function(evt)
{
if (this.editorUi.currentMenu != null && this.editorUi.currentMenuElt != elt)
{
this.editorUi.hideCurrentMenu();
clickHandler(evt);
}
}));
// Hides menu if already showing
mxEvent.addListener(elt, 'mousedown', mxUtils.bind(this, function()
{
show = this.currentElt != elt;
}));
mxEvent.addListener(elt, 'click', mxUtils.bind(this, function(evt)
{
clickHandler(evt);
show = true;
}));
}
};
/**
* Creates the keyboard event handler for the current graph and history.
*/
Menubar.prototype.destroy = function()
{
// do nothing
};
/**
* Constructs a new action for the given parameters.
*/
function Menu(funct, enabled)
{
mxEventSource.call(this);
this.funct = funct;
this.enabled = (enabled != null) ? enabled : true;
};
// Menu inherits from mxEventSource
mxUtils.extend(Menu, mxEventSource);
/**
* Sets the enabled state of the action and fires a stateChanged event.
*/
Menu.prototype.isEnabled = function()
{
return this.enabled;
};
/**
* Sets the enabled state of the action and fires a stateChanged event.
*/
Menu.prototype.setEnabled = function(value)
{
if (this.enabled != value)
{
this.enabled = value;
this.fireEvent(new mxEventObject('stateChanged'));
}
};
/**
* Sets the enabled state of the action and fires a stateChanged event.
*/
Menu.prototype.execute = function(menu, parent)
{
this.funct(menu, parent);
};
/**
* "Installs" menus in EditorUi.
*/
EditorUi.prototype.createMenus = function()
{
return new Menus(this);
};