十分好用的拓扑图插件JTopo

其他 2018-12-27 17:01:17 阅读次数: 0

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>创建拓扑图</title>
<meta name="decorator" content="default" />
    <script type="text/javascript" src="${ctxStatic}/common/uuid.js"></script>
    <script type="text/javascript" src="${ctxStatic}/topo/jtopo/js/jtopo-min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/topo/jtopo/js/toolbar.js"></script>
    <script type="text/javascript" src="${ctxStatic}/topo/jtopo/js/jtopo-common.js"></script>

<script type="text/javascript" src="${ctxStatic}/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
<style>
.contextmenu {
    border: 1px solid #aaa;
    border-bottom: 0;
    background: #eee;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}
                                                                           
.contextmenu li a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #aaa;
    cursor: pointer;
}
                                                                           
.contextmenu li a:hover {
    background: #fff;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $('.scroller').each(function() {
        $(this).slimScroll({
            size : '7px',
            color : '#a1b2bd',
            height : $(this).attr("data-height"),
            alwaysVisible : ($(this).attr("data-always-visible") == "1" ? true : false),
            railVisible : ($(this).attr("data-rail-visible") == "1" ? true : false),
            railOpacity : 0.1,
            disableFadeOut : true
        });
    });
    //加载素材图片
    $.ajax({
        url : '${ctx}/topo/topoRes/treeRes?extId=' + new Date().getTime(),
        async : false, //同步执行 
        data : {},
        success : function(r) {
            if (r && r.length > 0) {
                for (var i = 0; i < r.length; i = i + 1) {
                    if (r[i]) {
                        var sel = '<div id="'+r[i].id+'">' + r[i].name;
                        for (var j = 0; j < r[i].childList.length; j = j + 1) {

                            if (r[i].childList[j] && r[i].childList[j].resPath != NaN && r[i].childList[j].resPath != '') {
                                if (r[i].childList[j].code == 'line') {
                                    sel += 
                                    '<div style="margin-top:2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
                                        '<a href="#" onclick="addTopoNodes(\'' + r[i].childList[j].code + '\',\'' + r[i].childList[j].resPath + '\')" >' +
                                         r[i].childList[j].name + '</a>&nbsp;&nbsp;'+
                                         '<img style="width:32px;height:3px;" src="${ctxStatic}/topo/res/' + r[i].childList[j].resPath + '"'+ 
                                         'onclick="addTopoNodes(\'' + r[i].childList[j].code + '\',\'' + r[i].childList[j].resPath + '\')"/></div>';
                                } else{
                                    sel +=
                                    '<div style="margin-top:2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
                                        '<a href="#" onclick="addTopoNodes(\'' + r[i].childList[j].code + '\',\'' + r[i].childList[j].resPath + '\')" >' + 
                                        r[i].childList[j].name + '</a>&nbsp;&nbsp;<img style="width:32px;height:32px;" src="${ctxStatic}/topo/res/' + r[i].childList[j].resPath + '" '+
                                        ' onclick="addTopoNodes(\'' + r[i].childList[j].code + '\',\'' + r[i].childList[j].resPath + '\')"/></div>';
                                }
                            }
                        }
                        sel = sel + '</div>';
                        jQuery("#topoRes").before(sel);
                    }
                }
            }
        }
    });
    initTopo();
    bindEvent();
    contextMenuClick();
});
//画布场景
var scene;
var stage;
//拓扑图状态 1：可编辑 2：关联资产 0：只读
var editStatus = 1;
var beginNode = null;
var currentNode = null;
var lineColor = "128,0,0";

