From 94fe97d9fd128f9d9b5f701989efff7d4d1cd6b6 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Tue, 30 Jul 2019 11:38:18 -0700 Subject: [PATCH] position notches --- .../block_render_draw.js | 37 ++++++++++++------- .../block_render_draw_highlight.js | 8 ++-- .../block_render_info.js | 9 +++-- .../block_rendering_constants.js | 17 +++++---- .../highlight_constants.js | 3 +- 5 files changed, 46 insertions(+), 28 deletions(-) diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index 8085c76bd..61cc7d47c 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -46,8 +46,7 @@ Blockly.blockRendering.Drawer = function(block, info) { this.pathObject_ = new Blockly.BlockSvg.PathObject(); this.steps_ = this.pathObject_.steps; this.inlineSteps_ = this.pathObject_.inlineSteps; - this.highlighter_ = - new Blockly.blockRendering.Highlighter(this.info_, this.pathObject_); + this.highlighter_ = new Blockly.blockRendering.Highlighter(this.info_, this.pathObject_); }; /** @@ -114,8 +113,10 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { var topRow = this.info_.topRow; var elements = topRow.elements; - this.highlighter_.drawTopCorner(topRow); - this.highlighter_.drawRightSideRow(topRow); + if (this.highlighter_) { + this.highlighter_.drawTopCorner(topRow); + this.highlighter_.drawRightSideRow(topRow); + } this.positionPreviousConnection_(); for (var i = 0, elem; elem = elements[i]; i++) { @@ -145,7 +146,9 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { */ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) { var input = row.getLastInput(); - this.highlighter_.drawValueInput(row); + if (this.highlighter_) { + 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 - input.connectionHeight); @@ -160,7 +163,9 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) { * @private */ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) { - this.highlighter_.drawStatementInput(row); + if (this.highlighter_) { + this.highlighter_.drawStatementInput(row); + } // Where to start drawing the notch, which is on the right side in LTR. var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + Blockly.blockRendering.constants.NOTCH.width; @@ -188,7 +193,9 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) { * @private */ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) { - this.highlighter_.drawRightSideRow(row); + if (this.highlighter_) { + this.highlighter_.drawRightSideRow(row); + } this.steps_.push('H', row.width); this.steps_.push('v', row.height); }; @@ -202,15 +209,15 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) { Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() { var bottomRow = this.info_.bottomRow; var elems = bottomRow.elements; - this.highlighter_.drawBottomRow(bottomRow); + if (this.highlighter_) { + this.highlighter_.drawBottomRow(bottomRow); + } this.positionNextConnection_(); this.steps_.push('v', bottomRow.height); for (var i = elems.length - 1; i >= 0; i--) { var elem = elems[i]; if (elem.type === 'next connection') { - //this.steps_.push('h', (this.RTL ? 0.5 : - 0.5)); this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathRight); - //this.steps_.push('h', (this.RTL ? -0.5 : 0.5)); } else if (elem.type === 'square corner') { this.steps_.push('H 0'); } else if (elem.type === 'round corner') { @@ -227,7 +234,9 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() { * @private */ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() { - this.highlighter_.drawLeft(); + if (this.highlighter_) { + this.highlighter_.drawLeft(); + } var outputConnection = this.info_.outputConnection; this.positionOutputConnection_(); @@ -323,7 +332,9 @@ Blockly.blockRendering.Drawer.prototype.layoutField_ = function(fieldInfo) { * @private */ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) { - this.highlighter_.drawInlineInput(input); + if (this.highlighter_) { + this.highlighter_.drawInlineInput(input); + } var width = input.width; var height = input.height; var yPos = input.centerline - height / 2; @@ -429,7 +440,7 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() { if (bottomRow.hasNextConnection) { var connInfo = bottomRow.getNextConnection(); - var connX = this.info_.RTL ? -connInfo.xPos : connInfo.xPos; + var connX = this.info_.RTL ? -connInfo.xPos + 0.5 : connInfo.xPos + 0.5; bottomRow.connection.setOffsetInBlock( connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET); } 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 4290edcd6..323e13b83 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -77,14 +77,14 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) { 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.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.steps_.push(this.startPaths_.path(this.RTL_)); } else if (elem.isSpacer()) { - this.steps_.push('h', elem.width - this.highlightOffset_); + // The end point of the spacer needs to be offset by the highlight amount. + // So instead of using the spacer's width for a relative horizontal, use + // its width and position for an absolute horizontal move. + this.steps_.push('H', elem.xPos + elem.width - this.highlightOffset_); } } diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js index c02bc17c4..7bdbddc81 100644 --- a/core/renderers/block_rendering_rewrite/block_render_info.js +++ b/core/renderers/block_rendering_rewrite/block_render_info.js @@ -407,7 +407,9 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne } else if (next.isNextConnection()) { // Next connections are shifted slightly to the left (in both LTR and RTL) // to make the dark path under the previous connection show through. - return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;//+ (this.RTL ? 0.5 : - 0.5); + var offset = (this.RTL ? 1 : -1) * + Blockly.blockRendering.constants.DARK_PATH_OFFSET / 2; + return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + offset; } } @@ -418,8 +420,9 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne } else if (next.isNextConnection()) { // Next connections are shifted slightly to the left (in both LTR and RTL) // to make the dark path under the previous connection show through. - return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV;//+ - //(this.RTL ? 0.5 : - 0.5); + var offset = (this.RTL ? 1 : -1) * + Blockly.blockRendering.constants.DARK_PATH_OFFSET / 2; + return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV + offset; } } diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index 0142fb5a5..b377607c8 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -63,6 +63,11 @@ Blockly.blockRendering.constants.MIN_BLOCK_WIDTH = 12; Blockly.blockRendering.constants.EMPTY_BLOCK_SPACER_HEIGHT = 16; +/** + * Rounded corner radius. + * @const + */ +Blockly.blockRendering.constants.CORNER_RADIUS = 8; // Offset from the left side of a block or the inside of a statement input to // the left side of the notch. @@ -71,7 +76,11 @@ Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT = // This is the width from where a rounded corner ends to where a previous // connection starts. -Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV = 7; +// The position of the notch should not change as the rounded corner decreases +// in radius. +Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV = + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT - + Blockly.blockRendering.constants.CORNER_RADIUS; Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER = 5; Blockly.blockRendering.constants.STATEMENT_INPUT_PADDING_LEFT = 20; @@ -81,12 +90,6 @@ Blockly.blockRendering.constants.BETWEEN_STATEMENT_PADDING_Y = 4; // has inputs inline. Blockly.blockRendering.constants.MAX_BOTTOM_WIDTH = 66.5; -/** - * Rounded corner radius. - * @const - */ -Blockly.blockRendering.constants.CORNER_RADIUS = 8; - /** * Height of the top hat. * @const diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js index 59a222dbd..340aadc2d 100644 --- a/core/renderers/block_rendering_rewrite/highlight_constants.js +++ b/core/renderers/block_rendering_rewrite/highlight_constants.js @@ -133,7 +133,7 @@ Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER = (function() { }, bottomLeft: function(yPos) { return Blockly.utils.svgPaths.moveTo( - distance45inside,yPos - distance45inside) + + distance45inside + offset, yPos - distance45inside) + Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset, Blockly.utils.svgPaths.point(offset, yPos - radius)); } @@ -195,6 +195,7 @@ Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() { })(); Blockly.blockRendering.highlightConstants.NOTCH = (function() { + // This is only for the previous connection. var pathLeft = Blockly.utils.svgPaths.lineOnAxis( 'h', Blockly.blockRendering.highlightConstants.OFFSET) +