From 5b955f6bbef42e197868d3f005eee78e0e4ba86c Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Mon, 12 Aug 2019 14:31:51 -0700 Subject: [PATCH] Add xpos to rows; add bounding box debug rendering --- .../block_render_draw.js | 25 ++++++++++--------- .../block_render_draw_debug.js | 5 ++-- .../block_render_draw_highlight.js | 16 ++++++------ .../block_render_info.js | 5 ++-- 4 files changed, 27 insertions(+), 24 deletions(-) diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index f7bfdf546..80dae0e1e 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -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); } }; 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 19cc855ee..90f389910 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js @@ -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]; 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 ff4cf0a36..be3d8af38 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -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()); } } diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js index f8fcd1ea1..d96218671 100644 --- a/core/renderers/block_rendering_rewrite/block_render_info.js +++ b/core/renderers/block_rendering_rewrite/block_render_info.js @@ -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;