Add xpos to rows; add bounding box debug rendering

This commit is contained in:
Rachel Fenichel
2019-08-12 14:31:51 -07:00
parent 6e825c33a0
commit 5b955f6bbe
4 changed files with 27 additions and 24 deletions

View File

@@ -133,12 +133,12 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
}
this.positionPreviousConnection_();
this.steps_.push(
Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY));
for (var i = 0, elem; elem = elements[i]; i++) {
if (elem.type === 'round corner') {
this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
} else if (elem.type === 'previous connection') {
this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathLeft);
this.steps_.push(topRow.notchShape.pathLeft);
} else if (elem.type === 'hat') {
this.steps_.push(Blockly.blockRendering.constants.START_HAT.path);
} else if (elem.isSpacer()) {
@@ -176,7 +176,7 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
if (this.highlighter_) {
this.highlighter_.drawValueInput(row);
}
this.steps_.push('H', this.info_.startX + row.width);
this.steps_.push('H', row.xPos + row.width);
this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
this.steps_.push('v', row.height - input.connectionHeight);
this.positionExternalValueConnection_(row);
@@ -194,7 +194,7 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
this.highlighter_.drawStatementInput(row);
}
// Where to start drawing the notch, which is on the right side in LTR.
var x = this.info_.startX + row.statementEdge +
var x = row.xPos + row.statementEdge +
Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
Blockly.blockRendering.constants.NOTCH.width;
@@ -224,7 +224,7 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
if (this.highlighter_) {
this.highlighter_.drawRightSideRow(row);
}
this.steps_.push('H', this.info_.startX + row.width);
this.steps_.push('H', row.xPos + row.width);
this.steps_.push('V', row.yPos + row.height);
};
@@ -245,9 +245,9 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
for (var i = elems.length - 1; i >= 0; i--) {
var elem = elems[i];
if (elem.type === 'next connection') {
this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathRight);
this.steps_.push(bottomRow.notchShape.pathRight);
} else if (elem.type === 'square corner') {
this.steps_.push(Blockly.utils.svgPaths.lineOnAxis('H', this.info_.startX));
this.steps_.push(Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos));
} else if (elem.type === 'round corner') {
this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft);
} else if (elem.isSpacer()) {
@@ -404,7 +404,7 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio
Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = function(row) {
var input = row.getLastInput();
if (input.connection) {
var connX = this.info_.startX + row.statementEdge +
var connX = row.xPos + row.statementEdge +
Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
if (this.info_.RTL) {
connX *= -1;
@@ -425,7 +425,7 @@ Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = func
Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = function(row) {
var input = row.getLastInput();
if (input.connection) {
var connX = this.info_.startX + row.width + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
var connX = row.xPos + row.width + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
if (this.info_.RTL) {
connX *= -1;
}
@@ -438,10 +438,11 @@ Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = funct
* @private
*/
Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() {
if (this.info_.topRow.hasPreviousConnection) {
var x = this.info_.startX + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
var topRow = this.info_.topRow;
if (topRow.hasPreviousConnection) {
var x = topRow.xPos + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
var connX = (this.info_.RTL ? -x : x);
this.info_.topRow.connection.setOffsetInBlock(connX, 0);
topRow.connection.setOffsetInBlock(connX, 0);
}
};

View File

@@ -72,7 +72,7 @@ Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, is
this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
{
'class': 'rowSpacerRect blockRenderDebug',
'x': isRtl ? -row.width : 0,
'x': isRtl ? -(row.xPos + row.width) : row.xPos,
'y': cursorY,
'width': row.width,
'height': row.height,
@@ -183,7 +183,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY,
this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
{
'class': 'elemRenderingRect blockRenderDebug',
'x': isRtl ? -row.width : 0,
'x': isRtl ? -(row.xPos + row.width) : row.xPos,
'y': cursorY ,
'width': row.width,
'height': row.height,
@@ -241,6 +241,7 @@ Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(width, height,
Blockly.blockRendering.Debug.prototype.drawDebug = function(block, info) {
this.clearElems();
this.svgRoot_ = block.getSvgRoot();
var cursorY = 0;
for (var r = 0; r < info.rows.length; r++) {
var row = info.rows[r];

View File

@@ -73,7 +73,7 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) {
Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
this.steps_.push(
Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY));
Blockly.utils.svgPaths.moveBy(row.xPos, this.info_.startY));
for (var i = 0, elem; elem = row.elements[i]; i++) {
if (elem.type === 'square corner') {
this.steps_.push(Blockly.blockRendering.highlightConstants.START_POINT);
@@ -92,7 +92,7 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
}
}
var right = this.info_.startX + row.width - this.highlightOffset_;
var right = row.xPos + row.width - this.highlightOffset_;
this.steps_.push('H', right);
};
@@ -114,12 +114,12 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
steps =
Blockly.utils.svgPaths.moveTo(
this.info_.startX + row.width - this.highlightOffset_, row.yPos) +
row.xPos + row.width - this.highlightOffset_, row.yPos) +
this.puzzleTabPaths_.pathDown(this.RTL_) +
Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight);
} else {
steps =
Blockly.utils.svgPaths.moveTo(this.info_.startX + row.width, row.yPos) +
Blockly.utils.svgPaths.moveTo(row.xPos + row.width, row.yPos) +
this.puzzleTabPaths_.pathDown(this.RTL_);
}
@@ -128,7 +128,7 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) {
var steps = '';
var statementEdge = this.info_.startX + row.statementEdge;
var statementEdge = row.xPos + row.statementEdge;
if (this.RTL_) {
var innerHeight = row.height - (2 * this.insideCornerPaths_.height);
steps =
@@ -145,7 +145,7 @@ Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row)
};
Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
var rightEdge = this.info_.startX + row.width - this.highlightOffset_;
var rightEdge = row.xPos + row.width - this.highlightOffset_;
if (row.followsStatement) {
this.steps_.push('H', rightEdge);
}
@@ -167,10 +167,10 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) {
if (cornerElem.type === 'square corner') {
this.steps_.push(
Blockly.utils.svgPaths.moveTo(
this.info_.startX + this.highlightOffset_,
row.xPos + this.highlightOffset_,
height - this.highlightOffset_));
} else if (cornerElem.type === 'round corner') {
this.steps_.push(Blockly.utils.svgPaths.moveTo(this.info_.startX, height));
this.steps_.push(Blockly.utils.svgPaths.moveTo(row.xPos, height));
this.steps_.push(this.outsideCornerPaths_.bottomLeft());
}
}

View File

@@ -120,7 +120,7 @@ Blockly.blockRendering.RenderInfo = function(block) {
// The position of the start point for drawing, relative to the block's
// location.
this.startX = 0;
this.startX = 10;
this.startY = 0;
this.measure_();
@@ -701,6 +701,7 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
for (var r = 0; r < this.rows.length; r++) {
var row = this.rows[r];
row.yPos = yCursor;
row.xPos = this.startX;
yCursor += row.height;
// Add padding to the bottom row if block height is less than minimum
var heightWithoutHat = yCursor - this.topRow.startY;
@@ -712,7 +713,7 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
yCursor += diff;
}
if (!(row.isSpacer())) {
var xCursor = this.startX;
var xCursor = row.xPos;
for (var e = 0; e < row.elements.length; e++) {
var elem = row.elements[e];
elem.xPos = xCursor;