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

Merge pull request #2745 from rachel-fenichel/render/constants

Browse Source 
Position notches
This commit is contained in:
Rachel Fenichel
2019-07-30 14:05:39 -07:00
committed by GitHub
parent c43e001634 94fe97d9fd
commit 47574c670d
5 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,8 +46,7 @@ Blockly.blockRendering.Drawer = function(block, info) {
this.pathObject_ = new Blockly.BlockSvg.PathObject();
this.steps_ = this.pathObject_.steps;
this.inlineSteps_ = this.pathObject_.inlineSteps;
this.highlighter_ =
new Blockly.blockRendering.Highlighter(this.info_, this.pathObject_);
this.highlighter_ = new Blockly.blockRendering.Highlighter(this.info_, this.pathObject_);
};
/**
@@ -114,8 +113,10 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
var topRow = this.info_.topRow;
var elements = topRow.elements;
this.highlighter_.drawTopCorner(topRow);
this.highlighter_.drawRightSideRow(topRow);
if (this.highlighter_) {
this.highlighter_.drawTopCorner(topRow);
this.highlighter_.drawRightSideRow(topRow);
}
this.positionPreviousConnection_();
for (var i = 0, elem; elem = elements[i]; i++) {
@@ -145,7 +146,9 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
*/
Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
var input = row.getLastInput();
this.highlighter_.drawValueInput(row);
if (this.highlighter_) {
this.highlighter_.drawValueInput(row);
}
this.steps_.push('H', row.width);
this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
this.steps_.push('v', row.height - input.connectionHeight);
@@ -160,7 +163,9 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
* @private
*/
Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
this.highlighter_.drawStatementInput(row);
if (this.highlighter_) {
this.highlighter_.drawStatementInput(row);
}
// Where to start drawing the notch, which is on the right side in LTR.
var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
Blockly.blockRendering.constants.NOTCH.width;
@@ -188,7 +193,9 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
* @private
*/
Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
this.highlighter_.drawRightSideRow(row);
if (this.highlighter_) {
this.highlighter_.drawRightSideRow(row);
}
this.steps_.push('H', row.width);
this.steps_.push('v', row.height);
};
@@ -202,15 +209,15 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
var bottomRow = this.info_.bottomRow;
var elems = bottomRow.elements;
this.highlighter_.drawBottomRow(bottomRow);
if (this.highlighter_) {
this.highlighter_.drawBottomRow(bottomRow);
}
this.positionNextConnection_();
this.steps_.push('v', bottomRow.height);
for (var i = elems.length - 1; i >= 0; i--) {
var elem = elems[i];
if (elem.type === 'next connection') {
//this.steps_.push('h', (this.RTL ? 0.5 : - 0.5));
this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathRight);
//this.steps_.push('h', (this.RTL ? -0.5 : 0.5));
} else if (elem.type === 'square corner') {
this.steps_.push('H 0');
} else if (elem.type === 'round corner') {
@@ -227,7 +234,9 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
* @private
*/
Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
this.highlighter_.drawLeft();
if (this.highlighter_) {
this.highlighter_.drawLeft();
}
var outputConnection = this.info_.outputConnection;
this.positionOutputConnection_();
@@ -323,7 +332,9 @@ Blockly.blockRendering.Drawer.prototype.layoutField_ = function(fieldInfo) {
* @private
*/
Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) {
this.highlighter_.drawInlineInput(input);
if (this.highlighter_) {
this.highlighter_.drawInlineInput(input);
}
var width = input.width;
var height = input.height;
var yPos = input.centerline - height / 2;
@@ -429,7 +440,7 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
if (bottomRow.hasNextConnection) {
var connInfo = bottomRow.getNextConnection();
var connX = this.info_.RTL ? -connInfo.xPos : connInfo.xPos;
var connX = this.info_.RTL ? -connInfo.xPos + 0.5 : connInfo.xPos + 0.5;
bottomRow.connection.setOffsetInBlock(
connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET);
}

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

@@ -77,14 +77,14 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
this.steps_.push(
this.outsideCornerPaths_.topLeft(this.RTL_));
} else if (elem.type === 'previous connection') {
// TODO: move the offsets into the definition of the notch highlight, maybe.
this.steps_.push('h', (this.RTL_ ? 0.5 : - 0.5));
this.steps_.push(this.notchPaths_.pathLeft);
this.steps_.push('h', (this.RTL_ ? -0.5 : 0.5));
} else if (elem.type === 'hat') {
this.steps_.push(this.startPaths_.path(this.RTL_));
} else if (elem.isSpacer()) {
this.steps_.push('h', elem.width - this.highlightOffset_);
// The end point of the spacer needs to be offset by the highlight amount.
// So instead of using the spacer's width for a relative horizontal, use
// its width and position for an absolute horizontal move.
this.steps_.push('H', elem.xPos + elem.width - this.highlightOffset_);
}
}

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

