Create PUZZLE_TAB and PUZZLE_TAB_HIGHLIGHT objects

core/renderers/block_rendering_rewrite/block_render_draw.js

@@ -146,8 +146,9 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
 Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
   this.highlighter_.drawValueInput(row);
   this.steps_.push('H', row.width);
-  this.steps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN);
+  this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
-  this.steps_.push('v', row.height - Blockly.blockRendering.constants.TAB_HEIGHT);
+  this.steps_.push('v',
+      row.height - Blockly.blockRendering.constants.PUZZLE_TAB.height);
   this.positionExternalValueConnection_(row);
 };
 
@@ -220,8 +221,8 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
   if (this.info_.hasOutputConnection) {
     // Draw a line up to the bottom of the tab.
     this.steps_.push('V', Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP +
-        Blockly.blockRendering.constants.TAB_HEIGHT);
+        Blockly.blockRendering.constants.PUZZLE_TAB.height);
-    this.steps_.push(Blockly.blockRendering.constants.TAB_PATH_UP);
+    this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathUp);
   }
   // Close off the path.  This draws a vertical line up to the start of the
   // block's path, which may be either a rounded or a sharp corner.
@@ -314,12 +315,12 @@ 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.TAB_WIDTH) + ',' + yPos);
+  this.inlineSteps_.push('M', (input.xPos + Blockly.blockRendering.constants.PUZZLE_TAB.width) + ',' + yPos);
   this.inlineSteps_.push('v ', Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP);
-  this.inlineSteps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN);
+  this.inlineSteps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
-  this.inlineSteps_.push('v', height - Blockly.blockRendering.constants.TAB_HEIGHT -
+  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.TAB_WIDTH);
+  this.inlineSteps_.push('h', width - Blockly.blockRendering.constants.PUZZLE_TAB.width);
   this.inlineSteps_.push('v', -height);
   this.inlineSteps_.push('z');
 
@@ -339,7 +340,7 @@ 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.TAB_WIDTH +
+    var connX = input.xPos + Blockly.blockRendering.constants.PUZZLE_TAB.width +
         Blockly.blockRendering.constants.DARK_PATH_OFFSET;
     if (this.info_.RTL) {
       connX *= -1;

core/renderers/block_rendering_rewrite/block_render_draw_highlight.js

@@ -80,24 +80,22 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
   //var v = row.height - Blockly.blockRendering.constants.TAB_HEIGHT;
 
   if (this.info_.RTL) {
-    var aboveTabHeight =
+    var aboveTabHeight = -Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
-        Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP -
-        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
     var belowTabHeight = row.height -
-        (Blockly.blockRendering.constants.TAB_HEIGHT -
+        Blockly.blockRendering.constants.PUZZLE_TAB.height +
-            Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP) +
         Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
     // Edge above tab.
     this.highlightSteps_.push('v', aboveTabHeight);
     // Highlight around back of tab.
-    this.highlightSteps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN_HIGHLIGHT_RTL);
+    this.highlightSteps_.push(
+        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
     // Edge below tab.
     this.highlightSteps_.push('v', belowTabHeight);
   } else {
     // Short highlight glint at bottom of tab.
     this.highlightSteps_.push('M', (row.width - 5) + ',' +
-        (row.yPos + Blockly.blockRendering.constants.TAB_HEIGHT - 0.7));
+        (row.yPos + Blockly.blockRendering.constants.PUZZLE_TAB.height - 0.7));
-    this.highlightSteps_.push('l', (Blockly.blockRendering.constants.TAB_WIDTH * 0.46) + ',-2.1');
+    this.highlightSteps_.push('l', (Blockly.blockRendering.constants.PUZZLE_TAB.width * 0.46) + ',-2.1');
   }
 };
 
