[turbofan] Refactor graph width

Graph width is now managed by the Graph instead of the GraphView,
which simplifies some interfaces.

Change-Id: If78bc9a469cc8369bc75695a6612627103036bc8
Notry: true
Bug: v8:7327
Reviewed-on: https://chromium-review.googlesource.com/c/1398227Reviewed-by: Georg Neis <neis@chromium.org>
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Cr-Commit-Position: refs/heads/master@{#58618}

tools/turbolizer/src/graph-view.ts

@@ -37,8 +37,6 @@ export class GraphView extends View implements PhaseView {
   graphElement: d3.Selection<any, any, any, any>;
   visibleNodes: d3.Selection<any, GNode, any, any>;
   visibleEdges: d3.Selection<any, Edge, any, any>;
-  width: number;
-  height: number;
   drag: d3.DragBehavior<any, GNode, GNode>;
   panZoom: d3.ZoomBehavior<SVGElement, any>;
   visibleBubbles: d3.Selection<any, any, any, any>;
@@ -547,9 +545,7 @@ export class GraphView extends View implements PhaseView {
   layoutGraph() {
     console.time("layoutGraph");
     layoutNodeGraph(this.graph, this.state.showTypes);
-    const [[width, height], extent] = this.graph.redetermineGraphBoundingBox(this.state.showTypes);
-    this.width = width;
-    this.height = height;
+    const extent = this.graph.redetermineGraphBoundingBox(this.state.showTypes);
     this.panZoom.translateExtent(extent);
     this.minScale();
     console.timeEnd("layoutGraph");
@@ -802,10 +798,9 @@ export class GraphView extends View implements PhaseView {
   }
 
   minScale() {
-    const view = this;
     const dimensions = this.getSvgViewDimensions();
-    const minXScale = dimensions[0] / (2 * view.width);
-    const minYScale = dimensions[1] / (2 * view.height);
+    const minXScale = dimensions[0] / (2 * this.graph.width);
+    const minYScale = dimensions[1] / (2 * this.graph.height);
     const minScale = Math.min(minXScale, minYScale);
     this.panZoom.scaleExtent([minScale, 40]);
     return minScale;
@@ -862,6 +857,8 @@ export class GraphView extends View implements PhaseView {
 
   viewWholeGraph() {
     this.panZoom.scaleTo(this.svg, 0);
-    this.panZoom.translateTo(this.svg, this.graph.minGraphX + this.width / 2, this.graph.minGraphY + this.height / 2)
+    this.panZoom.translateTo(this.svg,
+      this.graph.minGraphX + this.graph.width / 2,
+      this.graph.minGraphY + this.graph.height / 2)
   }
 }

tools/turbolizer/src/graph.ts

@@ -9,6 +9,8 @@ export class Graph {
   maxGraphY: number;
   maxGraphNodeX: number;
   maxBackEdgeNumber: number;
+  width: number;
+  height: number;
 
   constructor(data: any) {
     this.nodeMap = [];
@@ -17,6 +19,8 @@ export class Graph {
     this.maxGraphX = 1;
     this.minGraphY = 0;
     this.maxGraphY = 1;
+    this.width = 1;
+    this.height = 1;
 
     data.nodes.forEach((json_node: any) => {
       this.nodeMap[json_node.id] = new GNode(json_node.nodeLabel);
@@ -60,7 +64,7 @@ export class Graph {
     }
   }
 
-  redetermineGraphBoundingBox(showTypes: boolean): [[number, number], [[number, number], [number, number]]] {
+  redetermineGraphBoundingBox(showTypes: boolean): [[number, number], [number, number]] {
     this.minGraphX = 0;
     this.maxGraphNodeX = 1;
     this.maxGraphX = undefined;  // see below
@@ -89,15 +93,15 @@ export class Graph {
     this.maxGraphX = this.maxGraphNodeX +
       this.maxBackEdgeNumber * MINIMUM_EDGE_SEPARATION;
 
-    const width = (this.maxGraphX - this.minGraphX);
-    const height = this.maxGraphY - this.minGraphY;
+    this.width = this.maxGraphX - this.minGraphX;
+    this.height = this.maxGraphY - this.minGraphY;
 
     const extent: [[number, number], [number, number]] = [
-      [this.minGraphX - width / 2, this.minGraphY - height / 2],
-      [this.maxGraphX + width / 2, this.maxGraphY + height / 2]
+      [this.minGraphX - this.width / 2, this.minGraphY - this.height / 2],
+      [this.maxGraphX + this.width / 2, this.maxGraphY + this.height / 2]
     ];
 
-    return [[width, height], extent];
+    return extent;
   }
 
 }