Geras inline alignment of rows + max bottom row width (#3575)

* Add a desired width getter method for input rows. Override in geras to fix the width of the bottom row and statement input to a max width.

core/renderers/common/constants.js

@@ -185,13 +185,6 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.BOTTOM_ROW_AFTER_STATEMENT_MIN_HEIGHT = this.LARGE_PADDING;
 
-  /**
-   * The maximum width of a bottom row that follows a statement input and has
-   * inputs inline.
-   * @type {number}
-   */
-  this.MAX_BOTTOM_WIDTH = 66.5;
-
   /**
    * Whether to add a 'hat' on top of all blocks with no previous or output
    * connections. Can be overridden by 'hat' property on Theme.BlockStyle.

core/renderers/common/info.js

@@ -554,15 +554,26 @@ Blockly.blockRendering.RenderInfo.prototype.alignRowElements_ = function() {
           /** @type {!Blockly.blockRendering.InputRow} */ (row));
     } else {
       var currentWidth = row.width;
-      var desiredWidth = this.width - this.startX;
+      var desiredWidth = this.getDesiredRowWidth_(row);
       var missingSpace = desiredWidth - currentWidth;
-      if (missingSpace) {
+      if (missingSpace > 0) {
         this.addAlignmentPadding_(row, missingSpace);
       }
     }
   }
 };
 
+/**
+ * Calculate the desired width of an input row.
+ * @param {!Blockly.blockRendering.Row} _row The input row.
+ * @return {number} The desired width of the input row.
+ * @protected
+ */
+Blockly.blockRendering.RenderInfo.prototype.getDesiredRowWidth_ = function(
+    _row) {
+  return this.width - this.startX;
+};
+
 /**
  * Modify the given row to add the given amount of padding around its fields.
  * The exact location of the padding is based on the alignment property of the
@@ -609,14 +620,13 @@ Blockly.blockRendering.RenderInfo.prototype.alignStatementRow_ = function(row) {
   var desiredWidth = this.statementEdge;
   // Add padding before the statement input.
   var missingSpace = desiredWidth - currentWidth;
-  if (missingSpace) {
+  if (missingSpace > 0) {
     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;
-  var rightCornerWidth = this.constants_.INSIDE_CORNERS.rightWidth || 0;
-  desiredWidth = this.width - this.startX - rightCornerWidth;
+  desiredWidth = this.getDesiredRowWidth_(row);
   statementInput.width += (desiredWidth - currentWidth);
   statementInput.height = Math.max(statementInput.height, row.height);
   row.width += (desiredWidth - currentWidth);

core/renderers/geras/constants.js

@@ -45,6 +45,13 @@ Blockly.geras.ConstantProvider = function() {
   // The dark/shadow path in classic rendering is the same as the normal block
   // path, but translated down one and right one.
   this.DARK_PATH_OFFSET = 1;
+
+  /**
+   * The maximum width of a bottom row that follows a statement input and has
+   * inputs inline.
+   * @type {number}
+   */
+  this.MAX_BOTTOM_WIDTH = 30;
 };
 Blockly.utils.object.inherits(Blockly.geras.ConstantProvider,
     Blockly.blockRendering.ConstantProvider);

core/renderers/geras/drawer.js