@@ -162,11 +160,8 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) {
 
 Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
   if (this.info_.hasOutputConnection) {
-    if (this.info_.RTL) {
+    this.highlightSteps_.push(
-      this.highlightSteps_.push(Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_RTL);
+        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathUp(this.info_.RTL));
-    } else {
-      this.highlightSteps_.push(Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_LTR);
-    }
   }
 
   if (!this.info_.RTL) {
@@ -183,24 +178,22 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
   var height = input.height;
   var x = input.xPos;
   var yPos = input.centerline - height / 2;
-  var bottomHighlightWidth = width - Blockly.blockRendering.constants.TAB_WIDTH;
+  var bottomHighlightWidth = width - Blockly.blockRendering.constants.PUZZLE_TAB.width;
 
   if (this.info_.RTL) {
     // TODO: Check if this is different when the inline input is populated.
 
     var aboveTabHeight =
-        Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP +
+        Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP -
-       Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP -
        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
 
     var belowTabHeight =
         height -
         (Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP +
-            Blockly.blockRendering.constants.TAB_HEIGHT -
+            Blockly.blockRendering.constants.PUZZLE_TAB.height) +
-            Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP) +
         Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
 
-    var startX = x + Blockly.blockRendering.constants.TAB_WIDTH -
+    var startX = x + Blockly.blockRendering.constants.PUZZLE_TAB.width -
         Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
     var startY = yPos + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
 
@@ -209,7 +202,8 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
     // Right edge above tab.
     this.highlightInlineSteps_.push('v', aboveTabHeight);
     // Back of tab.
-    this.highlightInlineSteps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN_HIGHLIGHT_RTL);
+    this.highlightInlineSteps_.push(
+        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
     // Right edge below tab.
     this.highlightInlineSteps_.push('v', belowTabHeight);
     // Bottom (horizontal).
@@ -225,8 +219,8 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
     // Bad: reference to Blockly.BlockSvg
     this.highlightInlineSteps_.push('M',
         (x + 2.9) + ',' + (yPos + Blockly.BlockSvg.INLINE_PADDING_Y +
-         Blockly.blockRendering.constants.TAB_HEIGHT - 0.7));
+         Blockly.blockRendering.constants.PUZZLE_TAB.height - 0.7));
     this.highlightInlineSteps_.push('l',
-        (Blockly.blockRendering.constants.TAB_WIDTH * 0.46) + ',-2.1');
+        (Blockly.blockRendering.constants.PUZZLE_TAB.width * 0.46) + ',-2.1');
   }
 };

core/renderers/block_rendering_rewrite/block_rendering_constants.js

@@ -161,34 +161,6 @@ Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) *
         Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) -
     Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
 