var rectNodes = new Array();
var eleNodes = new Array();
//初始化拓扑图
function initTopo(){
    //参考：http://180.76.135.17/api.html
    var canvas = document.getElementById('canvas');
    stage = new JTopo.Stage(canvas);
    //显示工具栏
    showJTopoToobar(stage);
    scene = new JTopo.Scene();    
    //scene.background = '${ctxStatic}/common/img/map_bg.png';
    scene.backgroundColor = "255,255,255";
    stage.add(scene);
    loadTopoData();
}
//初始化拓扑图元素
function loadTopoData(){
    if("${fn:length(jtopo.elements)}"!="0"){
         var elements = new Array();  
          <c:forEach items="${jtopo.elements}" var="element">  
              var ele = { "type":"${element.type}",
                           "url":"${element.url}",
                           "x":parseInt("${element.x}"),
                           "y":parseInt("${element.y}"),
                         "width":parseInt("${element.width}"),
                         "height":parseInt("${element.height}"),
                         "code":"${element.code}",
                         "remarks":"${element.remarks}",
                         "fillColor":"${element.fillColor}",
                         "zindex":"${element.zindex}",
                         "alarm":"${element.alarm}",
                         "alpha":"${element.alpha}",
                         "rotate":"${element.rotate}"}; 
              elements.push(ele);  
          </c:forEach>
          var links = new Array();
          <c:forEach items="${jtopo.links}" var="element">  
              var ele = { "type":"${element.type}",
                         "code":"${element.code}",
                         "remarks":"${element.remarks}",
                         "fillColor":"${element.fillColor}"}; 
              links.push(ele);  
          </c:forEach>
          for(var i in elements){
             var ele = elements[i];
             if(ele.type !=undefined){
                 ele.x = getDefualtParam(ele.x,0);
                 ele.y = getDefualtParam(ele.y,0);
                 ele.width = getDefualtParam(ele.width,100);
                 ele.height = getDefualtParam(ele.height,100);
                  initTopoNodes(ele);
             }
          }
          for(var i in links){
              var ele = links[i];
              if(ele.type == 'link'){
                  initTopoLink(ele.code,ele.fillColor);
              }
          }
    }
}
function addTopoNodes(type,path){
    var ele = { 
            "type":type,
               "url":path,
               "x":0,
               "y":0,
             "width":68,
             "height":68};
    var node = null;
    if(type == "text"){//添加文本
        node = addTextNode(ele);
    }else if(type == "rect"){//添加文本
        ele.fillColor = "128,128,128";
        node = addRectNode(ele);
        rectNodes.push(node);
    }else if(type == "line"){//改变连线颜色
        if(path == "line2.png"){
            lineColor = "128,0,0";
            alert("连线切换为红色");
        }else{
            lineColor = "0,0,255";
            alert("连线切换为蓝色");
        }
    }else if(path.indexOf(".")>0) {//添加节点
        node = addImageNode(ele);
    }
    if(node !=null){
        node.addEventListener('mouseup', function(event){
            currentNode = this;
            menuEvent(event,1);
        });
        scene.add(node);
    }
}
//添加对象方法
function initTopoNodes(ele){
    var node = null;
    if(ele.type == "text"){//添加文本
        node = addTextNode(ele);
    }else if(ele.type == "rect"){//添加文本
        node = addRectNode(ele);
        rectNodes.push(node);
    }else if(ele.url.indexOf(".")>0) {//添加节点
        node = addImageNode(ele);
        if(ele.code !=null && ele.code !=""){
            eleNodes.push({"code":ele.code,"node":node});
        }
    }
    if(node !=null){
        node.id = ele.code;
        node.addEventListener('mouseup', function(event){
            currentNode = this;
            menuEvent(event,1);
        });
        scene.add(node);
    }
}

//绑定事件
function bindEvent(){
    scene.mouseup(function(e){
        if(e.button == 2){
            return;
        }
        if(e.target != null && e.target instanceof JTopo.Node){
            if(beginNode == null){
                beginNode = e.target;
            }else if(beginNode !== e.target){
                var endNode = e.target;
                if(isEditMode()){
                    if(!rectNodes.contains(beginNode) && !rectNodes.contains(endNode)){
                        addLink(beginNode,endNode,lineColor);
                    }
                }
                beginNode = null;
            }else{
                beginNode = null;
            }
        }
    });
    stage.click(function(event){
        if(event.button == 0){// 右键
            // 关闭弹出菜单（div）
            $("#contextmenu").hide();
            $("#linemenu").hide();
            $("#layoutmenu").hide();
        }
    });
    bindTextEvent();
}

