From bcdd691796b01a396bd176f073833a951ab4fb2f Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Tue, 30 Jul 2019 13:58:44 -0700 Subject: [PATCH 1/3] Make updating the connection locations called the same way for both renderers --- core/block_render_svg.js | 36 ------------------ core/block_svg.js | 37 +++++++++++++++++++ .../block_rendering.js | 3 -- 3 files changed, 37 insertions(+), 39 deletions(-) diff --git a/core/block_render_svg.js b/core/block_render_svg.js index 8b6ac81fb..13d9a6fb5 100644 --- a/core/block_render_svg.js +++ b/core/block_render_svg.js @@ -333,7 +333,6 @@ Blockly.BlockSvg.prototype.renderInternal = function() { var inputRows = this.renderCompute_(cursorX); this.renderDraw_(cursorX, inputRows); - this.renderMoveConnections_(); }; /** @@ -615,41 +614,6 @@ Blockly.BlockSvg.prototype.setPaths_ = function(pathObject) { } }; -/** - * Update all of the connections on this block with the new locations calculated - * in renderCompute. Also move all of the connected blocks based on the new - * connection locations. - * @private - */ -Blockly.BlockSvg.prototype.renderMoveConnections_ = function() { - var blockTL = this.getRelativeToSurfaceXY(); - // Don't tighten previous or output connections because they are inferior - // connections. - if (this.previousConnection) { - this.previousConnection.moveToOffset(blockTL); - } - if (this.outputConnection) { - this.outputConnection.moveToOffset(blockTL); - } - - for (var i = 0; i < this.inputList.length; i++) { - var conn = this.inputList[i].connection; - if (conn) { - conn.moveToOffset(blockTL); - if (conn.isConnected()) { - conn.tighten_(); - } - } - } - - if (this.nextConnection) { - this.nextConnection.moveToOffset(blockTL); - if (this.nextConnection.isConnected()) { - this.nextConnection.tighten_(); - } - } -}; - /** * Render the top edge of the block. * @param {!Blockly.BlockSvg.PathObject} pathObject The object containing diff --git a/core/block_svg.js b/core/block_svg.js index cbb9891e7..f2674f507 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -1547,6 +1547,8 @@ Blockly.BlockSvg.prototype.render = function(opt_bubble) { } else { this.renderInternal(); } + // No matter how we rendered, connections locations should now be correct. + this.updateConnectionLocations_(); if (opt_bubble !== false) { // Render all blocks above this one (propagate a reflow). var parentBlock = this.getParent(); @@ -1559,3 +1561,38 @@ Blockly.BlockSvg.prototype.render = function(opt_bubble) { } Blockly.Field.stopCache(); }; + +/** + * Update all of the connections on this block with the new locations calculated + * during rendering. Also move all of the connected blocks based on the new + * connection locations. + * @private + */ +Blockly.BlockSvg.prototype.updateConnectionLocations_ = function() { + var blockTL = this.getRelativeToSurfaceXY(); + // Don't tighten previous or output connections because they are inferior + // connections. + if (this.previousConnection) { + this.previousConnection.moveToOffset(blockTL); + } + if (this.outputConnection) { + this.outputConnection.moveToOffset(blockTL); + } + + for (var i = 0; i < this.inputList.length; i++) { + var conn = this.inputList[i].connection; + if (conn) { + conn.moveToOffset(blockTL); + if (conn.isConnected()) { + conn.tighten_(); + } + } + } + + if (this.nextConnection) { + this.nextConnection.moveToOffset(blockTL); + if (this.nextConnection.isConnected()) { + this.nextConnection.tighten_(); + } + } +}; diff --git a/core/renderers/block_rendering_rewrite/block_rendering.js b/core/renderers/block_rendering_rewrite/block_rendering.js index 8a967b37b..705d7d16f 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering.js +++ b/core/renderers/block_rendering_rewrite/block_rendering.js @@ -47,7 +47,4 @@ Blockly.blockRendering.render = function(block) { } var info = new Blockly.blockRendering.RenderInfo(block); new Blockly.blockRendering.Drawer(block, info).draw_(); - - // TODO: Fix moving connections in the new rendering code. - block.renderMoveConnections_(); }; From 37250f4ce4273bfbfd401b0857039422bb80145f Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Wed, 31 Jul 2019 11:39:26 -0700 Subject: [PATCH 2/3] 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); } From 41c686e7330e966f6d59eb6c733b3cceef196c04 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Wed, 31 Jul 2019 13:17:20 -0700 Subject: [PATCH 3/3] Use constants --- core/block_render_svg.js | 35 ++++++++++++++++++++++++++--------- core/block_svg.js | 2 +- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/core/block_render_svg.js b/core/block_render_svg.js index e560afcaf..e21083b7f 100644 --- a/core/block_render_svg.js +++ b/core/block_render_svg.js @@ -102,6 +102,21 @@ Blockly.BlockSvg.TAB_WIDTH = 8; * @const */ Blockly.BlockSvg.NOTCH_WIDTH = 30; + +/** + * Offset of the notch from the left side of the block. + * @type {number} + * @const + */ +Blockly.BlockSvg.NOTCH_OFFSET_X = 15; + +/** + * Offset of the puzzle tab from the top of the block. + * @type {number} + * @const + */ +Blockly.BlockSvg.TAB_OFFSET_Y = 5; + /** * Rounded corner radius. * @const @@ -651,8 +666,8 @@ Blockly.BlockSvg.prototype.renderDrawTop_ = function(pathObject, rightEdge) { steps.push(Blockly.BlockSvg.NOTCH_PATH_LEFT); highlightSteps.push(Blockly.BlockSvg.NOTCH_PATH_LEFT_HIGHLIGHT); - var notchOffsetStart = 15; - var connectionX = (this.RTL ? -notchOffsetStart : notchOffsetStart); + var connectionX = (this.RTL ? + -Blockly.BlockSvg.NOTCH_OFFSET_X : Blockly.BlockSvg.NOTCH_OFFSET_X); this.previousConnection.setOffsetInBlock(connectionX, 0); } steps.push('H', rightEdge); @@ -734,8 +749,8 @@ Blockly.BlockSvg.prototype.renderDrawBottom_ = function(pathObject, cursorY) { steps.push('H', (Blockly.BlockSvg.NOTCH_WIDTH + (this.RTL ? 0.5 : - 0.5)) + ' ' + Blockly.BlockSvg.NOTCH_PATH_RIGHT); - var notchOffsetStart = 15; - var connectionX = (this.RTL ? -notchOffsetStart : notchOffsetStart); + var connectionX = (this.RTL ? + -Blockly.BlockSvg.NOTCH_OFFSET_X : Blockly.BlockSvg.NOTCH_OFFSET_X); this.nextConnection.setOffsetInBlock(connectionX, cursorY + 1); this.height += 4; // Height of tab. } @@ -773,7 +788,7 @@ Blockly.BlockSvg.prototype.renderDrawLeft_ = function(pathObject) { var highlightSteps = pathObject.highlightSteps; if (this.outputConnection) { // Create output connection. - this.outputConnection.setOffsetInBlock(0, 5); + this.outputConnection.setOffsetInBlock(0, Blockly.BlockSvg.TAB_OFFSET_Y); 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 + @@ -910,8 +925,9 @@ Blockly.BlockSvg.prototype.renderInlineRow_ = function(pathObject, row, cursor, Blockly.BlockSvg.TAB_WIDTH - Blockly.BlockSvg.SEP_SPACE_X - input.renderWidth - 1; } - connectionPos.y = cursor.y + Blockly.BlockSvg.INLINE_PADDING_Y + 1; - input.connection.setOffsetInBlock(connectionPos.x, connectionPos.y + 5); + connectionPos.y = cursor.y + Blockly.BlockSvg.INLINE_PADDING_Y + + Blockly.BlockSvg.TAB_OFFSET_Y + 1; + input.connection.setOffsetInBlock(connectionPos.x, connectionPos.y); } } @@ -973,7 +989,8 @@ 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 + 5); + input.connection.setOffsetInBlock( + connectionPos.x, cursor.y + Blockly.BlockSvg.TAB_OFFSET_Y); if (input.connection.isConnected()) { this.width = Math.max(this.width, rightEdge + input.connection.targetBlock().getHeightWidth().width - @@ -1089,7 +1106,7 @@ Blockly.BlockSvg.prototype.renderStatementInput_ = function(pathObject, row, highlightSteps.push('H', inputRows.rightEdge - 0.5); } // Create statement connection. - var x = inputRows.statementEdge + 15; // Notch offset from left. + var x = inputRows.statementEdge + Blockly.BlockSvg.NOTCH_OFFSET_X; connectionPos.x = this.RTL ? -x : x + 1; input.connection.setOffsetInBlock(connectionPos.x, cursor.y + 1); diff --git a/core/block_svg.js b/core/block_svg.js index f2674f507..99dcc9cf1 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -1547,7 +1547,7 @@ Blockly.BlockSvg.prototype.render = function(opt_bubble) { } else { this.renderInternal(); } - // No matter how we rendered, connections locations should now be correct. + // No matter how we rendered, connection locations should now be correct. this.updateConnectionLocations_(); if (opt_bubble !== false) { // Render all blocks above this one (propagate a reflow).