From afbd1397df4d6caf483d3842ce84f0ea246c3325 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 11 Sep 2015 15:41:26 +0200
Subject: [PATCH] shift canvas if selected nodes are hidden

---
 client/app/scripts/charts/nodes-chart.js | 22 ++++++++++++++++++++--
 client/app/scripts/components/app.js     |  4 +++-
 client/app/scripts/components/nodes.js   |  1 +
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index 740c34e7d..fec3fc742 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -28,7 +28,7 @@ const NodesChart = React.createClass({
       nodes: {},
       edges: {},
       nodeScale: 1,
-      translate: '0,0',
+      translate: [0, 0],
       scale: 1,
       hasZoomed: false
     };
@@ -146,6 +146,7 @@ const NodesChart = React.createClass({
     const edgeElements = this.renderGraphEdges(this.state.edges, this.state.nodeScale);
     const transform = 'translate(' + this.state.translate + ')' +
       ' scale(' + this.state.scale + ')';
+    debug('translate', transform);
 
     return (
       <svg width="100%" height="100%" className="nodes-chart">
@@ -264,9 +265,26 @@ const NodesChart = React.createClass({
       }
     });
 
+    // shift canvas selected node out of view
+    const visibleWidth = Math.max(props.width - props.detailsWidth, 0);
+    const translate = state.translate;
+    const offsetX = translate[0];
+    if (offsetX + centerX + radius > visibleWidth) {
+      // shift left if blocked by details
+      const shift = centerX + radius - visibleWidth;
+      translate[0] = -shift;
+    } else if (offsetX + centerX - radius < 0) {
+      // shift right if off canvas
+      const shift = offsetX - offsetX + centerX - radius;
+      translate[0] = -shift;
+    }
+    // saving translate in d3's panning cache
+    this.zoom.translate(translate);
+
     return {
       edges: layoutEdges,
-      nodes: layoutNodes
+      nodes: layoutNodes,
+      translate: translate
     };
   },
 
diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 6b1cd2aca..255a6732e 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -60,6 +60,8 @@ const App = React.createClass({
   render: function() {
     const showingDetails = this.state.selectedNodeId;
     const versionString = this.state.version ? 'Version ' + this.state.version : '';
+    // width of details panel blocking a view
+    const detailsWidth = showingDetails ? 420 : 0;
 
     return (
       <div>
@@ -76,7 +78,7 @@ const App = React.createClass({
         </div>
 
         <Nodes nodes={this.state.nodes} highlightedNodeIds={this.state.highlightedNodeIds}
-          highlightedEdgeIds={this.state.highlightedEdgeIds}
+          highlightedEdgeIds={this.state.highlightedEdgeIds} detailsWidth={detailsWidth}
           selectedNodeId={this.state.selectedNodeId}
           topologyId={this.state.currentTopologyId} />
 
diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js
index 18ba2f2f3..961673bd9 100644
--- a/client/app/scripts/components/nodes.js
+++ b/client/app/scripts/components/nodes.js
@@ -39,6 +39,7 @@ const Nodes = React.createClass({
           width={this.state.width}
           height={this.state.height}
           topologyId={this.props.topologyId}
+          detailsWidth={this.props.detailsWidth}
         />
       </div>
     );