function bindTextEvent(){
    //文本输入事件绑定
    var textfield = $("#jtopo_textfield");
    scene.dbclick(function(event){
        if(event.target == null || !isEditMode()){ 
            return;
        }
        var e = event.target;
        textfield.css({
            top: event.pageY,
            left: event.pageX - e.width/2
        }).show().attr('value', e.text).focus().select();
        e.text = "";
        textfield[0].JTopoNode = e;
    });
    $("#jtopo_textfield").blur(function(){
        textfield[0].JTopoNode.text = textfield.hide().val();
    });
}
//右键菜单事件
function menuEvent(event,type){
    if(event.button == 2){// 右键
        var model = $("input[name='modeRadio']:checked").val();
        if('select' == model){
             $("#layoutmenu").css({
                 top: event.pageY,
                 left: event.pageX
             }).show(); 
        }else{
            // 当前位置弹出菜单（div）
            var menId = "contextmenu";
            if(type == 2){
                menId = "linemenu";
                $("#contextmenu").hide();
            }else{
                $("#linemenu").hide();
            }
            $("#"+menId).css({
                top: event.pageY,
                left: event.pageX
            }).show();   
        } 
    }
}
function contextMenuClick(){
     var colors = [];
     colors.push("128,128,128");
     colors.push("135,206,250");
     colors.push("65,105,225");
     colors.push("255,255,255");
    /* 右键菜单处理 */    
    $("#contextmenu a").click(function(){
        var text = $(this).text();
        if(text == '删除'){
            scene.remove(currentNode);
            currentNode = null;
        }if(text == '撤销上一次操作'){
            currentNode.restore();
        }else{
           // currentNode.save();
        }
        if(text == '删除连线'){
            var lines = currentNode.inLinks;
            for(i = 0;i<lines.length;i++){
                scene.remove(lines[i]);
            }
        }
        if(text == '变换背景色'){
            var colorVal = colors[0];
            for(var i=0;i<colors.length;i++){
                if(currentNode.fillColor == colors[i]){
                    if((i+1) == colors.length){
                        colorVal = colors[0];
                        break;
                    }
                    colorVal = colors[i+1];
                    break;
                }
            }
            currentNode.fillColor = colorVal;
        }else if(text == '顺时针旋转'){
            currentNode.rotate += 0.5;
        }else if(text == '逆时针旋转'){
            currentNode.rotate -= 0.5;
        }else if(text == '放大'){
            currentNode.scaleX += 0.2;
            currentNode.scaleY += 0.2;
        }else if(text == '底层'){
            currentNode.zIndex = 10;
        }else if(text == '顶层'){
            currentNode.zIndex = 20;
        }
        $("#contextmenu").hide();
    });
    var lineColors = [];
    lineColors.push("128,0,0");
    lineColors.push("0,0,255");
    lineColors.push("105,105,105");
    lineColors.push("255,255,255");
    /* 右键菜单处理 */    
    $("#linemenu a").click(function(){
        var text = $(this).text();
        if(text == '删除连线'){
           scene.remove(currentNode);
        }else if(text == '变换颜色'){
             var colorVal = lineColors[0];
             for(var i=0;i<lineColors.length;i++){
                 if(currentNode.strokeColor == lineColors[i]){
                     if((i+1) == lineColors.length){
                         colorVal = lineColors[0];
                         break;
                     }
                     colorVal = lineColors[i+1];
                     break;
                 }
             }
            currentNode.strokeColor = colorVal;
        }
        $("#linemenu").hide();
    });
    $("#layoutmenu a").click(function(){
        var text = $(this).text();
        var elements = scene.selectedElements;
        if(text == '垂直对齐'){
            var x1 = elements[0].x;
            var y1 = elements[0].y;
            var y2 = elements[elements.length-1].y;
            var avgY = (y2-y1)/(elements.length-1);
            for(var i=1;i<elements.length;i++){
                 var ele = elements[i];
                 ele.x = x1;
                 ele.y = y1+avgY*i;
            }
        }else if(text == "水平对齐"){
            var x1 = elements[0].x;
            var y1 = elements[0].y;
            var x2 = elements[elements.length-1].x;
            var avgX = (x2-x1)/(elements.length-1);
            for(var i=1;i<elements.length;i++){
                 var ele = elements[i];
                 ele.x = x1+avgX*i;
                 ele.y = y1;
            }
        }else if(text == "缩小"){
            for(var i in elements){
                 var ele = elements[i];
                 ele.width = ele.width*0.8;
                 ele.height = ele.height*0.8;
            }
        }else if(text == "放大"){
            for(var i in elements){
                 var ele = elements[i];
                 ele.width = ele.width*1.2;
                 ele.height = ele.height*1.2;
            }
        }
        $("#layoutmenu").hide();
    });
}
//保存拓扑图
function savePojo(){
    var formData ={};
    //获取场景中的所有对象
    var elements = scene.getDisplayedElements();
    var topoId = $("#id").val();
    formData["id"]=topoId;
    for(var i in elements){
        var element = elements[i];
        if(element.elementType != undefined){
            if(element.elementType == "node"){
                formData["elements["+i+"].jtopoId"]=topoId;
                formData["elements["+i+"].code"]=element.id;
                formData["elements["+i+"].x"]=element.x;
                formData["elements["+i+"].y"]=element.y;
                formData["elements["+i+"].rotate"]=element.rotate;
                formData["elements["+i+"].scaleX"]=element.scaleX;
                formData["elements["+i+"].scaleY"]=element.scaleY;
                if(rectNodes.contains(element)){
                    formData["elements["+i+"].type"]="rect";
                    formData["elements["+i+"].zindex"]=element.zIndex;
                    formData["elements["+i+"].fillColor"]=element.fillColor;
                    formData["elements["+i+"].alpha"]=element.alpha;
                }else{
                    formData["elements["+i+"].type"]="node";
                    var url = element.image.src;
                    formData["elements["+i+"].url"]=url.replace(getRootPath()+"/static/topo/res/","");
                }
                formData["elements["+i+"].width"]=element.width;
                formData["elements["+i+"].height"]=element.height;
            }else if(element.elementType == "link"){
                formData["elements["+i+"].jtopoId"]=topoId;
                formData["elements["+i+"].type"]="link";
                formData["elements["+i+"].code"]=element.nodeA.id+","+element.nodeZ.id;
                formData["elements["+i+"].fillColor"]=element.strokeColor;
            }else if(element.elementType == "TextNode"){
                formData["elements["+i+"].jtopoId"]=topoId;
                formData["elements["+i+"].type"]="text";
                formData["elements["+i+"].code"]=element.id;
                formData["elements["+i+"].x"]=element.x;
                formData["elements["+i+"].y"]=element.y;
            }
            if(element.text != undefined){
                formData["elements["+i+"].remarks"]=element.text;
            }
        }
    }
    $.ajax({
        url : '${ctx}/jtopo/jtopoElement/save?extId=' + new Date().getTime(),
        async : true, //同步执行 
        data : formData,
        type:"post",
        success : function(r) {
            alert(r);
            window.location.reload();
        }
    });    
}
</script>
</head>
<body>
<div class="container-fluid">
        <div class="row-fluid">
            <fieldset>
                <legend> 创建网络拓扑 </legend>
            </fieldset>
        </div>
        <sys:message content="${message}" />
        <form:form id="inputForm" modelAttribute="jtopo" action="${ctx}/jtopo/jtopoElement/save" method="post" class="form-horizontal">
            <input type="hidden" name="id" id="id" value="${jtopo.id }" />
        </form:form>
        <input type="text" id="jtopo_textfield" style="position: absolute;display: none;">
        <ul id="contextmenu" class="contextmenu" style="top: 424px; left: 642px; display: none;">    
            <li><a>顺时针旋转</a></li>
            <li><a>逆时针旋转</a></li>    
            <li><a>删除连线</a></li>
            <li><a>删除</a></li>
            <li><a>变换背景色</a></li>
            <li><a>顶层</a></li>
            <li><a>底层</a></li>
          </ul>
          <ul id="linemenu" class="contextmenu" style="top: 424px; left: 642px; display: none;">
            <li><a>删除连线</a></li>
            <li><a>变换颜色</a></li>
          </ul>
           <ul id="layoutmenu" class="contextmenu" style="top: 424px; left: 642px; display: none;">
            <li><a>垂直对齐</a></li>
            <li><a>水平对齐</a></li>
            <li><a>缩小</a></li>
            <li><a>放大</a></li>
          </ul>
        <div class="row-fluid">
            <div class="span2" style="border:none;">
                <div class="scroller" data-height="600px" data-always-visible="1" data-rail-visible="1">
                    <div id="topoRes" style="display: none"></div>
                </div>
            </div>
            <div class="span10" style="border:none;">
                <div class="widget-content " style="height: 610px; margin-top: -10px;">
                    <div id="topo_content">
                        <canvas width="960" height="550" id="canvas" style="border: 1px solid #b0b0b0;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

