Improvements for y offsets

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);
   }
 };

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);
     }
   }
 };

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;
 };

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));

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) +

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