diff --git a/tools/turbolizer/src/graph-view.ts b/tools/turbolizer/src/graph-view.ts index 848d51f455..138230d1e0 100644 --- a/tools/turbolizer/src/graph-view.ts +++ b/tools/turbolizer/src/graph-view.ts @@ -37,8 +37,6 @@ export class GraphView extends View implements PhaseView { graphElement: d3.Selection; visibleNodes: d3.Selection; visibleEdges: d3.Selection; - width: number; - height: number; drag: d3.DragBehavior; panZoom: d3.ZoomBehavior; visibleBubbles: d3.Selection; @@ -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) } } diff --git a/tools/turbolizer/src/graph.ts b/tools/turbolizer/src/graph.ts index dfbbecf49d..edee601219 100644 --- a/tools/turbolizer/src/graph.ts +++ b/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; } }