@@ -113,7 +113,10 @@ Blockly.geras.Drawer.prototype.drawStatementInput_ = function(row) {
  */
 Blockly.geras.Drawer.prototype.drawRightSideRow_ = function(row) {
   this.highlighter_.drawRightSideRow(row);
-  Blockly.geras.Drawer.superClass_.drawRightSideRow_.call(this, row);
+
+  this.outlinePath_ +=
+      Blockly.utils.svgPaths.lineOnAxis('H', row.xPos + row.width) +
+      Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height);
 };
 
 /**

core/renderers/geras/info.js

@@ -119,7 +119,8 @@ Blockly.geras.RenderInfo.prototype.addInput_ = function(input, activeRow) {
         this.constants_.DUMMY_INPUT_MIN_HEIGHT);
     activeRow.hasDummyInput = true;
   }
-  if (activeRow.align == null) {
+  // Ignore row alignment if inline.
+  if (!this.isInline && activeRow.align == null) {
     activeRow.align = input.align;
   }
 };
@@ -380,6 +381,68 @@ Blockly.geras.RenderInfo.prototype.getElemCenterline_ = function(row, elem) {
   return result;
 };
 
+/**
+ * @override
+ */
+Blockly.geras.RenderInfo.prototype.alignRowElements_ = function() {
+  if (!this.isInline) {
+    Blockly.geras.RenderInfo.superClass_.alignRowElements_.call(this);
+    return;
+  }
+
+  // Walk backgrounds through rows on the block, keeping track of the right
+  // input edge.
+  var nextRightEdge = 0;
+  var prevInput = null;
+  for (var i = this.rows.length - 1, row; (row = this.rows[i]); i--) {
+    row.nextRightEdge = nextRightEdge;
+    if (Blockly.blockRendering.Types.isInputRow(row)) {
+      if (row.hasStatement) {
+        this.alignStatementRow_(
+            /** @type {!Blockly.blockRendering.InputRow} */ (row));
+      }
+      if (prevInput && prevInput.hasStatement && row.width < prevInput.width) {
+        row.nextRightEdge = prevInput.width;
+      } else {
+        nextRightEdge = row.width;
+      }
+      prevInput = row;
+    }
+  }
+  // Walk down each row from the top, comparing the prev and next right input
+  // edges and setting the desired width to the max of the two.
+  var prevRightEdge = 0;
+  for (var i = 0, row; (row = this.rows[i]); i++) {
+    if (row.hasStatement) {
+      prevRightEdge = this.getDesiredRowWidth_(row);
+    } else if (Blockly.blockRendering.Types.isSpacer(row)) {
+      // Set the spacer row to the max of the prev or next input width.
+      row.width = Math.max(prevRightEdge, row.nextRightEdge);
+    } else {
+      var currentWidth = row.width;
+      var desiredWidth = Math.max(prevRightEdge, row.nextRightEdge);
+      var missingSpace = desiredWidth - currentWidth;
+      if (missingSpace > 0) {
+        this.addAlignmentPadding_(row, missingSpace);
+      }
+      prevRightEdge = row.width;
+    }
+  }
+};
+
+/**
+ * @override
+ */
+Blockly.geras.RenderInfo.prototype.getDesiredRowWidth_ = function(
+    row) {
+  // Limit the width of a statement row when a block is inline.
+  if (this.isInline && row.hasStatement) {
+    return this.statementEdge + this.constants_.MAX_BOTTOM_WIDTH + this.startX;
+  }
+  return Blockly.geras.RenderInfo.superClass_.getDesiredRowWidth_.call(this,
+      row);
+};
+
 /**
  * @override
  */

core/renderers/measurables/types.js

@@ -134,7 +134,8 @@ Blockly.blockRendering.Types.isIcon = function(elem) {
 
 /**
  * Whether a measurable stores information about a spacer.
- * @param {!Blockly.blockRendering.Measurable} elem The element to check.
+ * @param {!Blockly.blockRendering.Measurable|!Blockly.blockRendering.Row} elem
+ *     The element to check.
  * @return {number} 1 if the object stores information about a spacer.
  * @package
  */

core/renderers/zelos/info.js

@@ -144,6 +144,19 @@ Blockly.zelos.RenderInfo.prototype.shouldStartNewRow_ = function(input,
   return false;
 };
 
+
+/**
+ * @override
+ */
+Blockly.zelos.RenderInfo.prototype.getDesiredRowWidth_ = function(row) {
+  if (row.hasStatement) {
+    var rightCornerWidth = this.constants_.INSIDE_CORNERS.rightWidth || 0;
+    return this.width - this.startX - rightCornerWidth;
+  }
+  return Blockly.zelos.RenderInfo.superClass_.getDesiredRowWidth_.call(this,
+      row);
+};
+
 /**
  * @override
  */