Merge pull request #2732 from rachel-fenichel/render/constants

More work to move constants into objects

core/renderers/block_rendering_rewrite/block_render_draw.js

@@ -123,9 +123,9 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
       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.TOP_LEFT_CORNER);
+          Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
     } else if (elem.type === 'previous connection') {
-      this.steps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT);
+      this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathLeft);
     } else if (elem.type === 'hat') {
       this.steps_.push(Blockly.blockRendering.constants.START_HAT.path);
     } else if (elem.isSpacer()) {
@@ -144,11 +144,11 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
  * @private
  */
 Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
+  var input = row.getLastInput();
   this.highlighter_.drawValueInput(row);
   this.steps_.push('H', row.width);
   this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
-  this.steps_.push('v',
-      row.height - Blockly.blockRendering.constants.PUZZLE_TAB.height);
+  this.steps_.push('v', row.height - input.connectionHeight);
   this.positionExternalValueConnection_(row);
 };
 
@@ -161,11 +161,21 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
  */
 Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
   this.highlighter_.drawStatementInput(row);
-  var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_RIGHT;
+  // Where to start drawing the notch, which is on the right side in LTR.
+  var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
+    Blockly.blockRendering.constants.NOTCH.width;
+
   this.steps_.push('H', x);
-  this.steps_.push(Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER);
-  this.steps_.push('v', row.height - 2 * Blockly.blockRendering.constants.CORNER_RADIUS);
-  this.steps_.push(Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER);
+
+  var innerTopLeftCorner =
+      Blockly.blockRendering.constants.NOTCH.pathRight + ' h -' +
+      (Blockly.blockRendering.constants.NOTCH_WIDTH -
+          Blockly.blockRendering.constants.CORNER_RADIUS) +
+      Blockly.blockRendering.constants.INSIDE_CORNERS.pathTop;
+  this.steps_.push(innerTopLeftCorner);
+  this.steps_.push('v',
+      row.height - (2 * Blockly.blockRendering.constants.INSIDE_CORNERS.height));
+  this.steps_.push(Blockly.blockRendering.constants.INSIDE_CORNERS.pathBottom);
 
   this.positionStatementInputConnection_(row);
 };
@@ -192,17 +202,19 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
 Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
   var bottomRow = this.info_.bottomRow;
   var elems = bottomRow.elements;
-  this.highlighter_.drawBottomCorner(bottomRow);
+  this.highlighter_.drawBottomRow(bottomRow);
   this.positionNextConnection_();
   this.steps_.push('v', bottomRow.height);
   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_PATH_RIGHT);
+      //this.steps_.push('h',  (this.RTL ? 0.5 : - 0.5));
+      this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathRight);
+      //this.steps_.push('h',  (this.RTL ? -0.5 : 0.5));
     } else if (elem.type === 'square corner') {
       this.steps_.push('H 0');
     } else if (elem.type === 'round corner') {
-      this.steps_.push(Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER);
+      this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft);
     } else if (elem.isSpacer()) {
       this.steps_.push('h', elem.width * -1);
     }
@@ -217,11 +229,12 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
 Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
   this.highlighter_.drawLeft();
 
+  var outputConnection = this.info_.outputConnection;
   this.positionOutputConnection_();
-  if (this.info_.hasOutputConnection) {
+  if (outputConnection) {
     // Draw a line up to the bottom of the tab.
-    this.steps_.push('V', Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP +
-        Blockly.blockRendering.constants.PUZZLE_TAB.height);
+    this.steps_.push('V',
+        outputConnection.connectionOffsetY + outputConnection.height);
     this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathUp);
   }
   // Close off the path.  This draws a vertical line up to the start of the
@@ -315,12 +328,16 @@ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) {
   var height = input.height;
   var yPos = input.centerline - height / 2;
 
-  this.inlineSteps_.push('M', (input.xPos + Blockly.blockRendering.constants.PUZZLE_TAB.width) + ',' + yPos);
-  this.inlineSteps_.push('v ', Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP);
+  var connectionTop = input.connectionOffsetY;
+  var connectionBottom = input.connectionHeight + connectionTop;
+  var connectionRight = input.xPos + input.connectionWidth;
+
+
+  this.inlineSteps_.push('M', connectionRight + ',' + yPos);
+  this.inlineSteps_.push('v ', connectionTop);
   this.inlineSteps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
-  this.inlineSteps_.push('v', height - Blockly.blockRendering.constants.PUZZLE_TAB.height -
-      Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP);
-  this.inlineSteps_.push('h', width - Blockly.blockRendering.constants.PUZZLE_TAB.width);
+  this.inlineSteps_.push('v', height - connectionBottom);
+  this.inlineSteps_.push('h', width - input.connectionWidth);
   this.inlineSteps_.push('v', -height);
   this.inlineSteps_.push('z');
 
@@ -340,13 +357,13 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio
   var yPos = input.centerline - input.height / 2;
   // Move the connection.
   if (input.connection) {
-    var connX = input.xPos + Blockly.blockRendering.constants.PUZZLE_TAB.width +
+    var connX = input.xPos + input.connectionWidth +
         Blockly.blockRendering.constants.DARK_PATH_OFFSET;
     if (this.info_.RTL) {
       connX *= -1;
     }
     input.connection.setOffsetInBlock(
-        connX, yPos + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP +
+        connX, yPos + input.connectionOffsetY +
         Blockly.blockRendering.constants.DARK_PATH_OFFSET);
   }
 };
@@ -411,9 +428,8 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
   var bottomRow = this.info_.bottomRow;
 
   if (bottomRow.hasNextConnection) {
-    var connX =
-        this.info_.RTL ? -Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT :
-        Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
+    var connInfo = bottomRow.getNextConnection();
+    var connX = this.info_.RTL ? -connInfo.xPos : connInfo.xPos;
     bottomRow.connection.setOffsetInBlock(
         connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET);
   }
