Q.Node.prototype.type = "Node";
|
Q.Text.prototype.type = "Text";
|
Q.Group.prototype.type = "Group";
|
Q.Edge.prototype.type = "Edge";
|
|
var graph;
|
|
function getUuid() {
|
var s = [];
|
var hexDigits = "0123456789abcdef";
|
for (var i = 0; i < 32; i++) {
|
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
}
|
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
//s[8] = s[13] = s[18] = s[23] = "-";
|
|
var uuid = s.join("");
|
return uuid;
|
}
|
|
$(function(){
|
Q.addCSSRule(".maximize", "margin: 0px !important;position: fixed !important;top: 0px;bottom: 0px;right: 0px;left: 0px;z-index: 1030;height: auto !important; width: auto !important;");
|
graph = new Q.Graph("canvas");
|
|
var styles = {};
|
styles[Q.Styles.SELECTION_COLOR] = "#0F0";
|
graph.styles = styles;
|
|
graph.originAtCenter = false;
|
graph.editable = true;
|
|
graph.onElementCreated = function (element, evt) {
|
if (element instanceof Q.Edge) {
|
element.setStyle(Q.Styles.EDGE_WIDTH, 2);
|
element.name = graph.name;
|
if(element.edgeType && element.edgeType != Q.Consts.EDGE_TYPE_DEFAULT){
|
element.setStyle(Q.Styles.EDGE_BUNDLE, false);
|
element.imageType = "2";
|
} else {
|
element.imageType = "1";
|
}
|
element.type=1;
|
return;
|
}
|
if (element instanceof Q.Text) {
|
element.setStyle(Styles.LABEL_BACKGROUND_COLOR, "#2898E0");
|
element.setStyle(Styles.LABEL_COLOR, "#FFF");
|
element.setStyle(Styles.LABEL_PADDING, new Q.Insets(3, 5));
|
return;
|
}
|
|
if (element instanceof Q.Node) {
|
var dataTransfer = evt.dataTransfer;
|
var imageType = dataTransfer.getData('imageType');
|
element.imageType = imageType;
|
element.type=2;
|
element.newId = getUuid();
|
}
|
}
|
|
graph.onLabelEdit = function(element, label, text, elementUI){
|
if(!text){
|
return false;
|
}
|
element.name = text;
|
//此处调用后台保存
|
}
|
|
appendInteractionMenu(graph);
|
|
initToolbox();
|
initToolbar();
|
initDatas();
|
|
//监听面板调整大小事件，同步graph大小
|
|
|
});
|
|
function ensureVisible(node){
|
var bounds = graph.getUIBounds(node);
|
var viewportBounds = graph.viewportBounds;
|
if(!viewportBounds.contains(bounds)){
|
graph.sendToTop(node);
|
graph.centerTo(node.x, node.y);
|
}
|
}
|
|
function setInteractionMode(evt, info){
|
graph.interactionMode = info.value;
|
currentInteractionMode = info.value;
|
if(info.value == Q.Consts.INTERACTION_MODE_CREATE_EDGE){
|
graph.edgeUIClass = info.edgeUIClass;
|
graph.edgeType = info.edgeType;
|
graph.name = info.name;
|
}
|
}
|
|
function initToolbar(){
|
var toolbar = document.getElementById("linePanel");
|
var buttons = {
|
interactionModes:[{name: "默认模式", value:Q.Consts.INTERACTION_MODE_DEFAULT, selected: true, icon:'/business/topo/images/default_icon.png', action: setInteractionMode},
|
{name: '框选模式', value:Q.Consts.INTERACTION_MODE_SELECTION, icon:'/business/topo/images/rectangle_selection_icon.png', action: setInteractionMode},
|
{name: '浏览模式', value:Q.Consts.INTERACTION_MODE_VIEW, icon:'/business/topo/images/pan_icon.png', action: setInteractionMode}],
|
zoom: [{name: "放大", icon:"/business/topo/images/zoomin_icon.png", action: function(){graph.zoomIn()}},
|
{name: "缩小", icon:"/business/topo/images/zoomout_icon.png", action: function(){graph.zoomOut()}},
|
{name: "1:1", icon:"/business/topo/images/zoomout_icon.png",action: function(){graph.scale = 1;}},
|
{name: '纵览', icon:'/business/topo/images/overview_icon.png', action: function(){this.zoomToOverview()}},
|
{name: '最大化', icon:'/business/topo/images/fullscreen_icon.png', action: function(){
|
if($("#graph_panel").hasClass("maximize")){
|
$("#graph_panel").removeClass("maximize")
|
}else{
|
$("#graph_panel").addClass("maximize")
|
}
|
graph.updateViewport();
|
}}]
|
};
|
createToolBar(buttons, toolbar, graph, false, false);
|
|
}
|
|
function initToolbox(){
|
var toolbox = document.getElementById("toolbox");
|
var linePanel = document.getElementById("linePanel");
|
createToolBar({a: [
|
{name: '普通连线', value:Q.Consts.INTERACTION_MODE_CREATE_EDGE, icon:'/business/topo/images/edge_icon.png', action: setInteractionMode},
|
{name: '正交直线', value:Q.Consts.INTERACTION_MODE_CREATE_EDGE, icon:'/business/topo/images/edge_orthogonal_icon.png', action: setInteractionMode, edgeType: Q.Consts.EDGE_TYPE_ORTHOGONAL_HORIZONTAL}
|
]},
|
linePanel, graph,
|
"btn-group-vertical", false);
|
|
createDNDImage(toolbox, "/business/topo/images/icons/1.png", "Internet图标", {type: "Node", label: "Internet图标", image: "/business/topo/images/icons/1.png",imageType:"1"});
|
createDNDImage(toolbox, "/business/topo/images/icons/2.png", "ONU设备", {type: "Node", label: "ONU设备", image: "/business/topo/images/icons/2.png",imageType:"2"});
|
createDNDImage(toolbox, "/business/topo/images/icons/3.png", "路由器", {type: "Node", label: "路由器", image: "/business/topo/images/icons/3.png",imageType:"3"});
|
createDNDImage(toolbox, "/business/topo/images/icons/4.png", "交换机", {type: "Node", label: "交换机", image: "/business/topo/images/icons/4.png",imageType:"4"});
|
createDNDImage(toolbox, "/business/topo/images/icons/1.png", "三层交换机", {type: "Node", label: "三层交换机", image: "/business/topo/images/icons/1.png",imageType:"1"});
|
createDNDImage(toolbox, "/business/topo/images/icons/5.png", "程控交换机", {type: "Node", label: "程控交换机", image: "/business/topo/images/icons/5.png",imageType:"5"});
|
//createDNDImage(toolbox, "/business/topo/images/icons/ap.png", "AP", {type: "Node", label: "AP", image: "/business/topo/images/icons/ap.png"});
|
//createDNDImage(toolbox, "/business/topo/images/icons/firewall.png", "防火墙", {type: "Node", label: "防火墙", image: "/business/topo/images/icons/firewall.png"});
|
//createDNDImage(toolbox, "/business/topo/images/icons/fangyu.png", "入侵防御设备", {type: "Node", label: "入侵防御设备", image: "/business/topo/images/icons/fangyu.png"});
|
//createDNDImage(toolbox, "/business/topo/images/icons/jiance.png", "入侵检测设备", {type: "Node", label: "入侵检测设备", image: "/business/topo/images/icons/jiance.png"});
|
//createDNDImage(toolbox, "/business/topo/images/icons/pc.png", "PC", {type: "Node", label: "PC", image: "/business/topo/images/icons/pc.png"});
|
//createDNDImage(toolbox, "/business/topo/images/icons/print.png", "打印机", {type: "Node", label: "打印机", image: "/business/topo/images/icons/print.png"});
|
//createDNDImage(toolbox, "/business/topo/images/icons/camera.png", "摄像头", {type: "Node", label: "摄像头", image: "/business/topo/images/icons/camera.png"});
|
//createDNDImage(toolbox, "/business/topo/images/icons/use.png", "应用服务器", {type: "Node", label: "应用服务器", image: "/business/topo/images/icons/use.png"});
|
}
|
|
function initDatas(){
|
Q.loadJSON(jsonDataUrl, function(json){
|
var topoNodes = json.nodes;
|
var relations = json.relations;
|
initTopology(topoNodes,relations);
|
|
graph.callLater(function(){
|
//var layouter = new Q.TreeLayouter(graph);
|
//layouter.doLayout();
|
graph.moveToCenter();
|
})
|
|
|
|
|
});
|
}
|
|
|
|
function initTopology(topoNodes,topoRelations)
|
{
|
var map = {};
|
for(var i=0;i<topoNodes.length;i++)
|
{
|
var node = topoNodes[i];
|
var qNode = new Q.Node();
|
qNode.name=node.name;
|
qNode.location = new Q.Point(node.x,node.y);
|
|
qNode.image = "/business/topo/images/icons/"+node.image+".png";
|
qNode.newId = node.id;
|
qNode.imageType = node.image;
|
|
graph.graphModel.add(qNode);
|
map[node.id] = qNode;
|
}
|
//for(var i=0;i<topoNodes.length;i++)
|
//{
|
// var node = topoNodes[i];
|
// var parent = node.parent;
|
// if(parent){
|
// parent = map[parent];
|
// if(parent){
|
// map[node.id].parent = parent;
|
// }
|
// }
|
//}
|
for(var i=0;i<topoRelations.length;i++)
|
{
|
var relation = topoRelations[i];
|
var nodeFrom = map[relation.from_id];
|
var nodeTo = map[relation.to_id];
|
if(nodeFrom && nodeTo){
|
var edge = graph.createEdge(nodeFrom, nodeTo);
|
edge.name = relation.name;
|
edge.fromNode = relation.fromNode;
|
edge.toNode = relation.toNode;
|
edge.imageType = relation.edge_type;
|
edge.type = 1;
|
if(relation.edge_type==2) {
|
edge.edgeType = Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;
|
}
|
|
edge.info = relation;
|
}
|
}
|
}
|
