diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index a9d477b42..97de0086b 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -123,9 +123,9 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { this.steps_.push(Blockly.blockRendering.constants.START_POINT); } else if (elem.type === 'round corner') { this.steps_.push(Blockly.blockRendering.constants.TOP_LEFT_CORNER_START, - Blockly.blockRendering.constants.TOP_LEFT_CORNER); + Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft); } else if (elem.type === 'previous connection') { - this.steps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT); + this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathLeft); } else if (elem.type === 'hat') { this.steps_.push(Blockly.blockRendering.constants.START_HAT.path); } else if (elem.isSpacer()) { @@ -161,11 +161,21 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) { */ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) { this.highlighter_.drawStatementInput(row); - var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_RIGHT; + // Where to start drawing the notch, which is on the right side in LTR. + var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + + Blockly.blockRendering.constants.NOTCH.width; + this.steps_.push('H', x); - this.steps_.push(Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER); - this.steps_.push('v', row.height - 2 * Blockly.blockRendering.constants.CORNER_RADIUS); - this.steps_.push(Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER); + + 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.positionStatementInputConnection_(row); }; @@ -198,11 +208,13 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() { for (var i = elems.length - 1; i >= 0; i--) { var elem = elems[i]; if (elem.type === 'next connection') { - this.steps_.push(Blockly.blockRendering.constants.NOTCH_PATH_RIGHT); + this.steps_.push('h', (this.RTL ? 0.5 : - 0.5)); + this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathRight); + this.steps_.push('h', (this.RTL ? -0.5 : 0.5)); } else if (elem.type === 'square corner') { this.steps_.push('H 0'); } else if (elem.type === 'round corner') { - this.steps_.push(Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER); + this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft); } else if (elem.isSpacer()) { this.steps_.push('h', elem.width * -1); } @@ -416,9 +428,8 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() { var bottomRow = this.info_.bottomRow; if (bottomRow.hasNextConnection) { - var connX = - this.info_.RTL ? -Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT : - Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT; + var connInfo = bottomRow.getNextConnection(); + var connX = this.info_.RTL ? -connInfo.xPos : connInfo.xPos; bottomRow.connection.setOffsetInBlock( connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET); } 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 c45083862..216263a73 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -61,12 +61,18 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) { if (elem.type === 'square corner') { this.highlightSteps_.push(Blockly.blockRendering.constants.START_POINT_HIGHLIGHT); } else if (elem.type === 'round corner') { - this.highlightSteps_.push(this.info_.RTL ? - Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL : - Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR); - this.highlightSteps_.push(Blockly.blockRendering.constants.TOP_LEFT_CORNER_HIGHLIGHT); + this.highlightSteps_.push( + Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS.topLeftStart( + this.info_.RTL)); + // this.highlightSteps_.push(this.info_.RTL ? + // Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL : + // Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR); + this.highlightSteps_.push( + Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS.topLeft); } else if (elem.type === 'previous connection') { - this.highlightSteps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT_HIGHLIGHT); + this.highlightSteps_.push('h', (this.RTL ? 0.5 : - 0.5)); + this.highlightSteps_.push(Blockly.blockRendering.constants.NOTCH.pathLeftHighlight); + this.highlightSteps_.push('h', (this.RTL ? -0.5 : 0.5)); } else if (elem.type === 'hat') { this.highlightSteps_.push( Blockly.blockRendering.constants.START_HAT.highlight(this.info_.RTL)); @@ -106,17 +112,17 @@ Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) (x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) + ',' + (row.yPos + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE)); this.highlightSteps_.push( - Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL); + Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS.pathTop(this.info_.RTL)); this.highlightSteps_.push('v', row.height - 2 * Blockly.blockRendering.constants.CORNER_RADIUS); this.highlightSteps_.push( - Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL); + Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS.pathBottom(this.info_.RTL)); } else { this.highlightSteps_.push('M', (x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) + ',' + (row.yPos + row.height - Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE)); this.highlightSteps_.push( - Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR); + Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS.pathBottom(this.info_.RTL)); } }; @@ -149,10 +155,7 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) { } else if (elem.type === 'round corner') { if (!this.info_.RTL) { this.highlightSteps_.push( - Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_START + - (height - Blockly.BlockSvg.DISTANCE_45_INSIDE) + - Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID + - (height - Blockly.BlockSvg.CORNER_RADIUS)); + Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS.bottomLeft(height)); } } } diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js index 98368e290..f99e7e55d 100644 --- a/core/renderers/block_rendering_rewrite/block_render_info.js +++ b/core/renderers/block_rendering_rewrite/block_render_info.js @@ -407,7 +407,7 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne } else if (next.isNextConnection()) { // Next connections are shifted slightly to the left (in both LTR and RTL) // to make the dark path under the previous connection show through. - return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + (this.RTL ? 0.5 : - 0.5); + return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;//+ (this.RTL ? 0.5 : - 0.5); } } @@ -418,8 +418,8 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne } else if (next.isNextConnection()) { // Next connections are shifted slightly to the left (in both LTR and RTL) // to make the dark path under the previous connection show through. - return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV + - (this.RTL ? 0.5 : - 0.5); + return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV;//+ + //(this.RTL ? 0.5 : - 0.5); } } @@ -462,7 +462,7 @@ Blockly.blockRendering.RenderInfo.prototype.computeBounds_ = function() { if (widestStatementRowFields) { this.width = Math.max(blockWidth, - widestStatementRowFields + Blockly.blockRendering.constants.NOTCH_WIDTH * 2); + widestStatementRowFields + Blockly.blockRendering.constants.NOTCH.width * 2); } else { this.width = blockWidth; } diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index 7bf9637ce..af1c0c350 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -74,12 +74,6 @@ Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT = // connection starts. Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV = 7; -// This is the offset from the vertical part of a statement input -// to where to start the notch, which is on the right side in LTR. -Blockly.blockRendering.constants.NOTCH_OFFSET_RIGHT = - Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + - Blockly.blockRendering.constants.NOTCH_WIDTH; - Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER = 5; Blockly.blockRendering.constants.STATEMENT_INPUT_PADDING_LEFT = 20; Blockly.blockRendering.constants.BETWEEN_STATEMENT_PADDING_Y = 4; @@ -143,16 +137,6 @@ Blockly.blockRendering.constants.START_POINT_HIGHLIGHT = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET, Blockly.blockRendering.constants.HIGHLIGHT_OFFSET); -/** - * Distance from shape edge to intersect with a curved corner at 45 degrees. - * Applies to highlighting on around the inside of a curve. - * @const - */ -Blockly.blockRendering.constants.DISTANCE_45_INSIDE = (1 - Math.SQRT1_2) * - (Blockly.blockRendering.constants.CORNER_RADIUS - - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) + - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; - /** * Distance from shape edge to intersect with a curved corner at 45 degrees. * Applies to highlighting on around the outside of a curve. @@ -163,96 +147,6 @@ Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) * Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; -/** - * SVG path for drawing next/previous notch from left to right. - * @const - */ -Blockly.blockRendering.constants.NOTCH_PATH_LEFT = 'l 6,4 3,0 6,-4'; - -/** - * SVG path for drawing next/previous notch from left to right with - * highlighting. - * @const - */ -Blockly.blockRendering.constants.NOTCH_PATH_LEFT_HIGHLIGHT = - 'h ' + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ' ' + Blockly.blockRendering.constants.NOTCH_PATH_LEFT; - -/** - * SVG path for drawing next/previous notch from right to left. - * @const - */ -Blockly.blockRendering.constants.NOTCH_PATH_RIGHT = 'l -6,4 -3,0 -6,-4'; - -/** - * SVG path for drawing the top-left corner of a statement input. - * Includes the top notch, a horizontal space, and the rounded inside corner. - * @const - */ -Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER = - Blockly.blockRendering.constants.NOTCH_PATH_RIGHT + ' h -' + - (Blockly.blockRendering.constants.NOTCH_WIDTH - - Blockly.blockRendering.constants.CORNER_RADIUS) + - ' a ' + Blockly.blockRendering.constants.CORNER_RADIUS + ',' + - Blockly.blockRendering.constants.CORNER_RADIUS + ' 0 0,0 -' + - Blockly.blockRendering.constants.CORNER_RADIUS + ',' + - Blockly.blockRendering.constants.CORNER_RADIUS; - -/** - * SVG path for drawing the bottom-left corner of a statement input. - * Includes the rounded inside corner. - * @const - */ -Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER = - Blockly.utils.svgPaths.arc('a', '0 0,0', - Blockly.blockRendering.constants.CORNER_RADIUS, - Blockly.utils.svgPaths.point(Blockly.blockRendering.constants.CORNER_RADIUS, - Blockly.blockRendering.constants.CORNER_RADIUS)); - - -/** - * SVG path for drawing highlight on the top-left corner of a statement - * input in RTL. - * @const - */ -Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL = - Blockly.utils.svgPaths.arc('a', '0 0,0', - Blockly.blockRendering.constants.CORNER_RADIUS, - Blockly.utils.svgPaths.point( - -Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE - - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET, - Blockly.blockRendering.constants.CORNER_RADIUS - - Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE)); - -/** - * SVG path for drawing highlight on the bottom-left corner of a statement - * input in RTL. - * @const - */ -Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL = - Blockly.utils.svgPaths.arc('a', '0 0,0', - Blockly.blockRendering.constants.CORNER_RADIUS + - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET, - Blockly.utils.svgPaths.point( - Blockly.blockRendering.constants.CORNER_RADIUS + - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET, - Blockly.blockRendering.constants.CORNER_RADIUS + - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET)); - -/** - * SVG path for drawing highlight on the bottom-left corner of a statement - * input in LTR. - * @const - */ -Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR = - Blockly.utils.svgPaths.arc('a', '0 0,0', - Blockly.blockRendering.constants.CORNER_RADIUS + - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET, - Blockly.utils.svgPaths.point( - Blockly.blockRendering.constants.CORNER_RADIUS - - Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE, - Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE + - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET)); - /** * SVG start point for drawing the top-left corner. * @const @@ -260,52 +154,6 @@ Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR = Blockly.blockRendering.constants.TOP_LEFT_CORNER_START = 'm 0,' + Blockly.blockRendering.constants.CORNER_RADIUS; -/** - * SVG path for drawing the rounded top-left corner. - * @const - */ -Blockly.blockRendering.constants.TOP_LEFT_CORNER = - 'A ' + Blockly.blockRendering.constants.CORNER_RADIUS + ',' + - Blockly.blockRendering.constants.CORNER_RADIUS + ' 0 0,1 ' + - Blockly.blockRendering.constants.CORNER_RADIUS + ',0'; - -Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER = 'a' + Blockly.blockRendering.constants.CORNER_RADIUS + ',' + - Blockly.blockRendering.constants.CORNER_RADIUS + ' 0 0,1 -' + - Blockly.blockRendering.constants.CORNER_RADIUS + ',-' + - Blockly.blockRendering.constants.CORNER_RADIUS; - -Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_START = - 'M ' + Blockly.blockRendering.constants.DISTANCE_45_INSIDE + ', '; // follow with y pos - distance 45 inside - -Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID = - 'A ' + (Blockly.blockRendering.constants.CORNER_RADIUS - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) + - ',' + (Blockly.blockRendering.constants.CORNER_RADIUS - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) + - ' 0 0,1 ' + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ','; // follow with y pos - corner radius - -/** - * SVG start point for drawing the top-left corner's highlight in RTL. - * @const - */ -Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL = - 'm ' + Blockly.blockRendering.constants.DISTANCE_45_INSIDE + ',' + - Blockly.blockRendering.constants.DISTANCE_45_INSIDE; - -/** - * SVG start point for drawing the top-left corner's highlight in LTR. - * @const - */ -Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR = - 'm 0.5,' + (Blockly.blockRendering.constants.CORNER_RADIUS - 0.5); - -/** - * SVG path for drawing the highlight on the rounded top-left corner. - * @const - */ -Blockly.blockRendering.constants.TOP_LEFT_CORNER_HIGHLIGHT = - 'A ' + (Blockly.blockRendering.constants.CORNER_RADIUS - 0.5) + ',' + - (Blockly.blockRendering.constants.CORNER_RADIUS - 0.5) + ' 0 0,1 ' + - Blockly.blockRendering.constants.CORNER_RADIUS + ',0.5'; - /** * Information about the hat on a start block. */ @@ -450,3 +298,172 @@ Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT = (function() { } }; })(); + +Blockly.blockRendering.constants.NOTCH = (function() { + var width = Blockly.blockRendering.constants.NOTCH_WIDTH; + var height = Blockly.blockRendering.constants.NOTCH_HEIGHT; + var innerWidth = 3; + var outerWidth = (width - innerWidth) / 2; + function makeMainPath(dir) { + return Blockly.utils.svgPaths.line( + [ + Blockly.utils.svgPaths.point(dir * outerWidth, height), + Blockly.utils.svgPaths.point(dir * innerWidth, 0), + Blockly.utils.svgPaths.point(dir * outerWidth, -height) + ]); + } + // TODO: Find a relationship between width and path + var pathLeft = makeMainPath(1); + var pathRight = makeMainPath(-1); + + var pathLeftHighlight = Blockly.utils.svgPaths.lineOnAxis('h', Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) + pathLeft; + return { + width: width, + height: height, + pathLeft: pathLeft, + pathLeftHighlight: pathLeftHighlight, + pathRight: pathRight + }; +})(); + + +Blockly.blockRendering.constants.INSIDE_CORNERS = (function() { + var radius = Blockly.blockRendering.constants.CORNER_RADIUS; + + var innerTopLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius, + Blockly.utils.svgPaths.point(-radius, radius)); + + var innerBottomLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius, + Blockly.utils.svgPaths.point(radius, radius)); + + return { + //width: width, + height: radius, + pathTop: innerTopLeftCorner, + pathBottom: innerBottomLeftCorner + }; +})(); + +/** + * Highlight paths for drawing the inside corners of a statement input. + */ +Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS = (function() { + var radius = Blockly.blockRendering.constants.CORNER_RADIUS; + var offset = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; + + /** + * Distance from shape edge to intersect with a curved corner at 45 degrees. + * Applies to highlighting on around the outside of a curve. + * @const + */ + var distance45outside = (1 - Math.SQRT1_2) * (radius + offset) - offset; + + /** + * Distance from shape edge to intersect with a curved corner at 45 degrees. + * Applies to highlighting on around the inside of a curve. + * @const + */ + var distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset; + + + var pathTopRtl = Blockly.utils.svgPaths.arc('a', '0 0,0', radius, + Blockly.utils.svgPaths.point( + -distance45outside - offset, + radius - distance45outside)); + + var pathBottomRtl = Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset, + Blockly.utils.svgPaths.point(radius + offset, radius + offset)); + + var pathBottomLtr = Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset, + Blockly.utils.svgPaths.point( + radius - distance45outside, + distance45outside + offset)); + + return { + // width: width, + // height: height, + pathTop: function(rtl) { + return rtl ? pathTopRtl : ''; + }, + pathBottom: function(rtl) { + return rtl ? pathBottomRtl : pathBottomLtr; + }, + }; +})(); + +Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() { + var radius = Blockly.blockRendering.constants.CORNER_RADIUS; + /** + * SVG path for drawing the rounded top-left corner. + * @const + */ + var topLeft = Blockly.utils.svgPaths.arc('A', '0 0,1', radius, + Blockly.utils.svgPaths.point(radius, 0)); + + var bottomLeft = Blockly.utils.svgPaths.arc('a', '0 0,1', radius, + Blockly.utils.svgPaths.point(-radius, -radius)); + + return { + // width: width, + // height: height, + topLeft: topLeft, + bottomLeft: bottomLeft + }; +})(); + +Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS = (function() { + var radius = Blockly.blockRendering.constants.CORNER_RADIUS; + var offset = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; + + /** + * Distance from shape edge to intersect with a curved corner at 45 degrees. + * Applies to highlighting on around the inside of a curve. + * @const + */ + var distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset; + + /** + * SVG start point for drawing the top-left corner's highlight in RTL. + * @const + */ + var topLeftCornerStartRtl = + 'm ' + distance45inside + ',' + + distance45inside; + + /** + * SVG start point for drawing the top-left corner's highlight in LTR. + * @const + */ + var topLeftCornerStartLtr = + 'm 0.5,' + (radius - offset); + + /** + * SVG path for drawing the highlight on the rounded top-left corner. + * @const + */ + var topLeftCornerHighlight = + 'A ' + (radius - offset) + ',' + + (radius - offset) + ' 0 0,1 ' + + radius + ',0.5'; + + + var bottomLeftCornerStart = + 'M ' + distance45inside + ', '; // follow with y pos - distance 45 inside + + var bottomLeftCornerMid = + 'A ' + (radius - offset) + + ',' + (radius - offset) + + ' 0 0,1 ' + offset + ','; // follow with y pos - corner radius + + + return { + topLeft: topLeftCornerHighlight, + topLeftStart: function(rtl) { + return rtl ? topLeftCornerStartRtl : topLeftCornerStartLtr; + }, + bottomLeft: function(yPos) { + return bottomLeftCornerStart + (yPos - distance45inside) + + bottomLeftCornerMid + (yPos - radius); + } + }; +})(); diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js index eac19bf70..95f32c899 100644 --- a/core/renderers/block_rendering_rewrite/measurables.js +++ b/core/renderers/block_rendering_rewrite/measurables.js @@ -249,7 +249,7 @@ Blockly.blockRendering.StatementInput = function(input) { this.height = this.connectedBlockHeight + Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER; if (this.connectedBlock.nextConnection) { - this.height -= Blockly.blockRendering.constants.NOTCH_HEIGHT; + this.height -= Blockly.blockRendering.constants.NOTCH.height; } } }; @@ -307,8 +307,8 @@ goog.inherits(Blockly.blockRendering.OutputConnection, Blockly.blockRendering.Me Blockly.blockRendering.PreviousConnection = function() { Blockly.blockRendering.PreviousConnection.superClass_.constructor.call(this); this.type = 'previous connection'; - this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; - this.width = Blockly.blockRendering.constants.NOTCH_WIDTH; + this.height = Blockly.blockRendering.constants.NOTCH.height; + this.width = Blockly.blockRendering.constants.NOTCH.width; }; goog.inherits(Blockly.blockRendering.PreviousConnection, Blockly.blockRendering.Measurable); @@ -322,8 +322,8 @@ goog.inherits(Blockly.blockRendering.PreviousConnection, Blockly.blockRendering. Blockly.blockRendering.NextConnection = function() { Blockly.blockRendering.NextConnection.superClass_.constructor.call(this); this.type = 'next connection'; - this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; - this.width = Blockly.blockRendering.constants.NOTCH_WIDTH; + this.height = Blockly.blockRendering.constants.NOTCH.height; + this.width = Blockly.blockRendering.constants.NOTCH.width; }; goog.inherits(Blockly.blockRendering.NextConnection, Blockly.blockRendering.Measurable); @@ -351,7 +351,8 @@ goog.inherits(Blockly.blockRendering.Hat, Blockly.blockRendering.Measurable); Blockly.blockRendering.SquareCorner = function() { Blockly.blockRendering.SquareCorner.superClass_.constructor.call(this); this.type = 'square corner'; - this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; + // TODO: Is this the right height? + this.height = Blockly.blockRendering.constants.NOTCH.height; this.width = Blockly.blockRendering.constants.NO_PADDING; }; @@ -369,7 +370,8 @@ Blockly.blockRendering.RoundCorner = function() { this.width = Blockly.blockRendering.constants.CORNER_RADIUS; // The rounded corner extends into the next row by 4 so we only take the // height that is aligned with this row. - this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; + // TODO: Investigate. + this.height = Blockly.blockRendering.constants.NOTCH.height; }; goog.inherits(Blockly.blockRendering.RoundCorner, Blockly.blockRendering.Measurable); @@ -476,6 +478,14 @@ Blockly.blockRendering.TopRow = function(block) { }; goog.inherits(Blockly.blockRendering.TopRow, Blockly.blockRendering.Row); + +Blockly.blockRendering.TopRow.prototype.getPreviousConnection = function() { + if (this.hasPreviousConnection) { + return this.elements[2]; + } + return null; +}; + Blockly.blockRendering.BottomRow = function(block) { Blockly.blockRendering.BottomRow.superClass_.constructor.call(this); this.type = 'bottom row'; @@ -487,14 +497,20 @@ Blockly.blockRendering.BottomRow = function(block) { block.inputList[block.inputList.length - 1].type == Blockly.NEXT_STATEMENT; this.hasFixedWidth = followsStatement && block.getInputsInline(); - // This is the minimum height for the row. If one of it's elements has a greater + // This is the minimum height for the row. If one of its elements has a greater // height it will be overwritten in the compute pass. if (followsStatement) { this.height = Blockly.blockRendering.constants.LARGE_PADDING; } else { - this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; + this.height = Blockly.blockRendering.constants.NOTCH.height; } - }; goog.inherits(Blockly.blockRendering.BottomRow, Blockly.blockRendering.Row); + +Blockly.blockRendering.BottomRow.prototype.getNextConnection = function() { + if (this.hasNextConnection) { + return this.elements[2]; + } + return null; +};