Fixing zoom perf in azdata graph. (#74)

Author: aasimkhan30

dist/build.js

@@ -25912,32 +25912,31 @@ mxPolyline.prototype.paintCurvedLine = function(c, pts)
 
 __mxOutput.mxPolyline = typeof mxPolyline !== 'undefined' ? mxPolyline : undefined;
 
- function mxPolygon(points, fill, stroke, strokewidth)
- {
-     mxPolyline.call(this);
-     this.points = points;
-     this.stroke = stroke;
-     this.fill = fill; 
-     this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- 
- /**
-  * Extends mxPolyline.
-  */
-  mxUtils.extend(mxPolygon, mxPolyline);
- 
- /**
-  * Function: paintLine: overriding paintline function of polyline to paint the entire shape instead of just the line
-  * 
-  * Paints the polygon
-  */
-  mxPolygon.prototype.paintLine = function(c, pts, rounded)
- {
-     var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
-     c.begin();
-     this.addPoints(c, pts, rounded, arcSize, true);
-     c.fillAndStroke();
- };
+function mxPolygon(points, fill, stroke, strokewidth) {
+    mxPolyline.call(this);
+    this.points = points;
+    this.stroke = stroke;
+    this.fill = fill;
+    this.strokewidth = (strokewidth != null) ? strokewidth : 1;
+};
+
+/**
+ * Extends mxPolyline.
+ */
+mxUtils.extend(mxPolygon, mxPolyline);
+
+/**
+ * Function: paintLine: overriding paintline function of polyline to paint the entire shape instead of just the line
+ * 
+ * Paints the polygon
+ */
+mxPolygon.prototype.paintLine = function (c, pts, rounded) {
+    var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+    c.begin();
+    this.addPoints(c, pts, rounded, arcSize, true);
+    c.fillAndStroke();
+};
+
 __mxOutput.mxPolygon = typeof mxPolygon !== 'undefined' ? mxPolygon : undefined;
 
 /**
@@ -52618,22 +52617,22 @@ mxGraphView.prototype.getScale = function()
  *
  * value - Decimal value that specifies the new scale (1 is 100%).
  */
-mxGraphView.prototype.setScale = function(value)
-{
+mxGraphView.prototype.setScale = function (value) {
+	this.graph.container.style.display = 'none';
 	var previousScale = this.scale;
-	
-	if (this.scale != value)
-	{
+
+	if (this.scale != value) {
 		this.scale = value;
 
-		if (this.isEventsEnabled())
-		{
+		if (this.isEventsEnabled()) {
 			this.viewStateChanged();
 		}
 	}
-	
+
 	this.fireEvent(new mxEventObject(mxEvent.SCALE,
 		'scale', value, 'previousScale', previousScale));
+
+	this.graph.container.style.display = '';
 };
 
 /**
@@ -92860,12 +92859,22 @@ const GRAPH_PADDING_LEFT = 80;
 const CELL_WIDTH = 70;
 const CELL_HEIGHT = 70;
 
+class PolygonRoot {
+    constructor(cell, fillColor, strokeColor, strokeWidth) {
+        this.cell = cell;
+        this.fillColor = fillColor;
+        this.strokeColor = strokeColor;
+        this.strokeWidth = strokeWidth;
+    }
+}
+
 class Point {
     constructor(x, y) {
         this.x = x;
         this.y = y;
     }
 }
+
 class GraphNodeLayoutHelper {
     constructor() {
         this.layoutPoints = [];
@@ -92906,6 +92915,7 @@ class GraphNodeLayoutHelper {
             else {
                 this.layoutPoints.push(new Point(xPosition, yPosition));
             }
+            
             return;
         }
 
@@ -92956,6 +92966,7 @@ class GraphNodeLayoutHelper {
                 this.layoutPoints.splice(insertIndex + 1, lastIndex - insertIndex - 1);
                 return;
             }
+
             ++lastIndex;
         }
 
@@ -92972,6 +92983,7 @@ class GraphNodeLayoutHelper {
             if (rowX < this.layoutPoints[i].x) {
                 break;
             }
+
             yPosition = Math.max(this.layoutPoints[i].y, yPosition);
         }
         return yPosition;
@@ -92989,6 +93001,8 @@ function azdataQueryPlan(container, queryPlanGraph, iconPaths, badgeIconPaths) {
 
 azdataQueryPlan.prototype.init = function (container, iconPaths, badgeIconPaths) {
     this.container = container;
+    this.polygonRoots = [];
+    this.drawnPolygons = [];
     this.badges = [];
     mxEvent.addListener(window, 'unload', mxUtils.bind(this, function () {
         this.destroy();
@@ -93228,6 +93242,7 @@ azdataQueryPlan.prototype.init = function (container, iconPaths, badgeIconPaths)
 
         while (stack.length > 0) {
             var entry = stack.pop();
+
             if (entry.node.children) {
                 for (var i = 0; i < entry.node.children.length; ++i) {
                     var node = entry.node.children[i];
@@ -93237,12 +93252,15 @@ azdataQueryPlan.prototype.init = function (container, iconPaths, badgeIconPaths)
                         rand = Math.floor((Math.random() * icons.length));
                         iconName = 'azdataQueryplan-' + icons[rand];
                     }
+
                     if (node.position.x > maxX) {
                         maxX = node.position.x;
                     }
+
                     if (node.position.y > maxY) {
                         maxY = node.position.y;
                     }
+
                     vertex = graph.insertVertex(parent, node.id, node, node.position.x, node.position.y, CELL_WIDTH, CELL_HEIGHT, iconName);
                     this.addBadges(vertex, badgeIconPaths);
 
@@ -93288,7 +93306,6 @@ azdataQueryPlan.prototype.placeGraphNodes = function () {
     this.SetNodePositionRecursive(this.queryPlanGraph, startX, startY);
 }
 
-
 azdataQueryPlan.prototype.SetNodePositionRecursive = function (node, x, y) {
 
     // Recursively setting all the x positions in the graph.
@@ -93298,7 +93315,6 @@ azdataQueryPlan.prototype.SetNodePositionRecursive = function (node, x, y) {
 
 }
 
-
 azdataQueryPlan.prototype.setNodeXPositionRecursive = function (node, x) {
     // Place the node at given position
     node.position = new Point(x, 0);
@@ -93357,25 +93373,35 @@ azdataQueryPlan.prototype.setNodeYPositionRecursive = function (node, layoutHelp
 }
 
 
-azdataQueryPlan.prototype.zoomIn = function(){
-    if(this.graph.view.getScale() * this.graph.zoomFactor <= 2){
+azdataQueryPlan.prototype.zoomIn = function () {
+    this.removeDrawnPolygons();
+
+    if (this.graph.view.getScale() * this.graph.zoomFactor <= 2) {
         this.graph.zoomIn();
     } else {
         this.graph.zoomTo(2)
     }
     this.redrawBadges();
+    this.redrawPolygons();
 }
 
-azdataQueryPlan.prototype.zoomOut = function(){
+azdataQueryPlan.prototype.zoomOut = function () {
+    this.removeDrawnPolygons();
+
     this.graph.zoomOut();
     this.redrawBadges();
+    this.redrawPolygons();
 }
 
-azdataQueryPlan.prototype.zoomToFit = function(){
+azdataQueryPlan.prototype.zoomToFit = function () {
+    this.removeDrawnPolygons();
+
     this.graph.fit(undefined, true, 20);
     this.redrawBadges();
     this.graph.view.rendering = true;
     this.graph.refresh();
+
+    this.redrawPolygons();
 }
 
 azdataQueryPlan.prototype.registerGraphCallback = function (eventType, callback) {
@@ -93389,6 +93415,8 @@ azdataQueryPlan.prototype.getZoomLevelPercentage = function () {
 };
 
 azdataQueryPlan.prototype.zoomTo = function (zoomPercentage) {
+    this.removeDrawnPolygons();
+
     const ZOOM_PERCENTAGE_MINIMUM = 1;
     const ZOOM_PERCENTAGE_MAXIMUM = 200;
 
@@ -93401,7 +93429,7 @@ azdataQueryPlan.prototype.zoomTo = function (zoomPercentage) {
         parsedZoomLevel = ZOOM_PERCENTAGE_MINIMUM;
     }
 
-    if(parsedZoomLevel > ZOOM_PERCENTAGE_MAXIMUM) {
+    if (parsedZoomLevel > ZOOM_PERCENTAGE_MAXIMUM) {
         parsedZoomLevel = ZOOM_PERCENTAGE_MAXIMUM;
     }
 
@@ -93467,7 +93495,7 @@ azdataQueryPlan.prototype.addBadges = function (cell, badgeIconPaths) {
             img.style.left = `${positionX}px`;
             img.style.top = `${positionY}px`;
             img.setAttribute('initLeft', positionX);
-            img.setAttribute('initTop', positionY); 
+            img.setAttribute('initTop', positionY);
             img.setAttribute('initHeight', badgeHeight);
             img.setAttribute('initWidth', badgeWidth);
             this.graph.container.appendChild(img);
@@ -93477,7 +93505,7 @@ azdataQueryPlan.prototype.addBadges = function (cell, badgeIconPaths) {
     }
 }
 
-azdataQueryPlan.prototype.redrawBadges = function(){
+azdataQueryPlan.prototype.redrawBadges = function () {
     this.badges.forEach(b => {
         b.style.left = b.getAttribute('initLeft') * this.graph.view.getScale() + 'px';
         b.style.top = b.getAttribute('initTop') * this.graph.view.getScale() + 'px';
@@ -93488,30 +93516,59 @@ azdataQueryPlan.prototype.redrawBadges = function(){
 
 /**
  * Draws a polygon using the points given
- * @param {*} pts  array of points for all the corners of the polygon. A point has x and y attributes. 
+ * @param {*} cell starting cell where the polygon will start to be drawn. 
  * @param {*} fillColor string value for the fill color. Supported values are hex, rbg and rbga
  * @param {*} strokeColor string value for the stroke/border color. Supported values are hex, rbg and rbga
  * @param {*} strokeWidth thickness of the stroke
  */
-azdataQueryPlan.prototype.drawPolygon = function(pts, fillColor, strokeColor, strokeWidth){
+azdataQueryPlan.prototype.drawPolygon = function (cell, fillColor, strokeColor, strokeWidth) {
+    let scale = this.graph.view.getScale();
+    let points = this.getPolygonPerimeter(cell);
 
-    var samplePolygon = new mxPolygon(
-        pts.map(p => new mxPoint(p.x, p.y)),
+    var polygon = new mxPolygon(
+        points.map(p => new mxPoint(p.x * scale, p.y * scale)),
         fillColor,
         strokeColor,
         strokeWidth
-    )
-    samplePolygon.init(this.graph.getView().getBackgroundPane());
-    samplePolygon.isDashed = true;
-    samplePolygon.redraw();
+    );
+    polygon.init(this.graph.getView().getBackgroundPane());
+    polygon.isDashed = true;
+    polygon.redraw();
+
+    this.polygonRoots.push(new PolygonRoot(cell, fillColor, strokeColor, strokeWidth));
+    this.drawnPolygons.push(polygon);
+}
+
+/**
+ * Removes all drawn polygons on the execution plan.
+ */
+azdataQueryPlan.prototype.removeDrawnPolygons = function () {
+    while (this.drawnPolygons.length !== 0) {
+        let polygon = this.drawnPolygons.pop();
+        polygon.destroy();
+    }
+}
+
+/**
+ * Redraws all polygons on the execution plan.
+ */
+azdataQueryPlan.prototype.redrawPolygons = function () {
+    let polygonCount = this.polygonRoots.length;
+
+    while (polygonCount !== 0) {
+        let polygonRoot = this.polygonRoots.pop();
+        this.drawPolygon(polygonRoot.cell, polygonRoot.fillColor, polygonRoot.strokeColor, polygonRoot.strokeWidth);
+
+        polygonCount--;
+    }
 }
 
 /**
  * Gets an array of points that represents the perimeter for a polygon.
  * @param {*} cell The starting node where the perimeter will start being outlined.
  * @returns an array of points
  */
-azdataQueryPlan.prototype.getPolygonPerimeter = function(cell) {
+azdataQueryPlan.prototype.getPolygonPerimeter = function (cell) {
     let points = [];
     points = points.concat(this.getLeftSidePoints(cell));
     points = points.concat(this.getBottomSidePoints(cell));
@@ -93528,10 +93585,11 @@ const NODE_WIDTH = 100;
  * @param {*} cell The starting node for the left side perimeter points.
  * @returns an array of points for the left side of the starting node in the polygon.
  */
-azdataQueryPlan.prototype.getLeftSidePoints = function(cell) {
+azdataQueryPlan.prototype.getLeftSidePoints = function (cell) {
     let points = [];
-    points.push({ x: cell.geometry.x, y: cell.geometry.y });
-    points.push({ x: cell.geometry.x, y: cell.geometry.y + NODE_HEIGHT })
+    let xPosition = cell.geometry.x - 15; // subtracting to push the x coordinate to the left.
+    points.push({ x: xPosition, y: cell.geometry.y });
+    points.push({ x: xPosition, y: cell.geometry.y + NODE_HEIGHT })
 
     return points;
 }
@@ -93541,9 +93599,9 @@ azdataQueryPlan.prototype.getLeftSidePoints = function(cell) {
  * @param {*} cell The starting node where highlighting will begin.
  * @returns An array of points for the bottom side of the polygon.
  */
-azdataQueryPlan.prototype.getBottomSidePoints = function(cell) {
+azdataQueryPlan.prototype.getBottomSidePoints = function (cell) {
     let points = [];
-    var stack = [ cell ];
+    var stack = [cell];
 
     while (stack.length !== 0) {
         let entry = stack.pop();
@@ -93553,7 +93611,7 @@ azdataQueryPlan.prototype.getBottomSidePoints = function(cell) {
             let nextNode = this.graph.model.getCell(entry.value.children[entry.value.children.length - 1].id);
 
             if (entry.value.children.length > 1) {
-                let auxiliaryPoint = { x: entry.geometry.x + NODE_WIDTH, y: nextNode.geometry.y + NODE_HEIGHT};
+                let auxiliaryPoint = { x: entry.geometry.x + NODE_WIDTH, y: nextNode.geometry.y + NODE_HEIGHT };
                 points.push(auxiliaryPoint);
             }
 
@@ -93569,15 +93627,15 @@ azdataQueryPlan.prototype.getBottomSidePoints = function(cell) {
  * @param {*} cell The starting node where highlighting will begin.
  * @returns An array of points for the right side of the polygon.
  */
-azdataQueryPlan.prototype.getRightSidePoints = function(cell) {
+azdataQueryPlan.prototype.getRightSidePoints = function (cell) {
     let points = [];
     let leafNodes = this.getLeafNodes(cell);
 
     for (let nodeIndex = 0; nodeIndex < leafNodes.length; ++nodeIndex) {
         let leafNode = leafNodes[nodeIndex];
 
         points.push({ x: leafNode.geometry.x + NODE_WIDTH, y: leafNode.geometry.y + NODE_HEIGHT });
-        points.push({ x: leafNode.geometry.x + NODE_WIDTH, y: leafNode.geometry.y});
+        points.push({ x: leafNode.geometry.x + NODE_WIDTH, y: leafNode.geometry.y });
     }
 
     return points;
@@ -93588,13 +93646,13 @@ azdataQueryPlan.prototype.getRightSidePoints = function(cell) {
  * @param {*} cell The root node that will be used to find all of the leaf nodes
  * @returns An array of leaf nodes for a region from bottom-up
  */
-azdataQueryPlan.prototype.getLeafNodes = function(cell) {
+azdataQueryPlan.prototype.getLeafNodes = function (cell) {
     let leafNodeTable = {};
     let stack = [cell];
 
     while (stack.length !== 0) {
         let entry = stack.pop();
-        
+
         if (entry.value.children.length === 0) {
             if (entry.geometry.y in leafNodeTable) {
                 let previouslyCachedEntry = leafNodeTable[entry.geometry.y];