jsplumb作的topology图

标签：style   color   io   os   ar   for   sp   div   on   

<div  id="vmstopologygraph" style="margin-top:10px;overflow-x:auto;"></div>

<script>
            function createGraph(source, container) {
                var jqContainer = $("#" + container);
                var nodeCount = vmsporperty.length + 1;

                //VMSノードの作成
                var vmsNode = document.createElement("div");
                vmsNode.id = source.vms.name;
                if (vmsporperty.length <= 30) {
                    vmsNode.className = "vmsgraph";
                }
                else {
                    vmsNode.className = "vmsgraphMin";
                }


                var xPos = jqContainer.get(0).scrollWidth / 2;
                var yPos = jqContainer.get(0).scrollHeight / 2;
                var nodeLoctions = [];
                nodeLoctions.push([xPos, yPos]);
                vmsNode.style.top = yPos + "px";
                vmsNode.style.left = xPos + "px";

                vmsNode.textContent = source.vms.name;
                vmsNode.innerText = source.vms.name;
                vmsNode.style.textAlign = "center";
                jqContainer.get(0).appendChild(vmsNode);

                //VM&Network&Strorageノードの作成
                for (var i = 0; i < vmsporperty.length; i++) {
                    var node = document.createElement("div");
                    node.id = vmsporperty[i].Pool + vmsporperty[i].Name;
                    while (true) {
                        var pos = getRandomCoordinates(130);
                        var xPs = parseFloat(pos[0]) + xPos;
                        var yPs = parseFloat(pos[1]) + yPos;

                        if (nodeLoctions.length == 0) {
                            nodeLoctions.push([xPs, yPs]);
                            break;
                        }
                        if (isCover(xPs, yPs, nodeLoctions)) {
                            continue;
                        }
                        else {
                            nodeLoctions.push([xPs, yPs]);
                            break;
                        }
                    }
                    createNodeGraph(vmsporperty[i], node);

                    node.style.top = yPs + "px";
                    node.style.left = xPs + "px";
                    node.textContent = vmsporperty[i].Name;
                    node.innerText = vmsporperty[i].Name;


                    node.style.textAlign = "center";
                    jqContainer.get(0).appendChild(node);
                }

            }

            function createNodeGraph(porperty, node) {
                if (porperty.type == "vm") {
                    if (vmsporperty.length <= 30) {
                        node.className = "vmgraph";
                    }
                    else if (vmsporperty.length > 30 && vmsporperty.length <= 60) {
                        node.className = "vmgraphMid";
                    }
                    else {
                        node.className = "vmgraphMin";
                    }

                }
                else if (porperty.type == "network") {
                    if (vmsporperty.length <= 30) {
                        node.className = "networkgraph";
                    }
                    else if (vmsporperty.length > 30 && vmsporperty.length <= 60) {
                        node.className = "networkgraphMid";
                    }
                    else{
                        node.className = "networkgraphMin";
                    }

                }
                else if (porperty.type == "storage") {
                    if (vmsporperty.length <= 30) {
                        node.className = "lungraph";
                    }
                    else if (vmsporperty.length > 30 && vmsporperty.length <= 60) {
                        node.className = "lungraphMid";
                    }
                   else {
                        node.className = "lungraphMin";
                    }

                }
                else if (porperty.type == "vms") {
                    if (vmsporperty.length <= 30) {
                        node.className = "vmsgraphMid";
                    }
                    else if (vmsporperty.length > 30 && vmsporperty.length <= 60) {
                        node.className = "lungraphMid";
                    }
                    else {
                        node.className = "lungraphMin";
                    }

                }
            }

            function isCover(xPs, yPs, nodeLoctions) {
                for (var i = 0; i < nodeLoctions.length; i++) {
                    var distance = Math.sqrt((yPs - nodeLoctions[i][1]) * (yPs - nodeLoctions[i][1]) + (xPs - nodeLoctions[i][0]) * (xPs - nodeLoctions[i][0]));
                    if (distance <= 50) {
                        return true;
                    }
                }
                return false;
            }



            function getRandomCoordinates(maxRadius) {
                var xyPos = [];

                //半径がランダムに生成される
                var radius = 80 + Math.round(Math.random() * maxRadius);
                //角度がランダムに生成される
                //var Angle = Math.round(Math.random() * 360);
                // var rand = (3.14 * Math.round(Math.random() * 360)) / 180;
                var xPoint = 0;
                var yPoint = 0;
                while (true) {
                    xPoint = 400 * Math.cos(Math.random() * 360);
                    yPoint = 150 * Math.sin(Math.random() * 360);
                    if ((xPoint > -500 || xPiont < 500) && (yPoint > -150 || yPoint < 150)) {
                        break;

                    }
                    else {
                        continue;
                    }
                }

                xyPos.push(xPoint.toFixed(2));
                xyPos.push(yPoint.toFixed(2));

                return xyPos;
            }


            var vm = [];
            for (var i = 0; i < 21; i++) {
                var vmNode = { type: ‘vm‘, Pool: ‘vmpool2‘, Name: ‘vm‘ + i };
                vm.push(vmNode);
            }

            var network = [];
            for (var i = 0; i < 5; i++) {
                var networkNode = { type: ‘network‘, Pool: ‘netWorkpool1‘, Name: ‘netWork‘ + i };
                network.push(networkNode);
            }

            var storage = [];
            for (var i = 0; i < 5; i++) {
                var storageNode = { type: ‘storage‘, Pool: ‘storagepool1‘, Name: ‘storage‘ + i };
                storage.push(storageNode);
            }


            var source = {
                vms: { type: ‘vms‘, name: "vms1", serverProfile: "001" },
                vm: vm,
                netWork: network,
                Storage: storage
            };
            var vmsporperty = source.Storage.concat(source.vm.concat(source.netWork));

            createGraph(source, "vmstopologygraph");

            jsPlumb.ready(function () {

                jsPlumb.importDefaults({
                    DragOptions: { cursor: ‘pointer‘, zIndex: 2000 },
                    PaintStyle: { strokeStyle: ‘#666‘ },
                    EndpointStyle: { width: 0.5, height: 0.5, strokeStyle: ‘#666‘ },
                    Endpoint: "Rectangle",
                    Anchors: ["Right"]
                });

                jsPlumbConnect();

                var exampleDropOptions = {
                    hoverClass: "dropHover",
                    activeClass: "dragActive"
                };



                var color1 = "#316b31";
                var exampleEndpoint1 = {
                    endpoint: ["Dot", { radius: 11 }],
                    paintStyle: { fillStyle: color1 },
                    isSource: true,
                    anchor: "Left",
                    scope: "green dot",
                    connectorStyle: { strokeStyle: color1, lineWidth: 6 },
                    connector: ["Straight", { curviness: 63 }],
                    maxConnections: 10,
                    isTarget: true,
                    dropOptions: exampleDropOptions
                };

                var color2 = "rgba(229,219,61,0.5)";
                var exampleEndpoint2 = {
                    endpoint: "Rectangle",
                    anchor: "Right",
                    paintStyle: { fillStyle: color2, opacity: 0.5 },
                    isSource: true,
                    scope: ‘yellow dot‘,
                    connectorStyle: { strokeStyle: color2, lineWidth: 4 },
                    connector: "Straight",
                    isTarget: true,
                    dropOptions: exampleDropOptions,
                    beforeDetach: function (conn) {
                        return confirm("Detach connection?");
                    },
                    onMaxConnections: function (info) {
                        alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
                    }
                };
            });
            function jsPlumbConnect() {
                for (var i = 0; i < vmsporperty.length; i++) {
                    var paintStyleClo;
                    if (vmsporperty[i].type == "vm") {
                        paintStyleClo = { lineWidth: 0.5, strokeStyle: ‘rgb(0,0,0)‘ };
                    }
                    else if (vmsporperty[i].type == "network") {
                        paintStyleClo = { lineWidth: 0.5, strokeStyle: ‘rgb(0,250,154)‘ };
                    }
                    else if (vmsporperty[i].type == "storage") {
                        paintStyleClo = { lineWidth: 0.5, strokeStyle: ‘rgb(184,134,11)‘ };
                    }

                    jsPlumb.connect({
                        source: vmsporperty[i].Pool + vmsporperty[i].Name,
                        target: source.vms.name,
                        paintStyle: paintStyleClo,
                        endpoint: ["Dot", { radius: 2 }],
                        connector: ["Straight", { curviness: 20 }],
                        endpointStyle: { fillStyle: ‘rgb(243,229,0)‘ },
                        // anchors: ["RightMiddle", [0, (0.2 + i) / 10, 0, 0]],
                        anchors: ["AutoDefault", "Center"],
                        //overlays: [
                        //    ["Label", { label: "VM" + i, location: 0.25 }, "VM" + i]]
                    });

                }
            }
        </script>

jsplumb作的topology图

标签：style   color   io   os   ar   for   sp   div   on   

原文地址：http://www.cnblogs.com/kakusousou/p/3998078.html