From 73d0b70c22aad569b649618118a3ad4e94cbdb7f Mon Sep 17 00:00:00 2001 From: Sam El-Husseini Date: Wed, 4 Sep 2019 15:38:23 -0700 Subject: [PATCH] Add a spacer before and after a statement input and place use it to render a right corner before and after the statement input. (#2967) --- core/renderers/common/drawer.js | 2 +- core/renderers/common/info.js | 3 +- core/renderers/zelos/constants.js | 30 ++++++++++++++ core/renderers/zelos/drawer.js | 30 +++++++++++++- core/renderers/zelos/info.js | 52 ++++++++++++++++++++++++ core/renderers/zelos/measurables/rows.js | 39 ++++++++++++++++++ 6 files changed, 153 insertions(+), 3 deletions(-) diff --git a/core/renderers/common/drawer.js b/core/renderers/common/drawer.js index a4e4f1684..2cb9021d0 100644 --- a/core/renderers/common/drawer.js +++ b/core/renderers/common/drawer.js @@ -111,7 +111,7 @@ Blockly.blockRendering.Drawer.prototype.hideHiddenIcons_ = function() { */ Blockly.blockRendering.Drawer.prototype.drawOutline_ = function() { this.drawTop_(); - for (var r = 1; r < this.info_.rows.length - 2; r++) { + for (var r = 1; r < this.info_.rows.length - 1; r++) { var row = this.info_.rows[r]; if (row.hasJaggedEdge) { this.drawJaggedEdge_(row); diff --git a/core/renderers/common/info.js b/core/renderers/common/info.js index 1d0d7b34e..a7649a1a1 100644 --- a/core/renderers/common/info.js +++ b/core/renderers/common/info.js @@ -425,7 +425,8 @@ Blockly.blockRendering.RenderInfo.prototype.alignStatementRow_ = function(row) { // Also widen the statement input to reach to the right side of the // block. Note that this does not add padding. currentWidth = row.width; - desiredWidth = this.width - this.startX; + var rightCornerWidth = this.constants_.INSIDE_CORNERS.rightWidth || 0; + desiredWidth = this.width - this.startX - rightCornerWidth; statementInput.width += (desiredWidth - currentWidth); row.width += (desiredWidth - currentWidth); row.widthWithConnectedBlocks = Math.max(row.width, diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js index b91483d83..bd4c85d22 100644 --- a/core/renderers/zelos/constants.js +++ b/core/renderers/zelos/constants.js @@ -231,3 +231,33 @@ Blockly.zelos.ConstantProvider.prototype.makeOutsideCorners = function() { bottomLeft: bottomLeft }; }; + +/** + * @override + */ +Blockly.zelos.ConstantProvider.prototype.makeInsideCorners = function() { + var radius = this.CORNER_RADIUS; + + var innerTopLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius, + Blockly.utils.svgPaths.point(-radius, radius)); + + var innerTopRightCorner = Blockly.utils.svgPaths.arc('a', '0 0,1', radius, + Blockly.utils.svgPaths.point(-radius, radius)); + + var innerBottomLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius, + Blockly.utils.svgPaths.point(radius, radius)); + + var innerBottomRightCorner = Blockly.utils.svgPaths.arc('a', '0 0,1', radius, + Blockly.utils.svgPaths.point(radius, radius)); + + return { + width: radius, + height: radius, + pathTop: innerTopLeftCorner, + pathBottom: innerBottomLeftCorner, + rightWidth: radius, + rightHeight: radius, + pathTopRight: innerTopRightCorner, + pathBottomRight: innerBottomRightCorner + }; +}; diff --git a/core/renderers/zelos/drawer.js b/core/renderers/zelos/drawer.js index eac5c0153..3684410bc 100644 --- a/core/renderers/zelos/drawer.js +++ b/core/renderers/zelos/drawer.js @@ -90,7 +90,9 @@ Blockly.zelos.Drawer.prototype.drawBottom_ = function() { this.positionNextConnection_(); this.outlinePath_ += - Blockly.utils.svgPaths.lineOnAxis('v', bottomRow.height - bottomRow.overhangY); + Blockly.utils.svgPaths.lineOnAxis('v', + bottomRow.height - bottomRow.overhangY - + this.constants_.INSIDE_CORNERS.rightHeight); for (var i = elems.length - 1, elem; (elem = elems[i]); i--) { if (Blockly.blockRendering.Types.isNextConnection(elem)) { @@ -106,3 +108,29 @@ Blockly.zelos.Drawer.prototype.drawBottom_ = function() { } } }; + +/** + * Add steps for the right side of a row that does not have value or + * statement input connections. + * @param {!Blockly.blockRendering.Row} row The row to draw the + * side of. + * @protected + */ +Blockly.zelos.Drawer.prototype.drawRightSideRow_ = function(row) { + if (row.type & Blockly.blockRendering.Types.getType('BEFORE_STATEMENT_SPACER_ROW')) { + var remainingHeight = row.height - this.constants_.INSIDE_CORNERS.rightWidth; + this.outlinePath_ += + (remainingHeight > 0 ? + Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + remainingHeight) : '') + + this.constants_.INSIDE_CORNERS.pathTopRight; + } else if (row.type & Blockly.blockRendering.Types.getType('AFTER_STATEMENT_SPACER_ROW')) { + var remainingHeight = row.height - this.constants_.INSIDE_CORNERS.rightWidth; + this.outlinePath_ += + this.constants_.INSIDE_CORNERS.pathBottomRight + + (remainingHeight > 0 ? + Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height) : ''); + } else { + this.outlinePath_ += + Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height); + } +}; diff --git a/core/renderers/zelos/info.js b/core/renderers/zelos/info.js index 3da55b363..fb38791c6 100644 --- a/core/renderers/zelos/info.js +++ b/core/renderers/zelos/info.js @@ -47,6 +47,8 @@ goog.require('Blockly.blockRendering.OutputConnection'); goog.require('Blockly.RenderedConnection'); +goog.require('Blockly.zelos.AfterStatementSpacerRow'); +goog.require('Blockly.zelos.BeforeStatementSpacerRow'); goog.require('Blockly.zelos.BottomRow'); goog.require('Blockly.zelos.TopRow'); @@ -231,6 +233,56 @@ Blockly.zelos.RenderInfo.prototype.getInRowSpacing_ = function(prev, next) { return this.constants_.MEDIUM_PADDING; }; +/** + * Create a spacer row to go between prev and next, and set its size. + * @param {?Blockly.blockRendering.Row} prev The previous row, or null. + * @param {?Blockly.blockRendering.Row} next The next row, or null. + * @return {!Blockly.blockRendering.SpacerRow} The newly created spacer row. + * @protected + */ +Blockly.zelos.RenderInfo.prototype.makeSpacerRow_ = function(prev, next) { + var height = this.getSpacerRowHeight_(prev, next); + var width = this.getSpacerRowWidth_(prev, next); + if (Blockly.blockRendering.Types.isInputRow(next) && next.hasStatement) { + var spacer = + new Blockly.zelos.BeforeStatementSpacerRow( + Math.max(height, this.constants_.INSIDE_CORNERS.rightHeight || 0), + width); + } else if (Blockly.blockRendering.Types.isInputRow(prev) && prev.hasStatement) { + var spacer = + new Blockly.zelos.AfterStatementSpacerRow( + Math.max(height, this.constants_.INSIDE_CORNERS.rightHeight || 0), + width); + } else { + var spacer = new Blockly.blockRendering.SpacerRow(height, width); + } + if (prev.hasStatement) { + spacer.followsStatement = true; + } + return spacer; +}; + + +/** + * @override + */ +Blockly.zelos.RenderInfo.prototype.getSpacerRowHeight_ = function( + prev, next) { + // If we have an empty block add a spacer to increase the height. + if (Blockly.blockRendering.Types.isTopRow(prev) && + Blockly.blockRendering.Types.isBottomRow(next)) { + return this.constants_.EMPTY_BLOCK_SPACER_HEIGHT; + } + // Top and bottom rows act as a spacer so we don't need any extra padding. + if ((Blockly.blockRendering.Types.isTopRow(prev) && !prev.hasPreviousConnection)) { + return this.constants_.NO_PADDING; + } + if ((Blockly.blockRendering.Types.isBottomRow(next) && !next.hasNextConnection)) { + return this.constants_.NO_PADDING; + } + return this.constants_.MEDIUM_PADDING; +}; + /** * Modify the given row to add the given amount of padding around its fields. * The exact location of the padding is based on the alignment property of the diff --git a/core/renderers/zelos/measurables/rows.js b/core/renderers/zelos/measurables/rows.js index ccea80074..7bd7357a2 100644 --- a/core/renderers/zelos/measurables/rows.js +++ b/core/renderers/zelos/measurables/rows.js @@ -27,9 +27,12 @@ goog.provide('Blockly.zelos.BottomRow'); goog.provide('Blockly.zelos.TopRow'); +goog.provide('Blockly.zelos.AfterStatementSpacerRow'); +goog.provide('Blockly.zelos.BeforeStatementSpacerRow'); goog.require('Blockly.blockRendering.BottomRow'); goog.require('Blockly.blockRendering.TopRow'); +goog.require('Blockly.blockRendering.SpacerRow'); /** @@ -133,3 +136,39 @@ Blockly.zelos.BottomRow.prototype.hasRightSquareCorner = function(_block) { // Never render a right square corner. Always round. return false; }; + +/** + * An object containing information about a row spacer that comes right + * before a statement input. + * @param {number} height The height of the spacer. + * @param {number} width The width of the spacer. + * @package + * @constructor + * @extends {Blockly.blockRendering.SpacerRow} + */ +Blockly.zelos.BeforeStatementSpacerRow = function(height, width) { + Blockly.zelos.BeforeStatementSpacerRow.superClass_.constructor.call( + this, height, width); + this.type |= + Blockly.blockRendering.Types.getType('BEFORE_STATEMENT_SPACER_ROW'); +}; +goog.inherits(Blockly.zelos.BeforeStatementSpacerRow, + Blockly.blockRendering.SpacerRow); + +/** + * An object containing information about a row spacer that comes right + * after a statement input. + * @param {number} height The height of the spacer. + * @param {number} width The width of the spacer. + * @package + * @constructor + * @extends {Blockly.blockRendering.SpacerRow} + */ +Blockly.zelos.AfterStatementSpacerRow = function(height, width) { + Blockly.zelos.AfterStatementSpacerRow.superClass_.constructor.call( + this, height, width); + this.type |= + Blockly.blockRendering.Types.getType('AFTER_STATEMENT_SPACER_ROW'); +}; +goog.inherits(Blockly.zelos.AfterStatementSpacerRow, + Blockly.blockRendering.SpacerRow);