diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index 8f3ea1337..c9b683632 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -103,7 +103,7 @@ Blockly.blockRendering.Drawer.prototype.drawOutline_ = function() { this.drawTop_(); for (var r = 1; r < this.info_.rows.length - 1; r++) { var row = this.info_.rows[r]; - if (!row.isSpacer() && this.info_.isCollapsed) { + if (row.hasJaggedEdge) { this.drawJaggedEdge_(row); } else if (row.hasStatement) { this.drawStatementInput_(row); @@ -156,11 +156,13 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { * @private */ Blockly.blockRendering.Drawer.prototype.drawJaggedEdge_ = function(row) { - this.highlighter_.drawJaggedEdge_(row); - this.steps_.push(Blockly.blockRendering.constants.JAGGED_TEETH); - var remainder = row.height - Blockly.blockRendering.constants.JAGGED_TEETH_HEIGHT; + 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); - console.log('remainder: ' + remainder); }; /** diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js index 6438058ee..b1ccc91ad 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -67,6 +67,8 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) { this.puzzleTabPaths_ = Blockly.blockRendering.highlightConstants.PUZZLE_TAB; this.notchPaths_ = Blockly.blockRendering.highlightConstants.NOTCH; this.startPaths_ = Blockly.blockRendering.highlightConstants.START_HAT; + this.jaggedTeethPaths_ = + Blockly.blockRendering.highlightConstants.JAGGED_TEETH; }; Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) { @@ -93,15 +95,12 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) { Blockly.blockRendering.Highlighter.prototype.drawJaggedEdge_ = function(row) { if (this.info_.RTL) { - var remainder = - row.height - Blockly.blockRendering.constants.JAGGED_TEETH_HEIGHT - this.highlightOffset_; this.steps_.push('H', row.width - this.highlightOffset_); - var steps = - Blockly.utils.svgPaths.lineTo(5.1, 2.6) + - Blockly.utils.svgPaths.moveBy(-10.2, 6.8) + - Blockly.utils.svgPaths.lineTo(5.1, 2.6) + - Blockly.utils.svgPaths.lineOnAxis('v', remainder); - this.steps_.push(steps); + this.steps_.push(this.jaggedTeethPaths_.pathLeft); + var remainder = + row.height - Blockly.blockRendering.constants.JAGGED_TEETH.height - + this.highlightOffset_; + this.steps_.push(Blockly.utils.svgPaths.lineOnAxis('v', remainder)); } }; diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js index 69c70af81..11920b7a9 100644 --- a/core/renderers/block_rendering_rewrite/block_render_info.js +++ b/core/renderers/block_rendering_rewrite/block_render_info.js @@ -111,7 +111,7 @@ Blockly.blockRendering.RenderInfo = function(block) { /** * An array of measureable objects containing hidden icons. - * @type {Array} + * @type {!Array.} */ this.hiddenIcons = []; @@ -191,6 +191,7 @@ Blockly.blockRendering.RenderInfo.prototype.createRows_ = function() { } if (this.isCollapsed) { + activeRow.hasJaggedEdge = true; activeRow.elements.push(new Blockly.blockRendering.JaggedEdge()); } @@ -458,6 +459,7 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne return Blockly.blockRendering.constants.LARGE_PADDING; } + // Spacing between anything and a jagged edge. if (next.isJaggedEdge()) { return Blockly.blockRendering.constants.LARGE_PADDING; } diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index de53cda26..e82ab67c7 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -141,17 +141,6 @@ Blockly.blockRendering.constants.START_POINT = Blockly.utils.svgPaths.moveBy(0, Blockly.blockRendering.constants.TOP_LEFT_CORNER_START = 'm 0,' + Blockly.blockRendering.constants.CORNER_RADIUS; -/** - * SVG path for drawing jagged teeth at the end of collapsed blocks. - * @const - */ -Blockly.blockRendering.constants.JAGGED_TEETH = Blockly.utils.svgPaths.line( - [ - Blockly.utils.svgPaths.point(6, 3), - Blockly.utils.svgPaths.point(-12, 6), - Blockly.utils.svgPaths.point(6, 3) - ]); - /** * Height of SVG path for jagged teeth at the end of collapsed blocks. * @const @@ -163,6 +152,28 @@ Blockly.blockRendering.constants.JAGGED_TEETH_HEIGHT = 12; */ Blockly.blockRendering.constants.JAGGED_TEETH_WIDTH = 6; +/** + * SVG path for drawing jagged teeth at the end of collapsed blocks. + * @const + */ +Blockly.blockRendering.constants.JAGGED_TEETH = (function() { + var height = Blockly.blockRendering.constants.JAGGED_TEETH_HEIGHT; + var width = Blockly.blockRendering.constants.JAGGED_TEETH_WIDTH; + + var mainPath = + Blockly.utils.svgPaths.line( + [ + Blockly.utils.svgPaths.point(6, 3), + Blockly.utils.svgPaths.point(-12, 6), + Blockly.utils.svgPaths.point(6, 3) + ]); + return { + height: height, + width: width, + path: mainPath + }; +})(); + /** * Information about the hat on a start block. */ diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js index 340aadc2d..bd8ac7f32 100644 --- a/core/renderers/block_rendering_rewrite/highlight_constants.js +++ b/core/renderers/block_rendering_rewrite/highlight_constants.js @@ -205,6 +205,16 @@ Blockly.blockRendering.highlightConstants.NOTCH = (function() { }; })(); +Blockly.blockRendering.highlightConstants.JAGGED_TEETH = (function() { + var pathLeft = + Blockly.utils.svgPaths.lineTo(5.1, 2.6) + + Blockly.utils.svgPaths.moveBy(-10.2, 6.8) + + Blockly.utils.svgPaths.lineTo(5.1, 2.6); + return { + pathLeft: pathLeft + }; +})(); + Blockly.blockRendering.highlightConstants.START_HAT = (function() { var pathRtl = Blockly.utils.svgPaths.moveBy(25, -8.7) + diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js index 0be8a3058..f2c81fefe 100644 --- a/core/renderers/block_rendering_rewrite/measurables.js +++ b/core/renderers/block_rendering_rewrite/measurables.js @@ -197,8 +197,8 @@ goog.inherits(Blockly.blockRendering.Icon, Blockly.blockRendering.Measurable); Blockly.blockRendering.JaggedEdge = function() { Blockly.blockRendering.JaggedEdge.superClass_.constructor.call(this); this.type = 'jagged edge'; - this.height = Blockly.blockRendering.constants.JAGGED_TEETH_HEIGHT; - this.width = Blockly.blockRendering.constants.JAGGED_TEETH_WIDTH; + this.height = Blockly.blockRendering.constants.JAGGED_TEETH.height; + this.width = Blockly.blockRendering.constants.JAGGED_TEETH.width; }; goog.inherits(Blockly.blockRendering.JaggedEdge, Blockly.blockRendering.Measurable); @@ -411,6 +411,7 @@ Blockly.blockRendering.Row = function() { this.hasStatement = false; this.hasInlineInput = false; this.hasDummyInput = false; + this.hasJaggedEdge = false; }; Blockly.blockRendering.Row.prototype.isSpacer = function() {