Merge pull request #2806 from rachel-fenichel/hats_and_tabs

Hats and tabs
2026-01-10 02:17:09 +01:00 · 2019-08-13 13:27:24 -07:00
parent 7ecb841d8c 71e720444f
commit 4758b4aa55
8 changed files with 160 additions and 119 deletions
--- a/core/flyout_base.js
+++ b/core/flyout_base.js
@@ -723,20 +723,9 @@ Blockly.Flyout.prototype.moveRectToBlock_ = function(rect, block) {
  rect.setAttribute('width', blockHW.width);
  rect.setAttribute('height', blockHW.height);

-  // For hat blocks we want to shift them down by the hat height
-  // since the y coordinate is the corner, not the top of the hat.
-  var hatOffset =
-      block.startHat_ ? Blockly.BlockSvg.START_HAT_HEIGHT : 0;
-  if (hatOffset) {
-    block.moveBy(0, hatOffset);
-  }
-
-  // Blocks with output tabs are shifted a bit.
-  var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
  var blockXY = block.getRelativeToSurfaceXY();
  rect.setAttribute('y', blockXY.y);
-  rect.setAttribute('x',
-      this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab);
+  rect.setAttribute('x', this.RTL ? blockXY.x - blockHW.width : blockXY.x);
 };

 /**
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -132,20 +132,19 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
    this.highlighter_.drawRightSideRow(topRow);
  }
  this.positionPreviousConnection_();
-
+  this.steps_.push(
+      Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY));
  for (var i = 0, elem; elem = elements[i]; i++) {
-    if (elem.type === 'square corner') {
-      this.steps_.push(Blockly.blockRendering.constants.START_POINT);
-    } else if (elem.type === 'round corner') {
-      this.steps_.push(Blockly.blockRendering.constants.TOP_LEFT_CORNER_START,
-          Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
+    if (elem.type === 'round corner') {
+      this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
    } else if (elem.type === 'previous connection') {
-      this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathLeft);
+      this.steps_.push(topRow.notchShape.pathLeft);
    } else if (elem.type === 'hat') {
      this.steps_.push(Blockly.blockRendering.constants.START_HAT.path);
    } else if (elem.isSpacer()) {
      this.steps_.push('h', elem.width);
    }
+    // No branch for a square corner, because it's a no-op.
  }
  this.steps_.push('v', topRow.height);
 };
@@ -177,7 +176,7 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
  if (this.highlighter_) {
    this.highlighter_.drawValueInput(row);
  }
-  this.steps_.push('H', row.width);
+  this.steps_.push('H', row.xPos + row.width);
  this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
  this.steps_.push('v', row.height - input.connectionHeight);
  this.positionExternalValueConnection_(row);
@@ -195,7 +194,8 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
    this.highlighter_.drawStatementInput(row);
  }
  // Where to start drawing the notch, which is on the right side in LTR.
-  var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
+  var x = row.xPos + row.statementEdge +
+    Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
    Blockly.blockRendering.constants.NOTCH.width;

  this.steps_.push('H', x);
@@ -224,8 +224,8 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
  if (this.highlighter_) {
    this.highlighter_.drawRightSideRow(row);
  }
-  this.steps_.push('H', row.width);
-  this.steps_.push('v', row.height);
+  this.steps_.push('H', row.xPos + row.width);
+  this.steps_.push('V', row.yPos + row.height);
 };


@@ -245,9 +245,9 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
  for (var i = elems.length - 1; i >= 0; i--) {
    var elem = elems[i];
    if (elem.type === 'next connection') {
-      this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathRight);
+      this.steps_.push(bottomRow.notchShape.pathRight);
    } else if (elem.type === 'square corner') {
-      this.steps_.push('H 0');
+      this.steps_.push(Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos));
    } else if (elem.type === 'round corner') {
      this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft);
    } else if (elem.isSpacer()) {
@@ -269,9 +269,9 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
  var outputConnection = this.info_.outputConnection;
  this.positionOutputConnection_();
  if (outputConnection) {
+    var tabBottom = outputConnection.connectionOffsetY + outputConnection.height;
    // Draw a line up to the bottom of the tab.
-    this.steps_.push('V',
-        outputConnection.connectionOffsetY + outputConnection.height);
+    this.steps_.push('V', tabBottom);
    this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathUp);
  }
  // Close off the path.  This draws a vertical line up to the start of the
@@ -360,7 +360,7 @@ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) {

  this.inlineSteps_.push('M', connectionRight + ',' + yPos);
  this.inlineSteps_.push('v ', connectionTop);
-  this.inlineSteps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
+  this.inlineSteps_.push(input.connectionShape.pathDown);
  this.inlineSteps_.push('v', height - connectionBottom);
  this.inlineSteps_.push('h', width - input.connectionWidth);
  this.inlineSteps_.push('v', -height);
@@ -382,6 +382,7 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio
  var yPos = input.centerline - input.height / 2;
  // Move the connection.
  if (input.connection) {
+    // xPos already contains info about startX
    var connX = input.xPos + input.connectionWidth +
        Blockly.blockRendering.constants.DARK_PATH_OFFSET;
    if (this.info_.RTL) {
@@ -403,7 +404,7 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio
 Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = function(row) {
  var input = row.getLastInput();
  if (input.connection) {
-    var connX = row.statementEdge +
+    var connX = row.xPos + row.statementEdge +
        Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
    if (this.info_.RTL) {
      connX *= -1;
@@ -424,7 +425,7 @@ Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = func
 Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = function(row) {
  var input = row.getLastInput();
  if (input.connection) {
-    var connX = row.width + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
+    var connX = row.xPos + row.width + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
    if (this.info_.RTL) {
      connX *= -1;
    }
@@ -437,10 +438,11 @@ Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = funct
 * @private
 */
 Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() {
-  if (this.info_.topRow.hasPreviousConnection) {
-    var x = Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
+  var topRow = this.info_.topRow;
+  if (topRow.hasPreviousConnection) {
+    var x = topRow.xPos + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
    var connX = (this.info_.RTL ? -x : x);
-    this.info_.topRow.connection.setOffsetInBlock(connX, 0);
+    topRow.connection.setOffsetInBlock(connX, 0);
  }
 };

@@ -453,10 +455,11 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {

  if (bottomRow.hasNextConnection) {
    var connInfo = bottomRow.getNextConnection();
-    var x = connInfo.xPos;
+    var x = connInfo.xPos; // Already contains info about startX
    var connX = (this.info_.RTL ? -x : x) + 0.5;
    bottomRow.connection.setOffsetInBlock(
-        connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET);
+        connX, this.info_.height +
+            Blockly.blockRendering.constants.DARK_PATH_OFFSET);
  }
 };

