[Zelos] Fix dynamic connection shape size (#3324)

* Better reporting of connection height and width for dynamic connections

core/renderers/geras/measurables/inputs.js

@@ -25,9 +25,9 @@
 goog.provide('Blockly.geras.InlineInput');
 goog.provide('Blockly.geras.StatementInput');
 
-goog.require('Blockly.blockRendering.Connection');
 goog.require('Blockly.utils.object');
 
+
 /**
  * An object containing information about the space an inline input takes up
  * during rendering

core/renderers/measurables/connections.js

@@ -47,6 +47,7 @@ Blockly.blockRendering.Connection = function(constants, connectionModel) {
       constants);
   this.connectionModel = connectionModel;
   this.shape = this.constants_.shapeFor(connectionModel);
+  this.isDynamicShape = !!this.shape.isDynamic;
   this.type |= Blockly.blockRendering.Types.CONNECTION;
 };
 Blockly.utils.object.inherits(Blockly.blockRendering.Connection,
@@ -67,21 +68,27 @@ Blockly.blockRendering.OutputConnection = function(constants, connectionModel) {
   Blockly.blockRendering.OutputConnection.superClass_.constructor.call(this,
       constants, connectionModel);
   this.type |= Blockly.blockRendering.Types.OUTPUT_CONNECTION;
-  this.height = this.shape.height;
-  this.width = this.shape.width;
+
+  this.setShapeDimensions(
+    !this.isDynamicShape ? this.shape.height : 0,
+    !this.isDynamicShape ? this.shape.width : 0);
+
   this.connectionOffsetY = this.constants_.TAB_OFFSET_FROM_TOP;
-  this.startX = this.width;
 };
 Blockly.utils.object.inherits(Blockly.blockRendering.OutputConnection,
     Blockly.blockRendering.Connection);
 
+
 /**
- * Whether or not the connection shape is dynamic. Dynamic shapes get their
- * height from the block.
- * @return {boolean} True if the connection shape is dynamic.
+ * Sets properties that depend on the connection shape dimensions.
+ * @param {number} height Height of the connection shape.
+ * @param {number} width Width of the connection shape.
  */
-Blockly.blockRendering.OutputConnection.prototype.isDynamic = function() {
-  return this.shape.isDynamic;
+Blockly.blockRendering.OutputConnection.prototype.setShapeDimensions = function(
+    height, width) {
+  this.height = height;
+  this.width = width;
+  this.startX = this.width;
 };
 
 /**

core/renderers/measurables/inputs.js

@@ -107,9 +107,26 @@ Blockly.blockRendering.InlineInput = function(constants, input) {
       constants, input);
   this.type |= Blockly.blockRendering.Types.INLINE_INPUT;
 
+  this.setShapeDimensions(
+    !this.isDynamicShape ? this.shape.height : 0,
+    !this.isDynamicShape ? this.shape.width : 0);
+
+  this.connectionOffsetY = this.constants_.TAB_OFFSET_FROM_TOP;
+};
+Blockly.utils.object.inherits(Blockly.blockRendering.InlineInput,
+    Blockly.blockRendering.InputConnection);
+
+
+/**
+ * Sets properties that depend on the connection shape dimensions.
+ * @param {number} height Height of the connection shape.
+ * @param {number} width Width of the connection shape.
+ */
+Blockly.blockRendering.InlineInput.prototype.setShapeDimensions = function(
+    height, width) {
   if (!this.connectedBlock) {
     this.height = this.constants_.EMPTY_INLINE_INPUT_HEIGHT;
-    this.width = this.shape.width +
+    this.width = width +
         this.constants_.EMPTY_INLINE_INPUT_PADDING;
   } else {
     // We allow the dark path to show on the parent block so that the child
@@ -117,13 +134,9 @@ Blockly.blockRendering.InlineInput = function(constants, input) {
     this.width = this.connectedBlockWidth;
     this.height = this.connectedBlockHeight;
   }
-
-  this.connectionOffsetY = this.constants_.TAB_OFFSET_FROM_TOP;
-  this.connectionHeight = this.shape.height;
-  this.connectionWidth = this.shape.width;
+  this.connectionHeight = height;
+  this.connectionWidth = width;
 };
-Blockly.utils.object.inherits(Blockly.blockRendering.InlineInput,
-    Blockly.blockRendering.InputConnection);
 
 /**
  * An object containing information about the space a statement input takes up
@@ -149,8 +162,7 @@ Blockly.blockRendering.StatementInput = function(constants, input) {
     this.height =
         this.connectedBlockHeight + this.constants_.STATEMENT_BOTTOM_SPACER;
   }
-  this.width = this.constants_.NOTCH_OFFSET_LEFT +
-      this.shape.width;
+  this.width = this.constants_.NOTCH_OFFSET_LEFT + this.shape.width;
 };
 Blockly.utils.object.inherits(Blockly.blockRendering.StatementInput,
     Blockly.blockRendering.InputConnection);
@@ -171,19 +183,33 @@ Blockly.blockRendering.ExternalValueInput = function(constants, input) {
       constants, input);
   this.type |= Blockly.blockRendering.Types.EXTERNAL_VALUE_INPUT;
 
+  this.setShapeDimensions(
+    !this.isDynamicShape ? this.shape.height : 0,
+    !this.isDynamicShape ? this.shape.width : 0);
+
+  this.connectionOffsetY = this.constants_.TAB_OFFSET_FROM_TOP;
+};
+Blockly.utils.object.inherits(Blockly.blockRendering.ExternalValueInput,
+    Blockly.blockRendering.InputConnection);
+
+
+/**
+ * Sets properties that depend on the connection shape dimensions.
+ * @param {number} height Height of the connection shape.
+ * @param {number} width Width of the connection shape.
+ */
+Blockly.blockRendering.ExternalValueInput.prototype.setShapeDimensions = function(
+    height, width) {
   if (!this.connectedBlock) {
-    this.height = this.shape.height;
+    this.height = height;
   } else {
     this.height =
         this.connectedBlockHeight - this.constants_.TAB_OFFSET_FROM_TOP -
         this.constants_.MEDIUM_PADDING;
   }
-  this.width = this.shape.width +
+  this.width = width +
       this.constants_.EXTERNAL_VALUE_INPUT_PADDING;
 
-  this.connectionOffsetY = this.constants_.TAB_OFFSET_FROM_TOP;
-  this.connectionHeight = this.shape.height;
-  this.connectionWidth = this.shape.width;
+  this.connectionHeight = height;
+  this.connectionWidth = width;
 };
-Blockly.utils.object.inherits(Blockly.blockRendering.ExternalValueInput,
-    Blockly.blockRendering.InputConnection);

core/renderers/measurables/rows.js

@@ -515,7 +515,8 @@ Blockly.blockRendering.InputRow.prototype.measure = function() {
         connectedBlockWidths += elem.connectedBlockWidth;
       } else if (Blockly.blockRendering.Types.isExternalInput(elem) &&
           elem.connectedBlockWidth != 0) {
-        connectedBlockWidths += (elem.connectedBlockWidth - elem.connectionWidth);
+        connectedBlockWidths += (elem.connectedBlockWidth -
+          elem.connectionWidth);
       }
     }
     if (!(Blockly.blockRendering.Types.isSpacer(elem))) {

core/renderers/zelos/constants.js

@@ -111,9 +111,13 @@ Blockly.zelos.ConstantProvider.prototype.makeHexagonal = function() {
   }
 
   return {
-    width: 0,
-    height: 0,
     isDynamic: true,
+    width: function(height) {
+      return height / 2;
+    },
+    height: function(height) {
+      return height;
+    },
     pathDown: function(height) {
       return makeMainPath(height, false, false);
     },
@@ -145,9 +149,13 @@ Blockly.zelos.ConstantProvider.prototype.makeRounded = function() {
   }
 
   return {
-    width: 0,
-    height: 0,
     isDynamic: true,
+    width: function(height) {
+      return height / 2;
+    },
+    height: function(height) {
+      return height;
+    },
     pathDown: function(height) {
       return makeMainPath(height, false, false);
     },

core/renderers/zelos/drawer.js

@@ -51,7 +51,7 @@ Blockly.utils.object.inherits(Blockly.zelos.Drawer,
  */
 Blockly.zelos.Drawer.prototype.drawOutline_ = function() {
   if (this.info_.outputConnection &&
-      this.info_.outputConnection.isDynamic()) {
+      this.info_.outputConnection.isDynamicShape) {
     this.drawFlatTop_();
     this.drawRightDynamicConnection_();
     this.drawFlatBottom_();

core/renderers/zelos/info.js

@@ -77,6 +77,11 @@ Blockly.zelos.RenderInfo = function(renderer, block) {
    * @override
    */
   this.bottomRow = new Blockly.zelos.BottomRow(this.constants_);
+
+  /**
+   * @override
+   */
+  this.isInline = true;
 };
 Blockly.utils.object.inherits(Blockly.zelos.RenderInfo,
     Blockly.blockRendering.RenderInfo);
@@ -90,6 +95,20 @@ Blockly.zelos.RenderInfo.prototype.getRenderer = function() {
   return /** @type {!Blockly.zelos.Renderer} */ (this.renderer_);
 };
 
+/**
+ * @override
+ */
+Blockly.zelos.RenderInfo.prototype.computeBounds_ = function() {
+  Blockly.zelos.RenderInfo.superClass_.computeBounds_.call(this);
+
+  if (this.outputConnection && this.outputConnection.isDynamicShape) {
+    // Add right connection width.
+    var rightConnectionWidth = this.outputConnection.width;
+    this.width += rightConnectionWidth;
+    this.widthWithChildren += rightConnectionWidth;
+  }
+};
+
 /**
  * @override
  */
@@ -97,7 +116,7 @@ Blockly.zelos.RenderInfo.prototype.getInRowSpacing_ = function(prev, next) {
   if (!prev || !next) {
     // No need for padding at the beginning or end of the row if the
     // output shape is dynamic.
-    if (this.outputConnection && this.outputConnection.isDynamic()) {
+    if (this.outputConnection && this.outputConnection.isDynamicShape) {
       return this.constants_.NO_PADDING;
     }
   }
@@ -314,30 +333,41 @@ Blockly.zelos.RenderInfo.prototype.finalize_ = function() {
     row.yPos = yCursor;
     yCursor += row.height;
   }
-  // Dynamic output connections depend on the height of the block. Adjust the
-  // height and width of the connection, and then adjust the startX and width of the
-  // block accordingly.
-  var outputConnectionWidth = 0;
-  if (this.outputConnection && !this.outputConnection.height) {
-    this.outputConnection.height = yCursor;
-    outputConnectionWidth = yCursor; // Twice the width to account for the right side.
-    this.outputConnection.width = outputConnectionWidth / 2;
+  this.height = yCursor;
+
+  if (this.outputConnection && this.outputConnection.isDynamicShape) {
+    // Dynamic output connections depend on the height of the block. Adjust the
+    // height of the connection.
+    this.outputConnection.setShapeDimensions(
+        this.outputConnection.shape.height(this.height),
+        this.outputConnection.shape.width(this.height));
+
+    // Recompute the bounds as we now know the output connection dimensions.
+    this.computeBounds_();
   }
-  this.startX += outputConnectionWidth / 2;
-  this.width += outputConnectionWidth;
 
   var widestRowWithConnectedBlocks = 0;
   for (var i = 0, row; (row = this.rows[i]); i++) {
     row.xPos = this.startX;
 
+    for (var j = 0, elem; (elem = row.elements[j]); j++) {
+      if (Blockly.blockRendering.Types.isInlineInput(elem) ||
+        Blockly.blockRendering.Types.isExternalInput(elem)) {
+        if (elem.isDynamicShape) {
+          elem.setShapeDimensions(elem.shape.height(elem.height),
+              elem.shape.width(elem.height));
+        }
+      }
+    }
+
     widestRowWithConnectedBlocks =
         Math.max(widestRowWithConnectedBlocks, row.widthWithConnectedBlocks);
     this.recordElemPositions_(row);
   }
 
-  this.widthWithChildren = widestRowWithConnectedBlocks + this.startX;
+  this.widthWithChildren = Math.max(this.widthWithChildren,
+      widestRowWithConnectedBlocks + this.startX);
 
-  this.height = yCursor;
   this.startY = this.topRow.capline;
-  this.bottomRow.baseline = yCursor - this.bottomRow.descenderHeight;
+  this.bottomRow.baseline = this.height - this.bottomRow.descenderHeight;
 };