Move all references to PUZZLE_TAB.height and width into measurables

2026-01-07 00:50:27 +01:00 · 2019-07-25 14:59:11 -07:00
parent 15ca31650f
commit 20bec74282
5 changed files with 77 additions and 51 deletions
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -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);
 };

@@ -217,11 +217,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 +316,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 +345,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);
  }
 };
@@ -425,8 +430,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);
  }
 };
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -52,6 +52,8 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) {
  this.pathObject_ = pathObject;
  this.highlightSteps_ = this.pathObject_.highlightSteps;
  this.highlightInlineSteps_ = this.pathObject_.highlightInlineSteps;
+
+  this.highlightOffset_ = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
 };

 Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
@@ -69,19 +71,20 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
      this.highlightSteps_.push(
          Blockly.blockRendering.constants.START_HAT.highlight(this.info_.RTL));
    } else if (elem.isSpacer()) {
-      this.highlightSteps_.push('h', elem.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
+      this.highlightSteps_.push('h', elem.width - this.highlightOffset_);
    }
  }

-  this.highlightSteps_.push('H', row.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
+  this.highlightSteps_.push('H', row.width - this.highlightOffset_);
 };

 Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
+  var input = row.getLastInput();
  if (this.info_.RTL) {
-    var aboveTabHeight = -Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
+    var aboveTabHeight = -this.highlightOffset_;
    var belowTabHeight = row.height -
-        Blockly.blockRendering.constants.PUZZLE_TAB.height +
-        Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
+        input.connectionHeight +
+        this.highlightOffset_;
    // Edge above tab.
    this.highlightSteps_.push('v', aboveTabHeight);
    // Highlight around back of tab.
@@ -122,7 +125,7 @@ Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
    this.highlightSteps_.push('H', row.width);
  }
  if (this.info_.RTL) {
-    this.highlightSteps_.push('H', row.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
+    this.highlightSteps_.push('H', row.width - this.highlightOffset_);
    this.highlightSteps_.push('v', row.height);
  }
 };
@@ -140,8 +143,8 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) {
    if (elem.type === 'square corner') {
      if (!this.info_.RTL) {
        this.highlightSteps_.push('M',
-            Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ',' +
-            (height - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET));
+            this.highlightOffset_ + ',' +
+            (height - this.highlightOffset_));
      }
    } else if (elem.type === 'round corner') {
      if (!this.info_.RTL) {
@@ -156,14 +159,14 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) {
 };

 Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
-  if (this.info_.hasOutputConnection) {
+  if (this.info_.outputConnection) {
    this.highlightSteps_.push(
        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathUp(this.info_.RTL));
  }

  if (!this.info_.RTL) {
    if (this.info_.topRow.elements[0].isSquareCorner()) {
-      this.highlightSteps_.push('V', Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
+      this.highlightSteps_.push('V', this.highlightOffset_);
    } else {
      this.highlightSteps_.push('V', Blockly.blockRendering.constants.CORNER_RADIUS);
    }
@@ -171,30 +174,21 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
 };

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

    // Highlight right edge, around back of tab, and bottom.
    this.highlightInlineSteps_.push('M', startX + ',' + startY);
@@ -210,14 +204,13 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
  } else {
    // Go to top right corner.
    this.highlightInlineSteps_.push(
-        Blockly.utils.svgPaths.moveTo(x + inputWidth + offset, yPos + offset));
+        Blockly.utils.svgPaths.moveTo(input.xPos + input.width + offset, startY));
    // Highlight right edge, bottom.
-    this.highlightInlineSteps_.push('v', height);
+    this.highlightInlineSteps_.push('v', input.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));
+        connectionRight, yPos + input.connectionOffsetY));
    // Short highlight glint at bottom of tab.
    this.highlightSteps_.push(
        Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/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
--- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js
+++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
@@ -112,9 +112,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;

@@ -420,6 +422,7 @@ Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT = (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.moveBy(width * -0.92, -0.5) +
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/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);

@@ -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.