From da391da00580e4b94d683bf759fe67dae1a0a0f9 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Thu, 8 Aug 2019 11:53:25 -0700
Subject: [PATCH 01/13] Improvements for y offsets

---
 .../block_render_draw.js                      | 25 +++++----
 .../block_render_draw_highlight.js            | 25 +++++++--
 .../block_render_info.js                      | 13 ++++-
 .../block_rendering_constants.js              | 14 ++---
 .../highlight_constants.js                    | 55 ++++++++-----------
 tests/playground.html                         |  2 +-
 6 files changed, 74 insertions(+), 60 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index b9f097cc4..28cac3551 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -132,13 +132,16 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
     this.highlighter_.drawRightSideRow(topRow);
   }
   this.positionPreviousConnection_();
-
+  this.steps_.push(
+      Blockly.utils.svgPaths.moveBy(this.info_.startX, 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);
+      // Do nothing?
+      //this.steps_.push(
+          //Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
+      //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);
+      this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
     } else if (elem.type === 'previous connection') {
       this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathLeft);
     } else if (elem.type === 'hat') {
@@ -269,9 +272,10 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
   var outputConnection = this.info_.outputConnection;
   this.positionOutputConnection_();
   if (outputConnection) {
+    var tabBottom = this.info_.startY +
+        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
@@ -440,7 +444,7 @@ Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function()
   if (this.info_.topRow.hasPreviousConnection) {
     var x = Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
     var connX = (this.info_.RTL ? -x : x);
-    this.info_.topRow.connection.setOffsetInBlock(connX, 0);
+    this.info_.topRow.connection.setOffsetInBlock(connX, this.info_.startY);
   }
 };
 
@@ -456,7 +460,8 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
     var x = connInfo.xPos;
     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_.startY + this.info_.height +
+            Blockly.blockRendering.constants.DARK_PATH_OFFSET);
   }
 };
 
@@ -467,7 +472,7 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
  */
 Blockly.blockRendering.Drawer.prototype.positionOutputConnection_ = function() {
   if (this.info_.outputConnection) {
-    this.block_.outputConnection.setOffsetInBlock(0,
-        this.info_.outputConnection.connectionOffsetY);
+    this.block_.outputConnection.setOffsetInBlock(this.info_.startX,
+        this.info_.startY + this.info_.outputConnection.connectionOffsetY);
   }
 };
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index 234244450..32b33e0ca 100644
--- 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(this.info_.startX, 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);
@@ -151,8 +153,9 @@ Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
   }
 };
 
-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;
+  //var height = this.info_.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.
@@ -165,22 +168,32 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(_row) {
           Blockly.utils.svgPaths.moveTo(
               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(0, 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 = this.info_.startY +
+        outputConnection.connectionOffsetY + outputConnection.height;
+    // Draw a line up to the bottom of the tab.
+    if (!this.RTL_) {
+      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_);
+      this.steps_.push('V', this.info_.startY + this.highlightOffset_);
     } else {
-      this.steps_.push('V', this.outsideCornerPaths_.height);
+      this.steps_.push('V', this.info_.startY + this.outsideCornerPaths_.height);
     }
   }
 };
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index 9859e2e62..59e0312c4 100644
--- 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_();
 };
 
@@ -690,7 +695,7 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
   // Performance note: this could be combined with the draw pass, if the time
   // that this takes is excessive.  But it shouldn't be, because it only
   // accesses and sets properties that already exist on the objects.
-  var yCursor = 0;
+  var yCursor = this.startY;
   for (var r = 0; r < this.rows.length; r++) {
     var row = this.rows[r];
     row.yPos = yCursor;
@@ -703,7 +708,8 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
       yCursor = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT;
     }
     if (!(row.isSpacer())) {
-      var xCursor = 0;
+      // xcursor should start at startX (?)
+      var xCursor = this.startX;
       for (var e = 0; e < row.elements.length; e++) {
         var elem = row.elements[e];
         elem.xPos = xCursor;
@@ -714,5 +720,6 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
   }
   this.blockBottom = yCursor;
 
-  this.height = yCursor;
+  // Don't count the start offset in the recorded height.
+  this.height = yCursor - this.startY;
 };
diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
index e82ab67c7..690d747dd 100644
--- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js
+++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
@@ -134,13 +134,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
@@ -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));
diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js
index bd8ac7f32..9e33f13cc 100644
--- 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) +
diff --git a/tests/playground.html b/tests/playground.html
index 6e27cc0c7..3115d641b 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -122,7 +122,7 @@ function start() {
           {
             controls: true,
             wheel: true,
-            startScale: 1.0,
+            startScale: 2.0,
             maxScale: 4,
             minScale: 0.25,
             scaleSpeed: 1.1

From 74238d6e246f72cd45dda9e6fd18e81766ed1603 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Thu, 8 Aug 2019 15:38:55 -0700
Subject: [PATCH 02/13] Works for positive x and y offsets; fails for negative

---
 .../block_render_draw.js                      | 21 +++++++------
 .../block_render_draw_highlight.js            | 31 ++++++++++++-------
 .../highlight_constants.js                    |  2 +-
 3 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index 28cac3551..5d08671ec 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -180,7 +180,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', this.info_.startX + row.width);
   this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
   this.steps_.push('v', row.height - input.connectionHeight);
   this.positionExternalValueConnection_(row);
@@ -201,7 +201,7 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
   var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
     Blockly.blockRendering.constants.NOTCH.width;
 
-  this.steps_.push('H', x);
+  this.steps_.push('H', this.info_.startX + x);
 
   var innerTopLeftCorner =
       Blockly.blockRendering.constants.NOTCH.pathRight + ' h -' +
@@ -227,7 +227,7 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
   if (this.highlighter_) {
     this.highlighter_.drawRightSideRow(row);
   }
-  this.steps_.push('H', row.width);
+  this.steps_.push('H', this.info_.startX + row.width);
   this.steps_.push('v', row.height);
 };
 
@@ -250,7 +250,7 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
     if (elem.type === 'next connection') {
       this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathRight);
     } else if (elem.type === 'square corner') {
-      this.steps_.push('H 0');
+      this.steps_.push(Blockly.utils.svgPaths.lineOnAxis('H', this.info_.startX));
     } else if (elem.type === 'round corner') {
       this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft);
     } else if (elem.isSpacer()) {
@@ -386,6 +386,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) {
@@ -407,7 +408,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 = this.info_.startX + row.statementEdge +
         Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
     if (this.info_.RTL) {
       connX *= -1;
@@ -428,7 +429,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 = this.info_.startX + row.width + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
     if (this.info_.RTL) {
       connX *= -1;
     }
@@ -442,7 +443,7 @@ Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = funct
  */
 Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() {
   if (this.info_.topRow.hasPreviousConnection) {
-    var x = Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
+    var x = this.info_.startX + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
     var connX = (this.info_.RTL ? -x : x);
     this.info_.topRow.connection.setOffsetInBlock(connX, this.info_.startY);
   }
@@ -457,7 +458,7 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
 
   if (bottomRow.hasNextConnection) {
     var connInfo = bottomRow.getNextConnection();
-    var x = connInfo.xPos;
+    var x = connInfo.xPos; // Alreaady contains info about startX
     var connX = (this.info_.RTL ? -x : x) + 0.5;
     bottomRow.connection.setOffsetInBlock(
         connX, this.info_.startY + this.info_.height +
@@ -472,7 +473,9 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
  */
 Blockly.blockRendering.Drawer.prototype.positionOutputConnection_ = function() {
   if (this.info_.outputConnection) {
-    this.block_.outputConnection.setOffsetInBlock(this.info_.startX,
+    var x = this.info_.startX;
+    var connX = this.info_.RTL ? -x : x;
+    this.block_.outputConnection.setOffsetInBlock(connX,
         this.info_.startY + this.info_.outputConnection.connectionOffsetY);
   }
 };
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index 32b33e0ca..e0e9f631b 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -109,17 +109,19 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
   var input = row.getLastInput();
   var steps = '';
   if (this.RTL_) {
-    var aboveTabHeight = -this.highlightOffset_;
+    var aboveTabHeight = 0;//-this.highlightOffset_;
     var belowTabHeight =
-        row.height - input.connectionHeight + this.highlightOffset_;
+        row.height - input.connectionHeight;
 
     steps =
+        Blockly.utils.svgPaths.moveTo(
+            this.info_.startX + row.width - this.highlightOffset_, row.yPos) +
         Blockly.utils.svgPaths.lineOnAxis('v', aboveTabHeight) +
         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(this.info_.startX + row.width, row.yPos) +
         this.puzzleTabPaths_.pathDown(this.RTL_);
   }
 
@@ -131,13 +133,15 @@ Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row)
   if (this.RTL_) {
     var innerHeight = row.height - (2 * this.insideCornerPaths_.height);
     steps =
-        Blockly.utils.svgPaths.moveTo(row.statementEdge, row.yPos) +
+        Blockly.utils.svgPaths.moveTo(
+            this.info_.startX + row.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(
+            this.info_.startX + row.statementEdge, row.yPos + row.height) +
         this.insideCornerPaths_.pathBottom(this.RTL_);
   }
   this.steps_.push(steps);
@@ -145,30 +149,29 @@ Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row)
 
 Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
   if (row.followsStatement) {
-    this.steps_.push('H', row.width);
+    this.steps_.push('H', this.info_.startX + row.width - this.highlightOffset_);
   }
   if (this.RTL_) {
-    this.steps_.push('H', row.width - this.highlightOffset_);
-    this.steps_.push('v', row.height);
+    this.steps_.push('H', this.info_.startX + row.width - this.highlightOffset_);
+    this.steps_.push('v', row.height - this.highlightOffset_);
   }
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) {
   var height = row.yPos + row.height;
-  //var height = this.info_.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_));
+              this.info_.startX + this.highlightOffset_, height - this.highlightOffset_));
     } else if (cornerElem.type === 'round corner') {
-      this.steps_.push(Blockly.utils.svgPaths.moveTo(0, height));
+      this.steps_.push(Blockly.utils.svgPaths.moveTo(this.info_.startX, height));
       this.steps_.push(this.outsideCornerPaths_.bottomLeft());
     }
   }
@@ -181,6 +184,10 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
         outputConnection.connectionOffsetY + outputConnection.height;
     // Draw a line up to the bottom of the tab.
     if (!this.RTL_) {
+      this.steps_.push(
+          Blockly.utils.svgPaths.moveTo(
+              this.info_.startX + this.highlightOffset_,
+              this.info_.startY + this.info_.height - this.highlightOffset_));
       this.steps_.push('V', tabBottom);
     } else {
       this.steps_.push(Blockly.utils.svgPaths.moveTo(this.info_.startX, tabBottom));
diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js
index 9e33f13cc..c557e13bc 100644
--- a/core/renderers/block_rendering_rewrite/highlight_constants.js
+++ b/core/renderers/block_rendering_rewrite/highlight_constants.js
@@ -119,7 +119,7 @@ Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER = (function() {
           Blockly.utils.svgPaths.point(radius, -radius + offset));
 
   var bottomLeftStartX = distance45inside;
-  var bottomLeftStartY = - distance45inside;
+  var bottomLeftStartY = -distance45inside;
   var bottomLeftPath = Blockly.utils.svgPaths.moveBy(
       bottomLeftStartX, bottomLeftStartY) +
           Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset,

From c901b2048629af653abe34da5e8133ea889085b3 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Thu, 8 Aug 2019 15:47:14 -0700
Subject: [PATCH 03/13] Handle negative x and y origin

---
 .../block_rendering_rewrite/block_render_draw_highlight.js  | 2 +-
 core/renderers/block_rendering_rewrite/block_render_info.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index e0e9f631b..32c7af293 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -92,7 +92,7 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
     }
   }
 
-  this.steps_.push('H', row.width - this.highlightOffset_);
+  this.steps_.push('H', this.info_.startX + row.width - this.highlightOffset_);
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawJaggedEdge_ = function(row) {
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index 59e0312c4..c04c9c640 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -695,10 +695,10 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
   // Performance note: this could be combined with the draw pass, if the time
   // that this takes is excessive.  But it shouldn't be, because it only
   // accesses and sets properties that already exist on the objects.
-  var yCursor = this.startY;
+  var yCursor = 0;
   for (var r = 0; r < this.rows.length; r++) {
     var row = this.rows[r];
-    row.yPos = yCursor;
+    row.yPos = yCursor + this.startY;
     yCursor += row.height;
     // Add padding to the bottom row if block height is less than minimum
     if (row == this.bottomRow &&
@@ -721,5 +721,5 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
   this.blockBottom = yCursor;
 
   // Don't count the start offset in the recorded height.
-  this.height = yCursor - this.startY;
+  this.height = yCursor;
 };

From 67d6a2f4f81f3822c47f6d82004d608391f781a4 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Thu, 8 Aug 2019 15:51:48 -0700
Subject: [PATCH 04/13] Cleanup

---
 .../block_rendering_rewrite/block_render_draw.js       | 10 +++-------
 .../block_render_draw_highlight.js                     |  2 +-
 .../block_rendering_rewrite/block_render_info.js       |  3 ---
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index 5d08671ec..6120383c0 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -135,12 +135,7 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
   this.steps_.push(
       Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
   for (var i = 0, elem; elem = elements[i]; i++) {
-    if (elem.type === 'square corner') {
-      // Do nothing?
-      //this.steps_.push(
-          //Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
-      //this.steps_.push(Blockly.blockRendering.constants.START_POINT);
-    } else if (elem.type === 'round corner') {
+    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);
@@ -149,6 +144,7 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
     } 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);
 };
@@ -458,7 +454,7 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
 
   if (bottomRow.hasNextConnection) {
     var connInfo = bottomRow.getNextConnection();
-    var x = connInfo.xPos; // Alreaady contains info about startX
+    var x = connInfo.xPos; // Already contains info about startX
     var connX = (this.info_.RTL ? -x : x) + 0.5;
     bottomRow.connection.setOffsetInBlock(
         connX, this.info_.startY + this.info_.height +
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index 32c7af293..41bdfe267 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -109,7 +109,7 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
   var input = row.getLastInput();
   var steps = '';
   if (this.RTL_) {
-    var aboveTabHeight = 0;//-this.highlightOffset_;
+    var aboveTabHeight = 0;
     var belowTabHeight =
         row.height - input.connectionHeight;
 
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index c04c9c640..1f08e5729 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -708,7 +708,6 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
       yCursor = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT;
     }
     if (!(row.isSpacer())) {
-      // xcursor should start at startX (?)
       var xCursor = this.startX;
       for (var e = 0; e < row.elements.length; e++) {
         var elem = row.elements[e];
@@ -718,8 +717,6 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
       }
     }
   }
-  this.blockBottom = yCursor;
 
-  // Don't count the start offset in the recorded height.
   this.height = yCursor;
 };

From caec821fec1d79d9559e7ef8bf2ef8157e668041 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Thu, 8 Aug 2019 17:08:24 -0700
Subject: [PATCH 05/13] Cleanup

---
 .../block_render_draw.js                      |  5 ++--
 .../block_render_draw_highlight.js            | 30 +++++++++----------
 tests/playground.html                         |  2 +-
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index 6120383c0..47020c40f 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -194,10 +194,11 @@ 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 = this.info_.startX + row.statementEdge +
+    Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
     Blockly.blockRendering.constants.NOTCH.width;
 
-  this.steps_.push('H', this.info_.startX + x);
+  this.steps_.push('H', x);
 
   var innerTopLeftCorner =
       Blockly.blockRendering.constants.NOTCH.pathRight + ' h -' +
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index 41bdfe267..3a4e0ff2f 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -92,7 +92,8 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
     }
   }
 
