123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920 |
- /**
- *$id:Action 。JS,V 2017-12-19
- *$author shen.zhi
- */
- /**
- * 构建了一种新的图形编辑器
- * 编辑管理 实现方法管理
- */
- EditorUi = function(editor, container)
- {
- this.editor = editor || new Editor();
- this.container = container || document.body;
- var graph = editor.graph;
- //禁用滚动条
- this.container.style.overflow = 'hidden';
- var textEditing = mxUtils.bind(this, function(evt)
- {
- if (evt == null)
- {
- evt = window.event;
- }
-
- if (this.isSelectionAllowed(evt))
- {
- return true;
- }
-
- return graph.isEditing() || this.dialog != null;
- });
- //禁用文本选择而不是编辑没有对话框可见
- if (this.container == document.body)
- {
- document.onselectstart = textEditing;
- document.onmousedown = textEditing;
- }
-
- //使用内置的上下文菜单编辑时
- if (mxClient.IS_IE && document.documentMode != 9)
- {
- mxEvent.addListener(this.container, 'contextmenu', textEditing);
- }
- else
- {
- this.container.oncontextmenu = textEditing;
- }
- //图像预fetches子菜单
- new Image().src = mxPopupMenu.prototype.submenuImage;
- //预取连接图像
- if (mxConnectionHandler.prototype.connectImage != null)
- {
- new Image().src = mxConnectionHandler.prototype.connectImage.src;
- }
-
- //创建用户界面
- this.actions = new Actions(this);
- this.menus = new Menus(this);
- this.createDivs();
- this.refresh();
- this.createUi();
- //contains the given the inside main图审小组
- graph.init(this.diagramContainer);
- graph.refresh();
-
- //使容器的滚动条和设置光标样式
- graph.container.setAttribute('tabindex', '0');
- graph.container.style.overflow = (touchStyle) ? 'hidden' : 'auto';
- graph.container.style.cursor = 'default';
- graph.container.style.backgroundImage = 'url(' + IMAGE_PATH + '/grid.gif)';
- graph.container.focus();
-
- //保持图形容器集中在鼠标按下
- /*var graphFireMouseEvent = graph.fireMouseEvent;
- graph.fireMouseEvent = function(evtName, me, sender)
- {
- if (evtName == mxEvent.MOUSE_DOWN)
- {
- var da=$(this).html();
- this.container.focus();
- }
-
- graphFireMouseEvent.apply(this, arguments);
- };*/
- //在鼠标经过时自动扩展配置
- graph.panningHandler.autoExpand = true;
- //对上下文菜单
- graph.panningHandler.factoryMethod = mxUtils.bind(this, function(menu, cell, evt)
- {
- this.menus.createPopupMenu(menu, cell, evt);
- });
-
- //初始化轮廓
- editor.outline.init(this.outlineContainer);
-
- //隐藏菜单
- var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown';
- mxEvent.addListener(document, md, mxUtils.bind(this, function(evt)
- {
- graph.panningHandler.hideMenu();
- }));
- //增加了手势操作(缩放)
- if (mxClient.IS_TOUCH)
- {
- mxEvent.addListener(graph.container, 'gesturechange',
- mxUtils.bind(this, function(evt)
- {
- graph.view.getDrawPane().setAttribute('transform', 'scale(' + evt.scale + ')');
- graph.view.getOverlayPane().style.visibility = 'hidden';
- })
- );
-
- mxEvent.addListener(graph.container, 'gestureend',
- mxUtils.bind(this, function(evt)
- {
- graph.view.getDrawPane().removeAttribute('transform');
- graph.zoomToCenter = true;
- graph.zoom(evt.scale);
- graph.view.getOverlayPane().style.visibility = 'visible';
- })
- );
- }
-
- // Create handler for key events
- var keyHandler = this.createKeyHandler(editor);
-
- // Getter for key handler
- this.getKeyHandler = function()
- {
- return keyHandler;
- };
- // Shows dialog if changes are lost
- window.onbeforeunload = function()
- {
- if (editor.modified)
- {
- //return mxResources.get('allChangesLost');
- }
- };
- // Updates the editor UI after the window has been resized
- mxEvent.addListener(window, 'resize', mxUtils.bind(this, function()
- {
- this.refresh();
- graph.sizeDidChange();
- this.editor.outline.update(false);
- this.editor.outline.outline.sizeDidChange();
- }));
- // Updates action and menu states
- this.init();
- this.open();
- };
- /**
- * Specifies the size of the split bar.
- */
- EditorUi.prototype.splitSize = (mxClient.IS_TOUCH) ? 16 : 8;
- /**
- * Specifies the height of the menubar. Default is 34.
- */
- EditorUi.prototype.menubarHeight = 34;
- /**
- * Specifies the height of the toolbar. Default is 46.
- */
- EditorUi.prototype.toolbarHeight = 46;
- /**
- * Specifies the height of the footer. Default is 28.
- */
- EditorUi.prototype.footerHeight = 5;
- /**
- * Specifies the position of the horizontal split bar. Default is 190.
- */
- EditorUi.prototype.hsplitPosition = 190;
- /**
- * Specifies the position of the vertical split bar. Default is 190.
- */
- EditorUi.prototype.vsplitPosition = 190;
- /**
- * Installs the listeners to update the action states.
- */
- EditorUi.prototype.init = function()
- {
- // Updates action states
- this.addUndoListener();
- this.addSelectionListener();
- // Overrides clipboard to update paste action state
- var paste = this.actions.get('paste');
-
- var updatePaste = function()
- {
- paste.setEnabled(!mxClipboard.isEmpty());
- };
-
- var mxClipboardCut = mxClipboard.cut;
- mxClipboard.cut = function()
- {
- mxClipboardCut.apply(this, arguments);
- updatePaste();
- };
-
- var mxClipboardCopy = mxClipboard.copy;
- mxClipboard.copy = function()
- {
- mxClipboardCopy.apply(this, arguments);
- updatePaste();
- };
- };
- /**
- * Hook for allowing selection and context menu for certain events.
- */
- EditorUi.prototype.isSelectionAllowed = function(evt)
- {
- if(evt&&(
- (evt.toElement&&evt.toElement.nodeName&&"SPAN"==evt.toElement.nodeName)
- ||(evt.type&&evt.type=="selectstart"&&evt.target&&evt.target.nodeName=="#text")
- )){
- return true;
- }
- return false;
- };
- /**
- * Opens the current diagram via the window.opener if one exists.
- */
- EditorUi.prototype.open = function()
- {
- // Cross-domain window access is not allowed in FF, so if we
- // were opened from another domain then this will fail.
- try
- {
- if (window.opener != null && window.opener.openFile != null)
- {
- window.opener.openFile.setConsumer(mxUtils.bind(this, function(xml, filename)
- {
- try
- {
- var doc = mxUtils.parseXml(xml);
- this.editor.setGraphXml(doc.documentElement);
- this.editor.modified = false;
- this.editor.undoManager.clear();
-
- if (filename != null)
- {
- this.editor.filename = filename;
- }
- }
- catch (e)
- {
- mxUtils.alert(mxResources.get('invalidOrMissingFile') + ': ' + e.message);
- }
- }));
- }
- }
- catch(e)
- {
- // ignore
- }
- };
- /**
- * 在给定的文件名保存当前图。
- */
- EditorUi.prototype.save = function()
- {
- var xml = mxUtils.getXml(this.editor.getGraphXml());
- //火狐浏览器
- //if (navigator.userAgent.indexOf('Firefox') >= 0){
- //}
- //xml="<mxGraphModel grid=\"0\" guides=\"1\" tooltips=\"1\" connect=\"1\" fold=\"1\" page=\"0\" pageScale=\"1\" pageWidth=\"826\" pageHeight=\"1169\">"+xml+"</mxGraphModel>"
-
- //将xml代码保存至服务器文件
- $.post($("#path").val()+"/SaveToXmlServlet",{"tp":$("#mapTp").val(),"xml":xml,"type":"set"},function(text){
- if(text=="0"){
- alert("保存失败!");
- }
- });
- };
- /**
- * 返回一个拷贝没有状态这个编辑器的URL。
- */
- EditorUi.prototype.getUrl = function(pathname)
- {
- var href = (pathname != null) ? pathname : window.location.pathname;
- var parms = (pathname.indexOf('?') > 0) ? 1 : 0;
-
- // Removes template URL parameter for new blank diagram
- for (var key in urlParams)
- {
- if (parms == 0)
- {
- href += '?';
- }
- else
- {
- href += '&';
- }
-
- href += key + '=' + urlParams[key];
- parms++;
- }
-
- return href;
- };
- /**
- * 更新的撤销/重做项的状态。
- */
- EditorUi.prototype.addUndoListener = function()
- {
- var undo = this.actions.get('undo');
- var redo = this.actions.get('redo');
-
- var undoMgr = this.editor.undoManager;
-
- var undoListener = function()
- {
- undo.setEnabled(undoMgr.canUndo());
- redo.setEnabled(undoMgr.canRedo());
- };
- undoMgr.addListener(mxEvent.ADD, undoListener);
- undoMgr.addListener(mxEvent.UNDO, undoListener);
- undoMgr.addListener(mxEvent.REDO, undoListener);
- undoMgr.addListener(mxEvent.CLEAR, undoListener);
-
- // Updates the button states once
- undoListener();
- };
- /**
- * Updates the states of the given toolbar items based on the selection.
- */
- EditorUi.prototype.addSelectionListener = function()
- {
- var selectionListener = mxUtils.bind(this, function()
- {
- var graph = this.editor.graph;
- var selected = !graph.isSelectionEmpty();
- var vertexSelected = false;
- var edgeSelected = false;
- var cells = graph.getSelectionCells();
-
- if (cells != null)
- {
- for (var i = 0; i < cells.length; i++)
- {
- var cell = cells[i];
-
- if (graph.getModel().isEdge(cell))
- {
- edgeSelected = true;
- }
-
- if (graph.getModel().isVertex(cell))
- {
- vertexSelected = true;
- }
-
- if (edgeSelected && vertexSelected)
- {
- break;
- }
- }
- }
-
- // 更新动作状态
- var actions = ['cut', 'copy', 'delete', 'duplicate', 'bold', 'italic', 'style', 'fillColor',
- 'gradientColor', 'underline', 'fontColor', 'strokeColor', 'backgroundColor',
- 'borderColor', 'toFront', 'toBack', 'dashed', 'rounded', 'shadow', 'rotate',
- 'autosize'];
-
- for (var i = 0; i < actions.length; i++)
- {
- this.actions.get(actions[i]).setEnabled(selected);
- }
-
- this.actions.get('rotation').setEnabled(vertexSelected);
- this.actions.get('group').setEnabled(graph.getSelectionCount() > 1);
- this.actions.get('ungroup').setEnabled(graph.getSelectionCount() == 1 &&
- graph.getModel().getChildCount(graph.getSelectionCell()) > 0);
- var oneVertexSelected = vertexSelected && graph.getSelectionCount() == 1;
- this.actions.get('removeFromGroup').setEnabled(oneVertexSelected &&
- graph.getModel().isVertex(graph.getModel().getParent(graph.getSelectionCell())));
- //更新菜单状态
- var menus = ['fontFamily', 'fontSize', 'alignment', 'position', 'text', 'format',
- 'arrange', 'linewidth', 'spacing', 'gradient'];
- for (var i = 0; i < menus.length; i++)
- {
- this.menus.get(menus[i]).setEnabled(selected);
- }
-
- menus = ['line', 'lineend', 'linestart'];
- for (var i = 0; i < menus.length; i++)
- {
- this.menus.get(menus[i]).setEnabled(edgeSelected);
- }
-
- this.actions.get('setAsDefaultEdge').setEnabled(edgeSelected);
-
- this.menus.get('align').setEnabled(graph.getSelectionCount() > 1);
- this.menus.get('direction').setEnabled(vertexSelected || (edgeSelected &&
- graph.isLoop(graph.view.getState(graph.getSelectionCell()))));
- this.menus.get('navigation').setEnabled(graph.foldingEnabled && ((graph.view.currentRoot != null) ||
- (graph.getSelectionCount() == 1 && graph.isValidRoot(graph.getSelectionCell()))));
- this.actions.get('home').setEnabled(graph.view.currentRoot != null);
- this.actions.get('exitGroup').setEnabled(graph.view.currentRoot != null);
- var groupEnabled = graph.getSelectionCount() == 1 && graph.isValidRoot(graph.getSelectionCell());
- this.actions.get('enterGroup').setEnabled(groupEnabled);
- this.actions.get('expand').setEnabled(groupEnabled);
- this.actions.get('collapse').setEnabled(groupEnabled);
- this.actions.get('editLink').setEnabled(graph.getSelectionCount() == 1);
- this.actions.get('openLink').setEnabled(graph.getSelectionCount() == 1 &&
- graph.getLinkForCell(graph.getSelectionCell()) != null);
- });
-
- this.editor.graph.getSelectionModel().addListener(mxEvent.CHANGE, selectionListener);
- selectionListener();
- };
- /**
- * Refreshes the viewport.
- */
- EditorUi.prototype.refresh = function()
- {
- var quirks = mxClient.IS_IE && (document.documentMode == null || document.documentMode == 5);
- var w = this.container.clientWidth;
- var h = this.container.clientHeight;
- if (this.container == document.body)
- {
- w = document.body.clientWidth || document.documentElement.clientWidth;
- h = (quirks) ? document.body.clientHeight || document.documentElement.clientHeight : document.documentElement.clientHeight;
- }
-
- var effHsplitPosition = Math.max(0, Math.min(this.hsplitPosition, w - this.splitSize - 20));
- var effVsplitPosition = Math.max(0, Math.min(this.vsplitPosition, h - this.menubarHeight - this.toolbarHeight - this.footerHeight - this.splitSize - 1));
-
- this.menubarContainer.style.height = this.menubarHeight + 'px';
- this.toolbarContainer.style.top = this.menubarHeight + 'px';
- this.toolbarContainer.style.height = this.toolbarHeight + 'px';
- this.sidebarContainer.style.top = (this.menubarHeight + this.toolbarHeight) + 'px';
- this.sidebarContainer.style.width = effHsplitPosition + 'px';
- this.sidebarContainer.style.display = "none";
- this.outlineContainer.style.width = effHsplitPosition + 'px';
- this.outlineContainer.style.height = '80px';
- this.outlineContainer.style.right = '15px';
- this.outlineContainer.style.bottom = this.footerHeight + 'px';
- //this.diagramContainer.style.left = (effHsplitPosition + this.splitSize) + 'px';
- this.diagramContainer.style.top = this.sidebarContainer.style.top;
- this.footerContainer.style.height = this.footerHeight + 'px';
- this.hsplit.style.top = this.sidebarContainer.style.top;
- this.hsplit.style.bottom = this.outlineContainer.style.bottom;
- this.hsplit.style.right = effHsplitPosition + 'px';
-
- this.vsplit.style.width = this.sidebarContainer.style.width;
- this.vsplit.style.bottom = (effVsplitPosition + this.footerHeight) + 'px';
-
- if (quirks)
- {
- this.menubarContainer.style.width = w + 'px';
- this.toolbarContainer.style.width = this.menubarContainer.style.width;
- var sidebarHeight = (h - effVsplitPosition - this.splitSize - this.footerHeight - this.menubarHeight - this.toolbarHeight);
- this.sidebarContainer.style.height = sidebarHeight + 'px';
- this.diagramContainer.style.width = (w - effHsplitPosition - this.splitSize) + 'px';
- var diagramHeight = (h - this.footerHeight - this.menubarHeight - this.toolbarHeight);
- this.diagramContainer.style.height = diagramHeight + 'px';
- this.footerContainer.style.width = this.menubarContainer.style.width;
- this.hsplit.style.height = diagramHeight + 'px';
- }
- else
- {
- this.sidebarContainer.style.bottom = (effVsplitPosition + this.splitSize + this.footerHeight) + 'px';
- this.diagramContainer.style.bottom = this.outlineContainer.style.bottom;
- }
- this.hsplit.style.display = "none";
- this.vsplit.style.display = "none";
- //this.menubarContainer.style.display = "none";
- };
- /**
- * Creates the required containers.
- */
- EditorUi.prototype.createDivs = function()
- {
- this.menubarContainer = this.createDiv('geMenubarContainer');
- this.toolbarContainer = this.createDiv('geToolbarContainer');
- this.sidebarContainer = this.createDiv('geSidebarContainer');
- this.outlineContainer = this.createDiv('geOutlineContainer');
- this.diagramContainer = this.createDiv('geDiagramContainer');
- this.footerContainer = this.createDiv('geFooterContainer');
- this.hsplit = this.createDiv('geHsplit');
- this.vsplit = this.createDiv('geVsplit');
- // Sets static style for containers
- this.menubarContainer.style.top = '0px';
- this.menubarContainer.style.left = '0px';
- this.menubarContainer.style.right = '0px';
- this.toolbarContainer.style.left = '0px';
- this.toolbarContainer.style.right = '0px';
- this.sidebarContainer.style.right = '0px';
- this.outlineContainer.style.right = '0px';
- this.diagramContainer.style.left = '0px';
- this.footerContainer.style.left = '0px';
- this.footerContainer.style.right = '0px';
- this.footerContainer.style.bottom = '0px';
- this.vsplit.style.right = '0px';
- this.diagramContainer.style.right = '198px';
- this.vsplit.style.height = this.splitSize + 'px';
- //this.hsplit.style.right = '190px';
- this.hsplit.style.width = this.splitSize + 'px';
- };
- /**
- * Creates the required containers.
- */
- EditorUi.prototype.createUi = function()
- {
- // Creates menubar
- this.menubar = this.menus.createMenubar(this.createDiv('geMenubar'));
- //this.menubarContainer.appendChild(this.menubar.container);
-
- // Creates toolbar
- this.toolbar = this.createToolbar(this.createDiv('geToolbar'));
- this.toolbarContainer.appendChild(this.toolbar.container);
-
- // Creates the sidebar
- this.sidebar = this.createSidebar(this.sidebarContainer);
- // Creates the footer
- this.footerContainer.appendChild(this.createFooter());
- // Adds status bar in menubar
- this.statusContainer = this.createStatusContainer();
- // Connects the status bar to the editor status
- this.editor.addListener('statusChanged', mxUtils.bind(this, function()
- {
- this.setStatusText(this.editor.getStatus());
- }));
-
- this.setStatusText(this.editor.getStatus());
- this.menubar.container.appendChild(this.statusContainer);
-
- this.sidebarContainer.innerHTML="";//sidebardata;
- // Inserts into DOM
- this.container.appendChild(this.menubarContainer);
- this.container.appendChild(this.toolbarContainer);
- this.container.appendChild(this.sidebarContainer);
- this.container.appendChild(this.outlineContainer);
- this.container.appendChild(this.diagramContainer);
- this.container.appendChild(this.footerContainer);
- this.container.appendChild(this.hsplit);
- this.container.appendChild(this.vsplit);
-
- // HSplit
- this.addSplitHandler(this.hsplit, true, 0, mxUtils.bind(this, function(value)
- {
- this.hsplitPosition = value;
- this.refresh();
- this.editor.graph.sizeDidChange();
- this.editor.outline.update(false);
- this.editor.outline.outline.sizeDidChange();
- }));
- // VSplit
- this.addSplitHandler(this.vsplit, false, this.footerHeight, mxUtils.bind(this, function(value)
- {
- this.vsplitPosition = value;
- this.refresh();
- this.editor.outline.update(false);
- this.editor.outline.outline.sizeDidChange();
- }));
- };
- /**
- * Creates a new toolbar for the given container.
- */
- EditorUi.prototype.createStatusContainer = function()
- {
- var container = document.createElement('a');
- container.className = 'geItem geStatus';
-
- return container;
- };
- /**
- * Creates a new toolbar for the given container.
- */
- EditorUi.prototype.setStatusText = function(value)
- {
- this.statusContainer.innerHTML = value;
- };
- /**
- * Creates a new toolbar for the given container.
- */
- EditorUi.prototype.createToolbar = function(container)
- {
- return new Toolbar(this, container);
- };
- /**
- * Creates a new sidebar for the given container.
- */
- EditorUi.prototype.createSidebar = function(container)
- {
- return new Sidebar(this, container);
- };
- /**
- * Creates and returns a new footer.
- */
- EditorUi.prototype.createFooter = function()
- {
- return this.createDiv('geFooter');
- };
- /**
- * Creates the actual toolbar for the toolbar container.
- */
- EditorUi.prototype.createDiv = function(classname)
- {
- var elt = document.createElement('div');
- elt.className = classname;
-
- return elt;
- };
- /**
- * Updates the states of the given undo/redo items.
- */
- EditorUi.prototype.addSplitHandler = function(elt, horizontal, dx, onChange)
- {
- var start = null;
- var initial = null;
-
- function getValue()
- {
- return parseInt(((horizontal) ? elt.style.left : elt.style.bottom));
- }
- var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown';
- var mm = (mxClient.IS_TOUCH) ? 'touchmove' : 'mousemove';
- var mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
-
- mxEvent.addListener(elt, md, function(evt)
- {
- start = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
- initial = getValue();
- mxEvent.consume(evt);
- });
-
- function moveHandler(evt)
- {
- if (start != null)
- {
- var pt = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
- onChange(Math.max(0, initial + ((horizontal) ? (pt.x - start.x) : (start.y - pt.y)) - dx));
- mxEvent.consume(evt);
- }
- }
-
- mxEvent.addListener(document, mm, moveHandler);
-
- mxEvent.addListener(document, mu, function(evt)
- {
- moveHandler(evt);
- start = null;
- initial = null;
- });
- };
- /**
- * Displays a print dialog.
- */
- EditorUi.prototype.showDialog = function(elt, w, h, modal, closable, onClose)
- {
- this.hideDialog();
- this.dialog = new Dialog(this, elt, w, (mxClient.IS_VML) ? h - 12 : h, modal, closable, onClose);
- };
- /**
- * Displays a print dialog.
- */
- EditorUi.prototype.hideDialog = function()
- {
- if (this.dialog != null)
- {
- this.dialog.close();
- this.dialog = null;
- this.editor.graph.container.focus();
- }
- };
- /**
- * Adds the label menu items to the given menu and parent.
- */
- EditorUi.prototype.openFile = function()
- {
- // Closes dialog after open
- window.openFile = new OpenFile(mxUtils.bind(this, function()
- {
- this.hideDialog();
- }));
- // Removes openFile if dialog is closed
- this.showDialog(new OpenDialog(this).container, 300, 180, true, true, function()
- {
- window.openFile = null;
- });
- };
- /**
- * Adds the label menu items to the given menu and parent.
- */
- EditorUi.prototype.saveFile = function(forceDialog)
- {
- if (!forceDialog && this.editor.filename != null)
- {
- this.save(this.editor.getOrCreateFilename());
- }
- else
- {
- this.showDialog(new SaveDialog(this).container, 300, 100, true, true);
- }
- };
- /**
- * Executes the given layout.
- */
- EditorUi.prototype.executeLayout = function(layout, animate, ignoreChildCount)
- {
- var graph = this.editor.graph;
- var cell = graph.getSelectionCell();
- graph.getModel().beginUpdate();
- try
- {
- layout.execute(graph.getDefaultParent(), cell);
- }
- catch (e)
- {
- throw e;
- }
- finally
- {
- // Animates the changes in the graph model except
- // for Camino, where animation is too slow
- if (animate && navigator.userAgent.indexOf('Camino') < 0)
- {
- // New API for animating graph layout results asynchronously
- var morph = new mxMorphing(graph);
- morph.addListener(mxEvent.DONE, mxUtils.bind(this, function()
- {
- graph.getModel().endUpdate();
- }));
-
- morph.startAnimation();
- }
- else
- {
- graph.getModel().endUpdate();
- }
- }
- };
- /**
- * Creates the keyboard event handler for the current graph and history.
- */
- EditorUi.prototype.createKeyHandler = function(editor)
- {
- var graph = this.editor.graph;
- var keyHandler = new mxKeyHandler(graph);
-
- // Routes command-key to control-key on Mac
- keyHandler.isControlDown = function(evt)
- {
- return mxEvent.isControlDown(evt) || (mxClient.IS_MAC && evt.metaKey);
- };
-
- // Helper function to move cells with the cursor keys
- function nudge(keyCode)
- {
- if (!graph.isSelectionEmpty())
- {
- var dx = 0;
- var dy = 0;
-
- if (keyCode == 37)
- {
- dx = -1;
- }
- else if (keyCode == 38)
- {
- dy = -1;
- }
- else if (keyCode == 39)
- {
- dx = 1;
- }
- else if (keyCode == 40)
- {
- dy = 1;
- }
-
- graph.moveCells(graph.getSelectionCells(), dx, dy);
- graph.scrollCellVisible(graph.getSelectionCell());
- }
- };
- // Binds keystrokes to actions
- var bindAction = mxUtils.bind(this, function(code, control, key, shift)
- {
- var action = this.actions.get(key);
-
- if (action != null)
- {
- var f = function()
- {
- if (action.enabled)
- {
- action.funct();
- }
- };
-
- if (control)
- {
- if (shift)
- {
- keyHandler.bindControlShiftKey(code, f);
- }
- else
- {
- keyHandler.bindControlKey(code, f);
- }
- }
- else
- {
- if (shift)
- {
- keyHandler.bindShiftKey(code, f);
- }
- else
- {
- keyHandler.bindKey(code, f);
- }
- }
- }
- });
-
- var ui = this;
- var keyHandleEscape = keyHandler.escape;
- keyHandler.escape = function(evt)
- {
- ui.hideDialog();
- keyHandleEscape.apply(this, arguments);
- };
-
- // Ignores enter keystroke. Remove this line if you want the
- // enter keystroke to stop editing.
- keyHandler.enter = function() {};
- keyHandler.bindKey(8, function() { graph.foldCells(true); }); // Backspace
- keyHandler.bindKey(13, function() { graph.foldCells(false); }); // Enter
- keyHandler.bindKey(33, function() { graph.exitGroup(); }); // Page Up
- keyHandler.bindKey(34, function() { graph.enterGroup(); }); // Page Down
- keyHandler.bindKey(36, function() { graph.home(); }); // Home
- keyHandler.bindKey(35, function() { graph.refresh(); }); // End
- keyHandler.bindKey(37, function() { nudge(37); }); // Left arrow
- keyHandler.bindKey(38, function() { nudge(38); }); // Up arrow
- keyHandler.bindKey(39, function() { nudge(39); }); // Right arrow
- keyHandler.bindKey(40, function() { nudge(40); }); // Down arrow
- keyHandler.bindKey(113, function() { graph.startEditingAtCell(); });
- bindAction(46, false, 'delete'); // Delete
- bindAction(82, true, 'rotate'); // Ctrl+R
- // bindAction(83, true, 'save'); // Ctrl+S
- // bindAction(83, true, 'saveAs', true); // Ctrl+Shift+S
- bindAction(107, false, 'zoomIn'); // Add
- bindAction(109, false, 'zoomOut'); // Subtract
- bindAction(65, true, 'selectAll'); // Ctrl+A
- bindAction(86, true, 'selectVertices', true); // Ctrl+Shift+V
- bindAction(69, true, 'selectEdges', true); // Ctrl+Shift+E
- bindAction(69, true, 'export'); // Ctrl+Shift+E
- bindAction(66, true, 'toBack'); // Ctrl+B
- bindAction(70, true, 'toFront'); // Ctrl+F
- bindAction(68, true, 'duplicate'); // Ctrl+D
- bindAction(90, true, 'undo'); // Ctrl+Z
- bindAction(89, true, 'redo'); // Ctrl+Y
- bindAction(88, true, 'cut'); // Ctrl+X
- bindAction(67, true, 'copy'); // Ctrl+C
- bindAction(81, true, 'connect'); // Ctrl+Q
- bindAction(86, true, 'paste'); // Ctrl+V
- bindAction(71, true, 'group'); // Ctrl+G
- bindAction(71, true, 'grid', true); // Ctrl+Shift+G
- bindAction(85, true, 'ungroup'); // Ctrl+U
- bindAction(112, false, 'about'); // F1
-
- return keyHandler;
- };
|