<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>