Make statement inputs store their actual width. (#2944)

* Make statement inputs store their actual width.

core/renderers/common/drawer.js

@@ -194,7 +194,7 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
 Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
   var input = row.getLastInput();
   // Where to start drawing the notch, which is on the right side in LTR.
-  var x = input.xPos + input.width;
+  var x = input.xPos + input.notchOffset + input.shape.width;
 
   var innerTopLeftCorner =
       input.shape.pathRight +
@@ -208,7 +208,8 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
   this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('H', x) +
       innerTopLeftCorner +
       Blockly.utils.svgPaths.lineOnAxis('v', innerHeight) +
-      this.constants_.INSIDE_CORNERS.pathBottom;
+      this.constants_.INSIDE_CORNERS.pathBottom +
+      Blockly.utils.svgPaths.lineOnAxis('H', row.xPos + row.width);
 
   this.positionStatementInputConnection_(row);
 };
@@ -222,7 +223,6 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
  */
 Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
   this.outlinePath_ +=
-      Blockly.utils.svgPaths.lineOnAxis('H', row.xPos + row.width) +
       Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height);
 };
 

core/renderers/common/info.js

@@ -375,16 +375,15 @@ Blockly.blockRendering.RenderInfo.prototype.alignRowElements_ = function() {
     // TODO (#2921): this still doesn't handle the row having an inline input.
     if (!row.hasInlineInput) {
       if (row.hasStatement) {
-        var statementInput = row.getLastInput();
-        var currentWidth = row.width - statementInput.width;
-        var desiredWidth = this.statementEdge - this.startX;
+        this.alignStatementRow_(
+            /** @type {Blockly.RenderedConnection} */ (row));
       } else {
         var currentWidth = row.width;
         var desiredWidth = this.width - this.startX;
-      }
-      var missingSpace = desiredWidth - currentWidth;
-      if (missingSpace) {
-        this.addAlignmentPadding_(row, missingSpace);
+        var missingSpace = desiredWidth - currentWidth;
+        if (missingSpace) {
+          this.addAlignmentPadding_(row, missingSpace);
+        }
       }
     }
   }
@@ -407,6 +406,31 @@ Blockly.blockRendering.RenderInfo.prototype.addAlignmentPadding_ = function(row,
   }
 };
 
+/**
+ * Align the elements of a statement row based on computed bounds.
+ * Unlike other types of rows, statement rows add space in multiple places.
+ * @param {!Blockly.blockRendering.InputRow} row The statement row to resize.
+ * @protected
+ */
+Blockly.blockRendering.RenderInfo.prototype.alignStatementRow_ = function(row) {
+  var statementInput = row.getLastInput();
+  var currentWidth = row.width - statementInput.width;
+  var desiredWidth = this.statementEdge - this.startX;
+  // Add padding before the statement input.
+  var missingSpace = desiredWidth - currentWidth;
+  if (missingSpace) {
+    this.addAlignmentPadding_(row, missingSpace);
+  }
+  // Also widen the statement input to reach to the right side of the
+  // block. Note that this does not add padding.
+  currentWidth = row.width;
+  desiredWidth = this.width - this.startX;
+  statementInput.width += (desiredWidth - currentWidth);
+  row.width += (desiredWidth - currentWidth);
+  row.widthWithConnectedBlocks = Math.max(row.width,
+      this.statementEdge + row.connectedBlockWidths);
+};
+
 /**
  * Add spacers between rows and set their sizes.
  * @protected

core/renderers/measurables/rows.js

@@ -427,6 +427,13 @@ Blockly.blockRendering.SpacerRow.prototype.measure = function() {
 Blockly.blockRendering.InputRow = function() {
   Blockly.blockRendering.InputRow.superClass_.constructor.call(this);
   this.type = 'input row';
+
+  /**
+   * The total width of all blocks connected to this row.
+   * @type {number}
+   * @package
+   */
+  this.connectedBlockWidths = 0;
 };
 goog.inherits(Blockly.blockRendering.InputRow,
     Blockly.blockRendering.Row);
@@ -453,6 +460,7 @@ Blockly.blockRendering.InputRow.prototype.measure = function() {
       this.height = Math.max(this.height, elem.height);
     }
   }
+  this.connectedBlockWidths = connectedBlockWidths;
   this.widthWithConnectedBlocks = this.width + connectedBlockWidths;
 };