/** * $Id: Actions.js,v 1.13 2013/09/17 13:47:04 gaudenz Exp $ * Copyright (c) 2006-2012, JGraph Ltd */ /** * Constructs the actions object for the given UI. */ function Actions(editorUi) { this.editorUi = editorUi; this.actions = new Object(); this.init(); }; /** * Adds the default actions. */ Actions.prototype.init = function() { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; // File actions this.addAction('new', function() { window.open(ui.getUrl()); }); this.addAction('open', function() { window.openNew = true; window.openKey = 'open'; ui.openFile(); }); this.addAction('import', function() { window.openNew = false; window.openKey = 'import'; // Closes dialog after open window.openFile = new OpenFile(mxUtils.bind(this, function() { ui.hideDialog(); })); window.openFile.setConsumer(mxUtils.bind(this, function(xml, filename) { try { var doc = mxUtils.parseXml(xml); var model = new mxGraphModel(); var codec = new mxCodec(doc); codec.decode(doc.documentElement, model); var children = model.getChildren(model.getChildAt(model.getRoot(), 0)); editor.graph.setSelectionCells(editor.graph.importCells(children)); } catch (e) { mxUtils.alert(mxResources.get('invalidOrMissingFile') + ': ' + e.message); } })); // Removes openFile if dialog is closed ui.showDialog(new OpenDialog(this).container, 300, 180, true, true, function() { window.openFile = null; }); }); this.addAction('save', function() { ui.saveFile(false); }, null, null, 'Ctrl+S'); this.addAction('saveAs', function() { ui.saveFile(true); }, null, null, 'Ctrl+Shift-S'); this.addAction('export', function() { ui.showDialog(new ExportDialog(ui).container, 300, 200, true, true); }, null, null, 'Ctrl+E'); this.put('editFile', new Action(mxResources.get('edit'), mxUtils.bind(this, function() { this.editorUi.showDialog(new EditFileDialog(ui).container, 620, 420, true, true); }))); this.addAction('pageSetup', function() { ui.showDialog(new PageSetupDialog(ui).container, 300, 200, true, true); }); this.addAction('print', function() { ui.showDialog(new PrintDialog(ui).container, 300, 200, true, true); }, null, 'sprite-print', 'Ctrl+P'); this.addAction('preview', function() { mxUtils.show(graph, null, 10, 10); }); // Edit actions this.addAction('undo', function() { editor.undoManager.undo(); }, null, 'sprite-undo', 'Ctrl+Z'); this.addAction('redo', function() { editor.undoManager.redo(); }, null, 'sprite-redo', 'Ctrl+Y'); this.addAction('cut', function() { mxClipboard.cut(graph); }, null, 'sprite-cut', 'Ctrl+X'); this.addAction('copy', function() { mxClipboard.copy(graph); }, null, 'sprite-copy', 'Ctrl+C'); this.addAction('paste', function() { mxClipboard.paste(graph); }, false, 'sprite-paste', 'Ctrl+V'); this.addAction('delete', function() { // Handles special case where delete is pressed while connecting if (graph.connectionHandler.isConnecting()) { graph.connectionHandler.reset(); } else { graph.removeCells(); } }, null, null, 'Delete'); this.addAction('duplicate', function() { var s = graph.gridSize; graph.setSelectionCells(graph.moveCells(graph.getSelectionCells(), s, s, true)); }, null, null, 'Ctrl+D'); this.addAction('selectVertices', function() { graph.selectVertices(); }, null, null, 'Ctrl+Shift+V'); this.addAction('selectEdges', function() { graph.selectEdges(); }, null, null, 'Ctrl+Shift+E'); this.addAction('selectAll', function() { graph.selectAll(); }, null, null, 'Ctrl+A'); this.addAction('lockUnlock', function() { graph.getModel().beginUpdate(); try { graph.toggleCellStyles(mxConstants.STYLE_RESIZABLE, 1); graph.toggleCellStyles(mxConstants.STYLE_MOVABLE, 1); graph.toggleCellStyles(mxConstants.STYLE_ROTATABLE, 1); } finally { graph.getModel().endUpdate(); } }, null, null, 'Ctrl+L'); // Navigation actions this.addAction('home', function() { graph.home(); }, null, null, 'Home'); this.addAction('exitGroup', function() { graph.exitGroup(); }, null, null, 'Page Up'); this.addAction('enterGroup', function() { graph.enterGroup(); }, null, null, 'Page Down'); this.addAction('expand', function() { graph.foldCells(false); }, null, null, 'Enter'); this.addAction('collapse', function() { graph.foldCells(true); }, null, null, 'Backspace'); // Arrange actions this.addAction('toFront', function() { graph.orderCells(false); }, null, null, 'Ctrl+F'); this.addAction('toBack', function() { graph.orderCells(true); }, null, null, 'Ctrl+B'); this.addAction('group', function() { graph.setSelectionCell(graph.groupCells(null, 0)); }, null, null, 'Ctrl+G'); this.addAction('ungroup', function() { graph.setSelectionCells(graph.ungroupCells()); }, null, null, 'Ctrl+U'); this.addAction('removeFromGroup', function() { graph.removeCellsFromParent(); }); // Adds action this.addAction('editData', function() { var cell = graph.getSelectionCell() || graph.getModel().getRoot(); if (cell != null) { ui.showDialog(new MetadataDialog(ui, cell).container, 240, 320, true, true); } }, null, null, 'Ctrl+M'); this.addAction('editLink', function() { var cell = graph.getSelectionCell(); var link = graph.getLinkForCell(cell); if (link == null) { link = ''; } link = mxUtils.prompt(mxResources.get('enterValue'), link); if (link != null) { graph.setLinkForCell(cell, link); } }); this.addAction('openLink', function() { var link = graph.getLinkForCell(graph.getSelectionCell()); if (link != null) { window.open(link); } }); this.addAction('autosize', function() { var cells = graph.getSelectionCells(); if (cells != null) { graph.getModel().beginUpdate(); try { for (var i = 0; i < cells.length; i++) { var cell = cells[i]; if (graph.getModel().getChildCount(cell)) { graph.updateGroupBounds([cell], 20); } else { graph.updateCellSize(cell); } } } finally { graph.getModel().endUpdate(); } } }); this.addAction('wordWrap', function() { var state = graph.getView().getState(graph.getSelectionCell()); var value = 'wrap'; if (state != null && state.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap') { value = null; } graph.setCellStyles(mxConstants.STYLE_WHITE_SPACE, value); }); this.addAction('rotation', function() { var value = '0'; var state = graph.getView().getState(graph.getSelectionCell()); if (state != null) { value = state.style[mxConstants.STYLE_ROTATION] || value; } value = mxUtils.prompt(mxResources.get('enterValue') + ' (' + mxResources.get('rotation') + ' 0-360)', value); if (value != null) { graph.setCellStyles(mxConstants.STYLE_ROTATION, value); } }); this.addAction('tilt', function() { var cells = graph.getSelectionCells(); if (cells != null) { graph.getModel().beginUpdate(); try { for (var i = 0; i < cells.length; i++) { var cell = cells[i]; if (graph.getModel().isVertex(cell) && graph.getModel().getChildCount(cell) == 0) { var geo = graph.getCellGeometry(cell); if (geo != null) { // Rotates the size and position in the geometry geo = geo.clone(); geo.x += geo.width / 2 - geo.height / 2; geo.y += geo.height / 2 - geo.width / 2; var tmp = geo.width; geo.width = geo.height; geo.height = tmp; graph.getModel().setGeometry(cell, geo); // Reads the current direction and advances by 90 degrees var state = graph.view.getState(cell); if (state != null) { var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east'/*default*/; if (dir == 'east') { dir = 'south'; } else if (dir == 'south') { dir = 'west'; } else if (dir == 'west') { dir = 'north'; } else if (dir == 'north') { dir = 'east'; } graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]); } } } } } finally { graph.getModel().endUpdate(); } } }, null, null, 'Ctrl+R'); // View actions this.addAction('actualSize', function() { graph.zoomTo(1); }); this.addAction('zoomIn', function() { graph.zoomIn(); }, null, null, 'Add'); this.addAction('zoomOut', function() { graph.zoomOut(); }, null, null, 'Subtract'); this.addAction('fitWindow', function() { graph.fit(); }); this.addAction('fitPage', mxUtils.bind(this, function() { if (!graph.pageVisible) { this.get('pageView').funct(); } var fmt = graph.pageFormat; var ps = graph.pageScale; var cw = graph.container.clientWidth - 20; var ch = graph.container.clientHeight - 20; var scale = Math.floor(100 * Math.min(cw / fmt.width / ps, ch / fmt.height / ps)) / 100; graph.zoomTo(scale); graph.container.scrollLeft = Math.round(graph.view.translate.x * scale - Math.max(10, (graph.container.clientWidth - fmt.width * ps * scale) / 2)); graph.container.scrollTop = Math.round(graph.view.translate.y * scale - Math.max(10, (graph.container.clientHeight - fmt.height * ps * scale) / 2)); })); this.addAction('fitPageWidth', mxUtils.bind(this, function() { if (!graph.pageVisible) { this.get('pageView').funct(); } var fmt = graph.pageFormat; var ps = graph.pageScale; var cw = graph.container.clientWidth - 20; var scale = Math.floor(100 * cw / fmt.width / ps) / 100; graph.zoomTo(scale); graph.container.scrollLeft = Math.round(graph.view.translate.x * scale - Math.max(10, (graph.container.clientWidth - fmt.width * ps * scale) / 2)); graph.container.scrollTop = Math.round(graph.view.translate.y * scale - Math.max(10, (graph.container.clientHeight - fmt.height * ps * scale) / 2)); })); this.put('customZoom', new Action(mxResources.get('custom'), function() { var value = mxUtils.prompt(mxResources.get('enterValue') + ' (%)', parseInt(graph.getView().getScale() * 100)); if (value != null && value.length > 0 && !isNaN(parseInt(value))) { graph.zoomTo(parseInt(value) / 100); } })); // Option actions var action = null; action = this.addAction('grid', function() { graph.setGridEnabled(!graph.isGridEnabled()); editor.updateGraphComponents(); }, null, null, 'Ctrl+Shift+G'); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.isGridEnabled(); }); action = this.addAction('guides', function() { graph.graphHandler.guidesEnabled = !graph.graphHandler.guidesEnabled; }); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.graphHandler.guidesEnabled; }); action = this.addAction('tooltips', function() { graph.tooltipHandler.setEnabled(!graph.tooltipHandler.isEnabled()); }); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.tooltipHandler.isEnabled(); }); action = this.addAction('navigation', function() { graph.foldingEnabled = !graph.foldingEnabled; graph.view.revalidate(); }); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.foldingEnabled; }); action = this.addAction('scrollbars', function() { graph.scrollbars = !graph.scrollbars; editor.updateGraphComponents(); if (!graph.scrollbars) { var t = graph.view.translate; graph.view.setTranslate(t.x - graph.container.scrollLeft / graph.view.scale, t.y - graph.container.scrollTop / graph.view.scale); graph.container.scrollLeft = 0; graph.container.scrollTop = 0; graph.sizeDidChange(); } else { var dx = graph.view.translate.x; var dy = graph.view.translate.y; graph.view.translate.x = 0; graph.view.translate.y = 0; graph.sizeDidChange(); graph.container.scrollLeft -= Math.round(dx * graph.view.scale); graph.container.scrollTop -= Math.round(dy * graph.view.scale); } }, !mxClient.IS_TOUCH); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.container.style.overflow == 'auto'; }); action = this.addAction('pageView', mxUtils.bind(this, function() { graph.pageVisible = !graph.pageVisible; graph.pageBreaksVisible = graph.pageVisible; graph.preferPageSize = graph.pageBreaksVisible; graph.view.validate(); graph.sizeDidChange(); editor.updateGraphComponents(); editor.outline.update(); if (mxUtils.hasScrollbars(graph.container)) { if (graph.pageVisible) { graph.container.scrollLeft -= 20; graph.container.scrollTop -= 20; } else { graph.container.scrollLeft += 20; graph.container.scrollTop += 20; } } })); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.pageVisible; }); this.put('pageBackgroundColor', new Action(mxResources.get('backgroundColor'), function() { var apply = function(color) { graph.background = color; editor.updateGraphComponents(); }; var cd = new ColorDialog(ui, graph.background || 'none', apply); ui.showDialog(cd.container, 220, 400, true, false); if (!mxClient.IS_TOUCH) { cd.colorInput.focus(); } })); action = this.addAction('connect', function() { graph.setConnectable(!graph.connectionHandler.isEnabled()); }, null, null, 'Ctrl+Q'); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.connectionHandler.isEnabled(); }); action = this.addAction('copyConnect', function() { graph.connectionHandler.setCreateTarget(!graph.connectionHandler.isCreateTarget()); }); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.connectionHandler.isCreateTarget(); }); action = this.addAction('autosave', function() { ui.editor.autosave = !ui.editor.autosave; ui.editor.setStatus(''); }); action.setToggleAction(true); action.setSelectedCallback(function() { return ui.editor.autosave; }); action.visible = false; // Help actions this.addAction('help', function() { var ext = ''; if (mxResources.isLanguageSupported(mxClient.language)) { ext = '_' + mxClient.language; } window.open(RESOURCES_PATH + '/help' + ext + '.html'); }); this.put('about', new Action(mxResources.get('about') + ' Graph Editor', function() { ui.showDialog(new AboutDialog(ui).container, 320, 280, true, true); }, null, null, 'F1')); // Font style actions var toggleFontStyle = mxUtils.bind(this, function(key, style) { this.addAction(key, function() { graph.toggleCellStyleFlags(mxConstants.STYLE_FONTSTYLE, style); }); }); toggleFontStyle('bold', mxConstants.FONT_BOLD); toggleFontStyle('italic', mxConstants.FONT_ITALIC); toggleFontStyle('underline', mxConstants.FONT_UNDERLINE); // Color actions this.addAction('fontColor', function() { ui.menus.pickColor(mxConstants.STYLE_FONTCOLOR); }); this.addAction('strokeColor', function() { ui.menus.pickColor(mxConstants.STYLE_STROKECOLOR); }); this.addAction('fillColor', function() { ui.menus.pickColor(mxConstants.STYLE_FILLCOLOR); }); this.addAction('gradientColor', function() { ui.menus.pickColor(mxConstants.STYLE_GRADIENTCOLOR); }); this.addAction('backgroundColor', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BACKGROUNDCOLOR); }); this.addAction('borderColor', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BORDERCOLOR); }); // Format actions this.addAction('shadow', function() { graph.toggleCellStyles(mxConstants.STYLE_SHADOW); }); this.addAction('dashed', function() { graph.toggleCellStyles(mxConstants.STYLE_DASHED); }); this.addAction('rounded', function() { graph.toggleCellStyles(mxConstants.STYLE_ROUNDED); }); this.addAction('curved', function() { graph.toggleCellStyles(mxConstants.STYLE_CURVED); }); this.addAction('style', function() { var cells = graph.getSelectionCells(); if (cells != null && cells.length > 0) { var model = graph.getModel(); var style = mxUtils.prompt(mxResources.get('enterValue')+ ' (' + mxResources.get('style') + ')', model.getStyle(cells[0]) || ''); if (style != null) { graph.setCellStyle(style, cells); } } }); this.addAction('setAsDefaultEdge', function() { graph.setDefaultEdge(graph.getSelectionCell()); }); this.addAction('addWaypoint', function() { var cell = graph.getSelectionCell(); if (cell != null && graph.getModel().isEdge(cell)) { var handler = editor.graph.selectionCellsHandler.getHandler(cell); if (handler instanceof mxEdgeHandler) { var t = graph.view.translate; var s = graph.view.scale; var dx = t.x; var dy = t.y; var parent = graph.getModel().getParent(cell); var pgeo = graph.getCellGeometry(parent); while (graph.getModel().isVertex(parent) && pgeo != null) { dx += pgeo.x; dy += pgeo.y; parent = graph.getModel().getParent(parent); pgeo = graph.getCellGeometry(parent); } handler.addPointAt(handler.state, graph.popupMenuHandler.triggerX / s - dx, graph.popupMenuHandler.triggerY / s - dy); } } }); this.addAction('removeWaypoint', function() { // TODO: Action should run with "this" set to action var rmWaypointAction = ui.actions.get('removeWaypoint'); if (rmWaypointAction.handler != null) { // NOTE: Popupevent handled and action updated in Menus.createPopupMenu rmWaypointAction.handler.removePoint(rmWaypointAction.handler.state, rmWaypointAction.index); } }); this.addAction('image', function() { function updateImage(value, w, h) { var select = null; var cells = graph.getSelectionCells(); graph.getModel().beginUpdate(); try { // Inserts new cell if no cell is selected if (cells.length == 0) { var gs = graph.getGridSize(); cells = [graph.insertVertex(graph.getDefaultParent(), null, '', gs, gs, w, h)]; select = cells; } graph.setCellStyles(mxConstants.STYLE_IMAGE, value, cells); graph.setCellStyles(mxConstants.STYLE_SHAPE, 'image', cells); if (graph.getSelectionCount() == 1) { if (w != null && h != null) { var cell = cells[0]; var geo = graph.getModel().getGeometry(cell); if (geo != null) { geo = geo.clone(); geo.width = w; geo.height = h; graph.getModel().setGeometry(cell, geo); } } } } finally { graph.getModel().endUpdate(); } if (select != null) { graph.setSelectionCells(select); graph.scrollCellToVisible(select[0]); } }; var value = ''; var state = graph.getView().getState(graph.getSelectionCell()); if (state != null) { value = state.style[mxConstants.STYLE_IMAGE] || value; } value = mxUtils.prompt(mxResources.get('enterValue') + ' (' + mxResources.get('url') + ')', value); if (value != null) { if (value.length > 0) { var img = new Image(); img.onload = function() { updateImage(value, img.width, img.height); }; img.onerror = function() { mxUtils.alert(mxResources.get('fileNotFound')); }; img.src = value; } } }); }; /** * Registers the given action under the given name. */ Actions.prototype.addAction = function(key, funct, enabled, iconCls, shortcut) { return this.put(key, new Action(mxResources.get(key), funct, enabled, iconCls, shortcut)); }; /** * Registers the given action under the given name. */ Actions.prototype.put = function(name, action) { this.actions[name] = action; return action; }; /** * Returns the action for the given name or null if no such action exists. */ Actions.prototype.get = function(name) { return this.actions[name]; }; /** * Constructs a new action for the given parameters. */ function Action(label, funct, enabled, iconCls, shortcut) { mxEventSource.call(this); this.label = label; this.funct = funct; this.enabled = (enabled != null) ? enabled : true; this.iconCls = iconCls; this.shortcut = shortcut; this.visible = true; }; // Action inherits from mxEventSource mxUtils.extend(Action, mxEventSource); /** * Sets the enabled state of the action and fires a stateChanged event. */ Action.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. */ Action.prototype.setToggleAction = function(value) { this.toggleAction = value; }; /** * Sets the enabled state of the action and fires a stateChanged event. */ Action.prototype.setSelectedCallback = function(funct) { this.selectedCallback = funct; }; /** * Sets the enabled state of the action and fires a stateChanged event. */ Action.prototype.isSelected = function() { return this.selectedCallback(); };