@@ -467,7 +470,9 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
 */
 Blockly.blockRendering.Drawer.prototype.positionOutputConnection_ = function() {
  if (this.info_.outputConnection) {
-    this.block_.outputConnection.setOffsetInBlock(0,
+    var x = this.info_.startX;
+    var connX = this.info_.RTL ? -x : x;
+    this.block_.outputConnection.setOffsetInBlock(connX,
        this.info_.outputConnection.connectionOffsetY);
  }
 };
--- a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js
@@ -72,7 +72,7 @@ Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, is
  this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
      {
        'class': 'rowSpacerRect blockRenderDebug',
-        'x': isRtl ? -row.width : 0,
+        'x': isRtl ? -(row.xPos + row.width) : row.xPos,
        'y': cursorY,
        'width': row.width,
        'height': row.height,
@@ -183,7 +183,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY,
  this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
      {
        'class': 'elemRenderingRect blockRenderDebug',
-        'x': isRtl ? -row.width : 0,
+        'x': isRtl ? -(row.xPos + row.width) : row.xPos,
        'y': cursorY ,
        'width': row.width,
        'height': row.height,
@@ -241,6 +241,7 @@ Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(width, height,
 Blockly.blockRendering.Debug.prototype.drawDebug = function(block, info) {
  this.clearElems();
  this.svgRoot_ = block.getSvgRoot();
+
  var cursorY = 0;
  for (var r = 0; r < info.rows.length; r++) {
    var row = info.rows[r];
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -72,6 +72,8 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) {
 };

 Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
+  this.steps_.push(
+      Blockly.utils.svgPaths.moveBy(row.xPos, this.info_.startY));
  for (var i = 0, elem; elem = row.elements[i]; i++) {
    if (elem.type === 'square corner') {
      this.steps_.push(Blockly.blockRendering.highlightConstants.START_POINT);
@@ -82,7 +84,7 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
      this.steps_.push(this.notchPaths_.pathLeft);
    } else if (elem.type === 'hat') {
      this.steps_.push(this.startPaths_.path(this.RTL_));
-    } else if (elem.isSpacer()) {
+    } else if (elem.isSpacer() && elem.width != 0) {
      // The end point of the spacer needs to be offset by the highlight amount.
      // So instead of using the spacer's width for a relative horizontal, use
      // its width and position for an absolute horizontal move.
@@ -90,7 +92,8 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
    }
  }

-  this.steps_.push('H', row.width - this.highlightOffset_);
+  var right = row.xPos + row.width - this.highlightOffset_;
+  this.steps_.push('H', right);
 };

 Blockly.blockRendering.Highlighter.prototype.drawJaggedEdge_ = function(row) {
@@ -107,17 +110,16 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
  var input = row.getLastInput();
  var steps = '';
  if (this.RTL_) {
-    var aboveTabHeight = -this.highlightOffset_;
-    var belowTabHeight =
-        row.height - input.connectionHeight + this.highlightOffset_;
+    var belowTabHeight = row.height - input.connectionHeight;

    steps =
-        Blockly.utils.svgPaths.lineOnAxis('v', aboveTabHeight) +
+        Blockly.utils.svgPaths.moveTo(
+            row.xPos + row.width - this.highlightOffset_, row.yPos) +
        this.puzzleTabPaths_.pathDown(this.RTL_) +
        Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight);
  } else {
    steps =
-        Blockly.utils.svgPaths.moveTo(row.width, row.yPos) +
+        Blockly.utils.svgPaths.moveTo(row.xPos + row.width, row.yPos) +
        this.puzzleTabPaths_.pathDown(this.RTL_);
  }

@@ -126,61 +128,78 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {

 Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) {
  var steps = '';
+  var statementEdge = row.xPos + row.statementEdge;
  if (this.RTL_) {
    var innerHeight = row.height - (2 * this.insideCornerPaths_.height);
    steps =
-        Blockly.utils.svgPaths.moveTo(row.statementEdge, row.yPos) +
+        Blockly.utils.svgPaths.moveTo(statementEdge, row.yPos) +
        this.insideCornerPaths_.pathTop(this.RTL_) +
        Blockly.utils.svgPaths.lineOnAxis('v', innerHeight) +
        this.insideCornerPaths_.pathBottom(this.RTL_);
  } else {
    steps =
-        Blockly.utils.svgPaths.moveTo(row.statementEdge, row.yPos + row.height) +
+        Blockly.utils.svgPaths.moveTo(statementEdge, row.yPos + row.height) +
        this.insideCornerPaths_.pathBottom(this.RTL_);
  }
  this.steps_.push(steps);
 };

 Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
+  var rightEdge = row.xPos + row.width - this.highlightOffset_;
  if (row.followsStatement) {
-    this.steps_.push('H', row.width);
+    this.steps_.push('H', rightEdge);
  }
  if (this.RTL_) {
-    this.steps_.push('H', row.width - this.highlightOffset_);
-    this.steps_.push('v', row.height);
+    this.steps_.push('H', rightEdge);
+    this.steps_.push('V', row.yPos + row.height - this.highlightOffset_);
  }
 };

-Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(_row) {
-  var height = this.info_.height;
+Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) {
+  var height = row.yPos + row.height;

  // Highlight the vertical edge of the bottom row on the input side.
  // Highlighting is always from the top left, both in LTR and RTL.
  if (this.RTL_) {
-    this.steps_.push('V', height);
+    this.steps_.push('V', height - this.highlightOffset_);
  } else {
    var cornerElem = this.info_.bottomRow.elements[0];
    if (cornerElem.type === 'square corner') {
      this.steps_.push(
          Blockly.utils.svgPaths.moveTo(
-              this.highlightOffset_, height - this.highlightOffset_));
+              row.xPos + this.highlightOffset_,
+              height - this.highlightOffset_));
    } else if (cornerElem.type === 'round corner') {
-      this.steps_.push(this.outsideCornerPaths_.bottomLeft(height));
+      this.steps_.push(Blockly.utils.svgPaths.moveTo(row.xPos, height));
+      this.steps_.push(this.outsideCornerPaths_.bottomLeft());
    }
  }
 };

 Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
-  if (this.info_.outputConnection) {
+  var outputConnection = this.info_.outputConnection;
+  if (outputConnection) {
+    var tabBottom =
+        outputConnection.connectionOffsetY + outputConnection.height;
+    // Draw a line up to the bottom of the tab.
+    if (!this.RTL_) {
+      var left = this.info_.startX + this.highlightOffset_;
+      var bottom = this.info_.height - this.highlightOffset_;
+      this.steps_.push(Blockly.utils.svgPaths.moveTo(left, bottom));
+      this.steps_.push('V', tabBottom);
+    } else {
+      this.steps_.push(Blockly.utils.svgPaths.moveTo(this.info_.startX, tabBottom));
+    }
    this.steps_.push(
        this.puzzleTabPaths_.pathUp(this.RTL_));
  }

  if (!this.RTL_) {
-    if (this.info_.topRow.elements[0].isSquareCorner()) {
-      this.steps_.push('V', this.highlightOffset_);
-    } else {
+    var topRow = this.info_.topRow;
+    if (topRow.elements[0].isRoundedCorner()) {
      this.steps_.push('V', this.outsideCornerPaths_.height);
+    } else {
+      this.steps_.push('V', topRow.startY + this.highlightOffset_);
    }
  }
 };
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -118,6 +118,11 @@ Blockly.blockRendering.RenderInfo = function(block) {
  this.topRow = null;
  this.bottomRow = null;

+  // The position of the start point for drawing, relative to the block's
+  // location.
+  this.startX = 0;
+  this.startY = 0;
+
  this.measure_();
 };

@@ -221,7 +226,9 @@ Blockly.blockRendering.RenderInfo.prototype.createTopRow_ = function() {
  }

  if (hasHat) {
-    this.topRow.elements.push(new Blockly.blockRendering.Hat());
+    var hat = new Blockly.blockRendering.Hat();
+    this.topRow.elements.push(hat);
+    this.startY = hat.startY;
  } else if (hasPrevious) {
    this.topRow.elements.push(new Blockly.blockRendering.PreviousConnection());
  }
@@ -512,6 +519,12 @@ Blockly.blockRendering.RenderInfo.prototype.computeBounds_ = function() {

  this.widthWithChildren =
      Math.max(blockWidth, widestRowWithConnectedBlocks);
+
+  if (this.outputConnection) {
+    this.startX = this.outputConnection.width;
+    this.width += this.outputConnection.width;
+    this.widthWithChildren += this.outputConnection.width;
+  }
 };

 /**
@@ -525,7 +538,7 @@ Blockly.blockRendering.RenderInfo.prototype.alignRowElements_ = function() {
    var row = this.rows[r];
    if (!row.hasStatement && !row.hasInlineInput) {
      var currentWidth = row.width;
-      var desiredWidth = this.width;
+      var desiredWidth = this.width - this.startX;
      if (row.type === 'bottom row' && row.hasFixedWidth) {
        desiredWidth = Blockly.blockRendering.constants.MAX_BOTTOM_WIDTH;
      }
@@ -623,7 +636,7 @@ Blockly.blockRendering.RenderInfo.prototype.getSpacerRowWidth_ = function(prev,
  if (next.type === 'bottom row' && next.hasFixedWidth) {
    return next.width;
  }
-  return this.width;
+  return this.width - this.startX;
 };

 /**
@@ -694,16 +707,19 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
  for (var r = 0; r < this.rows.length; r++) {
    var row = this.rows[r];
    row.yPos = yCursor;
+    row.xPos = this.startX;
    yCursor += row.height;
    // Add padding to the bottom row if block height is less than minimum
+    var heightWithoutHat = yCursor - this.topRow.startY;
    if (row == this.bottomRow &&
-        yCursor < Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT) {
-      this.bottomRow.height +=
-          Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT - yCursor;
-      yCursor = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT;
+        heightWithoutHat < Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT) {
+      // But the hat height shouldn't be part of this.
+      var diff = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT - heightWithoutHat;
+      this.bottomRow.height += diff;
+      yCursor += diff;
    }
    if (!(row.isSpacer())) {
-      var xCursor = 0;
+      var xCursor = row.xPos;
      for (var e = 0; e < row.elements.length; e++) {
        var elem = row.elements[e];
        elem.xPos = xCursor;
@@ -712,7 +728,6 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
      }
    }
  }
-  this.blockBottom = yCursor;

  this.height = yCursor;
 };
--- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js
+++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
@@ -108,13 +108,12 @@ Blockly.blockRendering.constants.SPACER_DEFAULT_HEIGHT = 15;

 Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT = 24;

-Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_WIDTH =
-    Blockly.blockRendering.constants.TAB_WIDTH + 14.5;
+Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_PADDING = 14.5;

 Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_HEIGHT =
    Blockly.blockRendering.constants.TAB_HEIGHT + 11;

-Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_WIDTH = 10;
+Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_PADDING = 2;

 /**
 * The height of an empty statement input.  Note that in the old rendering this
@@ -134,13 +133,6 @@ Blockly.blockRendering.constants.POPULATED_STATEMENT_INPUT_WIDTH = 25;

 Blockly.blockRendering.constants.START_POINT = Blockly.utils.svgPaths.moveBy(0, 0);

-/**
- * SVG start point for drawing the top-left corner.
- * @const
- */
-Blockly.blockRendering.constants.TOP_LEFT_CORNER_START =
-    'm 0,' + Blockly.blockRendering.constants.CORNER_RADIUS;
-
 /**
 * Height of SVG path for jagged teeth at the end of collapsed blocks.
 * @const
@@ -183,6 +175,7 @@ Blockly.blockRendering.constants.START_HAT = (function() {
  var width = Blockly.blockRendering.constants.START_HAT_WIDTH;

  var mainPath =
+      Blockly.utils.svgPaths.moveBy(0, height) +
      Blockly.utils.svgPaths.curve('c',
          [
            Blockly.utils.svgPaths.point(30, -height),
@@ -291,8 +284,11 @@ Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() {
   * SVG path for drawing the rounded top-left corner.
   * @const
   */
-  var topLeft = Blockly.utils.svgPaths.arc('A', '0 0,1', radius,
-      Blockly.utils.svgPaths.point(radius, 0));
+
+  var topLeft =
+      Blockly.utils.svgPaths.moveBy(0, radius) +
+      Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
+          Blockly.utils.svgPaths.point(radius, -radius));

  var bottomLeft = Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
      Blockly.utils.svgPaths.point(-radius, -radius));