@@ -425,8 +441,8 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
  * @private
  */
 Blockly.blockRendering.Drawer.prototype.positionOutputConnection_ = function() {
-  if (this.info_.hasOutputConnection) {
+  if (this.info_.outputConnection) {
     this.block_.outputConnection.setOffsetInBlock(0,
-        Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP);
+        this.info_.outputConnection.connectionOffsetY);
   }
 };

core/renderers/block_rendering_rewrite/block_render_draw_highlight.js

@@ -26,7 +26,7 @@
 'use strict';
 goog.provide('Blockly.blockRendering.Highlighter');
 
-goog.require('Blockly.blockRendering.constants');
+goog.require('Blockly.blockRendering.highlightConstants');
 goog.require('Blockly.blockRendering.RenderInfo');
 goog.require('Blockly.blockRendering.Measurable');
 
@@ -50,176 +50,171 @@ goog.require('Blockly.blockRendering.Measurable');
 Blockly.blockRendering.Highlighter = function(info, pathObject) {
   this.info_ = info;
   this.pathObject_ = pathObject;
-  this.highlightSteps_ = this.pathObject_.highlightSteps;
-  this.highlightInlineSteps_ = this.pathObject_.highlightInlineSteps;
+  this.steps_ = this.pathObject_.highlightSteps;
+  this.inlineSteps_ = this.pathObject_.highlightInlineSteps;
+
+  this.RTL_ = this.info_.RTL;
+
+  /**
+   * The offset between the block's main path and highlight path.
+   * @type {number}
+   * @private
+   */
+  this.highlightOffset_ = Blockly.blockRendering.highlightConstants.OFFSET;
+
+  this.outsideCornerPaths_ = Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER;
+  this.insideCornerPaths_ = Blockly.blockRendering.highlightConstants.INSIDE_CORNER;
+  this.puzzleTabPaths_ = Blockly.blockRendering.highlightConstants.PUZZLE_TAB;
+  this.notchPaths_ = Blockly.blockRendering.highlightConstants.NOTCH;
+  this.startPaths_ = Blockly.blockRendering.highlightConstants.START_HAT;
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
   for (var i = 0, elem; elem = row.elements[i]; i++) {
     if (elem.type === 'square corner') {
-      this.highlightSteps_.push(Blockly.blockRendering.constants.START_POINT_HIGHLIGHT);
+      this.steps_.push(Blockly.blockRendering.highlightConstants.START_POINT);
     } else if (elem.type === 'round corner') {
-      this.highlightSteps_.push(this.info_.RTL ?
-          Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL :
-          Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR);
-      this.highlightSteps_.push(Blockly.blockRendering.constants.TOP_LEFT_CORNER_HIGHLIGHT);
+      this.steps_.push(
+          this.outsideCornerPaths_.topLeft(this.RTL_));
     } else if (elem.type === 'previous connection') {
-      this.highlightSteps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT_HIGHLIGHT);
+      // TODO: move the offsets into the definition of the notch highlight, maybe.
+      this.steps_.push('h',  (this.RTL_ ? 0.5 : - 0.5));
+      this.steps_.push(this.notchPaths_.pathLeft);
+      this.steps_.push('h',  (this.RTL_ ? -0.5 : 0.5));
     } else if (elem.type === 'hat') {
-      this.highlightSteps_.push(
-          Blockly.blockRendering.constants.START_HAT.highlight(this.info_.RTL));
+      this.steps_.push(this.startPaths_.path(this.RTL_));
     } else if (elem.isSpacer()) {
-      this.highlightSteps_.push('h', elem.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
+      this.steps_.push('h', elem.width - this.highlightOffset_);
     }
   }
 
-  this.highlightSteps_.push('H', row.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
+  this.steps_.push('H', row.width - this.highlightOffset_);
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
-  if (this.info_.RTL) {
-    var aboveTabHeight = -Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
-    var belowTabHeight = row.height -
-        Blockly.blockRendering.constants.PUZZLE_TAB.height +
-        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
-    // Edge above tab.
-    this.highlightSteps_.push('v', aboveTabHeight);
-    // Highlight around back of tab.
-    this.highlightSteps_.push(
-        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
-    // Edge below tab.
-    this.highlightSteps_.push('v', belowTabHeight);
+  var input = row.getLastInput();
+  var steps = '';
+  if (this.RTL_) {
+    var aboveTabHeight = -this.highlightOffset_;
+    var belowTabHeight =
+        row.height - input.connectionHeight + this.highlightOffset_;
+
+    steps =
+        Blockly.utils.svgPaths.lineOnAxis('v', aboveTabHeight) +
+        this.puzzleTabPaths_.pathDown(this.RTL_) +
+        Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight);
   } else {
-    this.highlightSteps_.push(Blockly.utils.svgPaths.moveTo(row.width, row.yPos));
-    this.highlightSteps_.push(
-        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
+    steps =
+        Blockly.utils.svgPaths.moveTo(row.width, row.yPos) +
+        this.puzzleTabPaths_.pathDown(this.RTL_);
   }
+
+  this.steps_.push(steps);
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) {
-  var x = row.statementEdge;
-  if (this.info_.RTL) {
-    this.highlightSteps_.push('M',
-        (x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) +
-        ',' + (row.yPos + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE));
-    this.highlightSteps_.push(
-        Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL);
-    this.highlightSteps_.push('v',
-        row.height - 2 * Blockly.blockRendering.constants.CORNER_RADIUS);
-    this.highlightSteps_.push(
-        Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL);
+  var steps = '';
+  if (this.RTL_) {
+    var innerHeight = row.height - (2 * this.insideCornerPaths_.height);
+    steps =
+        Blockly.utils.svgPaths.moveTo(row.statementEdge, row.yPos) +
+        this.insideCornerPaths_.pathTop(this.RTL_) +
+        Blockly.utils.svgPaths.lineOnAxis('v', innerHeight) +
+        this.insideCornerPaths_.pathBottom(this.RTL_);
   } else {
-    this.highlightSteps_.push('M',
-        (x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) + ',' +
-        (row.yPos + row.height - Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE));
-    this.highlightSteps_.push(
-        Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR);
+    steps =
+        Blockly.utils.svgPaths.moveTo(row.statementEdge, row.yPos + row.height) +
+        this.insideCornerPaths_.pathBottom(this.RTL_);
   }
+  this.steps_.push(steps);
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
   if (row.followsStatement) {
-    this.highlightSteps_.push('H', row.width);
+    this.steps_.push('H', row.width);
   }
-  if (this.info_.RTL) {
-    this.highlightSteps_.push('H', row.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
-    this.highlightSteps_.push('v', row.height);
+  if (this.RTL_) {
+    this.steps_.push('H', row.width - this.highlightOffset_);
+    this.steps_.push('v', row.height);
   }
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) {
+Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(_row) {
   var height = this.info_.height;
-  var elems = this.info_.bottomRow.elements;
 
-  if (this.info_.RTL) {
-    this.highlightSteps_.push('V', height);
-  }
-
-  for (var i = elems.length - 1; i >= 0; i--) {
-    var elem = elems[i];
-    if (elem.type === 'square corner') {
-      if (!this.info_.RTL) {
-        this.highlightSteps_.push('M',
-            Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ',' +
-            (height - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET));
-      }
-    } else if (elem.type === 'round corner') {
-      if (!this.info_.RTL) {
-        this.highlightSteps_.push(
-            Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_START +
-            (height - Blockly.BlockSvg.DISTANCE_45_INSIDE) +
-            Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID +
-            (height - Blockly.BlockSvg.CORNER_RADIUS));
-      }
+  // 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);
+  } 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_));
+    } else if (cornerElem.type === 'round corner') {
+      this.steps_.push(this.outsideCornerPaths_.bottomLeft(height));
     }
   }
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
-  if (this.info_.hasOutputConnection) {
-    this.highlightSteps_.push(
-        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathUp(this.info_.RTL));
+  if (this.info_.outputConnection) {
+    this.steps_.push(
+        this.puzzleTabPaths_.pathUp(this.RTL_));
   }
 
-  if (!this.info_.RTL) {
+  if (!this.RTL_) {
     if (this.info_.topRow.elements[0].isSquareCorner()) {
-      this.highlightSteps_.push('V', Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
+      this.steps_.push('V', this.highlightOffset_);
     } else {
-      this.highlightSteps_.push('V', Blockly.blockRendering.constants.CORNER_RADIUS);
+      this.steps_.push('V', this.outsideCornerPaths_.height);
     }
   }
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
-  var offset = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
+  var offset = this.highlightOffset_;
 
-  var inputWidth = input.width;
-  var height = input.height;
-  var x = input.xPos;
-  var yPos = input.centerline - height / 2;
-  var bottomHighlightWidth = inputWidth - Blockly.blockRendering.constants.PUZZLE_TAB.width;
+  // Relative to the block's left.
+  var connectionRight = input.xPos + input.connectionWidth;
+  var yPos = input.centerline - input.height / 2;
+  var bottomHighlightWidth = input.width - input.connectionWidth;
+  var startY = yPos + offset;
 
-  if (this.info_.RTL) {
+  if (this.RTL_) {
     // TODO: Check if this is different when the inline input is populated.
-
-    var aboveTabHeight =
-        Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP -
-       offset;
-
+    var aboveTabHeight = input.connectionOffsetY - offset;
     var belowTabHeight =
-        height -
-        (Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP +
-            Blockly.blockRendering.constants.PUZZLE_TAB.height) +
-        offset;
+        input.height - (input.connectionOffsetY + input.connectionHeight) + offset;
 
-    var startX = x + Blockly.blockRendering.constants.PUZZLE_TAB.width -
-        offset;
-    var startY = yPos + offset;
+    var startX = connectionRight - offset;
+
+    var steps = Blockly.utils.svgPaths.moveTo(startX, startY) +
+        // Right edge above tab.
+        Blockly.utils.svgPaths.lineOnAxis('v', aboveTabHeight) +
+        // Back of tab.
+        this.puzzleTabPaths_.pathDown(this.RTL_) +
+        // Right edge below tab.
+        Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight) +
+        // Bottom.
+        Blockly.utils.svgPaths.lineOnAxis('h', bottomHighlightWidth);
+
+    this.inlineSteps_.push(steps);
 
-    // Highlight right edge, around back of tab, and bottom.
-    this.highlightInlineSteps_.push('M', startX + ',' + startY);
-    // Right edge above tab.
-    this.highlightInlineSteps_.push('v', aboveTabHeight);
-    // Back of tab.
-    this.highlightInlineSteps_.push(
-        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
-    // Right edge below tab.
-    this.highlightInlineSteps_.push('v', belowTabHeight);
-    // Bottom (horizontal).
-    this.highlightInlineSteps_.push('h', bottomHighlightWidth);
   } else {
-    // Go to top right corner.
-    this.highlightInlineSteps_.push(
-        Blockly.utils.svgPaths.moveTo(x + inputWidth + offset, yPos + offset));
-    // Highlight right edge, bottom.
-    this.highlightInlineSteps_.push('v', height);
-    this.highlightInlineSteps_.push('h ', -bottomHighlightWidth);
-    // Go to top of tab.
-    this.highlightSteps_.push(Blockly.utils.svgPaths.moveTo(
-        x + Blockly.blockRendering.constants.PUZZLE_TAB.width,
-        yPos + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP));
-    // Short highlight glint at bottom of tab.
-    this.highlightSteps_.push(
-        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
+
+    var steps =
+        // Go to top right corner.
+        Blockly.utils.svgPaths.moveTo(input.xPos + input.width + offset, startY) +
+        // Highlight right edge, bottom.
+        Blockly.utils.svgPaths.lineOnAxis('v', input.height) +
+        Blockly.utils.svgPaths.lineOnAxis('h', -bottomHighlightWidth) +
+        // Go to top of tab.
+        Blockly.utils.svgPaths.moveTo(connectionRight, yPos + input.connectionOffsetY) +
+        // Short highlight glint at bottom of tab.
+        this.puzzleTabPaths_.pathDown(this.RTL_);
+
+    this.inlineSteps_.push(steps);
   }
 };

core/renderers/block_rendering_rewrite/block_render_info.js

@@ -45,10 +45,12 @@ Blockly.blockRendering.RenderInfo = function(block) {
   this.block_ = block;
 
   /**
-   * Whether the block has an output connection.
-   * @type {boolean}
+   * A measurable representing the output connection if the block has one.
+   * Otherwise null.
+   * @type {Blockly.blockRendering.OutputConnection}
    */
-  this.hasOutputConnection = !!block.outputConnection;
+  this.outputConnection = !block.outputConnection ? null :
+      new Blockly.blockRendering.OutputConnection();
 
   /**
    * Whether the block should be rendered as a single line, either because it's
@@ -405,7 +407,7 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne
     } else if (next.isNextConnection()) {
       // Next connections are shifted slightly to the left (in both LTR and RTL)
       // to make the dark path under the previous connection show through.
-      return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + (this.RTL ? 0.5 : - 0.5);
+      return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;//+ (this.RTL ? 0.5 : - 0.5);
     }
   }
 
@@ -416,8 +418,8 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne
     } else if (next.isNextConnection()) {
       // Next connections are shifted slightly to the left (in both LTR and RTL)
       // to make the dark path under the previous connection show through.
-      return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV +
-          (this.RTL ? 0.5 : - 0.5);
+      return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV;//+
+      //(this.RTL ? 0.5 : - 0.5);
     }
   }
 
@@ -460,7 +462,7 @@ Blockly.blockRendering.RenderInfo.prototype.computeBounds_ = function() {
   if (widestStatementRowFields) {
     this.width =
         Math.max(blockWidth,
-            widestStatementRowFields + Blockly.blockRendering.constants.NOTCH_WIDTH * 2);
+            widestStatementRowFields + Blockly.blockRendering.constants.NOTCH.width * 2);
   } else {
     this.width = blockWidth;
   }

core/renderers/block_rendering_rewrite/block_rendering_constants.js

@@ -41,7 +41,6 @@ Blockly.blockRendering.constants.LARGE_PADDING = 10;
 Blockly.blockRendering.constants.TALL_INPUT_FIELD_OFFSET_Y =
     Blockly.blockRendering.constants.MEDIUM_PADDING;
 
-Blockly.blockRendering.constants.HIGHLIGHT_OFFSET = 0.5;
 
 // The dark/shadow path in classic rendering is the same as the normal block
 // path, but translated down one and right one.
@@ -74,12 +73,6 @@ Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT =
 // connection starts.
 Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV = 7;
 
-// This is the offset from the vertical part of a statement input
-// to where to start the notch, which is on the right side in LTR.
-Blockly.blockRendering.constants.NOTCH_OFFSET_RIGHT =
-    Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
-    Blockly.blockRendering.constants.NOTCH_WIDTH;
-
 Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER = 5;
 Blockly.blockRendering.constants.STATEMENT_INPUT_PADDING_LEFT = 20;
 Blockly.blockRendering.constants.BETWEEN_STATEMENT_PADDING_Y = 4;
@@ -112,9 +105,11 @@ Blockly.blockRendering.constants.SPACER_DEFAULT_HEIGHT = 15;
 
 Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT = 24;
 
-Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_WIDTH = 22.5;
+Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_WIDTH =
+  Blockly.blockRendering.constants.TAB_WIDTH  + 14.5;
 
-Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_HEIGHT = 26;
+Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_HEIGHT =
+    Blockly.blockRendering.constants.TAB_HEIGHT + 11;
 
 Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_WIDTH = 10;
 
@@ -136,121 +131,6 @@ Blockly.blockRendering.constants.POPULATED_STATEMENT_INPUT_WIDTH = 25;
 
 Blockly.blockRendering.constants.START_POINT = Blockly.utils.svgPaths.moveBy(0, 0);
 
-Blockly.blockRendering.constants.START_POINT_HIGHLIGHT =
-    Blockly.utils.svgPaths.moveBy(
-        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
-        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
-
-/**
- * Distance from shape edge to intersect with a curved corner at 45 degrees.
- * Applies to highlighting on around the inside of a curve.
- * @const
- */
-Blockly.blockRendering.constants.DISTANCE_45_INSIDE = (1 - Math.SQRT1_2) *
-    (Blockly.blockRendering.constants.CORNER_RADIUS -
-        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) +
-    Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
-
-/**
- * Distance from shape edge to intersect with a curved corner at 45 degrees.
- * Applies to highlighting on around the outside of a curve.
- * @const
- */
-Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) *
-    (Blockly.blockRendering.constants.CORNER_RADIUS +
-        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) -
-    Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
-
-/**
- * SVG path for drawing next/previous notch from left to right.
- * @const
- */
-Blockly.blockRendering.constants.NOTCH_PATH_LEFT = 'l 6,4 3,0 6,-4';
-
-/**
- * SVG path for drawing next/previous notch from left to right with
- * highlighting.
- * @const
- */
-Blockly.blockRendering.constants.NOTCH_PATH_LEFT_HIGHLIGHT =
-    'h ' + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ' ' + Blockly.blockRendering.constants.NOTCH_PATH_LEFT;
-
-/**
- * SVG path for drawing next/previous notch from right to left.
- * @const
- */
-Blockly.blockRendering.constants.NOTCH_PATH_RIGHT = 'l -6,4 -3,0 -6,-4';
-
-/**
- * SVG path for drawing the top-left corner of a statement input.
- * Includes the top notch, a horizontal space, and the rounded inside corner.
- * @const
- */
-Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER =
-    Blockly.blockRendering.constants.NOTCH_PATH_RIGHT + ' h -' +
-    (Blockly.blockRendering.constants.NOTCH_WIDTH -
-        Blockly.blockRendering.constants.CORNER_RADIUS) +
-    ' a ' + Blockly.blockRendering.constants.CORNER_RADIUS + ',' +
-    Blockly.blockRendering.constants.CORNER_RADIUS + ' 0 0,0 -' +
-    Blockly.blockRendering.constants.CORNER_RADIUS + ',' +
-    Blockly.blockRendering.constants.CORNER_RADIUS;
-
-/**
- * SVG path for drawing the bottom-left corner of a statement input.
- * Includes the rounded inside corner.
- * @const
- */
-Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER =
-    Blockly.utils.svgPaths.arc('a', '0 0,0',
-        Blockly.blockRendering.constants.CORNER_RADIUS,
-        Blockly.utils.svgPaths.point(Blockly.blockRendering.constants.CORNER_RADIUS,
-            Blockly.blockRendering.constants.CORNER_RADIUS));
-
-
-/**
- * SVG path for drawing highlight on the top-left corner of a statement
- * input in RTL.
- * @const
- */
-Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL =
-    Blockly.utils.svgPaths.arc('a', '0 0,0',
-        Blockly.blockRendering.constants.CORNER_RADIUS,
-        Blockly.utils.svgPaths.point(
-            -Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE -
-            Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
-            Blockly.blockRendering.constants.CORNER_RADIUS -
-            Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE));
-
-/**
- * SVG path for drawing highlight on the bottom-left corner of a statement
- * input in RTL.
- * @const
- */
-Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL =
-    Blockly.utils.svgPaths.arc('a', '0 0,0',
-        Blockly.blockRendering.constants.CORNER_RADIUS +
-        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
-        Blockly.utils.svgPaths.point(
-            Blockly.blockRendering.constants.CORNER_RADIUS +
-            Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
-            Blockly.blockRendering.constants.CORNER_RADIUS +
-            Blockly.blockRendering.constants.HIGHLIGHT_OFFSET));
-
-/**
- * SVG path for drawing highlight on the bottom-left corner of a statement
- * input in LTR.
- * @const
- */
-Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR =
-    Blockly.utils.svgPaths.arc('a', '0 0,0',
-        Blockly.blockRendering.constants.CORNER_RADIUS +
-        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
-        Blockly.utils.svgPaths.point(
-            Blockly.blockRendering.constants.CORNER_RADIUS -
-            Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE,
-            Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE +
-            Blockly.blockRendering.constants.HIGHLIGHT_OFFSET));
-
 /**
  * SVG start point for drawing the top-left corner.
  * @const
@@ -258,52 +138,6 @@ Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR =
 Blockly.blockRendering.constants.TOP_LEFT_CORNER_START =
     'm 0,' + Blockly.blockRendering.constants.CORNER_RADIUS;
 
-/**
- * SVG path for drawing the rounded top-left corner.
- * @const
- */
-Blockly.blockRendering.constants.TOP_LEFT_CORNER =
-    'A ' + Blockly.blockRendering.constants.CORNER_RADIUS + ',' +
-    Blockly.blockRendering.constants.CORNER_RADIUS + ' 0 0,1 ' +
-    Blockly.blockRendering.constants.CORNER_RADIUS + ',0';
-
-Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER = 'a' + Blockly.blockRendering.constants.CORNER_RADIUS + ',' +
-               Blockly.blockRendering.constants.CORNER_RADIUS + ' 0 0,1 -' +
-               Blockly.blockRendering.constants.CORNER_RADIUS + ',-' +
-               Blockly.blockRendering.constants.CORNER_RADIUS;
-
-Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_START =
-    'M ' + Blockly.blockRendering.constants.DISTANCE_45_INSIDE + ', '; // follow with y pos - distance 45 inside
-
-Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID   =
-    'A ' + (Blockly.blockRendering.constants.CORNER_RADIUS - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) +
-    ',' + (Blockly.blockRendering.constants.CORNER_RADIUS - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) +
-    ' 0 0,1 ' + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ','; // follow with y pos - corner radius
-
-/**
- * SVG start point for drawing the top-left corner's highlight in RTL.
- * @const
- */
-Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL =
-    'm ' + Blockly.blockRendering.constants.DISTANCE_45_INSIDE + ',' +
-    Blockly.blockRendering.constants.DISTANCE_45_INSIDE;
-
-/**
- * SVG start point for drawing the top-left corner's highlight in LTR.
- * @const
- */
-Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR =
-    'm 0.5,' + (Blockly.blockRendering.constants.CORNER_RADIUS - 0.5);
-
-/**
- * SVG path for drawing the highlight on the rounded top-left corner.
- * @const
- */
-Blockly.blockRendering.constants.TOP_LEFT_CORNER_HIGHLIGHT =
-    'A ' + (Blockly.blockRendering.constants.CORNER_RADIUS - 0.5) + ',' +
-    (Blockly.blockRendering.constants.CORNER_RADIUS - 0.5) + ' 0 0,1 ' +
-    Blockly.blockRendering.constants.CORNER_RADIUS + ',0.5';
-
 /**
  * Information about the hat on a start block.
  */
@@ -311,23 +145,6 @@ Blockly.blockRendering.constants.START_HAT = (function() {
   // It's really minus 15, which is super unfortunate.
   var height = Blockly.blockRendering.constants.START_HAT_HEIGHT;
   var width = Blockly.blockRendering.constants.START_HAT_WIDTH;
-  var highlightRtlPath =
-      Blockly.utils.svgPaths.moveBy(25, -8.7) +
-      Blockly.utils.svgPaths.curve('c',
-          [
-            Blockly.utils.svgPaths.point(29.7, -6.2),
-            Blockly.utils.svgPaths.point(57.2, -0.5),
-            Blockly.utils.svgPaths.point(75, 8.7)
-          ]);
-
-  var highlightLtrPath =
-      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);
 
   var mainPath =
       Blockly.utils.svgPaths.curve('c',
@@ -339,10 +156,7 @@ Blockly.blockRendering.constants.START_HAT = (function() {
   return {
     height: height,
     width: width,
-    path: mainPath,
-    highlight: function(rtl) {
-      return rtl ? highlightRtlPath : highlightLtrPath;
-    }
+    path: mainPath
   };
 })();
 
@@ -394,56 +208,66 @@ Blockly.blockRendering.constants.PUZZLE_TAB = (function() {
   };
 })();
 
-Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT = (function() {
-  var width = Blockly.blockRendering.constants.TAB_WIDTH;
-  var height = Blockly.blockRendering.constants.TAB_HEIGHT;
 
-  // This is how much of the vertical block edge is actually drawn by the puzzle
-  // tab.
-  var verticalOverlap = 2.5;
-
-  // The highlight paths are not simple offsets of the main paths.  Changing
-  // them is fiddly work.
-  var highlightRtlUp =
-      Blockly.utils.svgPaths.moveTo(width * -0.25, 8.4) +
-      Blockly.utils.svgPaths.lineTo(width * -0.45, -2.1);
-
-  var highlightRtlDown =
-      Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap) +
-      Blockly.utils.svgPaths.moveBy(-width * 0.97, 2.5) +
-      Blockly.utils.svgPaths.curve('q',
-          [
-            Blockly.utils.svgPaths.point(-width * 0.05, 10),
-            Blockly.utils.svgPaths.point(width * 0.3, 9.5)
-          ]) +
-      Blockly.utils.svgPaths.moveBy(width * 0.67, -1.9) +
-      Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap);
-
-  var highlightLtrUp =
-      Blockly.utils.svgPaths.lineOnAxis('V',
-          height + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 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);
-
-  var highlightLtrDown =
-      Blockly.utils.svgPaths.moveBy(-5, height - 0.7) +
-      Blockly.utils.svgPaths.lineTo(width * 0.46, -2.1);
+Blockly.blockRendering.constants.NOTCH = (function() {
+  var width = Blockly.blockRendering.constants.NOTCH_WIDTH;
+  var height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
+  var innerWidth = 3;
+  var outerWidth = (width - innerWidth) / 2;
+  function makeMainPath(dir) {
+    return Blockly.utils.svgPaths.line(
+        [
+          Blockly.utils.svgPaths.point(dir * outerWidth, height),
+          Blockly.utils.svgPaths.point(dir * innerWidth, 0),
+          Blockly.utils.svgPaths.point(dir * outerWidth, -height)
+        ]);
+  }
+  // TODO: Find a relationship between width and path
+  var pathLeft = makeMainPath(1);
+  var pathRight = makeMainPath(-1);
 
   return {
     width: width,
     height: height,
-    pathUp: function(rtl) {
-      return rtl ? highlightRtlUp : highlightLtrUp;
-    },
-    pathDown: function(rtl) {
-      return rtl ? highlightRtlDown : highlightLtrDown;
-    }
+    pathLeft: pathLeft,
+    pathRight: pathRight
   };
 })();
+
+
+Blockly.blockRendering.constants.INSIDE_CORNERS = (function() {
+  var radius = Blockly.blockRendering.constants.CORNER_RADIUS;
+
+  var innerTopLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
+      Blockly.utils.svgPaths.point(-radius, radius));
+
+  var innerBottomLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
+      Blockly.utils.svgPaths.point(radius, radius));
+
+  return {
+    height: radius,
+    pathTop: innerTopLeftCorner,
+    pathBottom: innerBottomLeftCorner
+  };
+})();
+
+
+
+Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() {
+  var radius = Blockly.blockRendering.constants.CORNER_RADIUS;
+  /**
+   * 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 bottomLeft = Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
+      Blockly.utils.svgPaths.point(-radius, -radius));
+
+  return {
+    topLeft: topLeft,
+    bottomLeft: bottomLeft
+  };
+})();
+

core/renderers/block_rendering_rewrite/highlight_constants.js

@@ -0,0 +1,230 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2019 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Objects for rendering highlights on blocks.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+
+'use strict';
+goog.provide('Blockly.blockRendering.highlightConstants');
+
+goog.require('Blockly.blockRendering.constants');
+goog.require('Blockly.utils.svgPaths');
+
+/**
+ * Some highlights are simple offsets of the parent paths and can be generated
+ * programmatically.  Others, especially on curves, are just made out of piles
+ * of constants and are hard to tweak.
+ */
+
+/**
+ * The offset between the block's main path and highlight path.
+ * @type {number}
+ * @package
+ */
+Blockly.blockRendering.highlightConstants.OFFSET = 0.5;
+
+Blockly.blockRendering.highlightConstants.START_POINT =
+    Blockly.utils.svgPaths.moveBy(
+        Blockly.blockRendering.highlightConstants.OFFSET,
+        Blockly.blockRendering.highlightConstants.OFFSET);
+
+/**
+ * Highlight paths for drawing the inside corners of a statement input.
+ * RTL and LTR refer to the rendering of the block as a whole.  However, the top
+ * of the statement input is drawn from right to left in LTR mode.
+ */
+Blockly.blockRendering.highlightConstants.INSIDE_CORNER = (function() {
+  var radius = Blockly.blockRendering.constants.CORNER_RADIUS;
+  var offset = Blockly.blockRendering.highlightConstants.OFFSET;
+
+  /**
+   * Distance from shape edge to intersect with a curved corner at 45 degrees.
+   * Applies to highlighting on around the outside of a curve.
+   * @const
+   */
+  var distance45outside = (1 - Math.SQRT1_2) * (radius + offset) - offset;
+
+  var pathTopRtl =
+      Blockly.utils.svgPaths.moveBy(distance45outside, distance45outside) +
+      Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
+          Blockly.utils.svgPaths.point(
+              -distance45outside - offset,
+              radius - distance45outside));
+
+  var pathBottomRtl =
+      Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset,
+          Blockly.utils.svgPaths.point(radius + offset, radius + offset));
+
+  var pathBottomLtr =
+      Blockly.utils.svgPaths.moveBy(distance45outside, - distance45outside) +
+      Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset,
+          Blockly.utils.svgPaths.point(
+              radius - distance45outside,
+              distance45outside + offset));
+
+  return {
+    height: radius,
+    pathTop: function(rtl) {
+      return rtl ? pathTopRtl : '';
+    },
+    pathBottom: function(rtl) {
+      return rtl ? pathBottomRtl : pathBottomLtr;
+    },
+  };
+})();
+
+Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER = (function() {
+  var radius = Blockly.blockRendering.constants.CORNER_RADIUS;
+  var offset = Blockly.blockRendering.highlightConstants.OFFSET;
+
+  /**
+   * Distance from shape edge to intersect with a curved corner at 45 degrees.
+   * Applies to highlighting on around the inside of a curve.
+   * @const
+   */
+  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);
+
+  /**
+   * 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));
+
+  return {
+    height: radius,
+    topLeft: function(rtl) {
+      var start = rtl ? topLeftCornerStartRtl : topLeftCornerStartLtr;
+      return start + topLeftCornerHighlight;
+    },
+    bottomLeft: function(yPos) {
+      return Blockly.utils.svgPaths.moveTo(
+          distance45inside,yPos - distance45inside) +
+          Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset,
+              Blockly.utils.svgPaths.point(offset, yPos - radius));
+    }
+  };
+})();
+
+
+Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() {
+  var width = Blockly.blockRendering.constants.TAB_WIDTH;
+  var height = Blockly.blockRendering.constants.TAB_HEIGHT;
+
+  // This is how much of the vertical block edge is actually drawn by the puzzle
+  // tab.
+  var verticalOverlap = 2.5;
+
+  var highlightRtlUp =
+      Blockly.utils.svgPaths.moveTo(width * -0.25, 8.4) +
+      Blockly.utils.svgPaths.lineTo(width * -0.45, -2.1);
+
+  var highlightRtlDown =
+      Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap) +
+      Blockly.utils.svgPaths.moveBy(-width * 0.97, 2.5) +
+      Blockly.utils.svgPaths.curve('q',
+          [
+            Blockly.utils.svgPaths.point(-width * 0.05, 10),
+            Blockly.utils.svgPaths.point(width * 0.3, 9.5)
+          ]) +
+      Blockly.utils.svgPaths.moveBy(width * 0.67, -1.9) +
+      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.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);
+
+  var highlightLtrDown =
+      Blockly.utils.svgPaths.moveBy(-5, height - 0.7) +
+      Blockly.utils.svgPaths.lineTo(width * 0.46, -2.1);
+
+  return {
+    width: width,
+    height: height,
+    pathUp: function(rtl) {
+      return rtl ? highlightRtlUp : highlightLtrUp;
+    },
+    pathDown: function(rtl) {
+      return rtl ? highlightRtlDown : highlightLtrDown;
+    }
+  };
+})();
+
+Blockly.blockRendering.highlightConstants.NOTCH = (function() {
+  var pathLeft =
+      Blockly.utils.svgPaths.lineOnAxis(
+          'h', Blockly.blockRendering.highlightConstants.OFFSET) +
+      Blockly.blockRendering.constants.NOTCH.pathLeft;
+  return {
+    pathLeft: pathLeft
+  };
+})();
+
+Blockly.blockRendering.highlightConstants.START_HAT = (function() {
+  var pathRtl =
+      Blockly.utils.svgPaths.moveBy(25, -8.7) +
+      Blockly.utils.svgPaths.curve('c',
+          [
+            Blockly.utils.svgPaths.point(29.7, -6.2),
+            Blockly.utils.svgPaths.point(57.2, -0.5),
+            Blockly.utils.svgPaths.point(75, 8.7)
+          ]);
+
+  var pathLtr =
+      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);
+  return {
+    path: function(rtl) {
+      return rtl ? pathRtl : pathLtr;
+    }
+  };
+})();

core/renderers/block_rendering_rewrite/measurables.js

@@ -222,6 +222,10 @@ Blockly.blockRendering.InlineInput = function(input) {
         Blockly.blockRendering.constants.DARK_PATH_OFFSET;
     this.height = this.connectedBlockHeight + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
   }
+
+  this.connectionOffsetY = Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
+  this.connectionHeight = Blockly.blockRendering.constants.PUZZLE_TAB.height;
+  this.connectionWidth = Blockly.blockRendering.constants.PUZZLE_TAB.width;
 };
 goog.inherits(Blockly.blockRendering.InlineInput, Blockly.blockRendering.Input);
 
@@ -245,7 +249,7 @@ Blockly.blockRendering.StatementInput = function(input) {
     this.height =
         this.connectedBlockHeight + Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER;
     if (this.connectedBlock.nextConnection) {
-      this.height -= Blockly.blockRendering.constants.NOTCH_HEIGHT;
+      this.height -= Blockly.blockRendering.constants.NOTCH.height;
     }
   }
 };
@@ -271,10 +275,29 @@ Blockly.blockRendering.ExternalValueInput = function(input) {
         this.connectedBlockHeight - 2 * Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
   }
   this.width = Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_WIDTH;
+
+  this.connectionOffsetY = Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
+  this.connectionHeight = Blockly.blockRendering.constants.PUZZLE_TAB.height;
+  this.connectionWidth = Blockly.blockRendering.constants.PUZZLE_TAB.width;
 };
 goog.inherits(Blockly.blockRendering.ExternalValueInput,
     Blockly.blockRendering.Input);
 
+/**
+ * An object containing information about the space an output connection takes
+ * up during rendering.
+ * @package
+ * @constructor
+ */
+Blockly.blockRendering.OutputConnection = function() {
+  Blockly.blockRendering.OutputConnection.superClass_.constructor.call(this);
+  this.type = 'output connection';
+  this.height = Blockly.blockRendering.constants.PUZZLE_TAB.height;
+  this.width = Blockly.blockRendering.constants.PUZZLE_TAB.width;
+  this.connectionOffsetY = Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
+};
+goog.inherits(Blockly.blockRendering.OutputConnection, Blockly.blockRendering.Measurable);
+
 /**
  * An object containing information about the space a previous connection takes
  * up during rendering.
@@ -284,8 +307,8 @@ goog.inherits(Blockly.blockRendering.ExternalValueInput,
 Blockly.blockRendering.PreviousConnection = function() {
   Blockly.blockRendering.PreviousConnection.superClass_.constructor.call(this);
   this.type = 'previous connection';
-  this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
-  this.width = Blockly.blockRendering.constants.NOTCH_WIDTH;
+  this.height = Blockly.blockRendering.constants.NOTCH.height;
+  this.width = Blockly.blockRendering.constants.NOTCH.width;
 
 };
 goog.inherits(Blockly.blockRendering.PreviousConnection, Blockly.blockRendering.Measurable);
@@ -299,8 +322,8 @@ goog.inherits(Blockly.blockRendering.PreviousConnection, Blockly.blockRendering.
 Blockly.blockRendering.NextConnection = function() {
   Blockly.blockRendering.NextConnection.superClass_.constructor.call(this);
   this.type = 'next connection';
-  this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
-  this.width = Blockly.blockRendering.constants.NOTCH_WIDTH;
+  this.height = Blockly.blockRendering.constants.NOTCH.height;
+  this.width = Blockly.blockRendering.constants.NOTCH.width;
 };
 goog.inherits(Blockly.blockRendering.NextConnection, Blockly.blockRendering.Measurable);
 
@@ -328,7 +351,7 @@ goog.inherits(Blockly.blockRendering.Hat, Blockly.blockRendering.Measurable);
 Blockly.blockRendering.SquareCorner = function() {
   Blockly.blockRendering.SquareCorner.superClass_.constructor.call(this);
   this.type = 'square corner';
-  this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
+  this.height = Blockly.blockRendering.constants.NOTCH.height;
   this.width = Blockly.blockRendering.constants.NO_PADDING;
 
 };
@@ -346,7 +369,7 @@ Blockly.blockRendering.RoundCorner = function() {
   this.width = Blockly.blockRendering.constants.CORNER_RADIUS;
   // The rounded corner extends into the next row by 4 so we only take the
   // height that is aligned with this row.
-  this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
+  this.height = Blockly.blockRendering.constants.NOTCH.height;
 
 };
 goog.inherits(Blockly.blockRendering.RoundCorner, Blockly.blockRendering.Measurable);
@@ -453,6 +476,14 @@ Blockly.blockRendering.TopRow = function(block) {
 };
 goog.inherits(Blockly.blockRendering.TopRow, Blockly.blockRendering.Row);
 
+
+Blockly.blockRendering.TopRow.prototype.getPreviousConnection = function() {
+  if (this.hasPreviousConnection) {
+    return this.elements[2];
+  }
+  return null;
+};
+
 Blockly.blockRendering.BottomRow = function(block) {
   Blockly.blockRendering.BottomRow.superClass_.constructor.call(this);
   this.type = 'bottom row';
@@ -464,14 +495,20 @@ Blockly.blockRendering.BottomRow = function(block) {
       block.inputList[block.inputList.length - 1].type == Blockly.NEXT_STATEMENT;
   this.hasFixedWidth = followsStatement && block.getInputsInline();
 
-  // This is the minimum height for the row. If one of it's elements has a greater
+  // This is the minimum height for the row. If one of its elements has a greater
   // height it will be overwritten in the compute pass.
   if (followsStatement) {
     this.height = Blockly.blockRendering.constants.LARGE_PADDING;
   } else {
-    this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
+    this.height = Blockly.blockRendering.constants.NOTCH.height;
   }
-
 };
 goog.inherits(Blockly.blockRendering.BottomRow,
     Blockly.blockRendering.Row);
+
+Blockly.blockRendering.BottomRow.prototype.getNextConnection = function() {
+  if (this.hasNextConnection) {
+    return this.elements[2];
+  }
+  return null;
+};