From 9ce8282568136b7e74b2d90335a8562ddd66eea5 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Mon, 29 Jul 2019 14:58:51 -0700 Subject: [PATCH] Remove references to distance45outside --- .../block_render_draw_highlight.js | 165 +++++++++--------- .../highlight_constants.js | 48 ++--- 2 files changed, 114 insertions(+), 99 deletions(-) diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js index b863c865c..e093c05d7 100644 --- 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); } }; diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js index aed02338f..b134b6661 100644 --- 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 : '';