From 06b5bb19456a145e4e654c290d32c0307e604ccf Mon Sep 17 00:00:00 2001 From: Sam El-Husseini Date: Wed, 23 Oct 2019 21:58:43 -0400 Subject: [PATCH] Might right corner support to common. Making it so there's always a right corner element, square by default. (#3311) --- core/renderers/common/constants.js | 24 ++++++++- core/renderers/common/drawer.js | 23 ++++++--- core/renderers/common/info.js | 20 ++++++++ core/renderers/measurables/rows.js | 34 +++++++++++++ core/renderers/zelos/constants.js | 46 ----------------- core/renderers/zelos/drawer.js | 65 ------------------------ core/renderers/zelos/info.js | 42 --------------- core/renderers/zelos/measurables/rows.js | 12 ++--- 8 files changed, 97 insertions(+), 169 deletions(-) diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js index 9817ef531..1ec8c8fdc 100644 --- a/core/renderers/common/constants.js +++ b/core/renderers/common/constants.js @@ -340,12 +340,34 @@ Blockly.blockRendering.ConstantProvider.prototype.makeOutsideCorners = function( Blockly.utils.svgPaths.arc('a', '0 0,1', radius, Blockly.utils.svgPaths.point(radius, -radius)); + /** + * SVG path for drawing the rounded top-right corner. + * @const + */ + var topRight = + Blockly.utils.svgPaths.arc('a', '0 0,1', radius, + Blockly.utils.svgPaths.point(radius, radius)); + + /** + * SVG path for drawing the rounded bottom-left corner. + * @const + */ var bottomLeft = Blockly.utils.svgPaths.arc('a', '0 0,1', radius, Blockly.utils.svgPaths.point(-radius, -radius)); + /** + * SVG path for drawing the rounded bottom-right corner. + * @const + */ + var bottomRight = Blockly.utils.svgPaths.arc('a', '0 0,1', radius, + Blockly.utils.svgPaths.point(-radius, radius)); + return { topLeft: topLeft, - bottomLeft: bottomLeft + topRight: topRight, + bottomRight: bottomRight, + bottomLeft: bottomLeft, + rightHeight: radius }; }; diff --git a/core/renderers/common/drawer.js b/core/renderers/common/drawer.js index 5887fa767..3b36a9477 100644 --- a/core/renderers/common/drawer.js +++ b/core/renderers/common/drawer.js @@ -144,6 +144,9 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { if (Blockly.blockRendering.Types.isLeftRoundedCorner(elem)) { this.outlinePath_ += this.constants_.OUTSIDE_CORNERS.topLeft; + } else if (Blockly.blockRendering.Types.isRightRoundedCorner(elem)) { + this.outlinePath_ += + this.constants_.OUTSIDE_CORNERS.topRight; } else if (Blockly.blockRendering.Types.isPreviousConnection(elem)) { this.outlinePath_ += elem.shape.pathLeft; } else if (Blockly.blockRendering.Types.isHat(elem)) { @@ -242,20 +245,26 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() { var elems = bottomRow.elements; this.positionNextConnection_(); - this.outlinePath_ += - Blockly.utils.svgPaths.lineOnAxis('V', bottomRow.baseline); - + var rightCornerYOffset = 0; + var outlinePath = ''; for (var i = elems.length - 1, elem; (elem = elems[i]); i--) { if (Blockly.blockRendering.Types.isNextConnection(elem)) { - this.outlinePath_ += elem.shape.pathRight; + outlinePath += elem.shape.pathRight; } else if (Blockly.blockRendering.Types.isLeftSquareCorner(elem)) { - this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos); + outlinePath += Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos); } else if (Blockly.blockRendering.Types.isLeftRoundedCorner(elem)) { - this.outlinePath_ += this.constants_.OUTSIDE_CORNERS.bottomLeft; + outlinePath += this.constants_.OUTSIDE_CORNERS.bottomLeft; + } else if (Blockly.blockRendering.Types.isRightRoundedCorner(elem)) { + outlinePath += this.constants_.OUTSIDE_CORNERS.bottomRight; + rightCornerYOffset = this.constants_.OUTSIDE_CORNERS.rightHeight; } else if (Blockly.blockRendering.Types.isSpacer(elem)) { - this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('h', elem.width * -1); + outlinePath += Blockly.utils.svgPaths.lineOnAxis('h', elem.width * -1); } } + + this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('V', + bottomRow.baseline - rightCornerYOffset); + this.outlinePath_ += outlinePath; }; /** diff --git a/core/renderers/common/info.js b/core/renderers/common/info.js index 4ca93c78e..f47b8c136 100644 --- a/core/renderers/common/info.js +++ b/core/renderers/common/info.js @@ -290,6 +290,16 @@ Blockly.blockRendering.RenderInfo.prototype.populateTopRow_ = function() { } else { this.topRow.minHeight = this.constants_.MEDIUM_PADDING; } + + var rightSquareCorner = this.topRow.hasRightSquareCorner(this.block_); + + if (rightSquareCorner) { + this.topRow.elements.push( + new Blockly.blockRendering.SquareCorner(this.constants_, 'right')); + } else { + this.topRow.elements.push( + new Blockly.blockRendering.RoundCorner(this.constants_, 'right')); + } }; /** @@ -329,6 +339,16 @@ Blockly.blockRendering.RenderInfo.prototype.populateBottomRow_ = function() { /** @type {Blockly.RenderedConnection} */ (this.block_.nextConnection)); this.bottomRow.elements.push(this.bottomRow.connection); } + + var rightSquareCorner = this.bottomRow.hasRightSquareCorner(this.block_); + + if (rightSquareCorner) { + this.bottomRow.elements.push( + new Blockly.blockRendering.SquareCorner(this.constants_, 'right')); + } else { + this.bottomRow.elements.push( + new Blockly.blockRendering.RoundCorner(this.constants_, 'right')); + } }; /** diff --git a/core/renderers/measurables/rows.js b/core/renderers/measurables/rows.js index 5f17f96ce..e4b47b4f5 100644 --- a/core/renderers/measurables/rows.js +++ b/core/renderers/measurables/rows.js @@ -291,6 +291,16 @@ Blockly.blockRendering.TopRow.prototype.hasLeftSquareCorner = function(block) { hasHat || (prevBlock ? prevBlock.getNextBlock() == block : false); }; +/** + * Returns whether or not the top row has a right square corner. + * @param {!Blockly.BlockSvg} _block The block whose top row this represents. + * @return {boolean} Whether or not the top row has a right square corner. + */ +Blockly.blockRendering.TopRow.prototype.hasRightSquareCorner = function( + _block) { + return true; +}; + /** * @override */ @@ -322,6 +332,13 @@ Blockly.blockRendering.TopRow.prototype.startsWithElemSpacer = function() { return false; }; +/** + * @override + */ +Blockly.blockRendering.TopRow.prototype.endsWithElemSpacer = function() { + return false; +}; + /** * An object containing information about what elements are in the bottom row of * a block as well as spacing information for the top row. @@ -380,6 +397,16 @@ Blockly.blockRendering.BottomRow.prototype.hasLeftSquareCorner = function( return !!block.outputConnection || !!block.getNextBlock(); }; +/** + * Returns whether or not the bottom row has a right square corner. + * @param {!Blockly.BlockSvg} _block The block whose bottom row this represents. + * @return {boolean} Whether or not the bottom row has a right square corner. + */ +Blockly.blockRendering.BottomRow.prototype.hasRightSquareCorner = function( + _block) { + return true; +}; + /** * @override */ @@ -412,6 +439,13 @@ Blockly.blockRendering.BottomRow.prototype.startsWithElemSpacer = function() { return false; }; +/** + * @override + */ +Blockly.blockRendering.BottomRow.prototype.endsWithElemSpacer = function() { + return false; +}; + /** * An object containing information about a spacer between two rows. * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js index 4ac5429c2..6de86b3a4 100644 --- a/core/renderers/zelos/constants.js +++ b/core/renderers/zelos/constants.js @@ -261,52 +261,6 @@ Blockly.zelos.ConstantProvider.prototype.makeNotch = function() { }; }; -/** - * @return {!Object} An object containing sizing and path information about - * outside corners. - * @package - */ -Blockly.zelos.ConstantProvider.prototype.makeOutsideCorners = function() { - var radius = this.CORNER_RADIUS; - /** - * SVG path for drawing the rounded top-left corner. - * @const - */ - var topLeft = - Blockly.utils.svgPaths.moveBy(0, radius) + - Blockly.utils.svgPaths.arc('a', '0 0,1', radius, - Blockly.utils.svgPaths.point(radius, -radius)); - - /** - * SVG path for drawing the rounded top-right corner. - * @const - */ - var topRight = - Blockly.utils.svgPaths.arc('a', '0 0,1', radius, - Blockly.utils.svgPaths.point(radius, radius)); - - /** - * SVG path for drawing the rounded bottom-left corner. - * @const - */ - var bottomLeft = Blockly.utils.svgPaths.arc('a', '0 0,1', radius, - Blockly.utils.svgPaths.point(-radius, -radius)); - - /** - * SVG path for drawing the rounded bottom-right corner. - * @const - */ - var bottomRight = Blockly.utils.svgPaths.arc('a', '0 0,1', radius, - Blockly.utils.svgPaths.point(-radius, radius)); - - return { - topLeft: topLeft, - topRight: topRight, - bottomRight: bottomRight, - bottomLeft: bottomLeft - }; -}; - /** * @override */ diff --git a/core/renderers/zelos/drawer.js b/core/renderers/zelos/drawer.js index 58d190463..d8b81b90b 100644 --- a/core/renderers/zelos/drawer.js +++ b/core/renderers/zelos/drawer.js @@ -61,71 +61,6 @@ Blockly.zelos.Drawer.prototype.drawOutline_ = function() { } }; -/** - * Add steps for the top corner of the block, taking into account - * details such as hats and rounded corners. - * @protected - */ -Blockly.zelos.Drawer.prototype.drawTop_ = function() { - var topRow = this.info_.topRow; - var elements = topRow.elements; - - this.positionPreviousConnection_(); - this.outlinePath_ += - Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY); - for (var i = 0, elem; (elem = elements[i]); i++) { - if (Blockly.blockRendering.Types.isLeftRoundedCorner(elem)) { - this.outlinePath_ += - this.constants_.OUTSIDE_CORNERS.topLeft; - } else if (Blockly.blockRendering.Types.isRightRoundedCorner(elem)) { - this.outlinePath_ += - this.constants_.OUTSIDE_CORNERS.topRight; - } else if (Blockly.blockRendering.Types.isPreviousConnection(elem)) { - this.outlinePath_ += elem.shape.pathLeft; - } else if (Blockly.blockRendering.Types.isHat(elem)) { - this.outlinePath_ += this.constants_.START_HAT.path; - } else if (Blockly.blockRendering.Types.isSpacer(elem)) { - this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('h', elem.width); - } - // No branch for a square corner because it's a no-op. - } - this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('v', topRow.height); -}; - - -/** - * Add steps for the bottom edge of a block, possibly including a notch - * for the next connection - * @protected - */ -Blockly.zelos.Drawer.prototype.drawBottom_ = function() { - var bottomRow = this.info_.bottomRow; - var elems = bottomRow.elements; - this.positionNextConnection_(); - - var rightCornerYOffset = 0; - var outlinePath = ''; - for (var i = elems.length - 1, elem; (elem = elems[i]); i--) { - if (Blockly.blockRendering.Types.isNextConnection(elem)) { - outlinePath += elem.shape.pathRight; - } else if (Blockly.blockRendering.Types.isLeftSquareCorner(elem)) { - outlinePath += Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos); - } else if (Blockly.blockRendering.Types.isLeftRoundedCorner(elem)) { - outlinePath += this.constants_.OUTSIDE_CORNERS.bottomLeft; - } else if (Blockly.blockRendering.Types.isRightRoundedCorner(elem)) { - outlinePath += this.constants_.OUTSIDE_CORNERS.bottomRight; - rightCornerYOffset = this.constants_.INSIDE_CORNERS.rightHeight; - } else if (Blockly.blockRendering.Types.isSpacer(elem)) { - outlinePath += Blockly.utils.svgPaths.lineOnAxis('h', elem.width * -1); - } - } - - this.outlinePath_ += - Blockly.utils.svgPaths.lineOnAxis('V', - bottomRow.baseline - rightCornerYOffset); - this.outlinePath_ += outlinePath; -}; - /** * Add steps for the right side of a row that does not have value or * statement input connections. diff --git a/core/renderers/zelos/info.js b/core/renderers/zelos/info.js index c852afb70..36dac61f8 100644 --- a/core/renderers/zelos/info.js +++ b/core/renderers/zelos/info.js @@ -90,44 +90,6 @@ Blockly.zelos.RenderInfo.prototype.getRenderer = function() { return /** @type {!Blockly.zelos.Renderer} */ (this.renderer_); }; -/** - * Create all non-spacer elements that belong on the top row. - * @package - * @override - */ -Blockly.zelos.RenderInfo.prototype.populateTopRow_ = function() { - Blockly.zelos.RenderInfo.superClass_.populateTopRow_.call(this); - - var rightSquareCorner = this.topRow.hasRightSquareCorner(this.block_); - - if (rightSquareCorner) { - this.topRow.elements.push( - new Blockly.blockRendering.SquareCorner(this.constants_, 'right')); - } else { - this.topRow.elements.push( - new Blockly.blockRendering.RoundCorner(this.constants_, 'right')); - } -}; - -/** - * Create all non-spacer elements that belong on the bottom row. - * @package - * @override - */ -Blockly.zelos.RenderInfo.prototype.populateBottomRow_ = function() { - Blockly.zelos.RenderInfo.superClass_.populateBottomRow_.call(this); - - var rightSquareCorner = this.bottomRow.hasRightSquareCorner(this.block_); - - if (rightSquareCorner) { - this.bottomRow.elements.push( - new Blockly.blockRendering.SquareCorner(this.constants_, 'right')); - } else { - this.bottomRow.elements.push( - new Blockly.blockRendering.RoundCorner(this.constants_, 'right')); - } -}; - /** * @override */ @@ -176,10 +138,6 @@ Blockly.zelos.RenderInfo.prototype.getInRowSpacing_ = function(prev, next) { if (Blockly.blockRendering.Types.isLeftRoundedCorner(prev)) { return this.constants_.MIN_BLOCK_WIDTH; } - // Between a right rounded corner and the end of the row. - if (Blockly.blockRendering.Types.isRightRoundedCorner(prev)) { - return this.constants_.NO_PADDING; - } // Between a jagged edge and the end of the row. if (Blockly.blockRendering.Types.isJaggedEdge(prev)) { return this.constants_.NO_PADDING; diff --git a/core/renderers/zelos/measurables/rows.js b/core/renderers/zelos/measurables/rows.js index 8fa9e495d..f28729ad2 100644 --- a/core/renderers/zelos/measurables/rows.js +++ b/core/renderers/zelos/measurables/rows.js @@ -68,12 +68,10 @@ Blockly.zelos.TopRow.prototype.hasLeftSquareCorner = function(block) { }; /** - * Returns whether or not the top row has a right square corner. - * @param {!Blockly.BlockSvg} block The block whose top row this represents. - * @return {boolean} Whether or not the top row has a left square corner. + * Render a round corner unless the block has an output connection. + * @override */ Blockly.zelos.TopRow.prototype.hasRightSquareCorner = function(block) { - // Render a round corner unless the block has an output connection. return !!block.outputConnection; }; @@ -110,12 +108,10 @@ Blockly.zelos.BottomRow.prototype.hasLeftSquareCorner = function(block) { }; /** - * Returns whether or not the bottom row has a right square corner. - * @param {!Blockly.BlockSvg} block The block whose bottom row this represents. - * @return {boolean} Whether or not the bottom row has a left square corner. + * Render a round corner unless the block has an output connection. + * @override */ Blockly.zelos.BottomRow.prototype.hasRightSquareCorner = function(block) { - // Render a round corner unless the block has an output connection. return !!block.outputConnection; };