diff --git a/core/block_render_svg.js b/core/block_render_svg.js index 8b6ac81fb..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 @@ -333,7 +348,6 @@ Blockly.BlockSvg.prototype.renderInternal = function() { var inputRows = this.renderCompute_(cursorX); this.renderDraw_(cursorX, inputRows); - this.renderMoveConnections_(); }; /** @@ -615,41 +629,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 @@ -688,7 +667,7 @@ Blockly.BlockSvg.prototype.renderDrawTop_ = function(pathObject, rightEdge) { highlightSteps.push(Blockly.BlockSvg.NOTCH_PATH_LEFT_HIGHLIGHT); var connectionX = (this.RTL ? - -Blockly.BlockSvg.NOTCH_WIDTH : Blockly.BlockSvg.NOTCH_WIDTH); + -Blockly.BlockSvg.NOTCH_OFFSET_X : Blockly.BlockSvg.NOTCH_OFFSET_X); this.previousConnection.setOffsetInBlock(connectionX, 0); } steps.push('H', rightEdge); @@ -769,13 +748,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 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. } @@ -813,7 +788,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, 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 + @@ -950,7 +925,8 @@ 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; + connectionPos.y = cursor.y + Blockly.BlockSvg.INLINE_PADDING_Y + + Blockly.BlockSvg.TAB_OFFSET_Y + 1; input.connection.setOffsetInBlock(connectionPos.x, connectionPos.y); } } @@ -1013,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); + 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 - @@ -1129,7 +1106,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 + Blockly.BlockSvg.NOTCH_OFFSET_X; + connectionPos.x = this.RTL ? -x : x + 1; input.connection.setOffsetInBlock(connectionPos.x, cursor.y + 1); if (input.connection.isConnected()) { diff --git a/core/block_svg.js b/core/block_svg.js index cbb9891e7..99dcc9cf1 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, connection 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/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); } 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_(); };