diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index 52dece0a4..09c0ffedc 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -26,11 +26,10 @@ //'use strict'; goog.provide('Blockly.blockRendering.Drawer'); +goog.require('Blockly.blockRendering.constants'); goog.require('Blockly.blockRendering.Debug'); goog.require('Blockly.blockRendering.RenderInfo'); goog.require('Blockly.blockRendering.Highlighter'); -goog.require('BRC'); -/* global BRC */ goog.require('Blockly.blockRendering.Measurable'); /** @@ -78,8 +77,9 @@ Blockly.blockRendering.Drawer.prototype.draw_ = function() { Blockly.blockRendering.Drawer.prototype.recordSizeOnBlock_ = function() { // This is used when the block is reporting its size to anyone else. // The dark path adds to the size of the block in both X and Y. - this.block_.height = this.info_.height + BRC.DARK_PATH_OFFSET; - this.block_.width = this.info_.widthWithChildren + BRC.DARK_PATH_OFFSET; + this.block_.height = this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET; + this.block_.width = this.info_.widthWithChildren + + Blockly.blockRendering.constants.DARK_PATH_OFFSET; // The flyout uses this information. this.block_.startHat_ = this.info_.topRow.startHat; }; @@ -120,13 +120,14 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { for (var i = 0, elem; elem = elements[i]; i++) { if (elem.type === 'square corner') { - this.steps_.push(BRC.START_POINT); + this.steps_.push(Blockly.blockRendering.constants.START_POINT); } else if (elem.type === 'round corner') { - this.steps_.push(BRC.TOP_LEFT_CORNER_START, BRC.TOP_LEFT_CORNER); + this.steps_.push(Blockly.blockRendering.constants.TOP_LEFT_CORNER_START, + Blockly.blockRendering.constants.TOP_LEFT_CORNER); } else if (elem.type === 'previous connection') { - this.steps_.push(BRC.NOTCH_PATH_LEFT); + this.steps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT); } else if (elem.type === 'hat') { - this.steps_.push(BRC.START_HAT_PATH); + this.steps_.push(Blockly.blockRendering.constants.START_HAT_PATH); } else if (elem.isSpacer()) { this.steps_.push('h', elem.width); } @@ -145,8 +146,8 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) { this.highlighter_.drawValueInput(row); this.steps_.push('H', row.width); - this.steps_.push(BRC.TAB_PATH_DOWN); - this.steps_.push('v', row.height - BRC.TAB_HEIGHT); + this.steps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN); + this.steps_.push('v', row.height - Blockly.blockRendering.constants.TAB_HEIGHT); this.positionExternalValueConnection_(row); }; @@ -159,11 +160,11 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) { */ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) { this.highlighter_.drawStatementInput(row); - var x = row.statementEdge + BRC.NOTCH_OFFSET_RIGHT; + var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_RIGHT; this.steps_.push('H', x); - this.steps_.push(BRC.INNER_TOP_LEFT_CORNER); - this.steps_.push('v', row.height - 2 * BRC.CORNER_RADIUS); - this.steps_.push(BRC.INNER_BOTTOM_LEFT_CORNER); + 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); this.positionStatementInputConnection_(row); }; @@ -196,11 +197,11 @@ 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(BRC.NOTCH_PATH_RIGHT); + this.steps_.push(Blockly.blockRendering.constants.NOTCH_PATH_RIGHT); } else if (elem.type === 'square corner') { this.steps_.push('H 0'); } else if (elem.type === 'round corner') { - this.steps_.push(BRC.BOTTOM_LEFT_CORNER); + this.steps_.push(Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER); } else if (elem.isSpacer()) { this.steps_.push('h', elem.width * -1); } @@ -218,8 +219,9 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() { this.positionOutputConnection_(); if (this.info_.hasOutputConnection) { // Draw a line up to the bottom of the tab. - this.steps_.push('V', BRC.TAB_OFFSET_FROM_TOP + BRC.TAB_HEIGHT); - this.steps_.push(BRC.TAB_PATH_UP); + this.steps_.push('V', Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP + + Blockly.blockRendering.constants.TAB_HEIGHT); + this.steps_.push(Blockly.blockRendering.constants.TAB_PATH_UP); } // 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. @@ -312,11 +314,12 @@ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) { var height = input.height; var yPos = input.centerline - height / 2; - this.inlineSteps_.push('M', (input.xPos + BRC.TAB_WIDTH) + ',' + yPos); - this.inlineSteps_.push('v ', BRC.TAB_OFFSET_FROM_TOP); - this.inlineSteps_.push(BRC.TAB_PATH_DOWN); - this.inlineSteps_.push('v', height - BRC.TAB_HEIGHT - BRC.TAB_OFFSET_FROM_TOP); - this.inlineSteps_.push('h', width - BRC.TAB_WIDTH); + this.inlineSteps_.push('M', (input.xPos + Blockly.blockRendering.constants.TAB_WIDTH) + ',' + yPos); + this.inlineSteps_.push('v ', Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP); + this.inlineSteps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN); + this.inlineSteps_.push('v', height - Blockly.blockRendering.constants.TAB_HEIGHT - + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP); + this.inlineSteps_.push('h', width - Blockly.blockRendering.constants.TAB_WIDTH); this.inlineSteps_.push('v', -height); this.inlineSteps_.push('z'); @@ -336,12 +339,14 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio var yPos = input.centerline - input.height / 2; // Move the connection. if (input.connection) { - var connX = input.xPos + BRC.TAB_WIDTH + BRC.DARK_PATH_OFFSET; + var connX = input.xPos + Blockly.blockRendering.constants.TAB_WIDTH + + Blockly.blockRendering.constants.DARK_PATH_OFFSET; if (this.info_.RTL) { connX *= -1; } input.connection.setOffsetInBlock( - connX, yPos + BRC.TAB_OFFSET_FROM_TOP + BRC.DARK_PATH_OFFSET); + connX, yPos + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP + + Blockly.blockRendering.constants.DARK_PATH_OFFSET); } }; @@ -355,11 +360,14 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = function(row) { var input = row.getLastInput(); if (input.connection) { - var connX = row.statementEdge + BRC.NOTCH_OFFSET_LEFT + BRC.DARK_PATH_OFFSET; + var connX = row.statementEdge + + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + + Blockly.blockRendering.constants.DARK_PATH_OFFSET; if (this.info_.RTL) { connX *= -1; } - input.connection.setOffsetInBlock(connX, row.yPos + BRC.DARK_PATH_OFFSET); + input.connection.setOffsetInBlock(connX, + row.yPos + Blockly.blockRendering.constants.DARK_PATH_OFFSET); } }; @@ -373,7 +381,7 @@ Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = func Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = function(row) { var input = row.getLastInput(); if (input.connection) { - var connX = row.width + BRC.DARK_PATH_OFFSET; + var connX = row.width + Blockly.blockRendering.constants.DARK_PATH_OFFSET; if (this.info_.RTL) { connX *= -1; } @@ -387,7 +395,9 @@ Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = funct */ Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() { if (this.info_.topRow.hasPreviousConnection) { - var connX = this.info_.RTL ? -BRC.NOTCH_OFFSET_LEFT : BRC.NOTCH_OFFSET_LEFT; + var connX = + this.info_.RTL ? -Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT : + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT; this.info_.topRow.connection.setOffsetInBlock(connX, 0); } }; @@ -400,9 +410,11 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() { var bottomRow = this.info_.bottomRow; if (bottomRow.hasNextConnection) { - var connX = this.info_.RTL ? -BRC.NOTCH_OFFSET_LEFT : BRC.NOTCH_OFFSET_LEFT; + var connX = + this.info_.RTL ? -Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT : + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT; bottomRow.connection.setOffsetInBlock( - connX, this.info_.height + BRC.DARK_PATH_OFFSET); + connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET); } }; @@ -413,6 +425,7 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() { */ Blockly.blockRendering.Drawer.prototype.positionOutputConnection_ = function() { if (this.info_.hasOutputConnection) { - this.block_.outputConnection.setOffsetInBlock(0, BRC.TAB_OFFSET_FROM_TOP); + this.block_.outputConnection.setOffsetInBlock(0, + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP); } }; diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js index f073f9101..8446e7ed8 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js @@ -27,7 +27,7 @@ goog.provide('Blockly.blockRendering.Debug'); goog.require('Blockly.blockRendering.RenderInfo'); goog.require('Blockly.blockRendering.Highlighter'); -goog.require('BRC'); +goog.require('Blockly.blockRendering.constants'); goog.require('Blockly.blockRendering.Measurable'); /** 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 46da846cf..0eae4f553 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -26,9 +26,8 @@ //'use strict'; goog.provide('Blockly.blockRendering.Highlighter'); +goog.require('Blockly.blockRendering.constants'); goog.require('Blockly.blockRendering.RenderInfo'); -goog.require('BRC'); -/* global BRC */ goog.require('Blockly.blockRendering.Measurable'); /** @@ -58,45 +57,48 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) { Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) { for (var i = 0, elem; elem = row.elements[i]; i++) { if (elem.type === 'square corner') { - this.highlightSteps_.push(BRC.START_POINT_HIGHLIGHT); + this.highlightSteps_.push(Blockly.blockRendering.constants.START_POINT_HIGHLIGHT); } else if (elem.type === 'round corner') { this.highlightSteps_.push(this.info_.RTL ? - BRC.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL : - BRC.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR); - this.highlightSteps_.push(BRC.TOP_LEFT_CORNER_HIGHLIGHT); + 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); } else if (elem.type === 'previous connection') { - this.highlightSteps_.push(BRC.NOTCH_PATH_LEFT_HIGHLIGHT); + this.highlightSteps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT_HIGHLIGHT); } else if (elem.type === 'hat') { this.highlightSteps_.push(this.info_.RTL ? Blockly.BlockSvg.START_HAT_HIGHLIGHT_RTL : Blockly.BlockSvg.START_HAT_HIGHLIGHT_LTR); } else if (elem.isSpacer()) { - this.highlightSteps_.push('h', elem.width - BRC.HIGHLIGHT_OFFSET); + this.highlightSteps_.push('h', elem.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET); } } - this.highlightSteps_.push('H', row.width - BRC.HIGHLIGHT_OFFSET); + this.highlightSteps_.push('H', row.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET); }; Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) { - //var v = row.height - BRC.TAB_HEIGHT; + //var v = row.height - Blockly.blockRendering.constants.TAB_HEIGHT; if (this.info_.RTL) { - var aboveTabHeight = BRC.TAB_VERTICAL_OVERLAP - BRC.HIGHLIGHT_OFFSET; + var aboveTabHeight = + Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP - + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; var belowTabHeight = row.height - - (BRC.TAB_HEIGHT - BRC.TAB_VERTICAL_OVERLAP) + - BRC.HIGHLIGHT_OFFSET; + (Blockly.blockRendering.constants.TAB_HEIGHT - + Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP) + + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; // Edge above tab. this.highlightSteps_.push('v', aboveTabHeight); // Highlight around back of tab. - this.highlightSteps_.push(BRC.TAB_PATH_DOWN_HIGHLIGHT_RTL); + this.highlightSteps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN_HIGHLIGHT_RTL); // Edge below tab. this.highlightSteps_.push('v', belowTabHeight); } else { // Short highlight glint at bottom of tab. this.highlightSteps_.push('M', (row.width - 5) + ',' + - (row.yPos + BRC.TAB_HEIGHT - 0.7)); - this.highlightSteps_.push('l', (BRC.TAB_WIDTH * 0.46) + ',-2.1'); + (row.yPos + Blockly.blockRendering.constants.TAB_HEIGHT - 0.7)); + this.highlightSteps_.push('l', (Blockly.blockRendering.constants.TAB_WIDTH * 0.46) + ',-2.1'); } }; @@ -104,20 +106,20 @@ Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) var x = row.statementEdge; if (this.info_.RTL) { this.highlightSteps_.push('M', - (x + BRC.DISTANCE_45_OUTSIDE) + - ',' + (row.yPos + BRC.DISTANCE_45_OUTSIDE)); + (x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) + + ',' + (row.yPos + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE)); this.highlightSteps_.push( - BRC.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL); + Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL); this.highlightSteps_.push('v', - row.height - 2 * BRC.CORNER_RADIUS); + row.height - 2 * Blockly.blockRendering.constants.CORNER_RADIUS); this.highlightSteps_.push( - BRC.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL); + Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL); } else { this.highlightSteps_.push('M', - (x + BRC.DISTANCE_45_OUTSIDE) + ',' + - (row.yPos + row.height - BRC.DISTANCE_45_OUTSIDE)); + (x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) + ',' + + (row.yPos + row.height - Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE)); this.highlightSteps_.push( - BRC.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR); + Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR); } }; @@ -126,7 +128,7 @@ Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) { this.highlightSteps_.push('H', row.width); } if (this.info_.RTL) { - this.highlightSteps_.push('H', row.width - BRC.HIGHLIGHT_OFFSET); + this.highlightSteps_.push('H', row.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET); this.highlightSteps_.push('v', row.height); } }; @@ -144,13 +146,15 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) { if (elem.type === 'square corner') { if (!this.info_.RTL) { this.highlightSteps_.push('M', - BRC.HIGHLIGHT_OFFSET + ',' + (height - BRC.HIGHLIGHT_OFFSET)); + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ',' + + (height - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET)); } } else if (elem.type === 'round corner') { if (!this.info_.RTL) { - this.highlightSteps_.push(BRC.BOTTOM_LEFT_CORNER_HIGHLIGHT_START + + this.highlightSteps_.push( + Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_START + (height - Blockly.BlockSvg.DISTANCE_45_INSIDE) + - BRC.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID + + Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID + (height - Blockly.BlockSvg.CORNER_RADIUS)); } } @@ -160,17 +164,17 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) { Blockly.blockRendering.Highlighter.prototype.drawLeft = function() { if (this.info_.hasOutputConnection) { if (this.info_.RTL) { - this.highlightSteps_.push(BRC.OUTPUT_CONNECTION_HIGHLIGHT_RTL); + this.highlightSteps_.push(Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_RTL); } else { - this.highlightSteps_.push(BRC.OUTPUT_CONNECTION_HIGHLIGHT_LTR); + this.highlightSteps_.push(Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_LTR); } } if (!this.info_.RTL) { if (this.info_.topRow.elements[0].isSquareCorner()) { - this.highlightSteps_.push('V', BRC.HIGHLIGHT_OFFSET); + this.highlightSteps_.push('V', Blockly.blockRendering.constants.HIGHLIGHT_OFFSET); } else { - this.highlightSteps_.push('V', BRC.CORNER_RADIUS); + this.highlightSteps_.push('V', Blockly.blockRendering.constants.CORNER_RADIUS); } } }; @@ -180,28 +184,33 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) { var height = input.height; var x = input.xPos; var yPos = input.centerline - height / 2; - var bottomHighlightWidth = width - BRC.TAB_WIDTH; + var bottomHighlightWidth = width - Blockly.blockRendering.constants.TAB_WIDTH; if (this.info_.RTL) { // TODO: Check if this is different when the inline input is populated. var aboveTabHeight = - BRC.TAB_OFFSET_FROM_TOP + BRC.TAB_VERTICAL_OVERLAP - BRC.HIGHLIGHT_OFFSET; + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP + + Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP - + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; var belowTabHeight = height - - (BRC.TAB_OFFSET_FROM_TOP + BRC.TAB_HEIGHT - BRC.TAB_VERTICAL_OVERLAP) + - BRC.HIGHLIGHT_OFFSET; + (Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP + + Blockly.blockRendering.constants.TAB_HEIGHT - + Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP) + + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; - var startX = x + BRC.TAB_WIDTH - BRC.HIGHLIGHT_OFFSET; - var startY = yPos + BRC.HIGHLIGHT_OFFSET; + var startX = x + Blockly.blockRendering.constants.TAB_WIDTH - + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; + var startY = yPos + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; // Highlight right edge, around back of tab, and bottom. this.highlightInlineSteps_.push('M', startX + ',' + startY); // Right edge above tab. this.highlightInlineSteps_.push('v', aboveTabHeight); // Back of tab. - this.highlightInlineSteps_.push(BRC.TAB_PATH_DOWN_HIGHLIGHT_RTL); + this.highlightInlineSteps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN_HIGHLIGHT_RTL); // Right edge below tab. this.highlightInlineSteps_.push('v', belowTabHeight); // Bottom (horizontal). @@ -209,16 +218,16 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) { } else { // Highlight right edge, bottom. this.highlightInlineSteps_.push('M', - (x + width + BRC.HIGHLIGHT_OFFSET) + ',' + - (yPos + BRC.HIGHLIGHT_OFFSET)); + (x + width + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) + ',' + + (yPos + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET)); this.highlightInlineSteps_.push('v', height); this.highlightInlineSteps_.push('h ', -bottomHighlightWidth); // Short highlight glint at bottom of tab. // Bad: reference to Blockly.BlockSvg this.highlightInlineSteps_.push('M', (x + 2.9) + ',' + (yPos + Blockly.BlockSvg.INLINE_PADDING_Y + - BRC.TAB_HEIGHT - 0.7)); + Blockly.blockRendering.constants.TAB_HEIGHT - 0.7)); this.highlightInlineSteps_.push('l', - (BRC.TAB_WIDTH * 0.46) + ',-2.1'); + (Blockly.blockRendering.constants.TAB_WIDTH * 0.46) + ',-2.1'); } }; diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js index a12739ab7..b76bb6bb1 100644 --- a/core/renderers/block_rendering_rewrite/block_render_info.js +++ b/core/renderers/block_rendering_rewrite/block_render_info.js @@ -27,8 +27,7 @@ goog.provide('Blockly.blockRendering.RenderInfo'); -goog.require('BRC'); -/* global BRC */ +goog.require('Blockly.blockRendering.constants'); goog.require('Blockly.blockRendering.Measurable'); /** @@ -309,52 +308,52 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne if (!prev) { // Between an editable field and the beginning of the row. if (next.isField() && next.isEditable) { - return BRC.MEDIUM_PADDING; + return Blockly.blockRendering.constants.MEDIUM_PADDING; } // Inline input at the beginning of the row. if (next.isInput && next.isInlineInput()) { - return BRC.MEDIUM_LARGE_PADDING; + return Blockly.blockRendering.constants.MEDIUM_LARGE_PADDING; } if (next.isStatementInput()) { - return BRC.STATEMENT_INPUT_PADDING_LEFT; + return Blockly.blockRendering.constants.STATEMENT_INPUT_PADDING_LEFT; } // Anything else at the beginning of the row. - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } // Spacing between a field or icon and the end of the row. if (!prev.isInput && !next) { // Between an editable field and the end of the row. if (prev.isField() && prev.isEditable) { - return BRC.MEDIUM_PADDING; + return Blockly.blockRendering.constants.MEDIUM_PADDING; } // Padding at the end of an icon-only row to make the block shape clearer. if (prev.isIcon()) { - return (BRC.LARGE_PADDING * 2) + 1; + return (Blockly.blockRendering.constants.LARGE_PADDING * 2) + 1; } if (prev.isHat()){ - return BRC.NO_PADDING; + return Blockly.blockRendering.constants.NO_PADDING; } // Establish a minimum width for a block with a previous or next connection. if (prev.isPreviousConnection() || prev.isNextConnection()) { - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } // Between rounded corner and the end of the row. if (prev.isRoundedCorner()) { - return BRC.MIN_BLOCK_WIDTH; + return Blockly.blockRendering.constants.MIN_BLOCK_WIDTH; } // Between noneditable fields and icons and the end of the row. - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } // Between inputs and the end of the row. if (prev.isInput && !next) { if (prev.isExternalInput()) { - return BRC.NO_PADDING; + return Blockly.blockRendering.constants.NO_PADDING; } else if (prev.isInlineInput()) { - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } else if (prev.isStatementInput()) { - return BRC.NO_PADDING; + return Blockly.blockRendering.constants.NO_PADDING; } } @@ -363,70 +362,71 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne // Between an editable field and an input. if (prev.isEditable) { if (next.isInlineInput()) { - return BRC.SMALL_PADDING; + return Blockly.blockRendering.constants.SMALL_PADDING; } else if (next.isExternalInput()) { - return BRC.SMALL_PADDING; + return Blockly.blockRendering.constants.SMALL_PADDING; } } else { if (next.isInlineInput()) { - return BRC.MEDIUM_LARGE_PADDING; + return Blockly.blockRendering.constants.MEDIUM_LARGE_PADDING; } else if (next.isExternalInput()) { - return BRC.MEDIUM_LARGE_PADDING; + return Blockly.blockRendering.constants.MEDIUM_LARGE_PADDING; } else if (next.isStatementInput()) { - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } } - return BRC.LARGE_PADDING - 1; + return Blockly.blockRendering.constants.LARGE_PADDING - 1; } // Spacing between an icon and an icon or field. if (prev.isIcon() && !next.isInput) { - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } // Spacing between an inline input and a field. if (prev.isInlineInput() && !next.isInput) { // Editable field after inline input. if (next.isEditable) { - return BRC.MEDIUM_PADDING; + return Blockly.blockRendering.constants.MEDIUM_PADDING; } else { // Noneditable field after inline input. - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } } if (prev.isSquareCorner()) { // Spacing between a hat and a corner if (next.isHat()) { - return BRC.NO_PADDING; + return Blockly.blockRendering.constants.NO_PADDING; } // Spacing between a square corner and a previous or next connection if (next.isPreviousConnection()) { - return BRC.NOTCH_OFFSET_LEFT; + return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT; } 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 BRC.NOTCH_OFFSET_LEFT + (this.RTL ? 0.5 : - 0.5); + return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + (this.RTL ? 0.5 : - 0.5); } } // Spacing between a rounded corner and a previous or next connection if (prev.isRoundedCorner()){ if (next.isPreviousConnection()) { - return BRC.NOTCH_OFFSET_ROUNDED_CORNER_PREV; + return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV; } 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 BRC.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); } } // Spacing between two fields of the same editability. if (!prev.isInput && !next.isInput && (prev.isEditable == next.isEditable)) { - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } - return BRC.MEDIUM_PADDING; + return Blockly.blockRendering.constants.MEDIUM_PADDING; }; /** @@ -460,7 +460,7 @@ Blockly.blockRendering.RenderInfo.prototype.computeBounds_ = function() { if (widestStatementRowFields) { this.width = Math.max(blockWidth, - widestStatementRowFields + BRC.NOTCH_WIDTH * 2); + widestStatementRowFields + Blockly.blockRendering.constants.NOTCH_WIDTH * 2); } else { this.width = blockWidth; } @@ -489,7 +489,7 @@ Blockly.blockRendering.RenderInfo.prototype.alignRowElements_ = function() { var currentWidth = row.width; var desiredWidth = this.width; if (row.type === 'bottom row' && row.hasFixedWidth) { - desiredWidth = BRC.MAX_BOTTOM_WIDTH; + desiredWidth = Blockly.blockRendering.constants.MAX_BOTTOM_WIDTH; } var missingSpace = desiredWidth - currentWidth; if (missingSpace) { @@ -599,25 +599,25 @@ Blockly.blockRendering.RenderInfo.prototype.getSpacerRowWidth_ = function(prev, Blockly.blockRendering.RenderInfo.prototype.getSpacerRowHeight_ = function(prev, next) { // If we have an empty block add a spacer to increase the height if (prev.type === 'top row' && next.type === 'bottom row') { - return BRC.EMPTY_BLOCK_SPACER_HEIGHT; + return Blockly.blockRendering.constants.EMPTY_BLOCK_SPACER_HEIGHT; } // Top and bottom rows act as a spacer so we don't need any extra padding if (prev.type === 'top row' || next.type === 'bottom row') { - return BRC.NO_PADDING; + return Blockly.blockRendering.constants.NO_PADDING; } if (prev.hasExternalInput && next.hasExternalInput) { - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } if (!prev.hasStatement && next.hasStatement) { - return BRC.BETWEEN_STATEMENT_PADDING_Y; + return Blockly.blockRendering.constants.BETWEEN_STATEMENT_PADDING_Y; } if (prev.hasStatement && next.hasStatement) { - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } if (next.hasDummyInput) { - return BRC.LARGE_PADDING; + return Blockly.blockRendering.constants.LARGE_PADDING; } - return BRC.MEDIUM_PADDING; + return Blockly.blockRendering.constants.MEDIUM_PADDING; }; /** @@ -633,7 +633,7 @@ Blockly.blockRendering.RenderInfo.prototype.getElemCenterline_ = function(row, e if (elem.isField()) { result += (elem.height / 2); if (row.hasInlineInput || row.hasStatement) { - result += BRC.TALL_INPUT_FIELD_OFFSET_Y; + result += Blockly.blockRendering.constants.TALL_INPUT_FIELD_OFFSET_Y; } } else if (elem.isInlineInput()) { result += elem.height / 2; @@ -669,9 +669,9 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() { this.blockBottom = yCursor; // Add padding to the bottom row if block height is less than minimum - if (yCursor < BRC.MIN_BLOCK_HEIGHT) { - this.bottomRow.height += BRC.MIN_BLOCK_HEIGHT - yCursor; - yCursor = BRC.MIN_BLOCK_HEIGHT; + if (yCursor < Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT) { + this.bottomRow.height += Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT - yCursor; + yCursor = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT; } this.height = yCursor; diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index 1d36f37d2..9b827ac22 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -23,90 +23,93 @@ * @author fenichel@google.com (Rachel Fenichel) */ -//'use strict'; -goog.provide('BRC'); -/* global BRC */ +'use strict'; +goog.provide('Blockly.blockRendering.constants'); goog.require('Blockly.utils.svgPaths'); -BRC.NO_PADDING = 0; -BRC.SMALL_PADDING = 3; -BRC.MEDIUM_PADDING = 5; -BRC.MEDIUM_LARGE_PADDING = 8; -BRC.LARGE_PADDING = 10; +Blockly.blockRendering.constants.NO_PADDING = 0; +Blockly.blockRendering.constants.SMALL_PADDING = 3; +Blockly.blockRendering.constants.MEDIUM_PADDING = 5; +Blockly.blockRendering.constants.MEDIUM_LARGE_PADDING = 8; +Blockly.blockRendering.constants.LARGE_PADDING = 10; // Offset from the top of the row for placing fields on inline input rows // and statement input rows. // Matches existing rendering (in 2019). -BRC.TALL_INPUT_FIELD_OFFSET_Y = BRC.MEDIUM_PADDING; +Blockly.blockRendering.constants.TALL_INPUT_FIELD_OFFSET_Y = + Blockly.blockRendering.constants.MEDIUM_PADDING; -BRC.HIGHLIGHT_OFFSET = 0.5; +Blockly.blockRendering.constants.HIGHLIGHT_OFFSET = 0.5; // The dark/shadow path in classic rendering is the same as the normal block // path, but translated down one and right one. -BRC.DARK_PATH_OFFSET = 1; +Blockly.blockRendering.constants.DARK_PATH_OFFSET = 1; -BRC.TAB_HEIGHT = 15; +Blockly.blockRendering.constants.TAB_HEIGHT = 15; -BRC.TAB_OFFSET_FROM_TOP = 5; +Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP = 5; -BRC.TAB_VERTICAL_OVERLAP = 2.5; +Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP = 2.5; -BRC.TAB_WIDTH = 8; +Blockly.blockRendering.constants.TAB_WIDTH = 8; -BRC.NOTCH_WIDTH = 15; -BRC.NOTCH_HEIGHT = 4; +Blockly.blockRendering.constants.NOTCH_WIDTH = 15; +Blockly.blockRendering.constants.NOTCH_HEIGHT = 4; // This is the minimum width of a block measuring from the end of a rounded // corner -BRC.MIN_BLOCK_WIDTH = 12; +Blockly.blockRendering.constants.MIN_BLOCK_WIDTH = 12; -BRC.EMPTY_BLOCK_SPACER_HEIGHT = 16; +Blockly.blockRendering.constants.EMPTY_BLOCK_SPACER_HEIGHT = 16; // Offset from the left side of a block or the inside of a statement input to // the left side of the notch. -BRC.NOTCH_OFFSET_LEFT = BRC.NOTCH_WIDTH; +Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT = + Blockly.blockRendering.constants.NOTCH_WIDTH; // This is the width from where a rounded corner ends to where a previous // connection starts. -BRC.NOTCH_OFFSET_ROUNDED_CORNER_PREV = 7; +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. -BRC.NOTCH_OFFSET_RIGHT = BRC.NOTCH_OFFSET_LEFT + BRC.NOTCH_WIDTH; +Blockly.blockRendering.constants.NOTCH_OFFSET_RIGHT = + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + + Blockly.blockRendering.constants.NOTCH_WIDTH; -BRC.STATEMENT_BOTTOM_SPACER = 5; -BRC.STATEMENT_INPUT_PADDING_LEFT = 20; -BRC.BETWEEN_STATEMENT_PADDING_Y = 4; +Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER = 5; +Blockly.blockRendering.constants.STATEMENT_INPUT_PADDING_LEFT = 20; +Blockly.blockRendering.constants.BETWEEN_STATEMENT_PADDING_Y = 4; // This is the max width of a bottom row that follows a statement input and // has inputs inline. -BRC.MAX_BOTTOM_WIDTH = 66.5; +Blockly.blockRendering.constants.MAX_BOTTOM_WIDTH = 66.5; /** * Rounded corner radius. * @const */ -BRC.CORNER_RADIUS = 8; +Blockly.blockRendering.constants.CORNER_RADIUS = 8; /** * Height of the top hat. * @const */ -BRC.START_HAT_HEIGHT = 15; +Blockly.blockRendering.constants.START_HAT_HEIGHT = 15; -BRC.START_HAT_WIDTH = 100; +Blockly.blockRendering.constants.START_HAT_WIDTH = 100; -BRC.SPACER_DEFAULT_HEIGHT = 15; +Blockly.blockRendering.constants.SPACER_DEFAULT_HEIGHT = 15; -BRC.MIN_BLOCK_HEIGHT = 24; +Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT = 24; -BRC.EMPTY_INLINE_INPUT_WIDTH = 22.5; +Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_WIDTH = 22.5; -BRC.EMPTY_INLINE_INPUT_HEIGHT = 26; +Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_HEIGHT = 26; -BRC.EXTERNAL_VALUE_INPUT_WIDTH = 10; +Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_WIDTH = 10; /** * The height of an empty statement input. Note that in the old rendering this @@ -116,41 +119,48 @@ BRC.EXTERNAL_VALUE_INPUT_WIDTH = 10; * @const * @type {number} */ -BRC.EMPTY_STATEMENT_INPUT_HEIGHT = BRC.MIN_BLOCK_HEIGHT; +Blockly.blockRendering.constants.EMPTY_STATEMENT_INPUT_HEIGHT = + Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT; -BRC.EMPTY_STATEMENT_INPUT_WIDTH = 32; +Blockly.blockRendering.constants.EMPTY_STATEMENT_INPUT_WIDTH = 32; -BRC.POPULATED_STATEMENT_INPUT_WIDTH = 25; +Blockly.blockRendering.constants.POPULATED_STATEMENT_INPUT_WIDTH = 25; -BRC.START_POINT = Blockly.utils.svgPaths.moveBy(0, 0); +Blockly.blockRendering.constants.START_POINT = Blockly.utils.svgPaths.moveBy(0, 0); -BRC.START_POINT_HIGHLIGHT = - Blockly.utils.svgPaths.moveBy(BRC.HIGHLIGHT_OFFSET, BRC.HIGHLIGHT_OFFSET); +Blockly.blockRendering.constants.START_POINT_HIGHLIGHT = + Blockly.utils.svgPaths.moveBy( + 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 */ -BRC.DISTANCE_45_INSIDE = (1 - Math.SQRT1_2) * - (BRC.CORNER_RADIUS - BRC.HIGHLIGHT_OFFSET) + BRC.HIGHLIGHT_OFFSET; +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. * @const */ -BRC.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) * - (BRC.CORNER_RADIUS + BRC.HIGHLIGHT_OFFSET) - BRC.HIGHLIGHT_OFFSET; +Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) * + (Blockly.blockRendering.constants.CORNER_RADIUS + + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) - + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; /** * SVG path for drawing a horizontal puzzle tab from top to bottom. * @const */ -BRC.TAB_PATH_DOWN = 'c 0,10 -' + BRC.TAB_WIDTH + - ',-8 -' + BRC.TAB_WIDTH + ',7.5 s ' + - BRC.TAB_WIDTH + ',-2.5 ' + BRC.TAB_WIDTH + ',7.5'; +Blockly.blockRendering.constants.TAB_PATH_DOWN = 'c 0,10 -' + Blockly.blockRendering.constants.TAB_WIDTH + + ',-8 -' + Blockly.blockRendering.constants.TAB_WIDTH + ',7.5 s ' + + Blockly.blockRendering.constants.TAB_WIDTH + ',-2.5 ' + Blockly.blockRendering.constants.TAB_WIDTH + ',7.5'; /** @@ -158,73 +168,75 @@ BRC.TAB_PATH_DOWN = 'c 0,10 -' + BRC.TAB_WIDTH + * highlighting from the upper-right. * @const */ -BRC.TAB_PATH_DOWN_HIGHLIGHT_RTL = 'm -' + - (BRC.TAB_WIDTH * 0.97) + ',2.5 q -' + - (BRC.TAB_WIDTH * 0.05) + ',10 ' + - (BRC.TAB_WIDTH * 0.3) + ',9.5 m ' + - (BRC.TAB_WIDTH * 0.67) + ',-1.9'; +Blockly.blockRendering.constants.TAB_PATH_DOWN_HIGHLIGHT_RTL = 'm -' + + (Blockly.blockRendering.constants.TAB_WIDTH * 0.97) + ',2.5 q -' + + (Blockly.blockRendering.constants.TAB_WIDTH * 0.05) + ',10 ' + + (Blockly.blockRendering.constants.TAB_WIDTH * 0.3) + ',9.5 m ' + + (Blockly.blockRendering.constants.TAB_WIDTH * 0.67) + ',-1.9'; /** * SVG path for drawing a horizontal puzzle tab from bottom to top. * @const */ -BRC.TAB_PATH_UP = 'c 0,-10 -' + BRC.TAB_WIDTH + - ',8 -' + BRC.TAB_WIDTH + ',-7.5 s ' + - BRC.TAB_WIDTH + ',2.5 ' + BRC.TAB_WIDTH + ',-7.5'; +Blockly.blockRendering.constants.TAB_PATH_UP = 'c 0,-10 -' + Blockly.blockRendering.constants.TAB_WIDTH + + ',8 -' + Blockly.blockRendering.constants.TAB_WIDTH + ',-7.5 s ' + + Blockly.blockRendering.constants.TAB_WIDTH + ',2.5 ' + Blockly.blockRendering.constants.TAB_WIDTH + ',-7.5'; /** * Path of the top hat's curve. * @const */ -BRC.START_HAT_PATH = +Blockly.blockRendering.constants.START_HAT_PATH = Blockly.utils.svgPaths.curve('c', [ - Blockly.utils.svgPaths.point(30, -BRC.START_HAT_HEIGHT), - Blockly.utils.svgPaths.point(70, -BRC.START_HAT_HEIGHT), - Blockly.utils.svgPaths.point(BRC.START_HAT_WIDTH, 0) + Blockly.utils.svgPaths.point(30, -Blockly.blockRendering.constants.START_HAT_HEIGHT), + Blockly.utils.svgPaths.point(70, -Blockly.blockRendering.constants.START_HAT_HEIGHT), + Blockly.utils.svgPaths.point(Blockly.blockRendering.constants.START_HAT_WIDTH, 0) ]); /** * SVG path for drawing next/previous notch from left to right. * @const */ -BRC.NOTCH_PATH_LEFT = 'l 6,4 3,0 6,-4'; +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 */ -BRC.NOTCH_PATH_LEFT_HIGHLIGHT = - 'h ' + BRC.HIGHLIGHT_OFFSET + ' ' + BRC.NOTCH_PATH_LEFT; +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 */ -BRC.NOTCH_PATH_RIGHT = 'l -6,4 -3,0 -6,-4'; +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 */ -BRC.INNER_TOP_LEFT_CORNER = - BRC.NOTCH_PATH_RIGHT + ' h -' + - (BRC.NOTCH_WIDTH - BRC.CORNER_RADIUS) + - ' a ' + BRC.CORNER_RADIUS + ',' + - BRC.CORNER_RADIUS + ' 0 0,0 -' + - BRC.CORNER_RADIUS + ',' + - BRC.CORNER_RADIUS; +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 */ -BRC.INNER_BOTTOM_LEFT_CORNER = +Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER = Blockly.utils.svgPaths.arc('a', '0 0,0', - BRC.CORNER_RADIUS, - Blockly.utils.svgPaths.point(BRC.CORNER_RADIUS, BRC.CORNER_RADIUS)); + Blockly.blockRendering.constants.CORNER_RADIUS, + Blockly.utils.svgPaths.point(Blockly.blockRendering.constants.CORNER_RADIUS, + Blockly.blockRendering.constants.CORNER_RADIUS)); /** @@ -232,36 +244,44 @@ BRC.INNER_BOTTOM_LEFT_CORNER = * input in RTL. * @const */ -BRC.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL = +Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL = Blockly.utils.svgPaths.arc('a', '0 0,0', - BRC.CORNER_RADIUS, + Blockly.blockRendering.constants.CORNER_RADIUS, Blockly.utils.svgPaths.point( - -BRC.DISTANCE_45_OUTSIDE - BRC.HIGHLIGHT_OFFSET, - BRC.CORNER_RADIUS - BRC.DISTANCE_45_OUTSIDE)); + -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 */ -BRC.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL = +Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL = Blockly.utils.svgPaths.arc('a', '0 0,0', - BRC.CORNER_RADIUS + BRC.HIGHLIGHT_OFFSET, + Blockly.blockRendering.constants.CORNER_RADIUS + + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET, Blockly.utils.svgPaths.point( - BRC.CORNER_RADIUS + BRC.HIGHLIGHT_OFFSET, - BRC.CORNER_RADIUS + BRC.HIGHLIGHT_OFFSET)); + 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 */ -BRC.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR = +Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR = Blockly.utils.svgPaths.arc('a', '0 0,0', - BRC.CORNER_RADIUS + BRC.HIGHLIGHT_OFFSET, + Blockly.blockRendering.constants.CORNER_RADIUS + + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET, Blockly.utils.svgPaths.point( - BRC.CORNER_RADIUS - BRC.DISTANCE_45_OUTSIDE, - BRC.DISTANCE_45_OUTSIDE + BRC.HIGHLIGHT_OFFSET)); + Blockly.blockRendering.constants.CORNER_RADIUS - + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE, + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE + + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET)); @@ -269,71 +289,71 @@ BRC.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR = * SVG start point for drawing the top-left corner. * @const */ -BRC.TOP_LEFT_CORNER_START = - 'm 0,' + BRC.CORNER_RADIUS; +Blockly.blockRendering.constants.TOP_LEFT_CORNER_START = + 'm 0,' + Blockly.blockRendering.constants.CORNER_RADIUS; /** * SVG path for drawing the rounded top-left corner. * @const */ -BRC.TOP_LEFT_CORNER = - 'A ' + BRC.CORNER_RADIUS + ',' + - BRC.CORNER_RADIUS + ' 0 0,1 ' + - BRC.CORNER_RADIUS + ',0'; +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'; -BRC.BOTTOM_LEFT_CORNER = 'a' + BRC.CORNER_RADIUS + ',' + - BRC.CORNER_RADIUS + ' 0 0,1 -' + - BRC.CORNER_RADIUS + ',-' + - BRC.CORNER_RADIUS; +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; -BRC.BOTTOM_LEFT_CORNER_HIGHLIGHT_START = - 'M ' + BRC.DISTANCE_45_INSIDE + ', '; // follow with y pos - distance 45 inside +Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_START = + 'M ' + Blockly.blockRendering.constants.DISTANCE_45_INSIDE + ', '; // follow with y pos - distance 45 inside -BRC.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID = - 'A ' + (BRC.CORNER_RADIUS - BRC.HIGHLIGHT_OFFSET) + - ',' + (BRC.CORNER_RADIUS - BRC.HIGHLIGHT_OFFSET) + - ' 0 0,1 ' + BRC.HIGHLIGHT_OFFSET + ','; // follow with y pos - corner radius +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 -BRC.OUTPUT_CONNECTION_HIGHLIGHT_LTR = - 'V ' + (BRC.TAB_HEIGHT + BRC.TAB_OFFSET_FROM_TOP - 1.5) + - ' m ' + (BRC.TAB_WIDTH * -0.92) + ',-0.5 ' + - 'q ' + (BRC.TAB_WIDTH * -0.19) + ',-5.5 0,-11 ' + - 'm ' + (BRC.TAB_WIDTH * 0.92) + ',1 ' + +Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_LTR = + 'V ' + (Blockly.blockRendering.constants.TAB_HEIGHT + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) + + ' m ' + (Blockly.blockRendering.constants.TAB_WIDTH * -0.92) + ',-0.5 ' + + 'q ' + (Blockly.blockRendering.constants.TAB_WIDTH * -0.19) + ',-5.5 0,-11 ' + + 'm ' + (Blockly.blockRendering.constants.TAB_WIDTH * 0.92) + ',1 ' + 'V 0.5 H 1'; -BRC.OUTPUT_CONNECTION_HIGHLIGHT_RTL = - 'M ' + (BRC.TAB_WIDTH * -0.25) + ',8.4 l ' + - (BRC.TAB_WIDTH * -0.45) + ',-2.1'; +Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_RTL = + 'M ' + (Blockly.blockRendering.constants.TAB_WIDTH * -0.25) + ',8.4 l ' + + (Blockly.blockRendering.constants.TAB_WIDTH * -0.45) + ',-2.1'; /** * SVG start point for drawing the top-left corner's highlight in RTL. * @const */ -BRC.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL = - 'm ' + BRC.DISTANCE_45_INSIDE + ',' + - BRC.DISTANCE_45_INSIDE; +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 */ -BRC.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR = - 'm 0.5,' + (BRC.CORNER_RADIUS - 0.5); +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 */ -BRC.TOP_LEFT_CORNER_HIGHLIGHT = - 'A ' + (BRC.CORNER_RADIUS - 0.5) + ',' + - (BRC.CORNER_RADIUS - 0.5) + ' 0 0,1 ' + - BRC.CORNER_RADIUS + ',0.5'; +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'; /** * Path of the top hat's curve's highlight in LTR. * @const */ -BRC.START_HAT_HIGHLIGHT_LTR = +Blockly.blockRendering.constants.START_HAT_HIGHLIGHT_LTR = Blockly.utils.svgPaths.curve('c', [ Blockly.utils.svgPaths.point(17.8, -9.2), @@ -346,7 +366,7 @@ BRC.START_HAT_HIGHLIGHT_LTR = * Path of the top hat's curve's highlight in RTL. * @const */ -BRC.START_HAT_HIGHLIGHT_RTL = +Blockly.blockRendering.constants.START_HAT_HIGHLIGHT_RTL = Blockly.utils.svgPaths.moveBy(25, -8.7) + Blockly.utils.svgPaths.curve('c', [ diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js index eb09e3a67..c3953209c 100644 --- a/core/renderers/block_rendering_rewrite/measurables.js +++ b/core/renderers/block_rendering_rewrite/measurables.js @@ -1,7 +1,6 @@ goog.provide('Blockly.blockRendering.Measurable'); -goog.require('BRC'); -/* global BRC */ +goog.require('Blockly.blockRendering.constants'); /** * The base class to represent a part of a block that takes up space during @@ -213,13 +212,15 @@ Blockly.blockRendering.InlineInput = function(input) { this.type = 'inline input'; if (!this.connectedBlock) { - this.height = BRC.EMPTY_INLINE_INPUT_HEIGHT; - this.width = BRC.EMPTY_INLINE_INPUT_WIDTH; + this.height = Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_HEIGHT; + this.width = Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_WIDTH; } else { // We allow the dark path to show on the parent block so that the child // block looks embossed. This takes up an extra pixel in both x and y. - this.width = this.connectedBlockWidth + BRC.TAB_WIDTH + BRC.DARK_PATH_OFFSET; - this.height = this.connectedBlockHeight + BRC.DARK_PATH_OFFSET; + this.width = this.connectedBlockWidth + + Blockly.blockRendering.constants.TAB_WIDTH + + Blockly.blockRendering.constants.DARK_PATH_OFFSET; + this.height = this.connectedBlockHeight + Blockly.blockRendering.constants.DARK_PATH_OFFSET; } }; goog.inherits(Blockly.blockRendering.InlineInput, Blockly.blockRendering.Input); @@ -237,13 +238,14 @@ Blockly.blockRendering.StatementInput = function(input) { this.type = 'statement input'; if (!this.connectedBlock) { - this.height = BRC.EMPTY_STATEMENT_INPUT_HEIGHT; - this.width = BRC.EMPTY_STATEMENT_INPUT_WIDTH; + this.height = Blockly.blockRendering.constants.EMPTY_STATEMENT_INPUT_HEIGHT; + this.width = Blockly.blockRendering.constants.EMPTY_STATEMENT_INPUT_WIDTH; } else { - this.width = BRC.POPULATED_STATEMENT_INPUT_WIDTH; - this.height = this.connectedBlockHeight + BRC.STATEMENT_BOTTOM_SPACER; + this.width = Blockly.blockRendering.constants.POPULATED_STATEMENT_INPUT_WIDTH; + this.height = + this.connectedBlockHeight + Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER; if (this.connectedBlock.nextConnection) { - this.height -= BRC.NOTCH_HEIGHT; + this.height -= Blockly.blockRendering.constants.NOTCH_HEIGHT; } } }; @@ -263,11 +265,12 @@ Blockly.blockRendering.ExternalValueInput = function(input) { this.type = 'external value input'; if (!this.connectedBlock) { - this.height = BRC.TAB_HEIGHT; + this.height = Blockly.blockRendering.constants.TAB_HEIGHT; } else { - this.height = this.connectedBlockHeight - 2 * BRC.TAB_OFFSET_FROM_TOP; + this.height = + this.connectedBlockHeight - 2 * Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP; } - this.width = BRC.EXTERNAL_VALUE_INPUT_WIDTH; + this.width = Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_WIDTH; }; goog.inherits(Blockly.blockRendering.ExternalValueInput, Blockly.blockRendering.Input); @@ -281,8 +284,8 @@ goog.inherits(Blockly.blockRendering.ExternalValueInput, Blockly.blockRendering.PreviousConnection = function() { Blockly.blockRendering.PreviousConnection.superClass_.constructor.call(this); this.type = 'previous connection'; - this.height = BRC.NOTCH_HEIGHT; - this.width = BRC.NOTCH_WIDTH; + this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; + this.width = Blockly.blockRendering.constants.NOTCH_WIDTH; }; goog.inherits(Blockly.blockRendering.PreviousConnection, Blockly.blockRendering.Measurable); @@ -296,8 +299,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 = BRC.NOTCH_HEIGHT; - this.width = BRC.NOTCH_WIDTH; + this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; + this.width = Blockly.blockRendering.constants.NOTCH_WIDTH; }; goog.inherits(Blockly.blockRendering.NextConnection, Blockly.blockRendering.Measurable); @@ -310,8 +313,8 @@ goog.inherits(Blockly.blockRendering.NextConnection, Blockly.blockRendering.Meas Blockly.blockRendering.Hat = function() { Blockly.blockRendering.Hat.superClass_.constructor.call(this); this.type = 'hat'; - this.height = BRC.NO_PADDING; - this.width = BRC.START_HAT_WIDTH; + this.height = Blockly.blockRendering.constants.NO_PADDING; + this.width = Blockly.blockRendering.constants.START_HAT_WIDTH; }; goog.inherits(Blockly.blockRendering.Hat, Blockly.blockRendering.Measurable); @@ -325,8 +328,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 = BRC.NOTCH_HEIGHT; - this.width = BRC.NO_PADDING; + this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; + this.width = Blockly.blockRendering.constants.NO_PADDING; }; goog.inherits(Blockly.blockRendering.SquareCorner, Blockly.blockRendering.Measurable); @@ -340,10 +343,10 @@ goog.inherits(Blockly.blockRendering.SquareCorner, Blockly.blockRendering.Measur Blockly.blockRendering.RoundCorner = function() { Blockly.blockRendering.RoundCorner.superClass_.constructor.call(this); this.type = 'round corner'; - this.width = BRC.CORNER_RADIUS; + 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 = BRC.NOTCH_HEIGHT; + this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; }; goog.inherits(Blockly.blockRendering.RoundCorner, Blockly.blockRendering.Measurable); @@ -416,7 +419,7 @@ goog.inherits(Blockly.blockRendering.BetweenRowSpacer, Blockly.blockRendering.InRowSpacer = function(width) { this.type = 'in-row spacer'; this.width = width; - this.height = BRC.SPACER_DEFAULT_HEIGHT; + this.height = Blockly.blockRendering.constants.SPACER_DEFAULT_HEIGHT; }; goog.inherits(Blockly.blockRendering.InRowSpacer, Blockly.blockRendering.Measurable); @@ -443,9 +446,9 @@ Blockly.blockRendering.TopRow = function(block) { // 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 (precedesStatement) { - this.height = BRC.LARGE_PADDING; + this.height = Blockly.blockRendering.constants.LARGE_PADDING; } else { - this.height = BRC.MEDIUM_PADDING; + this.height = Blockly.blockRendering.constants.MEDIUM_PADDING; } }; goog.inherits(Blockly.blockRendering.TopRow, Blockly.blockRendering.Row); @@ -469,9 +472,9 @@ Blockly.blockRendering.BottomRow = function(block) { // This is the minimum height for the row. If one of it's elements has a greater // height it will be overwritten in the compute pass. if (followsStatement) { - this.height = BRC.LARGE_PADDING; + this.height = Blockly.blockRendering.constants.LARGE_PADDING; } else { - this.height = BRC.NOTCH_HEIGHT; + this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT; } };