--- a/core/renderers/block_rendering_rewrite/highlight_constants.js
+++ b/core/renderers/block_rendering_rewrite/highlight_constants.js
@@ -103,39 +103,36 @@ Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER = (function() {
   */
  var distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset;

-  /**
-   * SVG start point for drawing the top-left corner's highlight in RTL.
-   * @const
-   */
-  var topLeftCornerStartRtl =
-      Blockly.utils.svgPaths.moveBy(distance45inside, distance45inside);
-
-  /**
-   * SVG start point for drawing the top-left corner's highlight in LTR.
-   * @const
-   */
-  var topLeftCornerStartLtr =
-      Blockly.utils.svgPaths.moveBy(offset, radius - offset);
-
+  var topLeftStartX = distance45inside;
+  var topLeftStartY = distance45inside;
+  var topLeftCornerHighlightRtl =
+      Blockly.utils.svgPaths.moveBy(topLeftStartX, topLeftStartY) +
+      Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset,
+          Blockly.utils.svgPaths.point(radius - topLeftStartX, -topLeftStartY + offset));
  /**
   * SVG path for drawing the highlight on the rounded top-left corner.
   * @const
   */
-  var topLeftCornerHighlight =
-      Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset,
-          Blockly.utils.svgPaths.point(radius, offset));
+  var topLeftCornerHighlightLtr =
+      Blockly.utils.svgPaths.moveBy(offset, radius) +
+      Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset,
+          Blockly.utils.svgPaths.point(radius, -radius + offset));
+
+  var bottomLeftStartX = distance45inside;
+  var bottomLeftStartY = -distance45inside;
+  var bottomLeftPath = Blockly.utils.svgPaths.moveBy(
+      bottomLeftStartX, bottomLeftStartY) +
+          Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset,
+              Blockly.utils.svgPaths.point(-bottomLeftStartX + offset,
+                  -bottomLeftStartY - radius));

  return {
    height: radius,
    topLeft: function(rtl) {
-      var start = rtl ? topLeftCornerStartRtl : topLeftCornerStartLtr;
-      return start + topLeftCornerHighlight;
+      return rtl ? topLeftCornerHighlightRtl : topLeftCornerHighlightLtr;
    },
-    bottomLeft: function(yPos) {
-      return Blockly.utils.svgPaths.moveTo(
-          distance45inside + offset, yPos - distance45inside) +
-          Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset,
-              Blockly.utils.svgPaths.point(offset, yPos - radius));
+    bottomLeft: function() {
+      return bottomLeftPath;
    }
  };
 })();