-  this.steps_.push('H', this.info_.startX + row.width - this.highlightOffset_);
+  var right = this.info_.startX + row.width - this.highlightOffset_;
+  this.steps_.push('H', right);
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawJaggedEdge_ = function(row) {
@@ -109,14 +110,11 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
   var input = row.getLastInput();
   var steps = '';
   if (this.RTL_) {
-    var aboveTabHeight = 0;
-    var belowTabHeight =
-        row.height - input.connectionHeight;
+    var belowTabHeight = row.height - input.connectionHeight;
 
     steps =
         Blockly.utils.svgPaths.moveTo(
             this.info_.startX + row.width - this.highlightOffset_, row.yPos) +
-        Blockly.utils.svgPaths.lineOnAxis('v', aboveTabHeight) +
         this.puzzleTabPaths_.pathDown(this.RTL_) +
         Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight);
   } else {
@@ -130,29 +128,29 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
 
 Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) {
   var steps = '';
+  var statementEdge = this.info_.startX + row.statementEdge;
   if (this.RTL_) {
     var innerHeight = row.height - (2 * this.insideCornerPaths_.height);
     steps =
-        Blockly.utils.svgPaths.moveTo(
-            this.info_.startX + 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(
-            this.info_.startX + 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 = this.info_.startX + row.width - this.highlightOffset_;
   if (row.followsStatement) {
-    this.steps_.push('H', this.info_.startX + row.width - this.highlightOffset_);
+    this.steps_.push('H', rightEdge);
   }
   if (this.RTL_) {
-    this.steps_.push('H', this.info_.startX + row.width - this.highlightOffset_);
+    this.steps_.push('H', rightEdge);
     this.steps_.push('v', row.height - this.highlightOffset_);
   }
 };
@@ -169,7 +167,8 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) {
     if (cornerElem.type === 'square corner') {
       this.steps_.push(
           Blockly.utils.svgPaths.moveTo(
-              this.info_.startX + this.highlightOffset_, height - this.highlightOffset_));
+              this.info_.startX + this.highlightOffset_,
+              height - this.highlightOffset_));
     } else if (cornerElem.type === 'round corner') {
       this.steps_.push(Blockly.utils.svgPaths.moveTo(this.info_.startX, height));
       this.steps_.push(this.outsideCornerPaths_.bottomLeft());
@@ -184,10 +183,9 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
         outputConnection.connectionOffsetY + outputConnection.height;
     // Draw a line up to the bottom of the tab.
     if (!this.RTL_) {
-      this.steps_.push(
-          Blockly.utils.svgPaths.moveTo(
-              this.info_.startX + this.highlightOffset_,
-              this.info_.startY + this.info_.height - this.highlightOffset_));
+      var left = this.info_.startX + this.highlightOffset_;
+      var bottom = this.info_.startY + 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));
diff --git a/tests/playground.html b/tests/playground.html
index 3115d641b..6e27cc0c7 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -122,7 +122,7 @@ function start() {
           {
             controls: true,
             wheel: true,
-            startScale: 2.0,
+            startScale: 1.0,
             maxScale: 4,
             minScale: 0.25,
             scaleSpeed: 1.1

From eb19ea970aa8dbbc6d84afc652f85c972e0e5885 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 9 Aug 2019 14:44:11 -0700
Subject: [PATCH 06/13] Hats

---
 .../block_render_draw.js                        |  2 +-
 .../block_render_draw_highlight.js              | 17 ++++++++++++-----
 .../block_render_info.js                        | 15 ++++++++++-----
 .../block_rendering_constants.js                |  1 +
 .../highlight_constants.js                      |  5 ++++-
 .../block_rendering_rewrite/measurables.js      | 15 ++++++++++++++-
 6 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index 47020c40f..82fb0d51c 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -225,7 +225,7 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
     this.highlighter_.drawRightSideRow(row);
   }
   this.steps_.push('H', this.info_.startX + row.width);
-  this.steps_.push('v', row.height);
+  this.steps_.push('V', this.info_.startY + row.yPos + row.height);
 };
 
 
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index 3a4e0ff2f..41b2b7c1a 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -84,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.
@@ -151,7 +151,8 @@ Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
   }
   if (this.RTL_) {
     this.steps_.push('H', rightEdge);
-    this.steps_.push('v', row.height - this.highlightOffset_);
+    this.steps_.push('V',
+        this.info_.startY + row.yPos + row.height - this.highlightOffset_);
   }
 };
 