@@ -407,7 +407,9 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne
} else if (next.isNextConnection()) {
// Next connections are shifted slightly to the left (in both LTR and RTL)
// to make the dark path under the previous connection show through.
return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;//+ (this.RTL ? 0.5 : - 0.5);
var offset = (this.RTL ? 1 : -1) *
Blockly.blockRendering.constants.DARK_PATH_OFFSET / 2;
return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + offset;
}
}
@@ -418,8 +420,9 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne
} else if (next.isNextConnection()) {
// Next connections are shifted slightly to the left (in both LTR and RTL)
// to make the dark path under the previous connection show through.
return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV;//+
//(this.RTL ? 0.5 : - 0.5);
var offset = (this.RTL ? 1 : -1) *
Blockly.blockRendering.constants.DARK_PATH_OFFSET / 2;
return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV + offset;
}
}

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

@@ -63,6 +63,11 @@ Blockly.blockRendering.constants.MIN_BLOCK_WIDTH = 12;
Blockly.blockRendering.constants.EMPTY_BLOCK_SPACER_HEIGHT = 16;
/**
* Rounded corner radius.
* @const
*/
Blockly.blockRendering.constants.CORNER_RADIUS = 8;
// Offset from the left side of a block or the inside of a statement input to
// the left side of the notch.
@@ -71,7 +76,11 @@ Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT =
// This is the width from where a rounded corner ends to where a previous
// connection starts.
Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV = 7;
// The position of the notch should not change as the rounded corner decreases
// in radius.
Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV =
Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT -
Blockly.blockRendering.constants.CORNER_RADIUS;
Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER = 5;
Blockly.blockRendering.constants.STATEMENT_INPUT_PADDING_LEFT = 20;
@@ -81,12 +90,6 @@ Blockly.blockRendering.constants.BETWEEN_STATEMENT_PADDING_Y = 4;
// has inputs inline.
Blockly.blockRendering.constants.MAX_BOTTOM_WIDTH = 66.5;
/**
* Rounded corner radius.
* @const
*/
Blockly.blockRendering.constants.CORNER_RADIUS = 8;
/**
* Height of the top hat.
* @const

3
core/renderers/block_rendering_rewrite/highlight_constants.js
View File

@@ -133,7 +133,7 @@ Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER = (function() {
},
bottomLeft: function(yPos) {
return Blockly.utils.svgPaths.moveTo(
distance45inside,yPos - distance45inside) +
distance45inside + offset, yPos - distance45inside) +
Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset,
Blockly.utils.svgPaths.point(offset, yPos - radius));
}
@@ -195,6 +195,7 @@ Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() {
})();
Blockly.blockRendering.highlightConstants.NOTCH = (function() {
// This is only for the previous connection.
var pathLeft =
Blockly.utils.svgPaths.lineOnAxis(
'h', Blockly.blockRendering.highlightConstants.OFFSET) +