@@ -150,7 +147,7 @@ Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() {
  var verticalOverlap = 2.5;

  var highlightRtlUp =
-      Blockly.utils.svgPaths.moveTo(width * -0.25, 8.4) +
+      Blockly.utils.svgPaths.moveBy(-2, -height + verticalOverlap + 0.9) +
      Blockly.utils.svgPaths.lineTo(width * -0.45, -2.1);

  var highlightRtlDown =
@@ -165,18 +162,14 @@ Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() {
      Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap);

  var highlightLtrUp =
-      // TODO: Move this 'V' out.
-      Blockly.utils.svgPaths.lineOnAxis('V',
-          height + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) +
+      Blockly.utils.svgPaths.lineOnAxis('v', -1.5) +
      Blockly.utils.svgPaths.moveBy(width * -0.92, -0.5) +
      Blockly.utils.svgPaths.curve('q',
          [
            Blockly.utils.svgPaths.point(width * -0.19, -5.5),
            Blockly.utils.svgPaths.point(0,-11)
          ]) +
-      Blockly.utils.svgPaths.moveBy(width * 0.92, 1) +
-      Blockly.utils.svgPaths.lineOnAxis('V', 0.5) +
-      Blockly.utils.svgPaths.lineOnAxis('H', 1);
+      Blockly.utils.svgPaths.moveBy(width * 0.92, 1);

  var highlightLtrDown =
      Blockly.utils.svgPaths.moveBy(-5, height - 0.7) +
@@ -216,6 +209,7 @@ Blockly.blockRendering.highlightConstants.JAGGED_TEETH = (function() {
 })();

 Blockly.blockRendering.highlightConstants.START_HAT = (function() {
+  var hatHeight = Blockly.blockRendering.constants.START_HAT.height;
  var pathRtl =
      Blockly.utils.svgPaths.moveBy(25, -8.7) +
      Blockly.utils.svgPaths.curve('c',
@@ -232,7 +226,7 @@ Blockly.blockRendering.highlightConstants.START_HAT = (function() {
            Blockly.utils.svgPaths.point(45.3, -14.9),
            Blockly.utils.svgPaths.point(75, -8.7)
          ]) +
-      Blockly.utils.svgPaths.moveTo(100.5, 0.5);
+      Blockly.utils.svgPaths.moveTo(100.5, hatHeight + 0.5);
  return {
    path: function(rtl) {
      return rtl ? pathRtl : pathLtr;
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -255,12 +255,12 @@ Blockly.blockRendering.InlineInput = function(input) {

  if (!this.connectedBlock) {
    this.height = Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_HEIGHT;
-    this.width = Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_WIDTH;
+    this.width = this.connectionShape.width +
+        Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_PADDING;
  } else {
    // We allow the dark path to show on the parent block so that the child
    // block looks embossed.  This takes up an extra pixel in both x and y.
    this.width = this.connectedBlockWidth +
-        Blockly.blockRendering.constants.TAB_WIDTH +
        Blockly.blockRendering.constants.DARK_PATH_OFFSET;
    this.height = this.connectedBlockHeight + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
  }
@@ -316,7 +316,8 @@ Blockly.blockRendering.ExternalValueInput = function(input) {
    this.height =
        this.connectedBlockHeight - 2 * Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
  }
-  this.width = Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_WIDTH;
+  this.width = this.connectionShape.width +
+      Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_PADDING;

  this.connectionOffsetY = Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
  this.connectionHeight = this.connectionShape.height;
@@ -337,6 +338,7 @@ Blockly.blockRendering.OutputConnection = function() {
  this.height = this.connectionShape.height;
  this.width = this.connectionShape.width;
  this.connectionOffsetY = Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
+  this.startX = this.width;
 };
 goog.inherits(Blockly.blockRendering.OutputConnection, Blockly.blockRendering.Measurable);

@@ -378,8 +380,9 @@ goog.inherits(Blockly.blockRendering.NextConnection, Blockly.blockRendering.Meas
 Blockly.blockRendering.Hat = function() {
  Blockly.blockRendering.Hat.superClass_.constructor.call(this);
  this.type = 'hat';
-  this.height = Blockly.blockRendering.constants.NO_PADDING;
+  this.height = Blockly.blockRendering.constants.START_HAT.height;
  this.width = Blockly.blockRendering.constants.START_HAT.width;
+  this.startY = this.height;

 };
 goog.inherits(Blockly.blockRendering.Hat, Blockly.blockRendering.Measurable);
@@ -448,9 +451,12 @@ Blockly.blockRendering.Row.prototype.measure = function() {
  for (var e = 0; e < this.elements.length; e++) {
    var elem = this.elements[e];
    this.width += elem.width;
-    if (elem.isInput &&
-        (elem.type == 'statement input' || elem.type == 'external value input')) {
-      connectedBlockWidths += elem.connectedBlockWidth;
+    if (elem.isInput) {
+      if (elem.type == 'statement input') {
+        connectedBlockWidths += elem.connectedBlockWidth;
+      } else if (elem.type == 'external value input') {
+        connectedBlockWidths += (elem.connectedBlockWidth - elem.connectionWidth);
+      }
    }
    if (!(elem.isSpacer())) {
      this.height = Math.max(this.height, elem.height);
@@ -512,6 +518,7 @@ Blockly.blockRendering.TopRow = function(block) {

  this.elements = [];
  this.type = 'top row';
+  this.startY = 0;

  this.hasPreviousConnection = !!block.previousConnection;
  this.connection = block.previousConnection;
@@ -537,6 +544,21 @@ Blockly.blockRendering.TopRow.prototype.getPreviousConnection = function() {
  return null;
 };

+Blockly.blockRendering.TopRow.prototype.measure = function() {
+  for (var e = 0; e < this.elements.length; e++) {
+    var elem = this.elements[e];
+    this.width += elem.width;
+    if (!(elem.isSpacer())) {
+      if (elem.type == 'hat') {
+        this.startY = elem.startY;
+        this.height = this.height + elem.height;
+      }
+      this.height = Math.max(this.height, elem.height);
+    }
+  }
+  this.widthWithConnectedBlocks = this.width;
+};
+
 Blockly.blockRendering.BottomRow = function(block) {
  Blockly.blockRendering.BottomRow.superClass_.constructor.call(this);
  this.type = 'bottom row';