From 6b440cc5e06b26e952202611f2bec37eb2cdaa69 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Tue, 13 Aug 2019 14:17:51 -0700 Subject: [PATCH 1/3] Replace path array with path string --- .../block_render_draw.js | 84 ++++++++++--------- .../block_rendering_constants.js | 26 +++++- 2 files changed, 70 insertions(+), 40 deletions(-) diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index 80dae0e1e..417848c56 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -43,9 +43,9 @@ Blockly.blockRendering.Drawer = function(block, info) { this.block_ = block; this.info_ = info; this.topLeft_ = block.getRelativeToSurfaceXY(); + this.outlinePath_ = ''; + this.inlinePath_ = ''; this.pathObject_ = new Blockly.BlockSvg.PathObject(); - this.steps_ = this.pathObject_.steps; - this.inlineSteps_ = this.pathObject_.inlineSteps; this.highlighter_ = new Blockly.blockRendering.Highlighter(this.info_, this.pathObject_); }; @@ -63,6 +63,10 @@ Blockly.blockRendering.Drawer.prototype.draw_ = function() { this.hideHiddenIcons_(); this.drawOutline_(); this.drawInternals_(); + + this.pathObject_.steps = [this.outlinePath_]; + this.pathObject_.inlineSteps = [this.inlinePath_]; + this.block_.setPaths_(this.pathObject_); this.block_.renderingDebugger.drawDebug(this.block_, this.info_); this.recordSizeOnBlock_(); @@ -132,21 +136,20 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { this.highlighter_.drawRightSideRow(topRow); } this.positionPreviousConnection_(); - this.steps_.push( - Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY)); + this.outlinePath_ += Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY); for (var i = 0, elem; elem = elements[i]; i++) { if (elem.type === 'round corner') { - this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft); + this.outlinePath_ += Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft; } else if (elem.type === 'previous connection') { - this.steps_.push(topRow.notchShape.pathLeft); + this.outlinePath_ += topRow.notchShape.pathLeft; } else if (elem.type === 'hat') { - this.steps_.push(Blockly.blockRendering.constants.START_HAT.path); + this.outlinePath_ += Blockly.blockRendering.constants.START_HAT.path; } else if (elem.isSpacer()) { - this.steps_.push('h', elem.width); + this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('h', elem.width); } // No branch for a square corner, because it's a no-op. } - this.steps_.push('v', topRow.height); + this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('v', topRow.height); }; /** @@ -158,10 +161,10 @@ Blockly.blockRendering.Drawer.prototype.drawJaggedEdge_ = function(row) { if (this.highlighter_) { this.highlighter_.drawJaggedEdge_(row); } - this.steps_.push(Blockly.blockRendering.constants.JAGGED_TEETH.path); var remainder = row.height - Blockly.blockRendering.constants.JAGGED_TEETH.height; - this.steps_.push('v', remainder); + this.outlinePath_ += Blockly.blockRendering.constants.JAGGED_TEETH.path + + Blockly.utils.svgPaths.lineOnAxis('v', remainder); }; /** @@ -176,10 +179,12 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) { if (this.highlighter_) { this.highlighter_.drawValueInput(row); } - this.steps_.push('H', row.xPos + row.width); - this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown); - this.steps_.push('v', row.height - input.connectionHeight); this.positionExternalValueConnection_(row); + + this.outlinePath_ += + Blockly.utils.svgPaths.lineOnAxis('H', row.xPos + row.width) + + Blockly.blockRendering.constants.PUZZLE_TAB.pathDown + + Blockly.utils.svgPaths.lineOnAxis('v', row.height - input.connectionHeight); }; @@ -198,17 +203,17 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) { Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + Blockly.blockRendering.constants.NOTCH.width; - this.steps_.push('H', x); - var innerTopLeftCorner = Blockly.blockRendering.constants.NOTCH.pathRight + ' h -' + (Blockly.blockRendering.constants.NOTCH_WIDTH - Blockly.blockRendering.constants.CORNER_RADIUS) + Blockly.blockRendering.constants.INSIDE_CORNERS.pathTop; - this.steps_.push(innerTopLeftCorner); - this.steps_.push('v', - row.height - (2 * Blockly.blockRendering.constants.INSIDE_CORNERS.height)); - this.steps_.push(Blockly.blockRendering.constants.INSIDE_CORNERS.pathBottom); + + this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('H', x) + + innerTopLeftCorner + + Blockly.utils.svgPaths.lineOnAxis('v', + row.height - (2 * Blockly.blockRendering.constants.INSIDE_CORNERS.height)) + + Blockly.blockRendering.constants.INSIDE_CORNERS.pathBottom; this.positionStatementInputConnection_(row); }; @@ -224,8 +229,9 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) { if (this.highlighter_) { this.highlighter_.drawRightSideRow(row); } - this.steps_.push('H', row.xPos + row.width); - this.steps_.push('V', row.yPos + row.height); + this.outlinePath_ += + Blockly.utils.svgPaths.lineOnAxis('H', row.xPos + row.width) + + Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height); }; @@ -241,17 +247,19 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() { this.highlighter_.drawBottomRow(bottomRow); } this.positionNextConnection_(); - this.steps_.push('v', bottomRow.height); + + this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('v', bottomRow.height); + for (var i = elems.length - 1; i >= 0; i--) { var elem = elems[i]; if (elem.type === 'next connection') { - this.steps_.push(bottomRow.notchShape.pathRight); + this.outlinePath_ += bottomRow.notchShape.pathRight; } else if (elem.type === 'square corner') { - this.steps_.push(Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos)); + this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos); } else if (elem.type === 'round corner') { - this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft); + this.outlinePath_ += Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft; } else if (elem.isSpacer()) { - this.steps_.push('h', elem.width * -1); + this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('h', elem.width * -1); } } }; @@ -268,15 +276,16 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() { var outputConnection = this.info_.outputConnection; this.positionOutputConnection_(); + if (outputConnection) { var tabBottom = outputConnection.connectionOffsetY + outputConnection.height; // Draw a line up to the bottom of the tab. - this.steps_.push('V', tabBottom); - this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathUp); + this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('V', tabBottom); + this.outlinePath_ += Blockly.blockRendering.constants.PUZZLE_TAB.pathUp; } // Close off the path. This draws a vertical line up to the start of the // block's path, which may be either a rounded or a sharp corner. - this.steps_.push('z'); + this.outlinePath_ += 'z'; }; /** @@ -357,14 +366,13 @@ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) { var connectionBottom = input.connectionHeight + connectionTop; var connectionRight = input.xPos + input.connectionWidth; - - this.inlineSteps_.push('M', connectionRight + ',' + yPos); - this.inlineSteps_.push('v ', connectionTop); - this.inlineSteps_.push(input.connectionShape.pathDown); - this.inlineSteps_.push('v', height - connectionBottom); - this.inlineSteps_.push('h', width - input.connectionWidth); - this.inlineSteps_.push('v', -height); - this.inlineSteps_.push('z'); + this.inlinePath_ += Blockly.utils.svgPaths.moveTo(connectionRight, yPos) + + Blockly.utils.svgPaths.lineOnAxis('v', connectionTop) + + input.connectionShape.pathDown + + Blockly.utils.svgPaths.lineOnAxis('v', height - connectionBottom) + + Blockly.utils.svgPaths.lineOnAxis('h', width - input.connectionWidth) + + Blockly.utils.svgPaths.lineOnAxis('v', -height) + + 'z'; this.positionInlineInputConnection_(input); diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index f507f7cdf..3f3ec1e0a 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -170,7 +170,6 @@ Blockly.blockRendering.constants.JAGGED_TEETH = (function() { * Information about the hat on a start block. */ Blockly.blockRendering.constants.START_HAT = (function() { - // It's really minus 15, which is super unfortunate. var height = Blockly.blockRendering.constants.START_HAT_HEIGHT; var width = Blockly.blockRendering.constants.START_HAT_WIDTH; @@ -237,6 +236,30 @@ Blockly.blockRendering.constants.PUZZLE_TAB = (function() { }; })(); +Blockly.blockRendering.constants.TRIANGLE = (function() { + var width = 20; // Blockly.blockRendering.constants.TAB_WIDTH; + var height = 20; //Blockly.blockRendering.constants.TAB_HEIGHT; + // The 'up' and 'down' versions of the paths are the same, but the Y sign + // flips. Forward and back are the signs to use to move the cursor in the + // direction that the path is being drawn. + function makeMainPath(up) { + var forward = up ? -1 : 1; + + return Blockly.utils.svgPaths.lineTo(-width, forward * height / 2) + + Blockly.utils.svgPaths.lineTo(width, forward * height / 2); + } + + var pathUp = makeMainPath(true); + var pathDown = makeMainPath(false); + + return { + width: width, + height: height, + pathDown: pathDown, + pathUp: pathUp + }; +})(); + Blockly.blockRendering.constants.NOTCH = (function() { var width = Blockly.blockRendering.constants.NOTCH_WIDTH; var height = Blockly.blockRendering.constants.NOTCH_HEIGHT; @@ -284,7 +307,6 @@ Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() { * 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, From 4f487c65f03656677d173902bac754e683718249 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Tue, 13 Aug 2019 14:26:22 -0700 Subject: [PATCH 2/3] Fix hat --- .../block_rendering_rewrite/block_rendering_constants.js | 1 - 1 file changed, 1 deletion(-) diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index 3f3ec1e0a..c40c1c1bc 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -174,7 +174,6 @@ Blockly.blockRendering.constants.START_HAT = (function() { var width = Blockly.blockRendering.constants.START_HAT_WIDTH; var mainPath = - Blockly.utils.svgPaths.moveBy(0, height) + Blockly.utils.svgPaths.curve('c', [ Blockly.utils.svgPaths.point(30, -height), From f449c8bb3c9de1ab14d5370445fd26fc632ae2e2 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Tue, 13 Aug 2019 14:32:03 -0700 Subject: [PATCH 3/3] Remove commented out code --- .../block_rendering_rewrite/block_rendering_constants.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index c40c1c1bc..f4ae269b2 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -236,8 +236,8 @@ Blockly.blockRendering.constants.PUZZLE_TAB = (function() { })(); Blockly.blockRendering.constants.TRIANGLE = (function() { - var width = 20; // Blockly.blockRendering.constants.TAB_WIDTH; - var height = 20; //Blockly.blockRendering.constants.TAB_HEIGHT; + var width = 20; + var height = 20; // The 'up' and 'down' versions of the paths are the same, but the Y sign // flips. Forward and back are the signs to use to move the cursor in the // direction that the path is being drawn.