-/**
- * SVG path for drawing a horizontal puzzle tab from top to bottom.
- * @const
- */
-Blockly.blockRendering.constants.TAB_PATH_DOWN =  'c 0,10 -' + Blockly.blockRendering.constants.TAB_WIDTH +
-      ',-8 -' + Blockly.blockRendering.constants.TAB_WIDTH + ',7.5 s ' +
-      Blockly.blockRendering.constants.TAB_WIDTH + ',-2.5 ' + Blockly.blockRendering.constants.TAB_WIDTH + ',7.5';
-
-
-/**
- * SVG path for drawing a horizontal puzzle tab from top to bottom with
- * highlighting from the upper-right.
- * @const
- */
-Blockly.blockRendering.constants.TAB_PATH_DOWN_HIGHLIGHT_RTL = 'm -' +
-    (Blockly.blockRendering.constants.TAB_WIDTH * 0.97) + ',2.5 q -' +
-    (Blockly.blockRendering.constants.TAB_WIDTH * 0.05) + ',10 ' +
-    (Blockly.blockRendering.constants.TAB_WIDTH * 0.3) + ',9.5 m ' +
-    (Blockly.blockRendering.constants.TAB_WIDTH * 0.67) + ',-1.9';
-
-/**
- * SVG path for drawing a horizontal puzzle tab from bottom to top.
- * @const
- */
-Blockly.blockRendering.constants.TAB_PATH_UP =  'c 0,-10 -' + Blockly.blockRendering.constants.TAB_WIDTH +
-      ',8 -' + Blockly.blockRendering.constants.TAB_WIDTH + ',-7.5 s ' +
-      Blockly.blockRendering.constants.TAB_WIDTH + ',2.5 ' + Blockly.blockRendering.constants.TAB_WIDTH + ',-7.5';
-
 /**
  * SVG path for drawing next/previous notch from left to right.
  * @const
@@ -279,8 +251,6 @@ Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR =
             Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE +
             Blockly.blockRendering.constants.HIGHLIGHT_OFFSET));
 
-
-
 /**
  * SVG start point for drawing the top-left corner.
  * @const
@@ -310,17 +280,6 @@ Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID   =
     ',' + (Blockly.blockRendering.constants.CORNER_RADIUS - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) +
     ' 0 0,1 ' + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ','; // follow with y pos - corner radius
 
-Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_LTR =
-    'V ' + (Blockly.blockRendering.constants.TAB_HEIGHT + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) +
-    ' m ' + (Blockly.blockRendering.constants.TAB_WIDTH * -0.92) + ',-0.5 ' +
-    'q ' + (Blockly.blockRendering.constants.TAB_WIDTH * -0.19) + ',-5.5 0,-11 ' +
-    'm ' + (Blockly.blockRendering.constants.TAB_WIDTH * 0.92) + ',1 ' +
-    'V 0.5 H 1';
-
-Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_RTL =
-    'M ' + (Blockly.blockRendering.constants.TAB_WIDTH * -0.25) + ',8.4 l ' +
-    (Blockly.blockRendering.constants.TAB_WIDTH * -0.45) + ',-2.1';
-
 /**
  * SVG start point for drawing the top-left corner's highlight in RTL.
  * @const
@@ -386,3 +345,117 @@ Blockly.blockRendering.constants.START_HAT = (function() {
     }
   };
 })();
+
+Blockly.blockRendering.constants.PUZZLE_TAB = (function() {
+  var tabWidth = Blockly.blockRendering.constants.TAB_WIDTH;
+  var tabHeight = 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 main path for the puzzle tab is made out of a few curves (c and s).
+  // Those curves are defined with relative positions.  The 'up' and 'down'
+  // versions of the paths are the same, but the Y sign flips.  Forward and back
+  // are the signs to use to move the cursor in the direction that the path is
+  // being drawn.
+  function makeMainPath(up) {
+    var forward = up ? -1 : 1;
+    var back = -forward;
+
+    var overlap = verticalOverlap;
+    var halfHeight = tabHeight / 2;
+    var control1Y = halfHeight + overlap; // 10
+    var control2Y = halfHeight + 0.5; // 8
+    var control3Y = overlap; //2.5
+
+    //var startPoint = Blockly.utils.svgPaths.point(0, 0);
+    // Center point of the line that is the tab.
+    var endPoint1 = Blockly.utils.svgPaths.point(-tabWidth, forward * halfHeight);
+    var endPoint2 = Blockly.utils.svgPaths.point(tabWidth, forward * halfHeight);
+
+    return Blockly.utils.svgPaths.curve('c',
+        [
+          Blockly.utils.svgPaths.point(0, forward * control1Y),
+          Blockly.utils.svgPaths.point(-tabWidth, back * control2Y),
+          endPoint1
+        ]) +
+        Blockly.utils.svgPaths.curve('s',
+            [
+              Blockly.utils.svgPaths.point(tabWidth, back * control3Y),
+              endPoint2
+            ]);
+  }
+
+  var pathUp = makeMainPath(true);
+  var pathDown = makeMainPath(false);
+  // TODO: Figure out what other tab-related constants can come into here.
+  // Some candidates: tab height, offset from top, vertical overlap.
+
+  return {
+    // TODO: height
+    width: tabWidth,
+    height: tabHeight,
+    pathDown: pathDown,
+    pathUp: pathUp
+  };
+})();
+
+Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT = (function() {
+  var tabWidth = Blockly.blockRendering.constants.TAB_WIDTH;
+  var tabHeight = 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(tabWidth * -0.25, 8.4) +
+      Blockly.utils.svgPaths.lineTo(tabWidth * -0.45, -2.1);
+
+  var highlightRtlDown =
+      Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap) +
+      Blockly.utils.svgPaths.moveBy(-tabWidth * 0.97, 2.5) +
+      Blockly.utils.svgPaths.curve('q',
+          [
+            Blockly.utils.svgPaths.point(-tabWidth * 0.05, 10),
+            Blockly.utils.svgPaths.point(tabWidth * 0.3, 9.5)
+          ]) +
+      Blockly.utils.svgPaths.moveBy(tabWidth * 0.67, -1.9) +
+      Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap);
+
+  var highlightLtrUp =
+      Blockly.utils.svgPaths.lineOnAxis('V',
+          tabHeight + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) +
+      Blockly.utils.svgPaths.moveBy(tabWidth * -0.92, -0.5) +
+      Blockly.utils.svgPaths.curve('q',
+          [
+            Blockly.utils.svgPaths.point(tabWidth * -0.19, -5.5),
+            Blockly.utils.svgPaths.point(0,-11)
+          ]) +
+      Blockly.utils.svgPaths.moveBy(tabWidth * 0.92, 1) +
+      Blockly.utils.svgPaths.lineOnAxis('V', 0.5) +
+      Blockly.utils.svgPaths.lineOnAxis('H', 1);
+
+  var highlightLtrDown =
+      Blockly.utils.svgPaths.moveBy(-5, tabHeight - 0.7) +
+      Blockly.utils.svgPaths.lineTo(tabWidth * 0.46, -2.1);
+  // TODO: Figure out what other tab-related constants can come into here.
+  // Some candidates: tab height, offset from top, vertical overlap.
+
+  return {
+    // TODO: height
+    // width: tabWidth,
+    // height: tabHeight,
+    // TODO: does this actually have a height, or should all references go to
+    // the puzzle_tab object instead?
+    pathUp: function(rtl) {
+      return rtl ? highlightRtlUp : highlightLtrUp;
+    },
+    pathDown: function(rtl) {
+      return rtl ? highlightRtlDown : highlightLtrDown;
+    }
+  };
+})();