Add a spacer before and after a statement input and place use it to render a right corner before and after the statement input. (#2967)

core/renderers/common/drawer.js

@@ -111,7 +111,7 @@ Blockly.blockRendering.Drawer.prototype.hideHiddenIcons_ = function() {
  */
 Blockly.blockRendering.Drawer.prototype.drawOutline_ = function() {
   this.drawTop_();
-  for (var r = 1; r < this.info_.rows.length - 2; r++) {
+  for (var r = 1; r < this.info_.rows.length - 1; r++) {
     var row = this.info_.rows[r];
     if (row.hasJaggedEdge) {
       this.drawJaggedEdge_(row);

core/renderers/common/info.js

@@ -425,7 +425,8 @@ Blockly.blockRendering.RenderInfo.prototype.alignStatementRow_ = function(row) {
   // 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;
+  var rightCornerWidth = this.constants_.INSIDE_CORNERS.rightWidth || 0;
+  desiredWidth = this.width - this.startX - rightCornerWidth;
   statementInput.width += (desiredWidth - currentWidth);
   row.width += (desiredWidth - currentWidth);
   row.widthWithConnectedBlocks = Math.max(row.width,

core/renderers/zelos/constants.js

@@ -231,3 +231,33 @@ Blockly.zelos.ConstantProvider.prototype.makeOutsideCorners = function() {
     bottomLeft: bottomLeft
   };
 };
+
+/**
+ * @override
+ */
+Blockly.zelos.ConstantProvider.prototype.makeInsideCorners = function() {
+  var radius = this.CORNER_RADIUS;
+
+  var innerTopLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
+      Blockly.utils.svgPaths.point(-radius, radius));
+
+  var innerTopRightCorner = Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
+      Blockly.utils.svgPaths.point(-radius, radius));
+
+  var innerBottomLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
+      Blockly.utils.svgPaths.point(radius, radius));
+
+  var innerBottomRightCorner = Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
+      Blockly.utils.svgPaths.point(radius, radius));
+
+  return {
+    width: radius,
+    height: radius,
+    pathTop: innerTopLeftCorner,
+    pathBottom: innerBottomLeftCorner,
+    rightWidth: radius,
+    rightHeight: radius,
+    pathTopRight: innerTopRightCorner,
+    pathBottomRight: innerBottomRightCorner
+  };
+};

core/renderers/zelos/drawer.js

@@ -90,7 +90,9 @@ Blockly.zelos.Drawer.prototype.drawBottom_ = function() {
   this.positionNextConnection_();
 
   this.outlinePath_ +=
-    Blockly.utils.svgPaths.lineOnAxis('v', bottomRow.height - bottomRow.overhangY);
+    Blockly.utils.svgPaths.lineOnAxis('v',
+        bottomRow.height - bottomRow.overhangY -
+        this.constants_.INSIDE_CORNERS.rightHeight);
 
   for (var i = elems.length - 1, elem; (elem = elems[i]); i--) {
     if (Blockly.blockRendering.Types.isNextConnection(elem)) {
@@ -106,3 +108,29 @@ Blockly.zelos.Drawer.prototype.drawBottom_ = function() {
     }
   }
 };
+
+/**
+ * Add steps for the right side of a row that does not have value or
+ * statement input connections.
+ * @param {!Blockly.blockRendering.Row} row The row to draw the
+ *     side of.
+ * @protected
+ */
+Blockly.zelos.Drawer.prototype.drawRightSideRow_ = function(row) {
+  if (row.type & Blockly.blockRendering.Types.getType('BEFORE_STATEMENT_SPACER_ROW')) {
+    var remainingHeight = row.height - this.constants_.INSIDE_CORNERS.rightWidth;
+    this.outlinePath_ +=
+        (remainingHeight > 0 ?
+            Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + remainingHeight) : '') +
+        this.constants_.INSIDE_CORNERS.pathTopRight;
+  } else if (row.type & Blockly.blockRendering.Types.getType('AFTER_STATEMENT_SPACER_ROW')) {
+    var remainingHeight = row.height - this.constants_.INSIDE_CORNERS.rightWidth;
+    this.outlinePath_ +=
+        this.constants_.INSIDE_CORNERS.pathBottomRight +
+        (remainingHeight > 0 ?
+            Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height) : '');
+  } else {
+    this.outlinePath_ +=
+        Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height);
+  }
+};

core/renderers/zelos/info.js

@@ -47,6 +47,8 @@ goog.require('Blockly.blockRendering.OutputConnection');
 
 goog.require('Blockly.RenderedConnection');
 
+goog.require('Blockly.zelos.AfterStatementSpacerRow');
+goog.require('Blockly.zelos.BeforeStatementSpacerRow');
 goog.require('Blockly.zelos.BottomRow');
 goog.require('Blockly.zelos.TopRow');
 
@@ -231,6 +233,56 @@ Blockly.zelos.RenderInfo.prototype.getInRowSpacing_ = function(prev, next) {
   return this.constants_.MEDIUM_PADDING;
 };
 
+/**
+ * Create a spacer row to go between prev and next, and set its size.
+ * @param {?Blockly.blockRendering.Row} prev The previous row, or null.
+ * @param {?Blockly.blockRendering.Row} next The next row, or null.
+ * @return {!Blockly.blockRendering.SpacerRow} The newly created spacer row.
+ * @protected
+ */
+Blockly.zelos.RenderInfo.prototype.makeSpacerRow_ = function(prev, next) {
+  var height = this.getSpacerRowHeight_(prev, next);
+  var width = this.getSpacerRowWidth_(prev, next);
+  if (Blockly.blockRendering.Types.isInputRow(next) && next.hasStatement) {
+    var spacer =
+        new Blockly.zelos.BeforeStatementSpacerRow(
+            Math.max(height, this.constants_.INSIDE_CORNERS.rightHeight || 0),
+            width);
+  } else if (Blockly.blockRendering.Types.isInputRow(prev) && prev.hasStatement) {
+    var spacer =
+        new Blockly.zelos.AfterStatementSpacerRow(
+            Math.max(height, this.constants_.INSIDE_CORNERS.rightHeight || 0),
+            width);
+  } else {
+    var spacer = new Blockly.blockRendering.SpacerRow(height, width);
+  }
+  if (prev.hasStatement) {
+    spacer.followsStatement = true;
+  }
+  return spacer;
+};
+
+
+/**
+ * @override
+ */
+Blockly.zelos.RenderInfo.prototype.getSpacerRowHeight_ = function(
+    prev, next) {
+  // If we have an empty block add a spacer to increase the height.
+  if (Blockly.blockRendering.Types.isTopRow(prev) &&
+      Blockly.blockRendering.Types.isBottomRow(next)) {
+    return this.constants_.EMPTY_BLOCK_SPACER_HEIGHT;
+  }
+  // Top and bottom rows act as a spacer so we don't need any extra padding.
+  if ((Blockly.blockRendering.Types.isTopRow(prev) && !prev.hasPreviousConnection)) {
+    return this.constants_.NO_PADDING;
+  }
+  if ((Blockly.blockRendering.Types.isBottomRow(next) && !next.hasNextConnection)) {
+    return this.constants_.NO_PADDING;
+  }
+  return this.constants_.MEDIUM_PADDING;
+};
+
 /**
  * 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

core/renderers/zelos/measurables/rows.js

@@ -27,9 +27,12 @@
 
 goog.provide('Blockly.zelos.BottomRow');
 goog.provide('Blockly.zelos.TopRow');
+goog.provide('Blockly.zelos.AfterStatementSpacerRow');
+goog.provide('Blockly.zelos.BeforeStatementSpacerRow');
 
 goog.require('Blockly.blockRendering.BottomRow');
 goog.require('Blockly.blockRendering.TopRow');
+goog.require('Blockly.blockRendering.SpacerRow');
 
 
 /**
@@ -133,3 +136,39 @@ Blockly.zelos.BottomRow.prototype.hasRightSquareCorner = function(_block) {
   // Never render a right square corner. Always round.
   return false;
 };
+
+/**
+ * An object containing information about a row spacer that comes right
+ *   before a statement input.
+ * @param {number} height The height of the spacer.
+ * @param {number} width The width of the spacer.
+ * @package
+ * @constructor
+ * @extends {Blockly.blockRendering.SpacerRow}
+ */
+Blockly.zelos.BeforeStatementSpacerRow = function(height, width) {
+  Blockly.zelos.BeforeStatementSpacerRow.superClass_.constructor.call(
+      this, height, width);
+  this.type |=
+      Blockly.blockRendering.Types.getType('BEFORE_STATEMENT_SPACER_ROW');
+};
+goog.inherits(Blockly.zelos.BeforeStatementSpacerRow,
+    Blockly.blockRendering.SpacerRow);
+
+/**
+ * An object containing information about a row spacer that comes right
+ *   after a statement input.
+ * @param {number} height The height of the spacer.
+ * @param {number} width The width of the spacer.
+ * @package
+ * @constructor
+ * @extends {Blockly.blockRendering.SpacerRow}
+ */
+Blockly.zelos.AfterStatementSpacerRow = function(height, width) {
+  Blockly.zelos.AfterStatementSpacerRow.superClass_.constructor.call(
+      this, height, width);
+  this.type |=
+      Blockly.blockRendering.Types.getType('AFTER_STATEMENT_SPACER_ROW');
+};
+goog.inherits(Blockly.zelos.AfterStatementSpacerRow,
+    Blockly.blockRendering.SpacerRow);