From 386ee4edfa145cb964d47704c24d29213f5bd96f Mon Sep 17 00:00:00 2001 From: Justin Reynolds Date: Thu, 3 Nov 2016 22:52:31 -0700 Subject: [PATCH] Figure out the orbit size in global traffic graph so graphs with n number of nodes will fit in the viewport. --- src/global/globalTrafficGraph.js | 40 +++++++++++++++++++++++++------- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/src/global/globalTrafficGraph.js b/src/global/globalTrafficGraph.js index 9e01fe0..c04c777 100644 --- a/src/global/globalTrafficGraph.js +++ b/src/global/globalTrafficGraph.js @@ -22,9 +22,9 @@ import GlobalNode from './globalNode'; import RendererUtils from '../rendererUtils'; import TrafficGraph from '../base/trafficGraph'; -function updatePosition (node, nodeCount, nodeIndex, orbitSize) { +function updatePosition (node, nodeCount, nodeIndex, orbitSize, nodeSize) { const rotationAdjustment = nodeCount % 2 === 0 ? Math.PI / 4 : (5 / 6) * Math.PI; - node.size = 120; + node.size = nodeSize; const adjustment = (((2 * Math.PI) * nodeIndex) / nodeCount) + rotationAdjustment; node.position = { x: ((orbitSize / 2) * Math.cos(adjustment)), @@ -32,7 +32,7 @@ function updatePosition (node, nodeCount, nodeIndex, orbitSize) { }; } -function positionNodes (nodes, orbitSize) { +function positionNodes (nodes, orbitSize, nodeSize) { let nodeIndex = 0; const nodeCount = Object.keys(nodes).length - 1; @@ -45,16 +45,18 @@ function positionNodes (nodes, orbitSize) { const node = nodeMap[nodeName]; if (!node.isEntryNode()) { nodeIndex++; - updatePosition(node, nodeCount, nodeIndex, orbitSize); + updatePosition(node, nodeCount, nodeIndex, orbitSize, nodeSize); } else { - node.size = 150; + node.size = nodeSize * 1.25; node.position = { x: 0, y: 0 }; } }); +} +function centerNodesVertically (nodes) { // Center the nodes vertically on the canvas const yPositions = _.map(nodes, n => n.position.y); const yOffset = Math.abs(Math.abs(_.max(yPositions)) - Math.abs(_.min(yPositions))) / 2; @@ -63,12 +65,24 @@ function positionNodes (nodes, orbitSize) { }); } +function recalculateOrbitSize (nodes, orbitSize, nodeSize) { + const yPositions = _.map(nodes, n => n.position.y); + const yDistance = _.max(yPositions) - _.min(yPositions); + const totalHeight = (nodeSize * 2.25) + yDistance; + const newOrbitSize = orbitSize - Math.max(totalHeight - orbitSize, 0); + + return newOrbitSize; +} + class GlobalTrafficGraph extends TrafficGraph { constructor (name, mainView, parentGraph, graphWidth, graphHeight) { super(name, mainView, parentGraph, graphWidth, graphHeight, GlobalNode, GlobalConnection); this.type = 'global'; - this.orbitSize = Math.min(graphWidth, graphHeight); + this.nodeSize = 120; + this.maxDimension = Math.min(graphWidth, graphHeight); + this.orbitSize = this.maxDimension; + this.linePrecision = 50; this.state = { nodes: [], @@ -85,6 +99,7 @@ class GlobalTrafficGraph extends TrafficGraph { if (existingNodeIndex !== -1) { this.state.nodes[existingNodeIndex] = node; } else { + this.layoutValid = false; this.state.nodes.push(node); if (!this.contextDivs[node.name]) { const parentDiv = RendererUtils.getParent(); @@ -124,8 +139,6 @@ class GlobalTrafficGraph extends TrafficGraph { super.setState(this.state, force); this.validateLayout(); - positionNodes(this.nodes, this.orbitSize); - this._relayout(); } setFilters () { @@ -133,7 +146,16 @@ class GlobalTrafficGraph extends TrafficGraph { } _relayout () { - this.updateView(); + if (Object.keys(this.nodes).length > 0) { + // Position the nodes based on the current orbitSize + positionNodes(this.nodes, this.orbitSize, this.nodeSize); + // Now that the nodes are positioned, adjust orbit size accordingly so the nodes all fit + this.orbitSize = recalculateOrbitSize(this.nodes, this.maxDimension, this.nodeSize); + // Position again with the proper orbitSize + positionNodes(this.nodes, this.orbitSize, this.nodeSize); + centerNodesVertically(this.nodes); + this.updateView(); + } } handleIntersectedObjectClick () {