基於Web實現線上繪畫拓撲圖[GraphEditor]
阿新 • • 發佈：2019-01-03
-
function Actions(editorUi)
-
{
-
this.editorUi = editorUi;
-
this.actions = new Object();
-
this.init();
-
};
-
/**
-
* 新增預設的行為
-
*/
-
Actions.prototype.init = function()
-
{
-
var ui = this.editorUi;
-
var editor = ui.editor;
-
var graph = editor.graph;
-
graph.cellsMovable=!0;//設定不可移動
-
graph.cellsDisconnectable=!0;//設定邊不可編輯
-
graph.cellsResizable=!0;//設定不可改變大小
-
$.post($("#path").val()+"/SaveToXmlServlet",{"tp":$("#mapTp").val(),"type":"get"},function(text){
-
if(text=="0"){
-
alert("檔案載入失敗！");
-
}else{
-
var xml = text;
-
var doc = mxUtils.par**ml(xml);
-
var model = new mxGraphModel();
-
var codec = new mxCodec(doc);
-
codec.decode(doc.documentElement, model);
-
var children = model.getChildren(model.getChildAt(model.getRoot(), 0));
-
graph.setSelectionCells(editor.graph.importCells(children));
-
}
-
});
-
// 檔案操作
-
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';
-
// 後關閉對話方塊開啟
-
window.openFile = new OpenFile(mxUtils.bind(this, function()
-
{
-
ui.hideDialog();
-
}));
-
window.openFile.setConsumer(mxUtils.bind(this, function(xml, filename)
-
{
-
try
-
{
-
var doc = mxUtils.par**ml(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);
-
}
-
}));
-
// 刪除openFile是否關閉對話方塊
-
ui.showDialog(new OpenDialog(this).container, 300, 180, true, true, function()
-
{
-
window.openFile = null;
-
});
-
});
-
this.addAction('save', function() { ui.save(); }, null, null, 'Ctrl+S');
-
//addAction(saveAs,函式(){ ui.saveFile(真正);},空,空,“Ctrl + Shift-S”);
-
//addAction(“出口”,函式(){ ui。showDialog(新ExportDialog(ui)。容器、300、200,真的,真的);},空,空,“Ctrl + E”);
-
//(“editFile”,新的行動(mxResources.get(“編輯”),mxUtils。繫結(此功能()
-
//(“editFile”,新的行動(mxResources.get(“編輯”),mxUtils。繫結(此功能()
-
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() { 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('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');
-
//安排操作
-
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(); });
-
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 cell = graph.getSelectionCell();
-
var link = graph.getLinkForCell(cell);
-
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('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('rotate', 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)
-
{
-
// 旋轉幾何圖形的大小和位置
-
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);
-
//讀取當前的方向並提出90度
-
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')
-
{