CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-08 09:30:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Rename BRC->Blockly.blockRendering.constants

Browse Source
This commit is contained in:
Rachel Fenichel
2019-07-23 17:14:16 -07:00
parent 57e9fc35c7
commit 7b3a442499
6 changed files with 314 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
core/renderers/block_rendering_rewrite/block_render_draw.js
View File

@@ -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);
}
};

2
core/renderers/block_rendering_rewrite/block_render_draw_debug.js
View File

@@ -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');
/**

95
core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
View File

@@ -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');
}
};

88
core/renderers/block_rendering_rewrite/block_render_info.js
View File

@@ -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;

260
core/renderers/block_rendering_rewrite/block_rendering_constants.js
View File

@@ -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',
[

61
core/renderers/block_rendering_rewrite/measurables.js
View File

@@ -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;
}
};