From 61d03ba2498c22151f77129d9dcc4df11c328418 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Mon, 12 Aug 2019 16:09:19 -0700 Subject: [PATCH] Add debug rendering that shows the bounding box of the block --- .../block_render_draw_debug.js | 23 +++++++++++++++++++ tests/playground.html | 7 ++++++ tests/screenshot/playground_new.html | 7 ++++++ 3 files changed, 37 insertions(+) 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 a233b5c0c..19cc855ee 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js @@ -210,6 +210,27 @@ Blockly.blockRendering.Debug.prototype.drawRowWithElements = function(row, curso this.drawRenderedRow(row, cursorY, isRtl); }; +/** + * Draw a debug rectangle around the entire block. + * @param {number} width The width of the block. + * @param {number} height The height of the block. + * @param {boolean} isRtl Whether the block is rendered RTL. + * @package + */ +Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(width, height, isRtl) { + var xPos = isRtl ? -width : 0; + var yPos = 0; + + this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect', + { + 'class': 'blockBoundingBox blockRenderDebug', + 'x': xPos, + 'y': yPos, + 'width': width, + 'height': height, + }, + this.svgRoot_)); +}; /** * Do all of the work to draw debug information for the whole block. * @param {!Blockly.BlockSvg} block The block to draw debug information for. @@ -240,4 +261,6 @@ Blockly.blockRendering.Debug.prototype.drawDebug = function(block, info) { if (block.outputConnection) { this.drawConnection(block.outputConnection); } + + this.drawBoundingBox(info.width, info.height, info.isRtl); }; diff --git a/tests/playground.html b/tests/playground.html index 32e801a7b..6e27cc0c7 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -472,6 +472,13 @@ h1 { stroke-width: 1px; } +.blockBoundingBox { + stroke: black; + stroke-dasharray: 5,5; + fill: none; + stroke-width: 1px; +} + diff --git a/tests/screenshot/playground_new.html b/tests/screenshot/playground_new.html index b83f94f28..73ab144f7 100644 --- a/tests/screenshot/playground_new.html +++ b/tests/screenshot/playground_new.html @@ -98,6 +98,13 @@ h1 { .connectionRenderingDot { display: none; } + +.blockBoundingBox { + stroke: black; + stroke-dasharray: 5,5; + fill: none; + stroke-width: 1px; +}