@@ -195,10 +196,16 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
   }
 
   if (!this.RTL_) {
-    if (this.info_.topRow.elements[0].isSquareCorner()) {
-      this.steps_.push('V', this.info_.startY + this.highlightOffset_);
-    } else {
+    var topRow = this.info_.topRow;
+    if (topRow.elements[0].isRoundedCorner()) {
       this.steps_.push('V', this.info_.startY + this.outsideCornerPaths_.height);
+    } else if (topRow.elements.length >= 3 && topRow.elements[2].type === 'hat'){
+      this.steps_.push('V',
+          this.info_.startY +
+          Blockly.blockRendering.constants.START_HAT.height +
+          this.highlightOffset_);
+    } else {
+      this.steps_.push('V', this.info_.startY + this.highlightOffset_);
     }
   }
 };
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index 1f08e5729..c23c8462e 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -226,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.height;
   } else if (hasPrevious) {
     this.topRow.elements.push(new Blockly.blockRendering.PreviousConnection());
   }
@@ -701,11 +703,14 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
     row.yPos = yCursor + this.startY;
     yCursor += row.height;
     // Add padding to the bottom row if block height is less than minimum
+    var heightWithoutHat =
+        this.block_.hat ? yCursor - Blockly.blockRendering.constants.START_HAT.height : yCursor;
     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 = this.startX;
diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
index 690d747dd..e2901234e 100644
--- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js
+++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
@@ -176,6 +176,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),
diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js
index c557e13bc..264d535c5 100644
--- a/core/renderers/block_rendering_rewrite/highlight_constants.js
+++ b/core/renderers/block_rendering_rewrite/highlight_constants.js
@@ -209,7 +209,9 @@ 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(0, hatHeight) +
       Blockly.utils.svgPaths.moveBy(25, -8.7) +
       Blockly.utils.svgPaths.curve('c',
           [
@@ -219,13 +221,14 @@ Blockly.blockRendering.highlightConstants.START_HAT = (function() {
           ]);
 
   var pathLtr =
+      Blockly.utils.svgPaths.moveBy(0, hatHeight) +
       Blockly.utils.svgPaths.curve('c',
           [
             Blockly.utils.svgPaths.point(17.8, -9.2),
             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;
diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js
index e781afb0c..c4a2ebe65 100644
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -378,7 +378,7 @@ 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;
 
 };
@@ -537,6 +537,19 @@ 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.height = elem.height + this.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';

From ace1971795c68828113de2a39087177fbfc5beea Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 9 Aug 2019 15:31:01 -0700
Subject: [PATCH 07/13] Make hats have height!

---
 core/flyout_base.js                            |  8 --------
 .../block_render_draw.js                       | 13 ++++++-------
 .../block_render_draw_highlight.js             | 18 ++++++------------
 .../block_render_info.js                       |  7 +++----
 .../block_rendering_rewrite/measurables.js     |  6 +++++-
 5 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/core/flyout_base.js b/core/flyout_base.js
index f22b19637..3d5de6688 100644
--- a/core/flyout_base.js
+++ b/core/flyout_base.js
@@ -723,14 +723,6 @@ 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();
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index 82fb0d51c..b61dfe0e4 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -133,7 +133,7 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
   }
   this.positionPreviousConnection_();
   this.steps_.push(
-      Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
+      Blockly.utils.svgPaths.moveBy(this.info_.startX, 0));
   for (var i = 0, elem; elem = elements[i]; i++) {
     if (elem.type === 'round corner') {
       this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
@@ -225,7 +225,7 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
     this.highlighter_.drawRightSideRow(row);
   }
   this.steps_.push('H', this.info_.startX + row.width);
-  this.steps_.push('V', this.info_.startY + row.yPos + row.height);
+  this.steps_.push('V', row.yPos + row.height);
 };
 
 
@@ -269,8 +269,7 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
   var outputConnection = this.info_.outputConnection;
   this.positionOutputConnection_();
   if (outputConnection) {
-    var tabBottom = this.info_.startY +
-        outputConnection.connectionOffsetY + outputConnection.height;
+    var tabBottom = outputConnection.connectionOffsetY + outputConnection.height;
     // Draw a line up to the bottom of the tab.
     this.steps_.push('V', tabBottom);
     this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathUp);
@@ -442,7 +441,7 @@ Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function()
   if (this.info_.topRow.hasPreviousConnection) {
     var x = this.info_.startX + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
     var connX = (this.info_.RTL ? -x : x);
-    this.info_.topRow.connection.setOffsetInBlock(connX, this.info_.startY);
+    this.info_.topRow.connection.setOffsetInBlock(connX, 0);
   }
 };
 
@@ -458,7 +457,7 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
     var x = connInfo.xPos; // Already contains info about startX
     var connX = (this.info_.RTL ? -x : x) + 0.5;
     bottomRow.connection.setOffsetInBlock(
-        connX, this.info_.startY + this.info_.height +
+        connX, this.info_.height +
             Blockly.blockRendering.constants.DARK_PATH_OFFSET);
   }
 };
