From 37250f4ce4273bfbfd401b0857039422bb80145f Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Wed, 31 Jul 2019 11:39:26 -0700 Subject: [PATCH] Fix connection highlight rendering --- core/block_render_svg.js | 23 ++++++++----------- core/rendered_connection.js | 14 +++++++++-- .../block_render_draw.js | 12 +++++----- 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/core/block_render_svg.js b/core/block_render_svg.js index 13d9a6fb5..e560afcaf 100644 --- a/core/block_render_svg.js +++ b/core/block_render_svg.js @@ -651,8 +651,8 @@ Blockly.BlockSvg.prototype.renderDrawTop_ = function(pathObject, rightEdge) { steps.push(Blockly.BlockSvg.NOTCH_PATH_LEFT); highlightSteps.push(Blockly.BlockSvg.NOTCH_PATH_LEFT_HIGHLIGHT); - var connectionX = (this.RTL ? - -Blockly.BlockSvg.NOTCH_WIDTH : Blockly.BlockSvg.NOTCH_WIDTH); + var notchOffsetStart = 15; + var connectionX = (this.RTL ? -notchOffsetStart : notchOffsetStart); this.previousConnection.setOffsetInBlock(connectionX, 0); } steps.push('H', rightEdge); @@ -733,13 +733,9 @@ Blockly.BlockSvg.prototype.renderDrawBottom_ = function(pathObject, cursorY) { if (this.nextConnection) { steps.push('H', (Blockly.BlockSvg.NOTCH_WIDTH + (this.RTL ? 0.5 : - 0.5)) + ' ' + Blockly.BlockSvg.NOTCH_PATH_RIGHT); - // Create next block connection. - var connectionX; - if (this.RTL) { - connectionX = -Blockly.BlockSvg.NOTCH_WIDTH; - } else { - connectionX = Blockly.BlockSvg.NOTCH_WIDTH; - } + + var notchOffsetStart = 15; + var connectionX = (this.RTL ? -notchOffsetStart : notchOffsetStart); this.nextConnection.setOffsetInBlock(connectionX, cursorY + 1); this.height += 4; // Height of tab. } @@ -777,7 +773,7 @@ Blockly.BlockSvg.prototype.renderDrawLeft_ = function(pathObject) { var highlightSteps = pathObject.highlightSteps; if (this.outputConnection) { // Create output connection. - this.outputConnection.setOffsetInBlock(0, 0); + this.outputConnection.setOffsetInBlock(0, 5); steps.push('V', Blockly.BlockSvg.TAB_HEIGHT); steps.push('c 0,-10 -' + Blockly.BlockSvg.TAB_WIDTH + ',8 -' + Blockly.BlockSvg.TAB_WIDTH + ',-7.5 s ' + Blockly.BlockSvg.TAB_WIDTH + @@ -915,7 +911,7 @@ Blockly.BlockSvg.prototype.renderInlineRow_ = function(pathObject, row, cursor, input.renderWidth - 1; } connectionPos.y = cursor.y + Blockly.BlockSvg.INLINE_PADDING_Y + 1; - input.connection.setOffsetInBlock(connectionPos.x, connectionPos.y); + input.connection.setOffsetInBlock(connectionPos.x, connectionPos.y + 5); } } @@ -977,7 +973,7 @@ Blockly.BlockSvg.prototype.renderExternalValueInput_ = function(pathObject, row, } // Create external input connection. connectionPos.x = this.RTL ? -rightEdge - 1 : rightEdge + 1; - input.connection.setOffsetInBlock(connectionPos.x, cursor.y); + input.connection.setOffsetInBlock(connectionPos.x, cursor.y + 5); if (input.connection.isConnected()) { this.width = Math.max(this.width, rightEdge + input.connection.targetBlock().getHeightWidth().width - @@ -1093,7 +1089,8 @@ Blockly.BlockSvg.prototype.renderStatementInput_ = function(pathObject, row, highlightSteps.push('H', inputRows.rightEdge - 0.5); } // Create statement connection. - connectionPos.x = this.RTL ? -cursor.x : cursor.x + 1; + var x = inputRows.statementEdge + 15; // Notch offset from left. + connectionPos.x = this.RTL ? -x : x + 1; input.connection.setOffsetInBlock(connectionPos.x, cursor.y + 1); if (input.connection.isConnected()) { diff --git a/core/rendered_connection.js b/core/rendered_connection.js index 586dfaac6..2d681001d 100644 --- a/core/rendered_connection.js +++ b/core/rendered_connection.js @@ -212,9 +212,19 @@ Blockly.RenderedConnection.prototype.closest = function(maxLimit, dxy) { Blockly.RenderedConnection.prototype.highlight = function() { var steps; if (this.type == Blockly.INPUT_VALUE || this.type == Blockly.OUTPUT_VALUE) { - steps = 'm 0,0 ' + Blockly.BlockSvg.TAB_PATH_DOWN + ' v 5'; + // Vertical line, puzzle tab, vertical line. + var yLen = 5; + steps = Blockly.utils.svgPaths.moveBy(0, -yLen) + + Blockly.utils.svgPaths.lineOnAxis('v', yLen) + + Blockly.blockRendering.constants.PUZZLE_TAB.pathDown + + Blockly.utils.svgPaths.lineOnAxis('v', yLen); } else { - steps = 'm -20,0 h 5 ' + Blockly.BlockSvg.NOTCH_PATH_LEFT + ' h 5'; + var xLen = 5; + // Horizontal line, notch, horizontal line. + steps = Blockly.utils.svgPaths.moveBy(-xLen, 0) + + Blockly.utils.svgPaths.lineOnAxis('h', xLen) + + Blockly.blockRendering.constants.NOTCH.pathLeft + + Blockly.utils.svgPaths.lineOnAxis('h', xLen); } var xy = this.sourceBlock_.getRelativeToSurfaceXY(); var x = this.x_ - xy.x; diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index d80646839..c7a423b0d 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -390,11 +390,11 @@ Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = func var input = row.getLastInput(); if (input.connection) { var connX = row.statementEdge + - Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + - Blockly.blockRendering.constants.DARK_PATH_OFFSET; + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT; if (this.info_.RTL) { connX *= -1; } + connX += 0.5; input.connection.setOffsetInBlock(connX, row.yPos + Blockly.blockRendering.constants.DARK_PATH_OFFSET); } @@ -424,9 +424,8 @@ Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = funct */ Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() { if (this.info_.topRow.hasPreviousConnection) { - var connX = - this.info_.RTL ? -Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT : - Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT; + var x = Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT; + var connX = (this.info_.RTL ? -x : x); this.info_.topRow.connection.setOffsetInBlock(connX, 0); } }; @@ -440,7 +439,8 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() { if (bottomRow.hasNextConnection) { var connInfo = bottomRow.getNextConnection(); - var connX = this.info_.RTL ? -connInfo.xPos + 0.5 : connInfo.xPos + 0.5; + var x = connInfo.xPos; + var connX = (this.info_.RTL ? -x : x) + 0.5; bottomRow.connection.setOffsetInBlock( connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET); }