jtopo-common.js内容

function isEditMode(){
    var model = $("input[name='modeRadio']:checked").val();
    if('edit' == model){
        return true;
    }
    return false;
}
//自定义是否包含方法
Array.prototype.contains = function(needle) {
  for (i in this) {
    if (this[i] == needle) return true;
  }
  return false;
}
//初始化连线
function initTopoLink(code,color){
    var codes = code.split(",");
    var elements = eleNodes;
    for(i in elements){
        var e = elements[i];
        if(code.indexOf(e.code)>=0){
            if(beginNode == null){
                beginNode = e;
            }else{
                addLink(beginNode.node,e.node,color);
                beginNode = null;
            }
        }
    }
}
function addRectNode(ele){
    if(null ==ele.remarks || ele.remarks == ""){
        ele.remarks = "矩形框";
    }
    var rectNode = new JTopo.Node(ele.remarks);
    rectNode.setImage("", false);
    rectNode.setLocation(ele.x, ele.y);
    rectNode.setSize(ele.width, ele.height);
    if(ele.fillColor =="" || typeof(ele.alpha) == "undefined"){
        ele.fillColor = "128,128,128";
    }
    if(ele.alpha =="" || typeof(ele.alpha) == "undefined"){
        ele.alpha = 1;
    }
    rectNode.alpha = ele.alpha;
    if(ele.fillColor !="none"){
        rectNode.fillColor = ele.fillColor;//底色
    }
    rectNode.textPosition = 'Top_Left';//标题显示位置
    //向左偏移 20像素
    rectNode.textOffsetX = 15*ele.remarks.length+15;
    //向下偏移 25像素
    rectNode.textOffsetY = 30;
    if(ele.zindex =="" || typeof(ele.zindex) == "undefined"){
        ele.zindex = 11;
    }
    rectNode.zIndex = ele.zindex;
    if(editStatus!=1){
        rectNode.editAble = false;
        rectNode.dragable = false;
    }
    rectNode.font='bold 16px 宋体';
    if(ele.fontColor =="" || typeof(ele.fontColor) == "undefined"){
        ele.fontColor = '0,0,0';
    }
    if(ele.borderColor =="" || typeof(ele.borderColor) == "undefined"){
        ele.borderColor = '0,0,0';
    }
    rectNode.fontColor = ele.fontColor;
    rectNode.borderWidth = 1; // 边框的宽度
    rectNode.borderColor = ele.borderColor; //边框颜色 
    return rectNode;
}
function addTextNode(ele){
    if(null ==ele.remarks || ele.remarks == ""){
        ele.remarks = "请双击输入文本";
    }
    var textNode = new JTopo.TextNode(ele.remarks);
    textNode.setLocation(ele.x, ele.y);
    textNode.zIndex = 21;
    if(editStatus!=1){
        textNode.editAble = false;
        textNode.dragable = false;
    }
    textNode.font = "bold 16px 宋体";
    textNode.fontColor = "0,0,0";
    return textNode;
}
//添加连线
function addLink(beginNode,endNode,color){
    var link = new JTopo.Link(beginNode, endNode);
    link.strokeColor = color;
    link.type = 'loop'; // 自定义属性
    link.zIndex = 21;
    if(editStatus==1){
        link.addEventListener('mouseup', function(event){
            currentNode = this;
            menuEvent(event,2);
        });
    }
    scene.add(link);
    return link;
}
//添加节点图片
function addImageNode(ele,isEdit){
    var imgNode = new JTopo.Node();
    //设置图片的路径和是否改变大小
    imgNode.setImage(getImgPath(ele.url), false);
    imgNode.setBound(ele.x, ele.y, ele.width, ele.height);
    imgNode.zIndex = 20;
    imgNode.rotate = ele.rotate;
    if(editStatus!=1){
        imgNode.editAble = false;
        imgNode.dragable = false;
    }
    if(null != ele.alarm && ele.alarm !=""){
        imgNode.alarm = ele.alarm;
        imgNode.alarmColor = '255,0,0';
    }
    if(null != ele.remarks){
        imgNode.text = ele.remarks;
        imgNode.font = "12px 宋体";
        if(ele.fontColor =="" || typeof(ele.fontColor) == "undefined"){
            ele.fontColor = '0,0,255';
        }
        imgNode.fontColor = ele.fontColor;
    }
    return imgNode;
}
function getImgPath(resPath) {
    if(resPath.indexOf("http://")>=0 || resPath.indexOf("https://")>=0){
        return resPath;
    }
    return getRootPath() + '/static/topo/res/' + resPath;
}
function getRootPath() {
    // 获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
    var curWwwPath = window.document.location.href;
    // 获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    // 获取主机地址，如： http://localhost:8083
    var localhostPath = curWwwPath.substring(0, pos);
    // 获取带"/"的项目名，如：/uimcardprj
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    if (projectName == '/a')
        return localhostPath;
    return (localhostPath + projectName);
}
function getDefualtParam(value,def){
    if(value ==null || value ==""){
        value = def;
    }
    return parseInt(value);
}

猜你喜欢

转载自blog.csdn.net/songqiang2011/article/details/85274997
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022