Remove references to distance45outside

2026-01-09 18:10:08 +01:00 · 2019-07-29 14:58:51 -07:00
parent 36b4b18492
commit 9ce8282568
2 changed files with 114 additions and 99 deletions
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -50,9 +50,16 @@ 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;
@@ -65,72 +72,72 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) {
 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.highlightConstants.START_POINT);
+      this.steps_.push(Blockly.blockRendering.highlightConstants.START_POINT);
    } else if (elem.type === 'round corner') {
-      this.highlightSteps_.push(
-          this.outsideCornerPaths_.topLeft(this.info_.RTL));
+      this.steps_.push(
+          this.outsideCornerPaths_.topLeft(this.RTL_));
    } else if (elem.type === 'previous connection') {
      // TODO: move the offsets into the definition of the notch highlight, maybe.
-      this.highlightSteps_.push('h',  (this.RTL ? 0.5 : - 0.5));
-      this.highlightSteps_.push(this.notchPaths_.pathLeft);
-      this.highlightSteps_.push('h',  (this.RTL ? -0.5 : 0.5));
+      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(
-          this.startPaths_.path(this.info_.RTL));
+      this.steps_.push(
+          this.startPaths_.path(this.RTL_));
    } else if (elem.isSpacer()) {
-      this.highlightSteps_.push('h', elem.width - this.highlightOffset_);
+      this.steps_.push('h', elem.width - this.highlightOffset_);
    }
  }

-  this.highlightSteps_.push('H', row.width - this.highlightOffset_);
+  this.steps_.push('H', row.width - this.highlightOffset_);
 };

 Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
  var input = row.getLastInput();
-  if (this.info_.RTL) {
+  var pathString = '';
+  if (this.RTL_) {
    var aboveTabHeight = -this.highlightOffset_;
-    var belowTabHeight = row.height -
-        input.connectionHeight +
-        this.highlightOffset_;
-    // Edge above tab.
-    this.highlightSteps_.push('v', aboveTabHeight);
-    // Highlight around back of tab.
-    this.highlightSteps_.push(this.puzzleTabPaths_.pathDown(this.info_.RTL));
-    // Edge below tab.
-    this.highlightSteps_.push('v', belowTabHeight);
+    var belowTabHeight =
+        row.height - input.connectionHeight + this.highlightOffset_;
+
+    pathString =
+        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(
-        this.puzzleTabPaths_.pathDown(this.info_.RTL));
+    pathString =
+        Blockly.utils.svgPaths.moveTo(row.width, row.yPos) +
+        this.puzzleTabPaths_.pathDown(this.RTL_);
  }
+
+  this.steps_.push(pathString);
 };

 Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) {
-  var x = row.statementEdge;
-  var distance45outside = Blockly.blockRendering.highlightConstants.DISTANCE_45_OUTSIDE;
-  if (this.info_.RTL) {
-    this.highlightSteps_.push('M',
-        (x + distance45outside) +
-        ',' + (row.yPos + distance45outside));
-    this.highlightSteps_.push(this.insideCornerPaths_.pathTop(this.info_.RTL));
-    this.highlightSteps_.push('v',
-        row.height - 2 * this.insideCornerPaths_.height);
-    this.highlightSteps_.push(this.insideCornerPaths_.pathBottom(this.info_.RTL));
+  if (this.RTL_) {
+    var innerHeight = row.height - (2 * this.insideCornerPaths_.height);
+    var 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_);
+    this.steps_.push(steps);
  } else {
-    this.highlightSteps_.push('M',
-        (x + distance45outside) + ',' +
-        (row.yPos + row.height - distance45outside));
-    this.highlightSteps_.push(this.insideCornerPaths_.pathBottom(this.info_.RTL));
+    var 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 - this.highlightOffset_);
-    this.highlightSteps_.push('v', row.height);
+  if (this.RTL_) {
+    this.steps_.push('H', row.width - this.highlightOffset_);
+    this.steps_.push('v', row.height);
  }
 };

@@ -138,21 +145,21 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) {
  var height = this.info_.height;
  var elems = this.info_.bottomRow.elements;

-  if (this.info_.RTL) {
-    this.highlightSteps_.push('V', height);
+  if (this.RTL_) {
+    this.steps_.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',
+      if (!this.RTL_) {
+        this.steps_.push('M',
            this.highlightOffset_ + ',' +
            (height - this.highlightOffset_));
      }
    } else if (elem.type === 'round corner') {
-      if (!this.info_.RTL) {
-        this.highlightSteps_.push(this.outsideCornerPaths_.bottomLeft(height));
+      if (!this.RTL_) {
+        this.steps_.push(this.outsideCornerPaths_.bottomLeft(height));
      }
    }
  }
@@ -160,15 +167,15 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) {

 Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
  if (this.info_.outputConnection) {
-    this.highlightSteps_.push(
-        this.puzzleTabPaths_.pathUp(this.info_.RTL));
+    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', this.highlightOffset_);
+      this.steps_.push('V', this.highlightOffset_);
    } else {
-      this.highlightSteps_.push('V', this.outsideCornerPaths_.height);
+      this.steps_.push('V', this.outsideCornerPaths_.height);
    }
  }
 };
@@ -182,7 +189,7 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
  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 = input.connectionOffsetY - offset;
    var belowTabHeight =
@@ -190,29 +197,31 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {

    var startX = connectionRight - offset;

-    // 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(
-        this.puzzleTabPaths_.pathDown(this.info_.RTL));
-    // Right edge below tab.
-    this.highlightInlineSteps_.push('v', belowTabHeight);
-    // Bottom (horizontal).
-    this.highlightInlineSteps_.push('h', bottomHighlightWidth);
+    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);
+
  } else {
-    // Go to top right corner.
-    this.highlightInlineSteps_.push(
-        Blockly.utils.svgPaths.moveTo(input.xPos + input.width + offset, startY));
-    // Highlight right edge, bottom.
-    this.highlightInlineSteps_.push('v', input.height);
-    this.highlightInlineSteps_.push('h ', -bottomHighlightWidth);
-    // Go to top of tab.
-    this.highlightSteps_.push(Blockly.utils.svgPaths.moveTo(
-        connectionRight, yPos + input.connectionOffsetY));
-    // Short highlight glint at bottom of tab.
-    this.highlightSteps_.push(
-        this.puzzleTabPaths_.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);
  }
 };
--- a/core/renderers/block_rendering_rewrite/highlight_constants.js
+++ b/core/renderers/block_rendering_rewrite/highlight_constants.js
@@ -29,7 +29,17 @@ 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 =
@@ -37,18 +47,10 @@ Blockly.blockRendering.highlightConstants.START_POINT =
        Blockly.blockRendering.highlightConstants.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
- */
-Blockly.blockRendering.highlightConstants.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) *
-    (Blockly.blockRendering.constants.CORNER_RADIUS +
-        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;
@@ -61,21 +63,25 @@ Blockly.blockRendering.highlightConstants.INSIDE_CORNER = (function() {
   */
  var distance45outside = (1 - Math.SQRT1_2) * (radius + offset) - offset;

-  var pathTopRtl = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
-      Blockly.utils.svgPaths.point(
-          -distance45outside - offset,
-          radius - distance45outside));
+  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 pathBottomRtl =
+      Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset,
+          Blockly.utils.svgPaths.point(radius + offset, radius + offset));

-  var pathBottomLtr = Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset,
-      Blockly.utils.svgPaths.point(
-          radius - distance45outside,
-          distance45outside + 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 {
-    // width: width,
    height: radius,
    pathTop: function(rtl) {
      return rtl ? pathTopRtl : '';