@@ -473,6 +472,6 @@ Blockly.blockRendering.Drawer.prototype.positionOutputConnection_ = function() {
     var x = this.info_.startX;
     var connX = this.info_.RTL ? -x : x;
     this.block_.outputConnection.setOffsetInBlock(connX,
-        this.info_.startY + this.info_.outputConnection.connectionOffsetY);
+        this.info_.outputConnection.connectionOffsetY);
   }
 };
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index 41b2b7c1a..8a6b7cd28 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -73,7 +73,7 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) {
 
 Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
   this.steps_.push(
-      Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
+      Blockly.utils.svgPaths.moveBy(this.info_.startX, 0));
   for (var i = 0, elem; elem = row.elements[i]; i++) {
     if (elem.type === 'square corner') {
       this.steps_.push(Blockly.blockRendering.highlightConstants.START_POINT);
@@ -151,8 +151,7 @@ Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
   }
   if (this.RTL_) {
     this.steps_.push('H', rightEdge);
-    this.steps_.push('V',
-        this.info_.startY + row.yPos + row.height - this.highlightOffset_);
+    this.steps_.push('V', row.yPos + row.height - this.highlightOffset_);
   }
 };
 
@@ -180,12 +179,12 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) {
 Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
   var outputConnection = this.info_.outputConnection;
   if (outputConnection) {
-    var tabBottom = this.info_.startY +
+    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_.startY + this.info_.height - this.highlightOffset_;
+      var bottom = this.info_.height - this.highlightOffset_;
       this.steps_.push(Blockly.utils.svgPaths.moveTo(left, bottom));
       this.steps_.push('V', tabBottom);
     } else {
@@ -198,14 +197,9 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
   if (!this.RTL_) {
     var topRow = this.info_.topRow;
     if (topRow.elements[0].isRoundedCorner()) {
-      this.steps_.push('V', this.info_.startY + this.outsideCornerPaths_.height);
-    } else if (topRow.elements.length >= 3 && topRow.elements[2].type === 'hat'){
-      this.steps_.push('V',
-          this.info_.startY +
-          Blockly.blockRendering.constants.START_HAT.height +
-          this.highlightOffset_);
+      this.steps_.push('V', this.outsideCornerPaths_.height);
     } else {
-      this.steps_.push('V', this.info_.startY + this.highlightOffset_);
+      this.steps_.push('V', topRow.startY + this.highlightOffset_);
     }
   }
 };
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index c23c8462e..f8fcd1ea1 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -228,7 +228,7 @@ Blockly.blockRendering.RenderInfo.prototype.createTopRow_ = function() {
   if (hasHat) {
     var hat = new Blockly.blockRendering.Hat();
     this.topRow.elements.push(hat);
-    //this.startY = hat.height;
+    this.startY = hat.startY;
   } else if (hasPrevious) {
     this.topRow.elements.push(new Blockly.blockRendering.PreviousConnection());
   }
@@ -700,11 +700,10 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
   var yCursor = 0;
   for (var r = 0; r < this.rows.length; r++) {
     var row = this.rows[r];
-    row.yPos = yCursor + this.startY;
+    row.yPos = yCursor;
     yCursor += row.height;
     // Add padding to the bottom row if block height is less than minimum
-    var heightWithoutHat =
-        this.block_.hat ? yCursor - Blockly.blockRendering.constants.START_HAT.height : yCursor;
+    var heightWithoutHat = yCursor - this.topRow.startY;
     if (row == this.bottomRow &&
         heightWithoutHat < Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT) {
       // But the hat height shouldn't be part of this.
diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js
index c4a2ebe65..9c9fe1a0b 100644
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -380,6 +380,7 @@ Blockly.blockRendering.Hat = function() {
   this.type = 'hat';
   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);
@@ -512,6 +513,7 @@ Blockly.blockRendering.TopRow = function(block) {
 
   this.elements = [];
   this.type = 'top row';
+  this.startY = 0;
 
   this.hasPreviousConnection = !!block.previousConnection;
   this.connection = block.previousConnection;
@@ -543,13 +545,15 @@ Blockly.blockRendering.TopRow.prototype.measure = function() {
     this.width += elem.width;
     if (!(elem.isSpacer())) {
       if (elem.type == 'hat') {
-        this.height = elem.height + this.height;
+        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';

From 797b8dae46a3549f65bb57188b572d7258b69487 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 9 Aug 2019 16:42:45 -0700
Subject: [PATCH 08/13] Include tab width in block width

---
 core/flyout_base.js                                         | 5 +----
 core/renderers/block_rendering_rewrite/block_render_draw.js | 2 +-
 .../block_rendering_rewrite/block_render_draw_highlight.js  | 2 +-
 core/renderers/block_rendering_rewrite/block_render_info.js | 6 ++++++
 .../block_rendering_rewrite/highlight_constants.js          | 2 --
 core/renderers/block_rendering_rewrite/measurables.js       | 1 +
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/core/flyout_base.js b/core/flyout_base.js
index 3d5de6688..4fc58bfc9 100644
--- a/core/flyout_base.js
+++ b/core/flyout_base.js
@@ -723,12 +723,9 @@ Blockly.Flyout.prototype.moveRectToBlock_ = function(rect, block) {
   rect.setAttribute('width', blockHW.width);
   rect.setAttribute('height', blockHW.height);
 
-  // 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);
 };
 
 /**
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index b61dfe0e4..40cca2cb5 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -133,7 +133,7 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
   }
   this.positionPreviousConnection_();
   this.steps_.push(
-      Blockly.utils.svgPaths.moveBy(this.info_.startX, 0));
+      Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
   for (var i = 0, elem; elem = elements[i]; i++) {
     if (elem.type === 'round corner') {
       this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index 8a6b7cd28..ff4cf0a36 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -73,7 +73,7 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) {
 
 Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
   this.steps_.push(
-      Blockly.utils.svgPaths.moveBy(this.info_.startX, 0));
+      Blockly.utils.svgPaths.moveBy(this.info_.startX, 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);
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index f8fcd1ea1..f5324abef 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -697,6 +697,12 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
   // Performance note: this could be combined with the draw pass, if the time
   // that this takes is excessive.  But it shouldn't be, because it only
   // accesses and sets properties that already exist on the objects.
+
+  // TODO: Decide if there's a better place for this.
+  if (this.outputConnection) {
+    this.startX = this.outputConnection.startX;
+    this.width += this.outputConnection.width;
+  }
   var yCursor = 0;
   for (var r = 0; r < this.rows.length; r++) {
     var row = this.rows[r];
diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js
index 264d535c5..ea42cbe53 100644
--- a/core/renderers/block_rendering_rewrite/highlight_constants.js
+++ b/core/renderers/block_rendering_rewrite/highlight_constants.js
@@ -211,7 +211,6 @@ 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(0, hatHeight) +
       Blockly.utils.svgPaths.moveBy(25, -8.7) +
       Blockly.utils.svgPaths.curve('c',
           [
@@ -221,7 +220,6 @@ Blockly.blockRendering.highlightConstants.START_HAT = (function() {
           ]);
 
   var pathLtr =
-      Blockly.utils.svgPaths.moveBy(0, hatHeight) +
       Blockly.utils.svgPaths.curve('c',
           [
             Blockly.utils.svgPaths.point(17.8, -9.2),
diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js
index 9c9fe1a0b..9d04c0e6d 100644
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -337,6 +337,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);
 

From 6e825c33a0c26da71eb133ad2dd1e79439c35cc1 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Mon, 12 Aug 2019 13:02:54 -0700
Subject: [PATCH 09/13] Centralize references to some shapes.

---
 core/renderers/block_rendering_rewrite/block_render_draw.js | 2 +-
 core/renderers/block_rendering_rewrite/block_render_info.js | 6 ------
 core/renderers/block_rendering_rewrite/measurables.js       | 2 +-
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index 40cca2cb5..f7bfdf546 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -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);
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index f5324abef..f8fcd1ea1 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -697,12 +697,6 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
   // Performance note: this could be combined with the draw pass, if the time
   // that this takes is excessive.  But it shouldn't be, because it only
   // accesses and sets properties that already exist on the objects.
-
-  // TODO: Decide if there's a better place for this.
-  if (this.outputConnection) {
-    this.startX = this.outputConnection.startX;
-    this.width += this.outputConnection.width;
-  }
   var yCursor = 0;
   for (var r = 0; r < this.rows.length; r++) {
     var row = this.rows[r];
diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js
index 9d04c0e6d..361fa3363 100644
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -260,7 +260,7 @@ Blockly.blockRendering.InlineInput = function(input) {
     // 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 +
+        this.connectionShape.width +
         Blockly.blockRendering.constants.DARK_PATH_OFFSET;
     this.height = this.connectedBlockHeight + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
   }

From 5b955f6bbef42e197868d3f005eee78e0e4ba86c Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Mon, 12 Aug 2019 14:31:51 -0700
Subject: [PATCH 10/13] Add xpos to rows; add bounding box debug rendering

---
 .../block_render_draw.js                      | 25 ++++++++++---------
 .../block_render_draw_debug.js                |  5 ++--
 .../block_render_draw_highlight.js            | 16 ++++++------
 .../block_render_info.js                      |  5 ++--
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index f7bfdf546..80dae0e1e 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -133,12 +133,12 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
   }
   this.positionPreviousConnection_();
   this.steps_.push(
-      Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
+      Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY));
   for (var i = 0, elem; elem = elements[i]; i++) {
     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()) {
@@ -176,7 +176,7 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
   if (this.highlighter_) {
     this.highlighter_.drawValueInput(row);
   }
-  this.steps_.push('H', this.info_.startX + 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);
@@ -194,7 +194,7 @@ 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 = this.info_.startX + row.statementEdge +
+  var x = row.xPos + row.statementEdge +
     Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
     Blockly.blockRendering.constants.NOTCH.width;
 
@@ -224,7 +224,7 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
   if (this.highlighter_) {
     this.highlighter_.drawRightSideRow(row);
   }
-  this.steps_.push('H', this.info_.startX + row.width);
+  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(Blockly.utils.svgPaths.lineOnAxis('H', this.info_.startX));
+      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()) {
@@ -404,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 = this.info_.startX + row.statementEdge +
+    var connX = row.xPos + row.statementEdge +
         Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
     if (this.info_.RTL) {
       connX *= -1;
@@ -425,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 = this.info_.startX + 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;
     }
@@ -438,10 +438,11 @@ Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = funct
  * @private
  */
 Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() {
-  if (this.info_.topRow.hasPreviousConnection) {
-    var x = this.info_.startX + 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);
   }
 };
 
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js
index 19cc855ee..90f389910 100644
--- 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];
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index ff4cf0a36..be3d8af38 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -73,7 +73,7 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) {
 
 Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
   this.steps_.push(
-      Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
+      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);
@@ -92,7 +92,7 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
     }
   }
 
-  var right = this.info_.startX + row.width - this.highlightOffset_;
+  var right = row.xPos + row.width - this.highlightOffset_;
   this.steps_.push('H', right);
 };
 
@@ -114,12 +114,12 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
 
     steps =
         Blockly.utils.svgPaths.moveTo(
-            this.info_.startX + row.width - this.highlightOffset_, row.yPos) +
+            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(this.info_.startX + row.width, row.yPos) +
+        Blockly.utils.svgPaths.moveTo(row.xPos + row.width, row.yPos) +
         this.puzzleTabPaths_.pathDown(this.RTL_);
   }
 
@@ -128,7 +128,7 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
 
 Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) {
   var steps = '';
-  var statementEdge = this.info_.startX + row.statementEdge;
+  var statementEdge = row.xPos + row.statementEdge;
   if (this.RTL_) {
     var innerHeight = row.height - (2 * this.insideCornerPaths_.height);
     steps =
@@ -145,7 +145,7 @@ Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row)
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
-  var rightEdge = this.info_.startX + row.width - this.highlightOffset_;
+  var rightEdge = row.xPos + row.width - this.highlightOffset_;
   if (row.followsStatement) {
     this.steps_.push('H', rightEdge);
   }
@@ -167,10 +167,10 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) {
     if (cornerElem.type === 'square corner') {
       this.steps_.push(
           Blockly.utils.svgPaths.moveTo(
-              this.info_.startX + this.highlightOffset_,
+              row.xPos + this.highlightOffset_,
               height - this.highlightOffset_));
     } else if (cornerElem.type === 'round corner') {
-      this.steps_.push(Blockly.utils.svgPaths.moveTo(this.info_.startX, height));
+      this.steps_.push(Blockly.utils.svgPaths.moveTo(row.xPos, height));
       this.steps_.push(this.outsideCornerPaths_.bottomLeft());
     }
   }
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index f8fcd1ea1..d96218671 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -120,7 +120,7 @@ Blockly.blockRendering.RenderInfo = function(block) {
 
   // The position of the start point for drawing, relative to the block's
   // location.
-  this.startX = 0;
+  this.startX = 10;
   this.startY = 0;
 
   this.measure_();
@@ -701,6 +701,7 @@ 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;
@@ -712,7 +713,7 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
       yCursor += diff;
     }
     if (!(row.isSpacer())) {
-      var xCursor = this.startX;
+      var xCursor = row.xPos;
       for (var e = 0; e < row.elements.length; e++) {
         var elem = row.elements[e];
         elem.xPos = xCursor;

From ede7c7e125d5cd0c48882b77fbd2e471b21e690f Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Mon, 12 Aug 2019 15:10:57 -0700
Subject: [PATCH 11/13] Include tab width in block width

---
 .../block_rendering_rewrite/block_render_info.js     | 12 +++++++++---
 .../renderers/block_rendering_rewrite/measurables.js |  1 -
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index d96218671..1262e6639 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -120,7 +120,7 @@ Blockly.blockRendering.RenderInfo = function(block) {
 
   // The position of the start point for drawing, relative to the block's
   // location.
-  this.startX = 10;
+  this.startX = 0;
   this.startY = 0;
 
   this.measure_();
@@ -519,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;
+  }
 };
 
 /**
@@ -532,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;
       }
@@ -630,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;
 };
 
 /**
diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js
index 361fa3363..8cdcd2cfc 100644
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -260,7 +260,6 @@ Blockly.blockRendering.InlineInput = function(input) {
     // 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 +
-        this.connectionShape.width +
         Blockly.blockRendering.constants.DARK_PATH_OFFSET;
     this.height = this.connectedBlockHeight + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
   }

From d954182c410cd3a22f5183d668bf8b8f17b38047 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Mon, 12 Aug 2019 15:40:28 -0700
Subject: [PATCH 12/13] Fix width with children for external inputs

---
 core/renderers/block_rendering_rewrite/measurables.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js
index 8cdcd2cfc..128a41583 100644
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -449,9 +449,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);

From 71e720444fd0c305508ab8b3b62246794a3bdf52 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Mon, 12 Aug 2019 15:51:41 -0700
Subject: [PATCH 13/13] Use connection width to find empty input width

---
 .../block_rendering_rewrite/block_rendering_constants.js    | 5 ++---
 core/renderers/block_rendering_rewrite/measurables.js       | 6 ++++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
index e2901234e..f507f7cdf 100644
--- 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
diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js
index 128a41583..de88510b5 100644
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -255,7 +255,8 @@ 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.
@@ -315,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;